* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020202; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #eee8df; }
canvas { display: block; width: 100%; height: 100%; }
.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.title {
  position: fixed; top: clamp(24px, 5vw, 60px); left: 50%; transform: translateX(-50%);
  margin: 0; white-space: nowrap; font-size: clamp(11px, 1.3vw, 15px); font-weight: 600;
  letter-spacing: .48em; text-transform: uppercase; color: rgba(255,255,255,.48);
  text-shadow: 0 0 24px rgba(255,151,72,.18); pointer-events: none;
}
.scoreboard {
  position: fixed; top: clamp(72px, 10vw, 105px); left: 50%; transform: translateX(-50%);
  display: flex; gap: clamp(28px, 7vw, 72px); text-align: center; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.metric { min-width: 70px; }
.metric span { display: block; margin-bottom: 6px; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.27); }
.metric strong { font-size: clamp(18px, 2.5vw, 28px); font-weight: 500; letter-spacing: .12em; color: rgba(255,236,219,.8); }
.panel {
  position: fixed; top: 31%; left: 50%; width: min(88vw, 430px); transform: translate(-50%, -50%);
  text-align: center; transition: opacity .22s ease, transform .22s ease; pointer-events: none;
}
.panel.hidden { opacity: 0; transform: translate(-50%, -46%); }
.panel h2 { margin: 0 0 11px; font-size: clamp(25px, 5vw, 46px); font-weight: 650; letter-spacing: -.035em; color: #f0dfd0; }
.panel p { margin: 0; font-size: clamp(11px, 1.6vw, 14px); line-height: 1.65; letter-spacing: .08em; color: rgba(255,255,255,.42); }
.key {
  display: inline-block; min-width: 28px; margin: 0 3px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px; color: rgba(255,255,255,.65); box-shadow: inset 0 -2px rgba(255,255,255,.05);
}
.hint {
  position: fixed; bottom: clamp(18px, 4vw, 42px); left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.25);
  transition: opacity .8s ease; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hint { display: none; } }