:root{--ink:#f7edd7;--muted:#d0bea0;--gold:#e1b64e;--red:#9f342c;--panel:#241b16f2}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#503b29;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none}
button{font:inherit}.escapee-game-stage{position:relative;width:100%;height:var(--escapee-vh,100dvh);overflow:hidden;background:#6a5238}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(58px,1fr));gap:6px;pointer-events:none}.hud>div{min-width:0;padding:7px 9px;border:1px solid #fff2;border-radius:11px;background:#1b1512d9;box-shadow:0 7px 22px #0005;backdrop-filter:blur(7px);text-align:center}.hud small{display:block;color:#cdbb9d;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.hud strong{display:block;overflow:hidden;font-size:clamp(13px,2.6vw,18px);text-overflow:ellipsis;white-space:nowrap}#legionValue{color:#f0d798}#denariiValue{color:#f0c55d}#eagleValue{color:#fff0ad}
.battle-call{position:absolute;z-index:6;top:max(76px,calc(env(safe-area-inset-top) + 68px));left:50%;max-width:calc(100% - 32px);padding:8px 14px;border:1px solid #d4ad5c77;border-radius:999px;background:#241b16e8;color:#ffe5a4;font-size:12px;font-weight:950;letter-spacing:.05em;text-align:center;transform:translateX(-50%) translateY(-6px);opacity:0;transition:.16s;pointer-events:none}.battle-call.show{transform:translateX(-50%) translateY(0);opacity:1}
.touch-controls{position:absolute;z-index:5;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));pointer-events:none}.joystick{pointer-events:auto;width:92px;height:92px;border:2px solid #f5dfb566;border-radius:50%;background:#271e19b8;box-shadow:inset 0 0 0 22px #8f342b44,0 10px 28px #0005;touch-action:none}.joystick:after{content:"";display:block;width:34px;height:34px;margin:27px;border-radius:50%;background:#e5c36a99}
.overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:max(70px,calc(env(safe-area-inset-top) + 62px)) 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% 40%,#7f5e3d66,#140f0ddd 66%);backdrop-filter:blur(6px)}.panel{width:min(720px,100%);padding:clamp(22px,5vw,38px);border:1px solid #f4dfba2e;border-radius:25px;background:var(--panel);box-shadow:0 26px 84px #0009;text-align:center}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:11px;font-weight:950;letter-spacing:.17em;text-transform:uppercase}.panel h1,.panel h2{margin:0 0 12px;line-height:.95}.panel h1{font-family:Georgia,serif;font-size:clamp(42px,10vw,74px)}.panel h2{font-family:Georgia,serif;font-size:clamp(30px,8vw,50px)}.panel p{max-width:590px;margin:0 auto 18px;color:var(--muted);line-height:1.5}.panel small{display:block;margin-top:16px;color:#b7a88f}.primary{min-width:200px;min-height:52px;padding:12px 22px;border:1px solid #f3d98666;border-radius:14px;background:#b83f32;color:#fff6e7;font-weight:950;box-shadow:0 6px 0 #69271f;cursor:pointer}.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #69271f}.primary:focus-visible,.shop-card:focus-visible{outline:3px solid #f2d37c;outline-offset:3px}
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0}.shop-card{min-height:126px;padding:14px;border:1px solid #ead8b72b;border-radius:16px;background:#372820;color:var(--ink);text-align:left;cursor:pointer}.shop-card:hover:not(:disabled){background:#463127}.shop-card:disabled{opacity:.42;cursor:not-allowed}.shop-card strong{display:block;margin-bottom:6px;color:#f0cf7d;font-size:16px}.shop-card span{display:block;color:#d8c8ac;font-size:11px;line-height:1.4}.shop-card em{display:block;margin-top:10px;color:#f1bf4f;font-size:10px;font-style:normal;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.shop-panel .primary{margin-top:2px}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.results>div{padding:12px;border-radius:13px;background:#fff1}.results small{margin:0;color:#b8a98f;font-size:9px;font-weight:900;text-transform:uppercase}.results strong{display:block;font-size:27px}
@media(hover:hover) and (pointer:fine){.touch-controls{display:none}}
@media(max-width:680px){.hud{grid-template-columns:repeat(3,minmax(0,1fr));right:max(58px,calc(env(safe-area-inset-right) + 48px));gap:4px}.hud>div{padding:5px 7px}.battle-call{top:max(112px,calc(env(safe-area-inset-top) + 104px))}.shop-grid{grid-template-columns:1fr}.shop-card{min-height:80px}.panel{padding:22px}.results{grid-template-columns:1fr 1fr}.results>div:first-child{grid-column:span 2}}
@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,70px);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));left:50%}.touch-controls{bottom:max(8px,env(safe-area-inset-bottom))}.joystick{width:66px;height:66px}.joystick:after{width:26px;height:26px;margin:18px}.overlay{align-items:start;padding-top:max(50px,calc(env(safe-area-inset-top) + 44px))}.panel{padding:16px 20px}.panel h1{font-size:40px}.panel h2{font-size:28px}.panel p{margin-bottom:10px;font-size:12px}.shop-grid{grid-template-columns:repeat(3,1fr);gap:6px}.shop-card{min-height:92px;padding:9px}.shop-card strong{font-size:13px}.shop-card span{font-size:9px}.shop-card em{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.battle-call{transition:none}}