/* The play surface follows visible browser space; text panels own their scrolling. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#game{position:fixed;top:var(--game-top,0px);bottom:auto;height:var(--game-height,100dvh)}
#world{width:100%;height:100%}
#game-menu-toggle{display:none}
.touch-help{display:none}
#world,.touch-controls,.touch-controls *,#game button,#game a,.location,.journey,.prompt,.charge,.toast,.lesson-hint,.practice-banner{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-controls,.touch-controls *{touch-action:none}
.dpad{pointer-events:auto}
.touch-controls button.is-held{background:#f4e2b8;color:#394a3a;border-color:#fff4d8;box-shadow:0 0 0 2px #fff4d84a}
.welcome,.paper,.map-panel,.dialogue,dialog{overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
dialog{max-height:calc(var(--visible-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px)!important;overflow-y:auto}
dialog .paper{max-height:none;overflow:visible}
.overlay{z-index:50;padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left))}
.overlay>.paper{max-height:100%;overflow-y:auto}
.dialogue,body.outer .dialogue{z-index:40;max-height:calc(var(--game-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 32px);overflow-y:auto}
.game-input-blocked .touch-controls{visibility:hidden}

@media (any-pointer:coarse),(max-width:760px),(max-width:1000px) and (max-height:500px){
 .touch-help{display:block}
 #game{--touch-clearance:calc(150px + var(--safe-bottom))}
 body.holding-object #game{--touch-clearance:calc(200px + var(--safe-bottom))}
 #game header{top:calc(10px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));gap:12px;align-items:center;z-index:30}
 #game header .wordmark{font-size:24px;white-space:nowrap;line-height:1.1}
 #game header .wordmark span{display:none}
 #game-menu-toggle{display:block;pointer-events:auto;min-height:44px;min-width:70px;padding:8px 15px;border:1px solid #fff4d870;border-radius:24px;background:#354b40e8;color:#fff4d8;font-size:15px;touch-action:manipulation}
 #game .top-actions{display:none;position:absolute;top:calc(100% + 8px);right:0;width:min(350px,calc(100vw - var(--safe-left) - var(--safe-right) - 24px));max-width:none;max-height:calc(var(--game-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 82px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;flex-wrap:wrap;gap:8px;padding:12px;background:#f6ead5;border:1px solid #fff4d870;border-radius:18px;box-shadow:0 10px 45px #26382b55}
 body.game-menu-open #game .top-actions{display:flex}
 #game .top-actions button,#game .top-actions a.local-editor-entry{flex:1 1 130px;display:flex;align-items:center;justify-content:center;width:auto;min-width:0;min-height:46px;padding:11px 12px;background:#e6ddc8;color:#354b40;font-size:15px;border:1px solid #69765c50;border-radius:12px;box-shadow:none;white-space:normal;touch-action:manipulation}
 #game .top-actions #help-button{font:inherit;font-size:15px}
 #game .top-actions #map-button{font-size:15px}
 #game .top-actions #map-button span{font-size:16px;margin-left:8px}
 .touch-controls{display:flex;z-index:20;bottom:calc(12px + var(--safe-bottom));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));align-items:end;gap:12px}
 .dpad{grid-template-columns:repeat(3,clamp(44px,12vw,52px));gap:4px;flex:none}
 .dpad button{min-width:0;min-height:clamp(44px,12vw,52px);font-size:24px}
 .touch-actions{width:clamp(132px,36vw,154px);grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;flex:none}
 .touch-controls button{line-height:1.2;border-radius:14px;background:#344c40de;backdrop-filter:blur(8px)}
 .touch-actions button{min-width:0;min-height:44px;font-size:14px;padding:7px 6px}
 #touch-interact{grid-column:1/-1;grid-row:1}
 #touch-jump{grid-column:2;grid-row:2;min-height:64px}
 #touch-travel{grid-column:1;grid-row:2;min-height:64px}
 #touch-throw{grid-column:1;grid-row:3}#touch-turn{grid-column:2;grid-row:3}
 body:not(.holding-object) #touch-throw,body:not(.holding-object) #touch-turn{display:none}
 .controls-hint{display:none}
 #game .location{top:calc(68px + var(--safe-top));bottom:auto;left:calc(14px + var(--safe-left));max-width:calc(100% - 28px - var(--safe-left) - var(--safe-right));margin:0;padding:0;background:none}
 #game .location h2{font-size:28px;line-height:1.05;margin:5px 0;text-shadow:0 1px 5px #26382b}
 #game .location>span{font-size:10px;letter-spacing:1.2px}
 #game .location p{display:none}
 #game .journey{bottom:calc(var(--touch-clearance) + 6px);right:calc(14px + var(--safe-right));max-width:calc(100% - 28px);pointer-events:none}
 .journey>span,#planet-dots{display:none}#journey-save{font-size:11px;max-width:250px;margin-top:0}
 #game .prompt{bottom:calc(var(--touch-clearance) + 28px);font-size:14px;line-height:1.4;width:max-content;max-width:calc(100% - 28px);white-space:normal;text-align:center;padding:9px 13px;border-radius:14px}
 #game .charge{bottom:calc(var(--touch-clearance) + 35px);width:min(250px,calc(100% - 32px))}
 #game .charge span{font-size:14px}
 #game .toast{top:calc(119px + var(--safe-top));width:calc(100% - 28px);max-width:410px;font-size:14px;padding:12px 15px}
 #game .lesson-hint{top:calc(119px + var(--safe-top));left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 28px);max-width:350px;padding:12px 15px}
 #game .practice-banner{top:auto;bottom:calc(var(--touch-clearance) + 6px);left:calc(14px + var(--safe-left));font-size:11px;padding:0;background:none;max-width:150px;text-shadow:0 1px 3px #26382b;pointer-events:none}
 #game .outer-hint{top:calc(119px + var(--safe-top));bottom:auto;left:calc(14px + var(--safe-left));max-width:calc(100% - 28px);font-size:14px}
 #game .dialogue{bottom:calc(12px + var(--safe-bottom));width:calc(100% - 24px - var(--safe-left) - var(--safe-right));padding:22px;max-height:calc(var(--game-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px)}
 .dialogue .text-button{min-height:44px;align-items:center;font-size:15px}
 #game .welcome{top:calc(88px + var(--safe-top));left:calc(20px + var(--safe-left));right:calc(20px + var(--safe-right));max-width:470px;max-height:calc(var(--game-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 108px);padding-bottom:24px}
 .welcome h1{font-size:88px;margin:24px 0}.welcome p{font-size:16px;line-height:1.5}.welcome .primary{min-height:48px}
 #game .map-panel{top:calc(70px + var(--safe-top));bottom:calc(12px + var(--safe-bottom));left:calc(12px + var(--safe-left));max-width:min(350px,calc(100vw - 24px));overflow-y:auto;padding:16px;background:#354b40e8;border-radius:16px}
 #map-places{margin:20px 0}#map-places div{font-size:14px;gap:10px}
 .paper .close,.wardrobe-options .close{min-width:44px;min-height:44px}
 .paper dl{grid-template-columns:1fr;gap:6px;font-size:15px}.paper dd{margin:0 0 12px}
 #wardrobe .wardrobe-layout{grid-template-columns:1fr}#wardrobe .wardrobe-model{position:static;height:auto;padding:18px;border-radius:24px 24px 0 0}#wardrobe-preview{height:180px}#wardrobe .wardrobe-options{padding:24px}#wardrobe .wardrobe-options h2{font-size:36px}
}

@media (max-height:500px) and (orientation:landscape){
 #game .welcome{top:calc(66px + var(--safe-top));max-width:470px;max-height:calc(var(--game-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 78px)}
 .welcome h1{font-size:52px;line-height:.85;margin:10px 0;letter-spacing:-2px}.welcome p{font-size:14px;margin:12px 0}.welcome .eyebrow,.welcome .start-note{display:none}
 #game .location{top:calc(61px + var(--safe-top))}.location>span{display:none}#game .location h2{font-size:24px}
 #game .journey,#game .practice-banner{display:none}
 #game .prompt{bottom:calc(18px + var(--safe-bottom));max-width:calc(100% - 370px - var(--safe-left) - var(--safe-right))}
 #game .charge{bottom:calc(22px + var(--safe-bottom));max-width:calc(100% - 370px - var(--safe-left) - var(--safe-right))}
 #game .toast,#game .lesson-hint{top:calc(93px + var(--safe-top));max-width:380px}
 #game .outer-hint{top:calc(93px + var(--safe-top));left:50%;transform:translateX(-50%);max-width:360px}
 #wardrobe .wardrobe-layout{grid-template-columns:.8fr 1.2fr}#wardrobe .wardrobe-model{position:sticky;top:0;align-self:start;border-radius:24px 0 0 24px}#wardrobe-preview{height:160px}
}