* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #04020c; color: #dfe8ff;
  font-family: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; position: fixed; inset: 0; }

.overlay {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  padding: 16px; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(ellipse at center, rgba(4,2,12,.25) 0%, rgba(4,2,12,.8) 75%);
}
.overlay.show { opacity: 1; }

.logo {
  font-size: clamp(48px, 12vw, 128px); font-weight: 900; letter-spacing: .12em;
  background: linear-gradient(90deg, #50f0ff, #a070ff 50%, #ff3cc8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(120,120,255,.7));
  animation: hue 6s linear infinite;
}
@keyframes hue { to { filter: drop-shadow(0 0 18px rgba(120,120,255,.7)) hue-rotate(360deg); } }
.tag { font-size: clamp(11px, 2.4vw, 16px); letter-spacing: .35em; color: #9fb4ff; text-transform: uppercase; }

.how {
  display: flex; flex-direction: column; gap: 10px; margin: 18px 0 8px;
  max-width: 560px; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 15px; text-align: left;
}
.how div { display: flex; align-items: center; gap: 14px; }
.how span { color: #c8d4f5; }
kbd {
  flex: 0 0 96px; text-align: center; padding: 6px 0; border-radius: 6px;
  font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: #50f0ff; border: 1px solid rgba(80,240,255,.6); box-shadow: 0 0 12px rgba(80,240,255,.35) inset;
}
kbd.gold { color: #ffd25a; border-color: rgba(255,210,90,.6); box-shadow: 0 0 12px rgba(255,210,90,.3) inset; }
kbd.red  { color: #ff3c6e; border-color: rgba(255,60,110,.6); box-shadow: 0 0 12px rgba(255,60,110,.3) inset; }

.blink { margin-top: 10px; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: #fff; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.best { font-size: 14px; letter-spacing: .2em; color: #ffd25a; }
.small { font-size: 11px; letter-spacing: .15em; color: #7080a8; }

h2 {
  font-size: clamp(22px, 5vw, 44px); font-weight: 900; letter-spacing: .15em; color: #ff3cc8;
  text-shadow: 0 0 20px rgba(255,60,200,.8);
}
.big { font-size: clamp(56px, 14vw, 120px); font-weight: 900; color: #fff; text-shadow: 0 0 30px rgba(80,240,255,.9); }
.newbest { display: none; font-weight: 900; letter-spacing: .3em; color: #ffd25a; text-shadow: 0 0 16px rgba(255,210,90,.9); animation: blink .6s ease-in-out infinite; }
.newbest.show { display: block; }
.stats { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 15px; color: #9fb4ff; letter-spacing: .05em; }

@media (max-width: 520px) {
  .how { font-size: 13px; }
  kbd { flex-basis: 76px; font-size: 10px; }
}