#phone-hud{display:none}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
 body.playing{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
 body.playing #hud,body.playing #arcade-strip,body.playing .credits-link,body.playing #fullscreen,body.playing .play-help{display:none!important}
 body.playing #phone-hud{position:fixed;z-index:12;top:0;left:0;right:0;height:48px;padding:0 220px 0 max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:16px;background:#0b211ee8;border-bottom:1px solid #c8a86e55;font:bold 12px monospace;color:#ffe3a2;pointer-events:none;white-space:nowrap}
 #phone-health{color:#ffa58f}#phone-bonus{color:#bdecd2;font-size:10px}
 body.playing .topbar{position:fixed;inset:0 max(6px,env(safe-area-inset-right)) auto auto;margin:0;height:48px;z-index:14;padding:0;background:none}
 body.playing .top-actions{gap:5px;height:48px;align-items:center;pointer-events:auto!important}
 body.playing .top-actions .icon-button{position:relative;z-index:20;width:48px;height:44px;min-height:44px;padding:0;font-size:21px;line-height:40px;border:1px solid #d7b36538;border-radius:10px;background:#10251dcc;pointer-events:auto!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 body.playing .top-actions .icon-button span{display:none}
 body.playing .top-actions .icon-button[aria-pressed="false"]{color:#ff9a7d;background:#4a1717c7;border-radius:8px;box-shadow:inset 0 0 0 1px #ff9a7d66}
 body.playing .top-actions .icon-button[aria-disabled="true"]{color:#a7ada8;background:#1d2522c7;box-shadow:inset 0 0 0 1px #a7ada844}
 body.playing .boss-hud{top:39px;bottom:auto;left:25%;right:25%;padding:2px 8px;background:#10251dba;border-radius:5px}
 body.playing .boss-hud>span{font-size:11px}.boss-hud>div{height:7px;margin:3px 0}.boss-hud small{font-size:9px;line-height:11px;display:block}
 body.playing .touch{bottom:max(12px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));align-items:flex-end}
 body.playing #mobile-pad{width:clamp(136px,25vw,154px);height:clamp(136px,25vw,154px)}body.playing #mobile-knob{width:58px;height:58px}
 body.playing .touch button{width:76px;height:76px;font-size:15px;font-weight:900;letter-spacing:.7px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 body.playing .touch button[data-key=KeyX]{width:86px;height:86px}
 body.playing .touch>div{gap:14px}
 body.playing .chapter h2{font-size:25px;margin:8px}.chapter p{font-size:12px}.toast{font-size:12px;padding:8px 12px}
}

@media(pointer:coarse){
 .top-actions{position:relative;z-index:30;pointer-events:auto!important}.top-actions .icon-button{position:relative;z-index:31;min-width:48px;min-height:44px;touch-action:manipulation;pointer-events:auto!important;-webkit-tap-highlight-color:transparent}.top-actions .icon-button[aria-pressed="false"]{color:#ff9a7d;background:#4a1717c7;border-color:#ff9a7d88}.top-actions .icon-button[aria-disabled="true"]{color:#a7ada8;background:#1d2522;border-color:#a7ada855}
 #mobile-pad{overflow:hidden;border:3px solid #e0c47ca8;background:radial-gradient(circle at 50% 45%,#315440d9 0 25%,#18382dd9 26% 58%,#091d18e8 59%);box-shadow:inset 0 0 0 5px #07150f80,inset 0 0 28px #0009,0 5px 0 #08120e,0 8px 24px #0009;-webkit-touch-callout:none}
 #mobile-pad:before,#mobile-pad:after{content:'';position:absolute;background:#d5bb7650;pointer-events:none}#mobile-pad:before{left:13%;right:13%;top:50%;height:1px}#mobile-pad:after{top:13%;bottom:13%;left:50%;width:1px}
 #mobile-pad .pad-arrows{position:absolute;inset:0;display:block;line-height:1;font-size:20px;color:#ffe7ab99}
 .pad-arrows b{position:absolute;width:28px;height:28px;display:grid;place-items:center;font-weight:800;filter:drop-shadow(0 2px 3px #000)}
 .pad-left{left:7px;top:50%;transform:translateY(-50%)}
 .pad-right{right:7px;top:50%;transform:translateY(-50%)}
 .pad-down{bottom:7px;left:50%;transform:translateX(-50%)}
 #mobile-knob{z-index:2;background:radial-gradient(circle at 38% 30%,#fff0b9,#d3a94e 43%,#72501e 100%);border:3px solid #fff0bb;box-shadow:inset -5px -7px 10px #5d3c1c99,inset 4px 5px 8px #fff5c966,0 5px 10px #000b;will-change:transform;transition:box-shadow .08s}
 #mobile-pad.is-active #mobile-knob{box-shadow:inset -3px -4px 8px #5d3c1caa,inset 2px 3px 5px #fff5c944,0 2px 5px #000c}
 .touch-actions button{background:radial-gradient(circle at 38% 28%,#476c53,#183d30 56%,#0b241b);border:3px solid #e5c97c;box-shadow:inset 0 3px 3px #fff4c53d,inset 0 -6px 8px #06160f,0 5px 0 #071811,0 8px 22px #000b;text-shadow:0 2px 2px #000}
 .touch-actions button[data-key=KeyX]{background:radial-gradient(circle at 38% 28%,#d18a49,#81391f 57%,#431d13)}
 .touch-actions button:active{transform:translateY(4px);box-shadow:inset 0 4px 8px #0008,0 1px 0 #071811}
 #landscape-hint{background:radial-gradient(circle at 50% 35%,#234c3d,#071a14 72%);padding:max(28px,env(safe-area-inset-top)) max(30px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(30px,env(safe-area-inset-left))}
 #landscape-hint strong{font-size:clamp(28px,7vw,44px);color:#ffe2a0;text-shadow:0 4px 16px #000}#landscape-hint p{max-width:580px;font-size:16px}#landscape-hint button{min-width:250px;border:2px solid #ffe2a0;border-radius:999px;font-weight:900;letter-spacing:1px;box-shadow:0 5px 0 #714718,0 10px 30px #0008}
}

@media(pointer:coarse) and (orientation:landscape) and (max-height:430px){body.playing #mobile-pad{width:132px;height:132px}body.playing #mobile-knob{width:52px;height:52px}body.playing .touch button{width:68px;height:68px}body.playing .touch button[data-key=KeyX]{width:78px;height:78px}}

/* Gestures belong to the game during play; menus retain normal page behavior. */
body.playing,body.playing #game,body.playing .touch,body.playing .top-actions,body.playing .top-actions button{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
