/* Two stable thumb zones, kept clear of the home indicator and screen corners. */
.touch-controls{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));align-items:flex-end;gap:12px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-controls .direction-pad{display:grid;grid-template:repeat(3,52px)/repeat(3,52px);gap:0;pointer-events:auto;touch-action:none;border-radius:28px;background:#0b20354d}
.touch-controls button{padding:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-weight:750}
.direction-pad button{width:52px;height:52px;border-radius:17px;font-size:25px}
.direction-pad [data-key="up"]{grid-area:1/2}.direction-pad [data-key="left"]{grid-area:2/1}.direction-pad [data-key="right"]{grid-area:2/3}.direction-pad [data-key="down"]{grid-area:3/2}
.vertical-direction{visibility:hidden}body[data-level="3"] .vertical-direction,body[data-free-move="true"] .vertical-direction{visibility:visible}
.touch-controls .action-controls{display:flex;align-items:flex-end;gap:8px;padding-bottom:18px}
.action-controls button{width:62px;height:62px;font-size:13px;letter-spacing:.1px}
.action-controls .jump{width:80px;height:80px;margin-bottom:24px;font-size:15px;background:#ffc19aec;border:2px solid #ffddc4;box-shadow:0 4px 18px #0005}
.touch-controls button.is-held{background:#9be8d9;color:#112633;border-color:#d7fff3;box-shadow:0 0 0 3px #baf6e82b,inset 0 3px 8px #163a4b4d}
.touch-controls .jump.is-held{background:#ffe4cc;border-color:#fff2e2}
body:not([data-mode="playing"]) .touch-controls{display:none}
@media(any-pointer:coarse){
 body[data-mode="playing"] .touch-controls{display:flex}
 body[data-mode="playing"] .scene-caption{display:none}
 #toast{bottom:180px;max-width:90%}
 .controls{display:none}
}
@media(max-width:360px){
 .touch-controls{left:8px;right:8px;gap:8px}
 .touch-controls .direction-pad{grid-template:repeat(3,44px)/repeat(3,44px)}
 .direction-pad button{width:44px;height:44px}
 .action-controls button{width:52px;height:52px;font-size:12px}
 .action-controls .jump{width:72px;height:72px;font-size:14px}
}
@media(any-pointer:coarse) and (orientation:landscape) and (max-height:600px){
 main{padding:0 max(8px,env(safe-area-inset-left)) 0 max(8px,env(safe-area-inset-right))}
 header{height:48px}.chapter{display:none}footer{display:none}
 #stage{height:calc(100svh - 56px);max-height:none;aspect-ratio:auto}
 .hud{inset:8px 12px auto}.hud>div{padding:6px 10px}
 .intro{padding:12px 0}.intro h1{font-size:46px;margin:8px 0}.intro p{font-size:14px;line-height:1.4;margin:10px 0}.start-note{margin-top:12px}
 .primary{padding:12px 20px}
}
