html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b1115;color:#eef5ef;font-family:Inter,system-ui,sans-serif}
*{box-sizing:border-box}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.escapee-game-stage{position:relative;width:100%;height:var(--escapee-vh,100dvh);overflow:hidden;background:#10191e}
canvas{width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,520px);padding:28px;border:1px solid #52626b;border-radius:22px;background:rgba(13,22,27,.96);box-shadow:0 22px 80px #0009;text-align:center;z-index:8}
h1,h2{margin:.2em 0}.eyebrow{letter-spacing:.18em;font-size:.72rem;color:#9ad6ba;font-weight:800}.small{font-size:.82rem;color:#aebbc1;line-height:1.5;margin:.45rem 0}
.role-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.role-buttons button,.result button,.tray button,.shop button{min-height:48px;border:1px solid #789080;border-radius:12px;background:#20372d;color:#fff;font-weight:750;padding:10px}
.role-buttons button:focus-visible,.result button:focus-visible,.tray button:focus-visible,.shop button:focus-visible,.touch-action:focus-visible{outline:3px solid #b9efcf;outline-offset:2px}
.hud{position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(62px,env(safe-area-inset-right));display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.hud>div{background:#0c151bd9;border:1px solid #42525c;border-radius:10px;padding:7px 10px;font-size:.78rem;font-weight:700}.hud .control-hint{flex-basis:100%;width:max-content;max-width:min(680px,calc(100vw - 90px));color:#c7d7cf;font-weight:600}
.joystick{position:absolute;z-index:5;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:92px;height:92px;border-radius:50%;border:2px solid #a8c3b260;background:#13252bd9;touch-action:none}
.joystick:after{content:"";position:absolute;width:38px;height:38px;left:25px;top:25px;border-radius:50%;background:#b9d6c4aa}
.touch-action{position:absolute;z-index:6;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));min-width:88px;min-height:58px;border:1px solid #9db6a7;border-radius:16px;background:#244233f2;color:#fff;font-weight:800;padding:8px 14px}
.ability-btn{background:#643c2df2}.tray,.shop{position:absolute;z-index:7;right:max(10px,env(safe-area-inset-right));bottom:max(88px,calc(env(safe-area-inset-bottom) + 88px));width:min(350px,92vw);max-height:55vh;overflow:auto;padding:10px;border:1px solid #53656e;border-radius:16px;background:#101a20f5;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;box-shadow:0 18px 50px #0008}
#buildBtn:not(.hidden)~#tray.hidden{display:grid!important}
.tray button,.shop button{text-align:left;font-size:.78rem}.tray button span,.shop button span{display:block;color:#aab7bc;font-weight:500;font-size:.68rem;margin-top:3px}.tray button.selected{border-color:#b9efcf;background:#315643}
.placement-status{position:absolute;z-index:6;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(620px,75vw);padding:9px 14px;border:1px solid #62776c;border-radius:12px;background:#0c151be8;color:#ecf7f0;font-size:.8rem;font-weight:700;text-align:center;pointer-events:none;box-shadow:0 8px 28px #0007}
.result{z-index:9}
@media (hover:hover) and (pointer:fine){.joystick{display:none!important}.touch-action{min-height:48px;bottom:18px}.tray,.shop{bottom:78px}.placement-status{bottom:22px;max-width:55vw}}
@media (max-width:600px) and (orientation:portrait){.hud{right:12px}.hud>div{font-size:.68rem;padding:5px 7px}.hud .control-hint{display:none}.panel{padding:22px}.role-buttons{grid-template-columns:1fr}.tray,.shop{grid-template-columns:1fr 1fr}.placement-status{bottom:92px;max-width:86vw}}