:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#f8fafc;background:#070513;touch-action:none;user-select:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:radial-gradient(circle at 50% 0,#4c1d9555,transparent 50%),#070513}
button{font:inherit;color:inherit}main{height:100dvh;display:grid;grid-template-rows:52px minmax(0,1fr) 42px;max-width:1600px;margin:auto;border-inline:1px solid #a855f755}
header,footer{display:flex;align-items:center;gap:13px;padding-inline:max(12px,env(safe-area-inset-left));background:#0d0920;border-color:#22d3ee;border-style:solid;border-width:0 0 1px}
header a{color:#67e8f9;text-decoration:none;font-weight:1000}header div{display:flex;gap:7px;align-items:baseline;margin-right:auto}header b{font-size:12px;letter-spacing:.18em;color:#fb7185}header strong{font-size:20px;letter-spacing:.05em}header button,footer button{border:1px solid #a855f7;border-radius:8px;background:#21133f;padding:7px 12px;font-weight:900}
.viewport{position:relative;min-height:0;overflow:hidden}.viewport canvas{display:block;width:100%;height:100%;background:#090716}
.top-hud{position:absolute;z-index:3;left:50%;top:8px;translate:-50% 0;display:flex;gap:8px;padding:6px 10px;border:1px solid #22d3ee88;border-radius:10px;background:#090716d8;backdrop-filter:blur(8px);font-size:9px;font-weight:900;white-space:nowrap}.top-hud span{display:grid;gap:2px;text-align:center}.top-hud b{font-size:14px;color:#fde047}.top-hud meter{width:100px;height:11px}
.message{position:absolute;z-index:4;left:50%;top:18%;translate:-50%;font-size:clamp(22px,5vw,52px);font-style:italic;font-weight:1000;letter-spacing:.04em;text-shadow:4px 4px 0 #c026d3,-3px -3px 0 #0891b2;opacity:0;scale:.4;transition:.18s;white-space:nowrap}.message.show{opacity:1;scale:1}
.touch-controls{position:absolute;z-index:5;inset:auto 0 max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;padding-inline:max(18px,env(safe-area-inset-left));pointer-events:none}.stick{position:relative;width:134px;height:134px;border:2px solid #67e8f988;border-radius:50%;background:#0f172a99;box-shadow:inset 0 0 25px #22d3ee30;pointer-events:auto;touch-action:none}.stick i{position:absolute;width:58px;height:58px;left:38px;top:38px;border:2px solid #e0f2fe;border-radius:50%;background:#06b6d4aa;box-shadow:0 0 25px #22d3ee}.stick span{position:absolute;left:50%;bottom:8px;translate:-50%;font-size:8px;font-weight:900}
.actions{display:flex;gap:14px;align-items:end;pointer-events:auto}.actions button{display:grid;place-items:center;width:84px;height:84px;border:3px solid #fff;border-radius:50%;font-size:27px;font-weight:1000;box-shadow:0 6px 0 #111,0 0 25px currentColor;touch-action:none}.actions button:active,.actions button.active{translate:0 5px;box-shadow:0 1px 0 #111,0 0 35px currentColor}.actions span{font-size:8px}.shoot{background:#db2777;color:#fff}.dash{background:#7c3aed;color:#fde047}
.orientation{display:none;position:absolute;inset:0;z-index:20;place-items:center;text-align:center;padding:20px;background:#090716ee;color:#67e8f9;font-size:22px;font-weight:1000}
footer{justify-content:space-between;border-width:1px 0 0;font-size:9px;color:#94a3b8;font-weight:800}
@media(hover:hover) and (pointer:fine){.touch-controls{opacity:.4}.stick{width:110px;height:110px}.stick i{left:30px;top:30px;width:46px;height:46px}.actions button{width:70px;height:70px}}
@media(orientation:portrait) and (max-width:560px){.orientation{display:none}.touch-controls{padding-inline:12px}.stick{width:112px;height:112px}.stick i{left:31px;top:31px;width:48px;height:48px}.actions{gap:8px}.actions button{width:70px;height:70px}}
@media(max-height:520px){main{grid-template-rows:38px minmax(0,1fr) 30px}header{height:38px}header strong{font-size:15px}footer{font-size:8px}.stick{width:106px;height:106px}.stick i{width:46px;height:46px;left:28px;top:28px}.actions button{width:68px;height:68px;font-size:22px}.top-hud{top:3px}.message{top:14%}}