:root { --bg:#0b1020; --panel:#141a33; --accent:#6cf; --text:#eef2ff; --muted:#99a1c0; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #000000; color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; overflow: hidden; }
#ui { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.controls { display: flex; gap: 12px; align-items: center; padding: 8px 12px; background: rgba(20,26,51,.7); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.controls label { color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.controls input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--text); font-weight: 600; }
.controls button { padding: 8px 14px; border-radius: 8px; border: 0; color: #0b1020; background: linear-gradient(180deg, #7fd0ff, #3fb2ff); font-weight: 800; letter-spacing: .3px; cursor: pointer; box-shadow: 0 4px 10px rgba(63,178,255,.45); }
.controls button:active { transform: translateY(1px); }
#countdown, #winner { position: fixed; inset: 0; display: grid; place-items: center; font-weight: 800; color: white; text-shadow: 0 8px 50px rgba(0,0,0,.6); pointer-events: none; }
#countdown.hidden, #winner.hidden { display: none; }
#countdown { font-size: clamp(40px, 12vw, 160px); }
#winner { font-size: clamp(24px, 6vw, 64px); }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
/* HUD */
.hud { position: fixed; top: 12px; left: 12px; z-index: 11; padding: 6px 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: var(--text); font-weight: 800; letter-spacing: .3px; backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.hud.hidden { display: none; }

/* Mute button */
#muteBtn { position: fixed; top: 12px; right: 12px; z-index: 12; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.35); color: var(--text); font-weight: 800; letter-spacing: .3px; backdrop-filter: blur(6px); cursor: pointer; }
#muteBtn:active { transform: translateY(1px); }