/* Mobile UI uses the viewport; only the rendered game keeps its 16:9 aspect. */
.map-mobile-portrait,.map-mobile-name,.map-mobile-number,.map-mobile-label{display:none}
@media(max-width:1000px),(max-height:600px),(pointer:coarse){
 html,body{width:100%;height:100%;overflow:hidden}
 html #root{width:var(--game-viewport-width,100vw);height:var(--game-viewport-height,100dvh);min-height:0;visibility:visible;gap:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow:hidden}
 html #root #stage{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;border:0;box-shadow:none;min-width:0;min-height:0}
 #stage #game{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
 #stage[data-mode=map] #game{object-fit:cover}
 #root footer,#rotate{display:none!important}
 #root #stage #utilities{top:8px;bottom:auto;right:10px;gap:6px;z-index:20}
 #root #stage #utilities button{width:44px;height:44px;min-height:44px}
 #root #stage #overlay{inset:60px 0 0;padding:12px 16px 20px;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#d7b36a #17233b}
 #root #stage #overlay:empty{inset:0;padding:0;overflow:hidden}
 #root #stage #overlay>*,#stage .screen>*{min-width:0;flex-shrink:0;max-width:100%}
 #stage .screen{height:auto;max-height:none;min-height:0;gap:14px;transform:none}
 #stage .screen h2{font-size:clamp(12px,2.5vw,20px);line-height:1.7;margin:0}
 #stage .panel,#root #stage #overlay>.defeat-screen{width:100%;max-width:900px;height:auto;max-height:none;margin:0;padding:16px;overflow:visible;flex:none}
 #stage .panel h2{font-size:clamp(12px,2vw,18px);overflow-wrap:anywhere}
 #stage .tag{max-width:100%;font-size:9px;line-height:1.8;overflow-wrap:anywhere}
 #stage .text-button,#stage .prompt,#stage .nav-button,#stage .share-button,#stage .category-tab{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
 #stage .screen>.fine{display:block;max-width:680px;font-size:20px;line-height:1.3}
 #stage .screen>.prompt{padding:10px 14px;font-size:10px}
 #stage .title-screen{max-width:900px}
 #stage .title-screen .logo{gap:6px}
 #stage .title-screen .cast-strip{width:100%;justify-content:center;gap:8px}
 #stage .title-screen .cast-strip .portrait{width:52px;height:66px}
 #stage .title-screen .portrait-trigger{flex:0 1 60px;padding:0;min-width:44px}
 #stage .title-screen .cast-hint{margin:0;font-size:18px}
 #stage .title-play-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
 #stage .title-play-actions button{min-height:48px;padding:10px 14px;font-size:11px}
 #stage .title-screen .sandbox-hint{font-size:18px;line-height:1.25;margin:0}
 #stage .world-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #stage .world-card{min-height:180px;padding:14px;gap:9px}
 #stage .world-card strong{font-size:10px;line-height:1.6;overflow-wrap:anywhere}
 #stage .world-desc{font-size:20px;line-height:1.2}
 #stage .world-number{font-size:22px}
 #stage .selection-screen{gap:16px;width:100%;max-width:1000px}
 #stage .category-tabs{gap:8px}
 #stage .category-tab{font-size:9px;padding:9px}
 #stage .category-description{font-size:20px;line-height:1.2;max-width:100%}
 #stage .character-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;gap:10px}
 #stage .character-card:last-child:nth-child(odd){grid-column:auto}
 #stage .selection-screen .character-card{min-height:132px;padding:10px;gap:8px}
 #stage .selection-screen .character-card .portrait{height:70px;width:60px}
 #stage .selection-screen .character-card span:last-child{font-size:9px;line-height:1.6;min-height:28px}
 #stage .selection-screen .selection-details{flex:none;display:grid;grid-template-columns:1fr 1fr;width:100%;height:auto;max-height:none;overflow:visible;border:0;padding:0;gap:16px}
 #stage .selection-screen .selection-story .campaign-summary{font-size:22px;line-height:1.3}
 #stage .selection-screen .character-subtitle{font-size:22px}
 #stage .campaign-heading{align-items:flex-start;gap:10px}
 #stage .campaign-progress{font-size:8px;line-height:1.8;padding-top:4px}
 #stage .character-sheet{width:100%;padding:14px}
 #stage .character-sheet h3{font-size:11px;line-height:1.7}
 #stage .character-sheet dt{font-size:8px;line-height:1.7}
 #stage .character-sheet dd{font-size:12px}
 #stage .character-sheet p{font-size:19px;line-height:1.25}
 #stage .character-special h4{font-size:9px}
 #stage .selection-screen>div:last-child{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
 #stage .character-confirm-hint{font-size:19px;line-height:1.2}
 #stage .mission-heading{flex-wrap:wrap;align-items:center;gap:12px}
 #stage .mission-heading h2{flex:1 1 240px;margin:0}
 #stage .mission-info{flex:1 1 300px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin:0}
 #stage .mission-heading .info-button,#stage .info-button{min-width:0;min-height:44px;font-size:8px;padding:8px 5px;gap:5px}
 #stage .info-button span:last-child{overflow-wrap:anywhere}
 #stage .mission-dialog{margin:16px 0;gap:12px;padding:12px}
 #stage .mission-dialog .portrait-trigger{flex:0 0 48px;min-width:0}
 #stage .mission-dialog .portrait{width:42px;height:54px}
 #stage .mission-text,#stage .mission-summary .help-section p{font-size:22px!important;line-height:1.3!important;overflow-wrap:break-word}
 #stage .mission-reserve{display:block}
 #stage .chapter-actions,#stage .mission-intro .chapter-actions{position:static;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch;gap:10px;margin:16px 0 0;padding:0;background:transparent;border:0}
 #root #stage #overlay .mission-intro .chapter-actions .nav-button,#root #stage #overlay .mission-intro .chapter-actions .share-button{flex:1 1 160px;width:auto;font-size:9px;margin:0}
 #stage .chapter-actions>.prompt{flex:1 1 120px;margin:0;min-height:48px;font-size:11px}
 #stage .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;min-height:0;overflow:visible;flex:none;width:100%}
 #stage .shop-card{display:flex;min-width:0;padding:12px}
 #stage .shop-card h3{font-size:10px;line-height:1.7}
 #stage .shop-card p{display:block;font-size:20px;line-height:1.25}
 #stage .shop-heading{flex-wrap:wrap;gap:10px}
 #stage .shop-actions{flex-wrap:wrap;gap:10px}
 #stage .shop-actions button{flex:1 1 180px}
 #stage .shop-panel .shop-notice{font-size:18px!important}
 #stage .shop-panel .shop-rule{max-height:none;overflow:visible}
 #stage .audio-panel,#stage .fact-panel,#stage .help-panel,#stage .recovery-panel{overflow:visible;max-height:none}
 #stage .audio-list{grid-template-columns:1fr}
 #stage .voice-worlds{grid-template-columns:repeat(2,minmax(0,1fr))}
 #stage .help-section p{font-size:22px}
 #stage .defeat-actions,#stage .recovery-options{display:flex;flex-wrap:wrap;gap:12px}
 #stage .defeat-actions button,#stage .recovery-options article{flex:1 1 180px}
 /* Mobile map: navigation, route and mission occupy separate rows. */
 #root #stage[data-mode=map] #overlay{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:20px}
 #stage[data-mode=map] .map-top{position:static;inset:auto;width:100%;max-width:none;display:flex;flex-wrap:wrap;gap:8px;padding:8px}
 #stage[data-mode=map] .map-top button{flex:1 1 140px;width:auto;min-height:44px;margin:0;font-size:8px;padding:8px}
 #stage[data-mode=map] .map-stops{position:relative;inset:auto!important;top:auto!important;bottom:auto!important;width:100%;height:auto!important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;pointer-events:auto;padding:8px 0}
 #stage[data-mode=map] .map-speaker{position:static;inset:auto;transform:none;width:100%;height:auto;grid-column:1/-1;display:flex;gap:10px;align-items:center;justify-content:center;min-height:64px;border:0;background:#102139c9}
 #stage .map-speaker>span{position:static;font-size:22px}
 #stage .map-mobile-portrait,#stage .map-mobile-name,#stage .map-mobile-label,#stage .map-mobile-number{display:block}
 #stage .map-mobile-portrait .portrait{height:64px;width:52px}
 #stage .map-speaker>.map-mobile-name{font:10px/1.8 'Press Start 2P',monospace}
 #stage[data-mode=map] .map-stop{position:static;inset:auto;transform:none;aspect-ratio:auto;max-width:none;max-height:none;width:100%;height:auto;min-width:0;min-height:110px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:12px 8px;background:#15243deF;border:2px solid #74859c;border-radius:0;color:#d7dfeb}
 #stage[data-mode=map] .map-stop[aria-pressed=true]{background:#374556;border-color:#ffda4c;box-shadow:0 3px #ffda4c;color:#fff9dc}
 #stage .map-mobile-number{font:20px/1 'Press Start 2P',monospace;color:#ffda4c}
 #stage .map-mobile-label{font:8px/1.7 'Press Start 2P',monospace;overflow-wrap:anywhere}
 #stage[data-mode=map] .mapbar{position:static;inset:auto;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;width:100%;padding:16px;margin:0}
 #stage[data-mode=map] .map-mission{flex:1 1 260px}
 #stage[data-mode=map] .map-actions{flex:1 1 320px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;width:auto;min-width:0}
 #stage[data-mode=map] .map-actions .cart-button{min-width:110px;min-height:48px;width:auto;flex:1 1 110px}
 #stage[data-mode=map] .map-actions .info-button{min-width:110px;width:auto;height:auto;flex:1 1 110px;gap:6px;font-size:8px}
 #stage[data-mode=map] .map-actions .info-button span:last-child{position:static;width:auto;height:auto;clip-path:none;overflow:visible;display:inline}
 #stage[data-mode=map] .map-start{display:flex;flex:1 1 180px;flex-direction:column;gap:8px;min-width:0}
 #stage[data-mode=map] .map-start small{max-width:100%;font-size:9px;line-height:1.5;white-space:normal}
 #stage[data-mode=map] .map-start .prompt{width:100%;font-size:11px;min-height:48px}
 #stage[data-mode=map] .map-mission h2{font-size:14px;line-height:1.7}
 /* Controls have a stable touch size, independent of canvas scaling. */
 #stage #touch{padding:12px;gap:16px}
 #stage #touch .dpad,#stage #touch .actions{display:flex;gap:8px;align-items:flex-end}
 #stage #touch .actions{flex-wrap:wrap;justify-content:flex-end;max-width:240px}
 #stage #touch button{width:48px;height:48px;min-width:48px;min-height:48px;font-size:22px;flex-shrink:0}
 #stage #hud{top:8px;left:10px;right:166px;max-width:none;gap:6px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr) minmax(0,1fr)}
 #stage #hud:not(:has(.play-ability)){grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);max-width:480px}
 #stage #hud b{font-size:8px;white-space:normal;overflow-wrap:anywhere}
 #stage #hud small{font-size:16px;line-height:1.1}
 #stage #hud .play-ability{grid-column:auto;display:flex;flex-direction:column}
 #stage #play-tip{top:85px;max-width:min(560px,90%);font-size:18px;max-height:90px;overflow-y:auto;touch-action:pan-y}
 #stage #interact{bottom:76px;max-width:80%;font-size:9px}
 #stage #voice-caption{top:auto;bottom:80px;max-width:min(600px,90%);width:max-content;max-height:100px;overflow:auto}
 #stage #voice-caption span{font-size:18px}
}
@media(max-width:600px){
 #stage .selection-screen .selection-details{grid-template-columns:1fr}
 #stage .shop-grid{grid-template-columns:1fr}
 #stage .mission-dialog>.portrait-trigger{display:none}
 #stage .mission-info{flex-basis:100%;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
 #stage .mission-heading .info-button{font-size:7px}
 #stage .stat-blocks i{width:10px;height:10px}
 #stage[data-mode=map] .map-stops{grid-template-columns:1fr;gap:8px}
 #stage[data-mode=map] .map-stop{flex-direction:row;justify-content:flex-start;min-height:58px;padding:10px 14px;gap:16px;text-align:left}
 #stage .map-mobile-label{font-size:9px}
 #stage .map-mobile-number{width:28px;flex-shrink:0}
 #stage #hud,#stage #hud:not(:has(.play-ability)){top:64px;right:10px;max-width:none;grid-template-columns:1fr 1.4fr}
 #stage #hud .play-ability{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}
 #stage #hud .play-ability .mini-meter{flex:1 1 100%}
 #stage #play-tip{top:180px}
 #stage #touch{gap:8px;padding:10px 8px}
 #stage #touch .dpad,#stage #touch .actions{gap:4px}
 #stage #touch .actions{max-width:144px}
 #stage #touch button{width:44px;height:48px;min-width:44px;font-size:20px}
}
@media(min-width:601px) and (max-height:600px){
 #stage .title-screen{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px 24px;text-align:center}
 #stage .title-screen .logo{grid-column:1;grid-row:1/3}
 #stage .title-screen .cast-strip{grid-column:1;grid-row:3}
 #stage .title-screen .cast-hint{grid-column:1;grid-row:4}
 #stage .title-play-actions{grid-column:2;grid-row:1}
 #stage .title-screen .sandbox-hint{grid-column:2;grid-row:2}
 #stage .title-screen>.fine{grid-column:2;grid-row:3;font-size:17px}
 #stage .title-screen>.text-button{grid-column:2;grid-row:4;font-size:8px}
}
@media(min-width:900px) and (max-height:600px){#stage .world-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:350px){#root #stage #overlay{padding-right:10px;padding-left:10px}#stage .world-grid{grid-template-columns:1fr}#stage .title-screen .cast-strip{gap:3px}#stage .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* The campaign is the primary action; free play remains secondary. */
#stage .title-play-actions{flex-direction:column;width:min(100%,420px);gap:12px}
#stage .title-play-actions .campaign-start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:88px;padding:18px 20px;background:#ffda4c;color:#152039;border:4px solid #fff3a4;box-shadow:inset -4px -5px #d7a62f,inset 3px 3px #ffe990,0 6px #946223,0 9px #080d1c;animation:none;opacity:1;line-height:1.4;transition:background .15s,transform .15s}
#stage .campaign-start strong{font-size:clamp(18px,2.2vw,26px);letter-spacing:1px}
#stage .campaign-start span{font:22px/1.15 'VT323',monospace}
#stage .title-play-actions .campaign-start:hover,#stage .title-play-actions .campaign-start:focus-visible{background:#ffe97e;outline:3px solid #fff9dc;outline-offset:5px;transform:translateY(-2px)}
#stage .title-play-actions .campaign-start:active{transform:translateY(3px);box-shadow:inset 3px 4px #d7a62f,0 2px #946223}
#stage .title-play-actions .sandbox-button{min-height:44px;padding:9px 16px;background:transparent;border:1px solid #62718a;color:#bac8db;box-shadow:none;font-size:10px}
#stage .title-play-actions .sandbox-button:hover,#stage .title-play-actions .sandbox-button:focus-visible{background:#23344a;color:#fff9dc;border-color:#bac8db}
@media(max-width:600px){#stage .title-screen .title-play-actions{order:0}#stage .title-play-actions .campaign-start{min-height:82px;padding:14px 12px}#stage .campaign-start span{font-size:20px}}
@media(min-width:601px) and (max-height:600px){#stage .title-play-actions{justify-self:center;gap:10px}#stage .title-play-actions .campaign-start{min-height:76px;padding:12px}#stage .campaign-start strong{font-size:19px}#stage .campaign-start span{font-size:19px}}
@media(prefers-reduced-motion:reduce){#stage .title-play-actions .campaign-start{transition:none}}
@media(min-width:1001px) and (min-height:601px) and (pointer:fine){
 #stage .title-screen{gap:12px}
 #stage .title-play-actions{flex-direction:row;width:min(100%,620px);flex-wrap:nowrap;gap:20px}
 #stage .title-play-actions .campaign-start{flex:1;min-width:0;padding:14px 16px}
 #stage .title-play-actions .sandbox-button{flex-shrink:0}
 #stage .title-screen .cast-strip .portrait{width:64px;height:80px}
}

/* Keep a real page scroll range for browsers that retract chrome on scroll.
   Only the game surface is fixed. Touch controls retain touch-action:none. */
html.game-browser-scroll{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:none}
html.game-browser-scroll body{height:auto;min-height:calc(100vh + 160px);min-height:calc(100lvh + 160px);overflow:visible;overscroll-behavior-y:auto}
html.game-browser-scroll::-webkit-scrollbar{display:none}
html.game-browser-scroll #root{position:fixed;top:0;left:0;touch-action:pan-y pinch-zoom}
html.game-browser-scroll #stage #game{touch-action:pan-y pinch-zoom}
html.game-browser-scroll #root #stage #overlay{overscroll-behavior-y:auto}
html.game-browser-scroll #root #stage #overlay:empty{pointer-events:none}