*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#071b2a}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071b2a;touch-action:none}
canvas{display:block;width:100%;height:100%;touch-action:none}
#hud{position:fixed;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:linear-gradient(180deg,rgba(2,12,22,.82),transparent);pointer-events:none}
.brand-small{font-weight:1000;letter-spacing:1px;font-size:clamp(12px,2.3vw,19px);text-shadow:0 2px 5px #000}
.brand span,.brand-small span{color:#50e2b0}
.scoreboard{display:flex;gap:10px;align-items:center;background:#061621d9;border:1px solid #ffffff30;border-radius:10px;padding:7px 12px;font-size:clamp(10px,2vw,15px);font-weight:800}
.scoreboard strong{font-size:clamp(16px,3vw,24px);color:#50e2b0}
#clock{font-weight:900;font-variant-numeric:tabular-nums;background:#061621b8;padding:6px 9px;border-radius:8px}
.top-button{pointer-events:auto;border:1px solid #ffffff55;border-radius:9px;color:white;background:#061621d9;padding:8px 12px;font-size:18px}
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#153d4bde,#03101aee);padding:18px}
.hidden{display:none!important}
.menu-card{width:min(440px,95vw);text-align:center;padding:26px 22px;border:1px solid #7affd655;border-radius:22px;background:linear-gradient(145deg,#102e3bee,#071723f5);box-shadow:0 20px 70px #0009}
.brand{font-size:clamp(32px,8vw,54px);font-weight:1000;letter-spacing:1px;line-height:1.05}
.subtitle{font-size:11px;letter-spacing:2px;color:#b7d7dc;margin:10px 0 22px}
.preview-stats{display:flex;justify-content:center;gap:10px;margin:22px 0}
.preview-stats div{display:flex;flex-direction:column;gap:4px;background:#ffffff0b;border:1px solid #ffffff1b;border-radius:12px;padding:12px 9px;min-width:76px}
.preview-stats b{font-size:23px;color:#50e2b0}.preview-stats small{font-size:9px;color:#b7d7dc}
button{font:inherit;cursor:pointer;touch-action:manipulation}
.primary,.secondary{width:100%;border:0;border-radius:12px;padding:15px 16px;font-weight:1000;letter-spacing:1px}
.primary{background:#50e2b0;color:#04251e;box-shadow:0 5px 0 #208e70}
.secondary{margin-top:10px;background:#ffffff12;color:#fff;border:1px solid #ffffff30}
.hint,.small{font-size:11px;color:#b7cbd1;line-height:1.5}.hint{margin:20px 0 0}.small{max-width:260px;margin:8px auto}
#controls{position:fixed;z-index:5;inset:auto 0 0 0;height:35%;min-height:130px;display:none;align-items:flex-end;justify-content:space-between;padding:12px 18px 18px;pointer-events:none}
#controls.active{display:flex}
#joystick{width:clamp(90px,18vw,140px);height:clamp(90px,18vw,140px);border-radius:50%;background:#06162166;border:2px solid #ffffff55;position:relative;pointer-events:auto;touch-action:none;box-shadow:inset 0 0 20px #0004}
#stick{position:absolute;width:42%;height:42%;left:29%;top:29%;border-radius:50%;background:#e9fff6cc;border:2px solid #50e2b0;box-shadow:0 4px 12px #0008}
.action-buttons{display:grid;grid-template-columns:repeat(2,clamp(64px,13vw,92px));gap:8px;pointer-events:auto}
.action{min-height:clamp(45px,8vw,60px);border-radius:50%;border:1px solid #ffffff77;background:#071b2ad9;color:#fff;font-size:clamp(9px,1.7vw,12px);font-weight:900;box-shadow:0 4px 12px #0005;touch-action:none}
.action:active{transform:scale(.95);background:#1d6655}
.action.shoot{background:#50e2b0;color:#05231c;border-color:#baffeb}
#message{position:fixed;z-index:6;left:50%;top:20%;transform:translateX(-50%);font-weight:1000;font-size:clamp(18px,4vw,32px);text-shadow:0 3px 10px #000;pointer-events:none;text-align:center}
#fullScreenHint{display:none;position:fixed;z-index:7;bottom:4px;left:50%;transform:translateX(-50%);font-size:10px;color:#fff;background:#061621bd;padding:5px 8px;border-radius:6px;white-space:nowrap}
#loading{z-index:20}
@media (orientation:portrait){#fullScreenHint{display:block}#controls{height:31%;padding:8px 10px 12px}#joystick{width:92px;height:92px}.action-buttons{grid-template-columns:repeat(2,64px);gap:6px}.action{min-height:44px}}