:root{--ink:#f6ead0;--muted:#c7b99d;--gold:#e5b950;--red:#8f2f2b;--panel:#241a12f2;--border:#8b7655}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#20170f;color:var(--ink);font-family:Georgia,"Times New Roman",serif;user-select:none}
button{font:inherit}
.escapee-game-stage{position:relative;width:100%;height:var(--escapee-vh,100dvh);overflow:hidden;background:#6d5638}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;z-index:4;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(64px,calc(env(safe-area-inset-right) + 54px));display:grid;grid-template-columns:repeat(6,minmax(55px,1fr));gap:5px;pointer-events:none}
.hud>div{min-width:0;padding:6px 8px;border:1px solid #ead4a52b;border-radius:9px;background:#1b130de3;box-shadow:0 7px 18px #0005;text-align:center;backdrop-filter:blur(5px)}
.hud small{display:block;color:#cdbb9a;font:700 8px/1.1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.hud strong{display:block;overflow:hidden;margin-top:2px;color:#fff3d5;font:900 clamp(13px,2.5vw,18px)/1 system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.battle-call{position:absolute;z-index:5;top:max(72px,calc(env(safe-area-inset-top) + 68px));left:50%;max-width:calc(100% - 32px);padding:7px 13px;border:1px solid #e7c77843;border-radius:999px;background:#21150ee6;color:#ffde87;font:900 12px/1 system-ui,sans-serif;letter-spacing:.04em;text-align:center;transform:translateX(-50%);opacity:0;transition:opacity .16s;pointer-events:none;white-space:nowrap}
.battle-call.show{opacity:1}
.touch-controls{position:absolute;z-index:6;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.touch-controls button{pointer-events:auto;touch-action:none}
.joystick{position:relative;width:94px;height:94px;border:2px solid #f4e1b477;border-radius:50%;background:#2a1c13ba;box-shadow:inset 0 0 0 22px #5f46366b,0 8px 28px #0006}
.joystick:after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;border-radius:50%;background:#d8c3a095;transform:translate(-50%,-50%)}
.maneuver{display:grid;place-items:center;width:96px;height:96px;border:3px solid #f2d279;border-radius:50%;background:#7d2c27e8;color:#fff2cb;font:900 14px/1 system-ui,sans-serif;box-shadow:0 8px 28px #0007,inset 0 0 0 5px #35171155}
.maneuver span{display:block;letter-spacing:.08em}.maneuver small{display:block;margin-top:-15px;color:#f4dca3;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.maneuver.active{background:#a53b31;transform:scale(.95)}.maneuver.cooldown{opacity:.5}
.overlay{position:absolute;z-index:9;inset:0;display:grid;place-items:center;padding:max(68px,calc(env(safe-area-inset-top) + 60px)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow:auto;background:radial-gradient(circle at 50% 42%,#795d3a73,#140d09f2 70%);backdrop-filter:blur(6px)}
.panel{width:min(720px,100%);padding:clamp(22px,5vw,38px);border:1px solid #d9bc7d3d;border-radius:18px;background:var(--panel);box-shadow:0 28px 84px #000a;text-align:center}
.eyebrow{margin:0 0 8px;color:var(--gold);font:900 11px/1.2 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.panel h1,.panel h2{margin:0 0 13px;color:#f8ecd1;line-height:.92;text-shadow:0 3px 0 #0005}.panel h1{font-size:clamp(40px,10vw,76px);letter-spacing:-.04em}.panel h2{font-size:clamp(30px,8vw,50px)}
.panel p{max-width:600px;margin:0 auto 18px;color:var(--muted);line-height:1.5}.panel .lead{font-size:clamp(15px,3.5vw,19px)}
.formation-demo{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin:21px 0;color:#b94336;font:900 clamp(14px,4vw,24px)/1 ui-monospace,monospace;letter-spacing:1px}.formation-demo .center{margin-top:14px;color:#d8a93f}
.primary{min-width:220px;min-height:54px;margin:4px 0;padding:12px 22px;border:1px solid #f9dc90;border-radius:11px;background:linear-gradient(#d4ab4f,#a7792d);color:#1f150a;font:950 15px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 5px 0 #654516,0 12px 30px #0006}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #654516,0 8px 20px #0006}.primary:focus-visible,.upgrade:focus-visible{outline:3px solid #fff0b5;outline-offset:3px}
.controls-copy{margin-top:19px!important;color:#b9aa8e!important;font:600 12px/1.55 system-ui,sans-serif}
.upgrade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px}.upgrade{min-height:146px;padding:15px;border:1px solid #a990684a;border-radius:13px;background:#302116;color:#f6ead0;text-align:left;cursor:pointer}.upgrade:hover{background:#3b281a}.upgrade strong{display:block;color:#e8bf64;font:900 16px/1.15 system-ui,sans-serif}.upgrade span{display:block;margin-top:8px;color:#cbbca2;font:600 12px/1.4 system-ui,sans-serif}.upgrade em{display:block;margin-top:11px;color:#9db388;font:900 9px/1 system-ui,sans-serif;font-style:normal;letter-spacing:.11em;text-transform:uppercase}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.results-grid>div{padding:13px;border:1px solid #e6c77726;border-radius:11px;background:#17100bb5}.results-grid small{display:block;color:#bfae91;font:800 9px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}.results-grid strong{display:block;margin-top:4px;color:#f3d16f;font:900 24px/1 system-ui,sans-serif}
@media(hover:hover) and (pointer:fine){.touch-controls{display:none}}
@media(max-width:620px){.hud{grid-template-columns:repeat(3,minmax(0,1fr));right:max(60px,calc(env(safe-area-inset-right) + 50px))}.hud .wide{grid-column:auto}.battle-call{top:max(114px,calc(env(safe-area-inset-top) + 110px));font-size:10px}.panel{padding:22px}.upgrade-grid{grid-template-columns:1fr}.upgrade{min-height:86px}.results-grid{grid-template-columns:1fr 1fr}.results-grid>div:last-child{grid-column:1/-1}}
@media(max-width:350px){.hud{gap:3px}.hud>div{padding:5px}.hud strong{font-size:12px}.hud small{font-size:7px}.joystick{width:82px;height:82px}.maneuver{width:84px;height:84px}}
@media(max-height:520px) and (orientation:landscape){.hud{top:max(6px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:auto;grid-template-columns:repeat(2,66px);gap:3px}.hud>div{padding:4px 6px}.hud small{font-size:7px}.hud strong{font-size:12px}.battle-call{top:max(8px,env(safe-area-inset-top));font-size:10px}.touch-controls{bottom:max(8px,env(safe-area-inset-bottom))}.joystick,.maneuver{width:66px;height:66px}.joystick:after{width:28px;height:28px}.maneuver{font-size:10px}.maneuver small{font-size:7px;margin-top:-9px}.overlay{align-items:start;padding-top:max(48px,calc(env(safe-area-inset-top) + 44px))}.panel{padding:14px 20px}.panel h1{font-size:38px}.panel h2{font-size:28px}.panel p{margin-bottom:10px;font-size:12px}.formation-demo{margin:10px 0}.primary{min-height:46px}.controls-copy{margin-top:10px!important}.upgrade-grid{grid-template-columns:repeat(3,1fr);gap:7px}.upgrade{min-height:88px;padding:10px}.upgrade strong{font-size:13px}.upgrade span{font-size:9px;margin-top:4px}.upgrade em{margin-top:6px}.results-grid{margin:9px 0}}
@media(prefers-reduced-motion:reduce){.battle-call{transition:none}}