/* Painted signboards, rubber-hose outlines and paper route cards. */
:root{--paper:#eee7d7;--charcoal:#171717}
.finale{background:linear-gradient(#121212bc,#222222ef),url('assets/alley/rooftops-v2.webp') center 35% / cover!important;border:12px double #d8d2c166;overflow-y:auto}
.finale:before{content:'A MAD OCTOPUS PICTURE · THE END';font:10px Georgia;letter-spacing:3px;color:#eee7d7;margin-bottom:18px}
.finale #result-mark{font-size:54px;color:#fff4dc;text-shadow:0 0 30px #fff9da66}
.finale #result-goal{max-width:500px;line-height:1.6}
@media(max-height:700px){.finale{justify-content:flex-start;padding-top:25px}.finale:before{margin-bottom:10px}.finale #result-mark{display:none}}
.primary,.secondary,.upgrade-card button,.equipment-equip-button,
.boot-actions .baked-button,.boot-actions #boot-play,.boot-actions .baked-button:not(#boot-play){
 border:3px solid var(--charcoal);border-radius:46% 9% 42% 8% / 12% 38% 12% 32%;
 background:repeating-linear-gradient(174deg,transparent 0 9px,#00000006 10px 11px),var(--paper);
 color:var(--charcoal);box-shadow:0 0 0 1px #e9e3d4,3px 5px 0 #080808;
 font-family:Georgia,serif;font-weight:900;letter-spacing:1px;text-shadow:none;
 transition:transform .12s,box-shadow .12s,background-color .12s;
}
.secondary,.boot-actions .baked-button:not(#boot-play){background-color:#292927;color:var(--paper);border-color:#d6d0c2;box-shadow:inset 0 0 0 2px #111,3px 5px 0 #080808}
.boot-actions .baked-button:before,.boot-actions .baked-button:after{content:'';width:5px;height:5px;background:currentColor;border-radius:50%;opacity:.55}
.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.upgrade-card button:hover:not(:disabled),.boot-actions .baked-button:hover:not(:disabled){transform:translateY(-2px) rotate(-.6deg);background-color:#fff7e7;color:#171717;filter:none}
.primary:active:not(:disabled),.secondary:active:not(:disabled),.boot-actions .baked-button:active:not(:disabled){transform:translate(2px,3px);box-shadow:0 0 0 1px #e9e3d4,1px 2px 0 #080808}
button:disabled{cursor:default;filter:none;opacity:.48}
.text-button{color:var(--paper);text-decoration:underline;text-decoration-color:#d6d0c266;text-underline-offset:5px}
.icon-button,.close-button,.difficulty-chip{border:2px solid #d6d0c2;border-radius:44% 48% 39% 46%;background:#1b1b1b;color:var(--paper);box-shadow:2px 3px #080808}
.close-button{width:38px;height:38px;z-index:2}
.tabs button,.talent-branches button{border-radius:8px 8px 0 0}
.tabs button.active,.talent-branches button.active{background:#eee7d7;color:#171717;border-color:#eee7d7}
.touch-controls button{border:3px solid #ddd6c8;border-radius:40% 12% 36% 14% / 16% 32% 18% 32%;box-shadow:2px 4px #080808;background:#252525;font-family:Georgia,serif;font-weight:bold}
.touch-controls button:active{background:#eee7d7;color:#171717;box-shadow:1px 1px #080808}
.touch-controls #touch-slash.bounce-ready{background:#eee7d7;color:#151515}
.launch-meter{height:24px;border:3px solid #e0d8c8;border-radius:9px 5px 7px 4px;background:repeating-linear-gradient(90deg,#191919 0 19px,#444 20px 21px);box-shadow:3px 4px #080808;overflow:visible}
.launch-meter>div{background:repeating-linear-gradient(135deg,#eee7d7 0 5px,#bbb5a9 6px 8px)}
#launch-needle{background:#fff9eb;box-shadow:0 0 0 2px #171717}
#charge-screen{inset:auto;left:50%;top:35%;transform:translate(-50%,-50%);width:min(540px,94vw)}
#charge-screen h2{font-size:clamp(34px,5vw,58px);margin:12px 0}
#charge-screen>p{margin:10px auto 18px}
.route-open{display:block;width:100%;margin-top:16px;padding:12px;font-size:11px}
.route-teaser{font-size:11px!important;line-height:1.6;color:#eee7d7;margin:12px 0!important}
.route-dialog{width:min(1000px,95vw)}
.route-summary{color:#d8d2c6;font:14px/1.7 Georgia,serif;max-width:700px}
.district-route{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:district}
.district-stop{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:17px;border:1px solid #8a8578;border-radius:3px 12px 4px 9px;background:#171717}
.district-stop.current{border:2px solid #eee7d7;background:#30302d}
.district-stop.cleared{border-style:dashed}
.district-number{font:bold 24px Georgia;color:#eee7d7}
.district-stop h3{font:20px Georgia;margin:0 0 7px;color:#f4edde}
.district-stop p{font:12px/1.6 Arial;margin:4px 0;color:#c9c5bb}
.district-stop .district-status{font:bold 10px Arial;letter-spacing:1px;color:#eee7d7}
.district-stop small{display:block;font:italic 13px/1.5 Georgia;color:#c9c5bb;margin-top:8px}
@media(max-width:760px){
 .district-route{grid-template-columns:1fr}.route-dialog{padding:23px 18px}.district-stop{padding:14px}
 .home{overflow-y:auto;padding:100px 7% 80px;display:flex;flex-direction:column;gap:28px}
 .home .home-content,.home .realm-picker{position:relative;inset:auto;width:100%;max-width:none;flex-shrink:0}
 body[data-mode="home"] .home .home-content{top:auto;left:auto;max-width:none}
 .home .home-content h1{font-size:48px;margin:14px 0}.home .lede{line-height:1.5;margin-bottom:20px}
 .home .home-actions{gap:12px;flex-wrap:wrap}.home .home-actions .secondary{min-width:0;padding:12px}
 .home .home-minor{display:flex;flex-wrap:wrap;gap:15px;margin-top:20px}
 .home .realm-picker{display:block;padding:20px}.home .realm-picker p{display:block}
 .home .realm-dots{max-width:none;justify-content:flex-start;margin-top:15px}
 .home .home-bottom{position:relative;inset:auto;margin-top:0}.route-open{min-height:44px}
 #charge-screen{top:34%;padding:12px}#charge-screen h2{font-size:36px}#charge-screen .launch-meter{margin:16px auto}
}
@media(max-height:500px) and (orientation:landscape){#charge-screen{top:44%;left:28%;width:50%}#charge-screen h2{font-size:29px}#charge-screen>p{font-size:10px;margin:6px auto}#charge-screen .launch-meter{margin:12px auto}#charge-screen .small-note{display:none}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.boot-actions .baked-button:hover:not(:disabled){transform:none}}
/* District starts are real touch targets; hideout purchases are optional. */
.home .realm-dots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:none}
.home .realm-dots button{width:100%;min-width:0;height:44px;min-height:44px;font-size:12px;padding:0;flex:auto}
.home .realm-dots button:disabled{opacity:.32}
.hideout-options{margin-top:12px}
.hideout-options summary{cursor:pointer;font:10px Arial;letter-spacing:.6px;padding:10px 0;color:#ddd5c2}

/* Unified cartoon controls: ink outlines, raised keys and paper labels. */
:root{
 --ui-paper:#eee7d7;
 --ui-ink:#171717;
 --ui-muted:#c5beaf;
 --ui-display:"Arial Black",Impact,Georgia,serif;
 --ui-edge:12px 7px 13px 6px / 7px 13px 8px 12px;
}
.primary,.secondary,.upgrade-card button,.equipment-equip-button,
.boot-actions .baked-button,.boot-actions #boot-play,.boot-actions .baked-button:not(#boot-play){
 border:3px solid var(--ui-ink);
 border-radius:var(--ui-edge);
 background:linear-gradient(#ffffff24,#00000008),var(--ui-paper);
 box-shadow:inset 0 0 0 2px #fff6,0 0 0 1px var(--ui-paper),0 5px 0 #080808,0 8px 12px #0005;
 color:var(--ui-ink);
 font-family:var(--ui-display);
 font-weight:900;
 font-size:12px;
 letter-spacing:.7px;
 min-height:48px;
 text-shadow:none;
}
.secondary,.equipment-equip-button,.boot-actions .baked-button:not(#boot-play){
 background:linear-gradient(#ffffff08,#0002),#292927;
 border-color:var(--ui-paper);
 box-shadow:inset 0 0 0 2px #111,0 5px 0 #080808,0 8px 12px #0005;
 color:var(--ui-paper);
}
.primary>span{font:bold 26px/1 Georgia}
.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.upgrade-card button:hover:not(:disabled),
.equipment-equip-button:hover:not(:disabled),.boot-actions .baked-button:hover:not(:disabled){
 background:var(--ui-paper);color:var(--ui-ink);transform:translateY(-2px);filter:brightness(1.08);
}
.primary:active:not(:disabled),.secondary:active:not(:disabled),.upgrade-card button:active:not(:disabled),
.equipment-equip-button:active:not(:disabled),.boot-actions .baked-button:active:not(:disabled){
 transform:translateY(4px);box-shadow:inset 0 0 0 2px #fff3,0 1px 0 #080808;
}
.primary:disabled,.secondary:disabled,.upgrade-card button:disabled{
 opacity:1;color:#aaa69d;background:repeating-linear-gradient(135deg,#30302e 0 6px,#343431 6px 8px);
 border-color:#77746b;box-shadow:inset 0 0 0 2px #191919,0 3px 0 #080808;text-shadow:none;
}
button:focus-visible,summary:focus-visible,a:focus-visible{
 outline:3px solid #fff6dc;outline-offset:4px;
}
.boot-actions .baked-button:before,.boot-actions .baked-button:after{
 width:7px;height:7px;border:1px solid currentColor;background:transparent;
 box-shadow:inset 0 0 0 1px #0005;opacity:.65;
}
.boot-actions #boot-play{font-family:var(--ui-display);letter-spacing:2px}
.boot-actions .baked-button:not(#boot-play){font-family:var(--ui-display);letter-spacing:1px}
.text-button,.boot-footer button,.boot-retry{
 min-height:44px;padding:10px 15px;border:2px solid #c9c3b4;border-radius:var(--ui-edge);
 background:#1c1c1b;color:var(--ui-paper);box-shadow:0 3px 0 #080808;
 font:900 10px/1.4 var(--ui-display);letter-spacing:.6px;text-decoration:none;
 transition:background .12s,transform .12s;
}
.text-button:hover,.boot-footer button:hover,.boot-retry:hover{background:#3c3b36;color:#fff5df}
.text-button:active,.boot-footer button:active,.boot-retry:active{transform:translateY(2px);box-shadow:0 1px 0 #080808}
.icon-button,.close-button,.difficulty-chip{
 min-width:44px;min-height:44px;border:2px solid var(--ui-paper);
 border-radius:13px 10px 14px 9px;background:#232321;color:var(--ui-paper);
 box-shadow:inset 0 0 0 2px #101010,0 3px 0 #080808;backdrop-filter:none;
}
.icon-button:hover,.close-button:hover,.difficulty-chip:hover:not(:disabled){background:#eee7d7;color:#171717}
.icon-button:active,.close-button:active,.difficulty-chip:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #080808}
.close-button{width:44px;height:44px;font:bold 28px Georgia;right:15px;top:15px}
.difficulty-chip{font:900 9px var(--ui-display);letter-spacing:.5px}
.hud nav{gap:9px}

/* Camp signboards. */
.home-content h1{
 font-family:var(--ui-display);font-weight:900;font-size:clamp(52px,5.7vw,82px);
 line-height:.98;letter-spacing:-3px;text-shadow:3px 4px 0 #101010,-1px -1px 0 #101010;
}
.home-content h1 em{font-weight:900}
.home #begin-button{min-width:285px;min-height:60px;font-size:15px}
.home .home-actions{gap:15px;margin-top:22px}
.home .home-actions .secondary{font-size:11px;padding:13px 16px}
.home-actions .secondary span{
 border-left:1px solid #ded7c661;padding-left:12px;color:inherit;font:900 10px var(--ui-display);white-space:nowrap;
}
.home-minor{gap:12px;margin-top:20px}
.home-minor #home-level{flex-basis:100%;font-size:10px;letter-spacing:1px;margin-top:3px;color:var(--ui-muted)}
.realm-picker{
 border:3px solid #ddd5c3;border-radius:var(--ui-edge);background:#20201ef2;
 box-shadow:inset 0 0 0 3px #0c0c0c,5px 7px 0 #080808;backdrop-filter:none;
}
.realm-picker strong{font-weight:900}
.realm-picker .eyebrow{font:900 10px var(--ui-display);letter-spacing:1.2px}
.home .realm-dots{gap:9px;padding:3px 0 5px}
.home .realm-dots button{
 border:2px solid #b9b3a6;border-radius:7px 10px 6px 9px;background:#373732;color:#eee7d7;
 box-shadow:0 3px 0 #080808;font:900 14px Georgia;
}
.home .realm-dots button.selected{
 background:#eee7d7;color:#171717;border-color:#fff8e5;
 box-shadow:0 3px 0 #080808,inset 0 0 0 2px #171717;
}
.home .realm-dots button:disabled{
 opacity:1;border-color:#56554e;color:#aaa598;
 background:repeating-linear-gradient(135deg,#232321 0 5px,#292927 5px 7px);box-shadow:none;
}
.home .realm-dots button:not(:disabled):hover{outline:2px solid #eee7d7;outline-offset:2px}
.hideout-options summary{min-height:44px;font-size:10px;line-height:1.7}
.route-open{font-size:10px}
.home-bottom{border-top:1px solid #c5beaf55;padding-top:12px;line-height:1.7}

/* Difficulty cards are tickets; selection is readable without colour. */
.difficulty-screen{background:radial-gradient(ellipse at 50% 35%,#32322dea,#111110fa)}
.difficulty-intro h2{font-family:var(--ui-display);font-size:clamp(32px,4vw,54px);font-weight:900}
.difficulty-intro h2 em{font-weight:900}
.difficulty-card{
 border:3px solid #a9a497;border-radius:var(--ui-edge);background:#252523;
 box-shadow:inset 0 0 0 2px #101010,4px 6px 0 #080808;padding-top:24px;
}
.difficulty-card.selected{
 border-color:#fff3d7;background:#3a3932;
 box-shadow:inset 0 0 0 2px #101010,4px 6px 0 #080808;
}
.difficulty-card.selected:after{
 content:'✓';position:absolute;right:10px;top:10px;display:grid;place-items:center;
 width:26px;height:26px;border:2px solid #171717;border-radius:50%;background:#eee7d7;color:#171717;font:bold 17px Arial;
}
.difficulty-card strong{font-family:var(--ui-display);font-size:24px}
.difficulty-card small{font-size:9px;color:#e1d9c7}
.difficulty-card p{color:#d4cebf}
.difficulty-card>div{border-top:2px dashed #8b8578;color:#e4ddcd}

/* Ink frames and pinned paper cards for the shop, trials and field guide. */
dialog.collection-dialog,dialog.audio-dialog,dialog.boot-credits-dialog{
 border:3px solid #ded6c4!important;border-radius:16px 9px 18px 10px;
 background:radial-gradient(ellipse at top,#32322e,#20201e 70%);
 box-shadow:inset 0 0 0 3px #0c0c0c,8px 10px 0 #070707,0 25px 90px #000b!important;
 scrollbar-color:#aaa395 #171717;
}
.modal-heading,.talent-heading{border-bottom:2px solid #9b958680;padding-bottom:20px;padding-right:44px}
.modal-heading h2,.talent-heading h2,.audio-dialog h2,.boot-credits-dialog h2{
 font-family:var(--ui-display);font-size:34px;font-weight:900;letter-spacing:-1px;
}
.modal-heading h2 em,.talent-heading h2 em,.audio-dialog h2 em{font-weight:900}
.wallet{padding:12px 16px;border:2px solid #b5ae9e;border-radius:var(--ui-edge);background:#121212}
.wallet>span{color:#d0c9b8;letter-spacing:1px}
.wallet strong{font-weight:bold}
.forged-equipment{border:2px solid #868175;border-radius:var(--ui-edge);background:#141413}
.tabs,.talent-branches{border-bottom:0;gap:9px;padding:3px 3px 8px}
.tabs button,.talent-branches button{
 min-height:44px;flex-shrink:0;border:2px solid #a7a192;border-radius:8px 8px 5px 5px;
 background:#1c1c1a;color:#d8d1c1;box-shadow:0 3px 0 #080808;
 font:900 10px/1.3 var(--ui-display);letter-spacing:.5px;padding:10px 14px;
}
.tabs button.active,.talent-branches button.active{
 background:#eee7d7;color:#171717;border-color:#eee7d7;box-shadow:inset 0 -3px 0 #aaa393,0 3px 0 #080808;
}
.tabs button:hover,.talent-branches button:hover{border-color:#fff3d7;color:#fff3d7}
.tabs button.active:hover,.talent-branches button.active:hover{color:#171717}
.talent-branches button span{color:inherit;opacity:1}
.upgrade-card{
 border:3px solid #141414;border-radius:var(--ui-edge);background:#e4ddcc;color:#171717;
 box-shadow:0 0 0 1px #8b8577,3px 4px 0 #101010;padding:20px;gap:12px;
}
.upgrade-card h3{color:#171717;font:bold 20px/1.1 Georgia}
.upgrade-card p{color:#383832;font-size:12px;line-height:1.6}
.upgrade-card .level{color:#37352f;font-size:11px;letter-spacing:2px}
.upgrade-card .upgrade-effect{color:#171717;font-size:11px;font-weight:700;border-top:1px dashed #625e54;padding-top:10px}
.upgrade-card .gear-unlock{color:#4b4940;font-size:10px}
.upgrade-card .atlas-icon{background-color:#272724;border:2px solid #161616;box-shadow:inset 0 0 0 2px #c9c2b2}
.upgrade-card button:not(:disabled){background:#252523;color:#eee7d7;border-color:#171717;box-shadow:inset 0 0 0 1px #a9a293,0 3px 0 #080808}
.upgrade-card button{font-size:11px;min-height:46px;padding:10px}
.enemy-card,.boss-card{
 border:2px solid #aaa394;border-radius:var(--ui-edge);background:#292927;box-shadow:3px 4px 0 #101010;
}
.boss-card strong,.enemy-card h3{font-weight:bold}
.boss-card small{font-size:10px;line-height:1.6}
.boss-card:hover{background:#3a3934;border-color:#f3ead6}
#costume-grid .costume-card{border:2px solid #8c8678;border-radius:var(--ui-edge);background:#242421;box-shadow:0 3px 0 #101010;font-size:12px}
#costume-grid .costume-card.selected{border:3px solid #eee7d7;box-shadow:inset 0 0 0 2px #111,0 3px 0 #101010;background:#3e3d36}
#costume-grid .costume-card:disabled{opacity:.65}
.modal-footer{padding-bottom:5px}
.district-stop{border:2px solid #8d8676;border-radius:var(--ui-edge);box-shadow:3px 4px 0 #101010}
.district-stop.current{border:3px solid #eee7d7}
.district-number{display:grid;place-items:center;align-self:start;min-height:46px;border:2px solid #a9a191;border-radius:50%;background:#34332e}

/* Talent coins, keeping the tree's position transforms intact. */
.tree-scroll{border:2px solid #746e61;border-radius:10px;background:#151514;scrollbar-color:#aaa395 #171717}
.talent-node{background:transparent}
.talent-node .node-ring{border:2px solid #8d877b;background:#292925;box-shadow:0 0 0 3px #121212,0 4px 0 3px #080808}
.talent-node .node-art{width:43px;height:43px}
.talent-node.available .node-ring{border-color:#eee7d7;box-shadow:0 0 0 3px #121212,0 0 0 4px #9b9586,0 4px 0 4px #080808}
.talent-node.selected .node-ring,.talent-node:hover .node-ring{border-color:#fff6e1;box-shadow:0 0 0 3px #171717,0 0 0 5px #eee7d7}
.talent-node.learned .node-ring{border-color:#eee7d7;background:#646052}
.talent-node strong{background:#151514;color:#e4ddcc;font-size:10px;line-height:1.3;padding:2px 3px}
.talent-node small{color:#c7bfae;font-size:9px}
.talent-node.capstone .node-art{width:58px;height:58px}
.tree-connections path{stroke:#9b9586;stroke-width:2;stroke-dasharray:4 5}
.tree-connections path.lit{stroke:#eee7d7;stroke-opacity:1;stroke-width:3;stroke-dasharray:none}
.talent-detail{border:2px solid #a49c8a;border-radius:var(--ui-edge);background:#242420;padding:20px}
.talent-detail p{font-size:12px;color:#d9d1bf}
.talent-points{border:2px solid #bfb6a3;border-radius:var(--ui-edge);padding:10px;background:#151514}
.talent-points strong{font-weight:bold}
.talent-points>span{line-height:1.5}

/* Physical-looking mixer knobs; native range and checkbox semantics remain. */
.mix-row{font-weight:600}
.mix-row output{min-width:42px;padding:2px 6px;text-align:center;border:1px solid #a59d8a;border-radius:4px;background:#111;color:#eee7d7}
.mix-row input[type=range]{appearance:none;-webkit-appearance:none;height:36px;background:transparent;accent-color:#eee7d7}
.mix-row input[type=range]::-webkit-slider-runnable-track{height:10px;border:2px solid #a59d8a;border-radius:5px;background:#101010;box-shadow:0 2px 0 #000}
.mix-row input[type=range]::-moz-range-track{height:6px;border:2px solid #a59d8a;border-radius:5px;background:#101010;box-shadow:0 2px 0 #000}
.mix-row input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border:3px solid #151515;border-radius:50%;background:#eee7d7;box-shadow:0 0 0 2px #bdb5a3,0 3px 0 2px #000}
.mix-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border:3px solid #151515;border-radius:50%;background:#eee7d7;box-shadow:0 0 0 2px #bdb5a3,0 3px 0 2px #000}
.menu-motion-setting input{width:22px;height:22px;accent-color:#eee7d7}
.menu-motion-setting label{min-height:44px}

/* Combat keys use the same materials, without adding panels over the action. */
.hud #run-hud{border:2px solid #b4ad9c;border-radius:var(--ui-edge);box-shadow:inset 0 0 0 2px #101010,0 3px 0 #080808;background:#20201eef}
.skill-slot{border:2px solid #c9c0ac;border-radius:9px 6px 10px 5px;background:#292925;box-shadow:0 4px 0 #080808}
.skill-slot.locked{border-style:dashed;opacity:.65}
.skill-slot kbd{border:1px solid #171717;background:#eee7d7;color:#171717;font-weight:bold}
.touch-controls button{border:3px solid #eee7d7;border-radius:var(--ui-edge);background:#242422;box-shadow:inset 0 0 0 2px #111,0 4px 0 #080808}
.touch-controls #touch-slash{background:#eee7d7;color:#171717;border-color:#171717;box-shadow:inset 0 0 0 2px #fff5,0 0 0 1px #eee7d7,0 4px 0 #080808;font-family:var(--ui-display)}
.touch-controls button:active{transform:translateY(3px);box-shadow:0 1px 0 #080808}
.result-actions{gap:14px}
.result-stats{padding:18px 24px;border:2px solid #b9b09c;border-radius:var(--ui-edge);background:#171715;box-shadow:4px 5px 0 #080808}
.result-stats b{font-weight:bold}
.refuge-panel{border:3px solid #ddd5c3;border-radius:var(--ui-edge);box-shadow:inset 0 0 0 3px #111,6px 8px 0 #080808}

@media(max-width:1050px){
 .home-content{max-width:48%}
 .home .home-actions .secondary{font-size:10px;padding:12px}
 .upgrade-card{padding:15px;gap:10px}
}
@media(max-width:760px){
 .hud{padding:13px 14px;gap:8px}.hud nav{gap:6px}
 .hud .brand{font-size:12px;letter-spacing:.7px;gap:5px;max-width:145px}
 .hud .brand-mark:after{font-size:27px}.hud .brand small{font-size:5px;letter-spacing:1px}
 .difficulty-chip{min-width:47px;padding:0 6px;font-size:7px}
 .icon-button{width:44px;height:44px;min-width:44px;font-size:19px}
 .home .home-content h1{font-size:48px;letter-spacing:-2px}
 .home #begin-button{min-width:0;width:100%;min-height:56px;font-size:14px}
 .home .home-actions{max-width:none;gap:12px}
 .home .home-actions .secondary{font-size:10px;gap:8px;padding:12px 10px;min-height:48px}
 .home-actions .secondary span{padding-left:8px;font-size:9px}
 .home .home-minor{gap:10px}.home .home-minor .text-button{font-size:10px}
 .home .home-minor #home-level{display:block;font-size:9px}
 .home .realm-picker{padding:20px 16px}.home .realm-picker strong{font-size:21px}
 .home-bottom>span:first-child{font-size:0}
 .home-bottom>span:first-child *{display:none}
 .home-bottom>span:first-child:after{content:'TAP TO DIVE · SLIDE TO STEER · HITS BOUNCE AUTOMATICALLY';font-size:9px;letter-spacing:.3px}
 .text-button{font-size:10px;padding:10px 12px}
 .difficulty-screen{gap:22px;padding:82px 6vw 30px}
 .difficulty-intro h2{font-size:34px;letter-spacing:-1px}
 .difficulty-card{padding:17px 10px 12px;min-height:220px}
 .difficulty-card strong{font-size:21px}.difficulty-card small{font-size:8px;letter-spacing:.5px}
 .difficulty-card>div{font-size:8px;gap:4px;flex-wrap:wrap;justify-content:center}
 .difficulty-card.selected:after{right:7px;top:7px;width:22px;height:22px;font-size:14px}
 .modal-heading,.talent-heading{padding-right:36px;padding-bottom:15px}
 .modal-heading h2,.talent-heading h2,.audio-dialog h2{font-size:28px}
 .modal-heading .eyebrow,.talent-heading .eyebrow{letter-spacing:1px;line-height:1.7}
 .tabs{gap:8px}.tabs button{font-size:10px;padding:10px 13px}
 .upgrade-card{padding:13px;gap:9px;grid-template-columns:44px minmax(0,1fr)}
 .upgrade-card .atlas-icon{width:44px;height:44px}
 .upgrade-card h3{font-size:17px;overflow-wrap:anywhere}
 .upgrade-card p{font-size:11px}.upgrade-card .upgrade-effect{font-size:10px}
 .upgrade-card button{font-size:10px;padding:10px 5px}
 .modal-footer{flex-wrap:wrap}.modal-footer .secondary{white-space:normal;min-height:48px}
 .talent-branches{gap:6px;overflow-x:auto;justify-content:flex-start}
 .talent-branches button{font-size:9px;padding:9px 8px;flex:1}
 .talent-branches button span{display:block;font-size:8px;margin:4px 0 0}
 .talent-dialog[open]{display:flex;flex-direction:column;height:97dvh;overflow-y:auto}
 .talent-heading{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:8px;flex:none;padding:0 0 12px}
 .talent-heading>div:first-child{grid-column:1/-1;padding-right:44px}
 .talent-heading h2{font-size:24px;line-height:1.15;white-space:normal}
 .talent-heading .eyebrow{display:none}
 .talent-level{width:auto;padding-right:8px}.talent-level .xp-track{margin-bottom:0}
 .talent-branches{flex:none;margin-top:12px;margin-bottom:0}
 .talent-layout{flex:1;min-height:270px;grid-template-rows:minmax(120px,1fr) minmax(140px,1fr);gap:10px}
 .tree-scroll,.talent-detail{height:auto;max-height:none;min-height:0}
 .talent-detail{padding:14px}.talent-detail h3{font-size:25px}
 .talent-detail .primary{min-height:46px}
 .talent-points{padding:5px;min-width:58px}.talent-points strong{font-size:26px}
 .talent-footer{flex:none}
 .talent-footer .text-button{font-size:8px;white-space:normal;padding:8px;flex-shrink:0;max-width:45%}
 .talent-footer>span{font-size:9px}
 .result-stats{gap:20px;padding:15px 13px;width:100%;max-width:380px;justify-content:space-around}
 .result-stats span{font-size:7px;letter-spacing:.5px}.result-stats b{font-size:23px}
 .result-actions{gap:10px}.result-actions .text-button{font-size:9px;margin-top:8px}
 .boot-footer button{min-height:36px;padding:7px 10px;font-size:8px}
}
@media(max-width:380px){
 .hud{padding-inline:10px}.hud nav{gap:5px}.hud .brand{max-width:110px;font-size:10px}
 .hud .brand-mark{display:none}
 .upgrade-grid{grid-template-columns:1fr}
 .upgrade-card{grid-template-columns:54px minmax(0,1fr)}
 .upgrade-card .atlas-icon{width:54px;height:54px}
}
@media(max-height:500px) and (orientation:landscape){
 .home{overflow-y:auto;padding:84px 6% 30px;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:28px}
 .home .home-content,.home .realm-picker{position:relative;inset:auto;width:100%;max-width:none}
 .home .home-content h1{font-size:42px;margin:15px 0}
 .home .home-actions{grid-template-columns:1fr}.home #begin-button{min-width:0;width:100%}
 .home .home-bottom{position:relative;inset:auto;grid-column:1/-1}
 .difficulty-screen{justify-content:flex-start}
 .boot-footer button{min-height:30px;padding:5px 8px;font-size:7px}
 .center-screen.glass{overflow-y:auto;justify-content:flex-start;padding-top:80px;padding-bottom:35px}
 .center-screen.glass h2{font-size:35px;margin-block:12px}
 .center-screen.glass .result-mark{display:none}
 .talent-dialog{overflow-y:auto}
}
@media(prefers-reduced-motion:reduce){
 .primary:hover:not(:disabled),.secondary:hover:not(:disabled),.upgrade-card button:hover:not(:disabled),
 .equipment-equip-button:hover:not(:disabled),.boot-actions .baked-button:hover:not(:disabled),
 .difficulty-card:hover,.boss-card:hover{transform:none}
}

/* Combat coaching uses a small sign; mastered basics leave the playfield clear. */
.play-tip{
 left:50%;right:auto;transform:translateX(-50%);width:min(440px,calc(100vw - 40px));
 max-width:none;border:2px solid #b6ae9c;border-radius:8px 5px 9px 5px;
 padding:7px 12px;background:#191918ed;box-shadow:0 3px 0 #080808;
 font-size:11px;line-height:1.5;text-shadow:none;
}
.play-tip b{font:900 10px/1.5 var(--ui-display);letter-spacing:.5px;color:#eee7d7}
.play-tip span{font-size:11px;line-height:1.5;color:#d4cdbc}
.play-tip[data-state='opening']{background:#eee7d7;border-color:#171717;box-shadow:0 0 0 1px #eee7d7,0 3px 0 #080808}
.play-tip[data-state='opening'] b,.play-tip[data-state='opening'] span{color:#171717}
.play-tip[data-state='guarded'],.play-tip[data-state='warning']{border-left-width:5px}
.boss-hud{top:98px;padding:8px 12px;border:2px solid #a8a08e;border-radius:8px;background:#171715ed;width:min(360px,55vw);line-height:1.25}
.boss-hud>span{display:block;font-weight:bold;font-size:15px;letter-spacing:.4px}
.boss-hud>div{margin:4px 0;height:7px;border-color:#c8beaa;background:#080808}
.boss-hud i{background:#ddd5c3}
.boss-hud small{display:block;font-size:9px;line-height:1.2;letter-spacing:.7px;color:#eee7d7}
.boss-hud[data-cue='open']{border-color:#eee7d7}
.boss-hud[data-cue='guarded']>div{border-top:3px double #eee7d7}
.play-overlay:has(.boss-hud:not(.hidden)) .play-tip{top:172px;bottom:auto!important}
.play-overlay:has(.boss-hud:not(.hidden)) .play-tip[data-state='opening']{display:none}
.play-overlay:has(.boss-hud:not(.hidden)) .play-tip:is([data-state='warning'],[data-state='guarded']) b{display:none}
/* Locked abilities have no action yet; their unlocks remain in the talent tree. */
.actionbar .skill-slot.locked{display:none}
.actionbar:not(:has(.skill-slot:not(.locked))){display:none}
.ability-hud:not(.xp-celebrating) .level-hud,.ability-hud:not(.xp-celebrating) .xp-track{display:none}
.ability-hud{padding:8px 10px;background:#171715df}
@media(max-width:760px){
 .play-tip{bottom:162px!important;width:calc(100vw - 40px);max-width:440px;padding:7px 10px}
 .play-tip b{font-size:10px}.play-tip span{font-size:10px}
 .boss-hud{top:138px;left:auto;right:14px;transform:none;width:calc(100vw - 108px);max-width:320px;padding:7px 10px}
 .boss-hud>span{font-size:13px}.boss-hud small{font-size:8px;letter-spacing:.3px}
 .play-overlay:has(.boss-hud:not(.hidden)) .play-tip{top:202px;bottom:auto!important}
 .ability-hud{width:116px;bottom:92px;padding:7px 8px}
 .ability-hud .rush-title{font-size:7px;letter-spacing:.4px}
}
@media(max-height:500px) and (orientation:landscape){
 .boss-hud{top:83px;left:auto;right:16px;transform:none;padding:5px 9px;width:min(250px,32vw)}
 .boss-hud>span{font-size:12px}.boss-hud small{font-size:8px}
 .play-tip{bottom:88px!important;width:min(360px,46vw)}
 .play-overlay:has(.boss-hud:not(.hidden)) .play-tip{top:148px;left:auto;right:16px;transform:none;width:min(270px,35vw)}
}