* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  background: #070a1c;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#game { position: fixed; inset: 0; display: block; }

.overlay {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(5, 7, 20, 0.72);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.overlay.on { display: flex; }

.panel { text-align: center; padding: 24px; animation: pop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.86); opacity: 0; } }

.logo {
  font-size: clamp(38px, 8vw, 72px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: .04em;
  color: #22d3ee;
  text-shadow: 0 0 24px rgba(34, 211, 238, .8), 0 4px 0 rgba(0,0,0,.4);
}
.logo span { color: #f472b6; text-shadow: 0 0 24px rgba(244, 114, 182, .8), 0 4px 0 rgba(0,0,0,.4); }
.logo.small { font-size: clamp(30px, 6vw, 52px); }

.tag { margin-top: 8px; color: #94a3b8; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }

button.big {
  margin-top: 28px;
  font: inherit;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .1em;
  color: #071018;
  background: linear-gradient(135deg, #22d3ee, #4ade80);
  border: 0; border-radius: 14px;
  padding: 16px 44px;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(34, 211, 238, .55), 0 6px 0 rgba(0,0,0,.35);
  transition: transform .1s;
}
button.big:hover { transform: scale(1.05); }
button.big:active { transform: scale(.97); }

.help { margin-top: 26px; color: #cbd5e1; font-size: 14px; line-height: 2; font-weight: 600; }
.help .keys { color: #64748b; font-size: 12px; }
.best { margin-top: 18px; color: #facc15; font-weight: 800; letter-spacing: .15em; }

#mute {
  position: fixed; z-index: 20;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  font-size: 20px; line-height: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
#mute:hover { background: rgba(255,255,255,.16); }