:root { color-scheme: dark; --panel: rgba(12,18,32,.82); --text: #f4f7ff; --muted: #9ca8c4; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050814; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--text); touch-action: none; }
#shell { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #17203b, #060812 70%); }
#game { width: 100vw; height: 100vh; display: block; image-rendering: auto; }
#hud { position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; text-shadow: 0 2px 10px #000; }
#hud strong { display: block; font-size: clamp(14px, 2.7vw, 20px); letter-spacing: .02em; }
#objective { color: var(--muted); font-size: clamp(11px, 2.3vw, 14px); }
#ammoBar { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; max-width: 58vw; pointer-events: auto; }
.ammo { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 9px; background: var(--panel); color: var(--text); font-weight: 800; font-size: 12px; display: flex; gap: 6px; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.ammo.selected { outline: 2px solid white; transform: translateY(1px); }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 12px currentColor; }
#message { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.97); width: min(92vw, 560px); max-height: 86vh; overflow: auto; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(7,10,20,.92); box-shadow: 0 24px 80px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: .16s ease; backdrop-filter: blur(10px); }
#message.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
#message h1 { margin: 0 0 8px; font-size: clamp(28px, 8vw, 54px); }
#message p, #message li { color: #cbd4ed; line-height: 1.4; }
#message ul { padding-left: 20px; }
#startBtn { width: 100%; margin-top: 8px; border: 0; border-radius: 16px; padding: 14px 18px; font-size: 18px; font-weight: 900; color: #07101d; background: linear-gradient(135deg, #8df3ff, #ffe371); }
.stick { position: fixed; width: 118px; height: 118px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); display: none; pointer-events: auto; box-shadow: inset 0 0 25px rgba(255,255,255,.04); }
.stick span { position: absolute; left: 39px; top: 39px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#touchMove { left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); }
#touchAim { right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); }
.roundBtn { position: fixed; right: max(48px, calc(env(safe-area-inset-right) + 48px)); bottom: max(156px, calc(env(safe-area-inset-bottom) + 156px)); width: 86px; height: 58px; display: none; border: 0; border-radius: 999px; background: #ffcf4a; color: #160b00; font-weight: 1000; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.smallBtn { position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(76px, calc(env(safe-area-inset-top) + 76px)); display: none; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 9px 12px; background: var(--panel); color: white; font-size: 18px; }
@media (pointer: coarse), (max-width: 760px) { .stick, .roundBtn, .smallBtn { display: block; } .desktopHelp { display: none; } #hud { align-items: flex-start; } .ammo { padding: 9px 10px; font-size: 11px; } }
#message.show ~ .stick, #message.show ~ .roundBtn, #message.show ~ .smallBtn { display: none !important; }
@media (pointer: fine) and (min-width: 761px) { .mobileHelp { display: none; } }