/* Expanded roster, seven chapter map and viewport-sized mobile play. */
.hero-picker{top:23%;right:4%;width:45%;max-width:610px;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}.hero-picker>.eyebrow,.hero-picker>p,.hero-picker>.hero-tip{grid-column:1/-1}.hero-picker>.eyebrow{margin-bottom:0}.hero-picker>p{margin:3px 0 0}.hero-picker>.hero-tip{font-size:9px}.hero-option{margin:0;min-height:116px;padding:6px}.hero-option canvas{width:66px;height:103px;flex-basis:66px}.hero-info{gap:5px}.hero-info strong{font-size:29px}.hero-info small{font-size:9px}.intro{max-width:45%}.intro h1 span{font-size:clamp(36px,5.1vw,76px)}
.forest-image,.journey-image-6{background-image:linear-gradient(0deg,#12292355,transparent),url('assets/forest-background.webp')}.coast-image,.journey-image-7{background-image:linear-gradient(0deg,#12292355,transparent),url('assets/coast-background.webp')}
.route-node{width:132px}.route-node strong{font-size:21px}.journey-board{height:390px}.enemy-card .enemy-pair{font-size:10px;color:#d6dfbf}
.install-panel{margin:18px 0;padding:16px 18px;border:1px solid #9cb79544;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#153027}.install-panel h2{font:600 24px 'Barlow Condensed',sans-serif;margin:0 0 6px}.install-panel p{font-size:11px;line-height:1.6;color:#b6c9ba;margin:0}.install-panel button{white-space:nowrap;margin:0}.install-help{max-width:480px;border:1px solid #a6bd9066;border-radius:8px;background:#18352b;color:#f2e6cc;padding:25px;max-height:85dvh;overflow:auto}.install-help::backdrop{background:#061c17b3}.install-help h2{margin-top:0;font:600 30px 'Barlow Condensed',sans-serif}.install-help p{font-size:13px;line-height:1.7}.install-help button{width:100%}
@media(max-width:950px){.hero-picker{top:19%;gap:7px;width:47%;right:3%}.hero-option{min-height:97px}.hero-option canvas{width:48px;height:80px;flex-basis:48px}.hero-info strong{font-size:25px}.hero-info small{font-size:8px}.hero-picker>.eyebrow{font-size:7px}.hero-info b{font-size:6px}.route-node{width:100px}.route-node strong{font-size:18px}.route-node small{font-size:8px}}
@media(max-width:650px){.route-node{width:100%}.route-node strong{font-size:23px}.route-node small{font-size:10px}.journey-board{height:auto}.install-panel{align-items:stretch;flex-direction:column;gap:13px}.install-panel button{width:100%}}
@media(max-width:600px){
 #stage:not(:fullscreen):has(#menu:not([hidden])){min-height:660px;aspect-ratio:auto;padding-bottom:0!important}#stage:not(:fullscreen):has(#menu:not([hidden]))>canvas{height:660px;object-fit:cover}
 #menu .intro{top:24px;left:6%;max-width:88%}#menu .intro .eyebrow{font-size:7px}#menu .intro h1 span{font-size:46px}#menu .intro p{font-size:12px;margin:14px 0}.intro .primary{min-height:44px;padding:13px 16px}.intro-meta{display:block;font-size:9px;margin-top:10px}.training-entry{font-size:10px;margin-top:6px}
 #menu .hero-picker{top:350px;left:6%;right:6%;width:88%;gap:8px}.hero-picker>.eyebrow{font-size:8px}.hero-option{min-height:100px}.hero-option canvas{width:51px;height:85px;flex-basis:51px}.hero-info strong{font-size:25px}.hero-info small{font-size:8px}.hero-info em{font-size:6px}.hero-info b{font-size:6px}.hero-picker>.hero-tip{font-size:8px}
}
@media(orientation:landscape) and (max-height:600px){
 body:has(#stage.touch-enabled #menu[hidden]){overflow:hidden;overscroll-behavior:none}
 #stage.touch-enabled:has(#menu[hidden]){position:fixed;inset:0;z-index:50;width:100%;height:var(--play-height,100dvh)!important;min-height:0!important;max-height:100dvh;padding:0!important;border:0;border-radius:0;aspect-ratio:auto;box-shadow:none;background:#091e19}
 #stage.touch-enabled:has(#menu[hidden])>canvas{width:100%;height:100%!important;aspect-ratio:auto;object-fit:contain}
 #stage.touch-enabled:has(#menu[hidden]) #touch{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));align-items:flex-end}
 #stage.touch-enabled:has(#menu[hidden]) #joystick{width:clamp(76px,26dvh,110px);height:clamp(76px,26dvh,110px);flex-basis:clamp(76px,26dvh,110px)!important}
 #stage.touch-enabled:has(#menu[hidden]) .touch-actions{grid-template-columns:repeat(3,clamp(38px,12dvh,52px));grid-template-rows:repeat(2,clamp(38px,12dvh,52px));gap:5px;padding:0}
 #stage.touch-enabled:has(#menu[hidden]) #touch button{width:clamp(38px,12dvh,52px);height:clamp(38px,12dvh,52px);min-width:0;font-size:7px}
 #stage.touch-enabled:has(#menu[hidden]) #touch-directions{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,30px);gap:1px}#stage.touch-enabled:has(#menu[hidden]) #touch-directions button{width:32px;height:29px;font-size:17px}
 #stage.touch-enabled:has(#menu[hidden]) #hud{inset:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto max(12px,env(safe-area-inset-left))}#stage.touch-enabled:has(#menu[hidden]) #hearts{font-size:15px}#stage.touch-enabled:has(#menu[hidden]) .hero-name{font-size:8px}#stage.touch-enabled:has(#menu[hidden]) #dash{font-size:6px}
 #stage.touch-enabled:has(#menu[hidden]) #combat-hud{top:62px;left:max(12px,env(safe-area-inset-left));font-size:6px;min-width:115px;padding:4px 6px}#stage.touch-enabled:has(#menu[hidden]) #combo-name{font-size:6px}#stage.touch-enabled:has(#menu[hidden]) #bossbar{top:12px;left:28%;right:30%}
 #stage.touch-enabled:has(#menu[hidden]) #toast{bottom:105px;max-width:52%;padding:7px 10px;font-size:9px}
 #stage.touch-enabled:has(#menu[hidden]) .modal .card{max-height:calc(var(--play-height,100dvh) - 16px);padding:20px}
}
@media(orientation:portrait){#stage.touch-enabled #touch{bottom:max(12px,env(safe-area-inset-bottom))}}

.controller-tools{display:flex;flex-wrap:wrap;gap:8px}.controller-tools .secondary{min-height:42px;margin:0}.controller-name{font-weight:600;overflow-wrap:anywhere;color:var(--gold)}.controller-monitor{font:11px/1.6 monospace;overflow-wrap:anywhere;color:#b4cbbd}#controller-calibration{margin-top:12px;padding:16px;background:#091f19;border:1px solid #ecc67d77;border-radius:6px}#controller-step{display:block;line-height:1.6;color:var(--gold)}#controller-help{line-height:1.6}#controller-reset:disabled{opacity:.4;cursor:default}
/* Boss cues use shape, words and color together. */
#bossbar{padding:8px 12px;background:#102a23e8;border:1px solid #d9b26e55;border-radius:6px}#bossbar>div:first-of-type{position:relative}#bossbar>div:first-of-type:after{content:"";position:absolute;top:-2px;bottom:-2px;left:50%;border-left:2px solid #f1e1b6}#bossbar[data-state="open"]{border-color:#b8f3bf}#bossbar[data-state="open"] #bosshint{color:#d1ffd3;font-weight:700}#bossbar[data-state="rally"] #bosshint{color:#ffe2a8}#bossbar>.boss-window{height:3px;border:0;margin:6px 0 0;background:#ffffff10}#boss-window{display:block;height:100%;background:#b8f3bf}#bosshint{display:block;line-height:1.35}
@media(orientation:landscape) and (max-height:600px){#bossbar{top:8px;left:33%;right:25%;padding:5px 8px}#bossbar>span{font-size:11px;letter-spacing:.7px}#bosshint{font-size:9px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:600px){#stage:has(#bossbar:not([hidden])) .mission{display:none}#stage:has(#bossbar:not([hidden])) #pause{margin-left:auto}#bossbar{left:28%;right:12%}}