:root { --bg: #14121f; --accent: #ff3d7f; --text: #fff; }
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }

#lobby { height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px; text-align: center; }
#title { font-size: clamp(2.4rem, 9vw, 4.5rem); margin: 0; letter-spacing: .04em;
  color: var(--accent); text-shadow: 0 4px 0 rgba(0,0,0,.35); font-weight: 900; }
#tagline { margin: -6px 0 6px; opacity: .8; }
.avatar-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
#avatar-preview { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--accent); background: #2b2a45; }
input, button { font: inherit; font-size: 1.1rem; border-radius: 12px; border: 0; padding: 12px 16px; width: min(320px, 90vw); }
input { background: #2b2a45; color: var(--text); text-align: center; }
button { background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
button:active { transform: scale(.97); }
#colors { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#colors button { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 3px solid transparent; }
#colors button.active { border-color: #fff; }
#error { color: #ff6b6b; min-height: 1em; margin: 0; }
.hint { font-size: .85rem; opacity: .55; max-width: 360px; }

#game { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#canvas { display: block; touch-action: none; }

#touch { position: fixed; inset: 0; pointer-events: none; }
#stick { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: 32px; width: 140px; height: 140px;
  border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.2); pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; background: rgba(255,255,255,.35); }
#bomb-btn { position: absolute; right: max(28px, env(safe-area-inset-right)); bottom: 48px; width: 100px; height: 100px;
  border-radius: 50%; font-size: 2.6rem; padding: 0; pointer-events: auto; touch-action: none; opacity: .9; }