/* CHIPTYPE — neon chip aesthetic per design handoff 2a/2b.
   Radius 0 everywhere; glows are the element's own color. */

:root {
  --bg: #070c1c;
  --bg-stall: #0c0714;
  --cyan: #00e5ff;
  --pink: #ff2e88;
  --white: #ffffff;
  --dim: #5a6b96;
  --dim-border: #2a4a7a;
  --faint: #16264a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #04060f;
  overflow: hidden;
  font-family: 'Silkscreen', monospace;
}

button { font: inherit; background: none; cursor: pointer; }

/* Back to the portfolio: the page is otherwise chrome-less. Badge styling
   per the menu spec (cyan border, Press Start 2P). */
#site-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 101;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--cyan);
  text-decoration: none;
  padding: 6px 10px;
  border: 2px solid var(--cyan);
  background: rgba(7, 12, 28, .8);
}
#site-link:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, .4);
}

/* ---------- Stage ---------- */

#stage-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage {
  position: relative;
  width: 960px;
  height: 600px;
  flex: 0 0 auto;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  border: 1px solid var(--faint);
  overflow: hidden;
  transform-origin: center center;
  transition: background-color 300ms;
}

#stage.stall {
  background-color: var(--bg-stall);
  background-image:
    linear-gradient(rgba(255, 46, 136, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 46, 136, .07) 1px, transparent 1px);
}

/* The shake uses the independent `translate` property: animating `transform`
   here would REPLACE the stage's scale() for the duration of the shake,
   snapping the whole stage to 1x and back on every miss. */
#stage.shake { animation: stage-shake 60ms linear 2; }
@keyframes stage-shake {
  25% { translate: 3px 0; }
  75% { translate: -3px 0; }
}

/* ---------- HUD ---------- */

#hud {
  position: absolute;
  top: 24px;
  left: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.hud-left { display: flex; align-items: center; gap: 10px; }

.hud-square { width: 10px; height: 10px; background: var(--pink); }

.hud-title {
  font-size: 16px;
  color: var(--white);
  letter-spacing: .06em;
}

.hud-track { font-size: 12px; color: var(--dim); }

.hud-center {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--white);
  letter-spacing: .1em;
  transition: color 300ms;
}
#stage.stall .hud-center { color: var(--pink); }

.hud-right { font-family: 'Press Start 2P', monospace; }

#hud-bpm {
  font-size: 16px;
  color: var(--white);
  text-shadow: 0 0 14px var(--cyan);
  transition: color 300ms;
}
#stage.stall #hud-bpm { color: var(--pink); text-shadow: 0 0 14px var(--pink); }

.hud-bpm-suffix { font-size: 9px; color: var(--cyan); }
#stage.stall .hud-bpm-suffix { color: var(--pink); }

/* ---------- Horizon ---------- */

#horizon { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

#horizon::before {
  content: '';
  position: absolute;
  top: 118px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cyan);
  opacity: .55;
  box-shadow: 0 0 8px var(--cyan);
  transition: background 300ms, box-shadow 300ms, opacity 300ms;
}
#stage.stall #horizon::before {
  background: var(--dim);
  opacity: .6;
  box-shadow: none;
}

.horizon-cap-start {
  position: absolute; top: 110px; left: 0;
  width: 1px; height: 17px; background: var(--dim);
}
.horizon-cap-end {
  position: absolute; top: 110px; right: 0;
  width: 3px; height: 17px; background: var(--pink);
}

#pace-tick {
  position: absolute; top: 112px; left: 0;
  width: 1px; height: 13px; background: var(--dim);
  transition: left 120ms linear;
}
#stage.stall #pace-tick {
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}

#pace-label {
  position: absolute; top: 128px; left: 0;
  font-size: 9px; color: var(--dim); letter-spacing: .1em;
  transform: translateX(-50%);
  transition: left 120ms linear;
}

#ghost-label {
  position: absolute; top: 80px; left: 0;
  font-size: 9px; color: var(--cyan); letter-spacing: .1em;
  opacity: .8;
  transform: translateX(-50%);
  transition: left 120ms linear;
}

/* Ghost: 7x7 sprite at 3px/pixel, drawn with box-shadow set from JS */
#ghost {
  position: absolute;
  top: 85px;      /* sprite pixels sit at +8 inside the padded glow image */
  left: -8px;
  width: 34px;    /* 18px sprite + 8px glow padding each side */
  height: 40px;
  background-repeat: no-repeat;
  /* No live filter, no box-shadow painting, and NO transform transition:
     discrete transitioned hops made Safari cycle the sprite's compositor
     layer at every transition end, which blinks. The ghost is driven
     per-frame from the animation loop, like the lane (which never flashed). */
  transform: translate(0px, 1px);
  transition: top 200ms, opacity 300ms;
}
#stage.stall #ghost {
  opacity: .55;
  top: 95px;
  z-index: 3;
}

/* Speed lines: a CHILD of the ghost, so they cannot detach from the sprite.
   Three parallel fading dashes (short, long, short) read as motion without
   the single-taper needle look. */
#ghost-trail {
  position: absolute;
  top: 19px;      /* sprite mid-height inside the padded image */
  left: -36px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .5));
  opacity: 0;
  transition: opacity 250ms;
}
#ghost-trail::before,
#ghost-trail::after {
  content: '';
  position: absolute;
  right: 0;
  width: 24px;
  height: 2px;
  background: inherit;
}
#ghost-trail::before { top: -5px; }
#ghost-trail::after { top: 5px; }
#stage.stall #ghost-trail { opacity: 0 !important; }

/* ---------- Lane ---------- */

#lane-glow {
  position: absolute;
  top: 230px;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(90deg, rgba(0, 229, 255, .12), transparent 30%);
  pointer-events: none;
}

#hit-line {
  position: absolute;
  top: 214px;
  left: 150px;
  width: 4px;
  height: 150px;
  background: var(--pink);
  box-shadow: 0 0 20px var(--pink);
  z-index: 1;
  transition: left 60ms ease-out;
}

#lane { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

#char-row {
  position: absolute;
  top: 258px;
  left: 150px;
  display: flex;
  /* No CSS transition: the row is driven per-frame by a camera-follow in
     fx.js (exponential follower), which turns discrete keystrokes into
     near-constant-velocity motion - the smoothest thing pursuit eyes can
     track. Snaps, short glides and word-jumps all tested worse. */
  transition: none;
  will-change: transform;
}

.char-block {
  width: 48px;
  height: 64px;
  margin-right: 6px;
  flex: 0 0 auto;
  /* IBM Plex Mono for the lane: terminal-heritage but engineered for
     reading. The lane's job is legibility at high WPM; the retro theme
     lives in the chrome (Silkscreen and Press Start 2P stay there). */
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 32px;
  line-height: 62px;
  text-align: center;
  border: 2px solid var(--faint);
  color: var(--dim);
}

.word-gap { width: 24px; margin-right: 6px; flex: 0 0 auto; align-self: flex-end; }
.word-gap.current { border-bottom: 3px solid var(--cyan); }

.char-block.ok {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--bg);
  box-shadow: 0 0 18px var(--cyan);
}
.char-block.bad {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
  box-shadow: 0 0 14px var(--pink);
  transform: translateY(4px) rotate(-2deg);
}
.char-block.current {
  background: var(--white);
  border-color: var(--white);
  color: var(--bg);
  box-shadow: 0 0 28px var(--white);
}
.char-block.word-current { border-color: var(--cyan); color: var(--cyan); }
/* read-ahead words carry the reading load at high WPM: keep them bright */
.char-block.word-next { border-color: var(--dim-border); color: #93a5c9; }
/* words after that keep the base .char-block style */

#groove-label {
  position: absolute;
  top: 350px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--cyan);
  text-shadow: 0 0 16px var(--cyan);
  transition: color 300ms;
}
#stage.stall #groove-label { color: var(--pink); text-shadow: 0 0 16px var(--pink); }

/* Pace lock: the player is riding their target rhythm. Steady glow shift,
   deliberately nothing that flashes. */
#stage { transition: background-color 300ms, border-color 400ms, box-shadow 400ms; }
#stage.locked {
  border-color: rgba(0, 229, 255, .65);
  box-shadow: 0 0 34px rgba(0, 229, 255, .22);
}
#stage.locked #groove-label {
  color: var(--white);
  text-shadow: 0 0 22px var(--cyan), 0 0 8px var(--cyan);
}
#stage.locked #hit-line {
  box-shadow: 0 0 20px var(--pink), 0 0 48px rgba(255, 46, 136, .55);
}

/* Lock charge bar: fills as streak and full-band tenure build, drains when
   conditions slip, snaps empty on a miss, glows steady while locked. */
#lock-bar {
  position: absolute;
  top: 374px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 4px;
  border: 1px solid var(--dim-border);
  background: rgba(0, 229, 255, .06);
  transition: border-color 300ms, box-shadow 300ms;
}
#lock-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--cyan);
  opacity: .85;
}
#stage.locked #lock-bar {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, .5);
}
#stage.locked #lock-bar-fill { background: var(--white); opacity: 1; }
#stage.stall #lock-bar-fill { background: var(--pink); }

/* ---------- Miss banner ---------- */

#miss-banner {
  position: absolute;
  top: 172px;
  left: 50%;
  transform: translateX(-50%);
  /* opaque plate: the banner over the busy stage read as washed out */
  background: rgba(7, 12, 28, .94);
  border: 2px solid var(--pink);
  padding: 12px 20px;
  white-space: nowrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  word-spacing: -0.4em;
  /* hard arcade stamp: solid pink over a crisp dark block. The old
     white-with-pink/cyan-fringes chromatic split read as washed out. */
  color: var(--pink);
  text-shadow: 3px 3px 0 #55102f;
  z-index: 6;
  transition: opacity 200ms;
}

#type-hint {
  position: absolute;
  top: 180px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--cyan);
  text-shadow: 0 0 14px var(--cyan);
  z-index: 6;
  /* pulsed from JS on the actual beat, not a CSS timer, so it stays in
     sync with the music through pause and resume */
  transition: opacity 60ms;
}

/* ---------- Channel strip ---------- */

#channel-strip {
  position: absolute;
  top: 410px;
  left: 32px;
  right: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.channel-cell {
  border: 2px solid var(--cyan);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 300ms;
}

.ch-name { font-size: 13px; color: var(--cyan); }
.ch-status { font-size: 11px; color: var(--white); }

.channel-cell.boost:not(.muted) { box-shadow: 0 0 14px rgba(0, 229, 255, .45); }
#groove-label.boost { text-shadow: 0 0 24px var(--cyan), 0 0 8px var(--cyan); }

.channel-cell.muted { border: 2px dashed var(--pink); }
.channel-cell.muted .ch-name,
.channel-cell.muted .ch-status { color: var(--pink); }

/* ---------- Spectrum ---------- */

#spectrum {
  --spec: var(--cyan);
  position: absolute;
  bottom: 0;
  left: 32px;
  right: 32px;
  height: 100px;
  display: flex;
  gap: 2px;
}
#stage.stall #spectrum { --spec: var(--pink); }

.spectrum-col { flex: 1; position: relative; }

/* LED segments: 4px lit / 3px gap, revealed as the fill grows */
.spectrum-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(to top, var(--spec) 0 4px, transparent 4px 7px);
  opacity: .7;
}

.spectrum-cap {
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: var(--spec);
  opacity: .9;
  box-shadow: 0 0 6px var(--spec);
}

/* ---------- Overlays ---------- */

#idle-overlay, #pause-overlay, #results-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

[hidden] { display: none !important; }

/* .idle-logo kept for the mobile notice */
.idle-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 40px;
  color: var(--white);
  text-shadow: 0 0 24px var(--cyan);
  letter-spacing: .1em;
  margin-bottom: 18px;
}

@keyframes blink { 50% { opacity: .35; } }

.idle-hint { font-size: 11px; color: var(--dim); letter-spacing: .15em; margin-top: 6px; }

/* ---------- Start menu (mockup 3b) ---------- */

#idle-overlay { display: block; }

#menu-corner-right {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
#menu-best {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .1em;
}
#about-btn, #mute-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--cyan);
  border: 2px solid var(--dim-border);
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}
#about-btn:hover, #mute-btn:hover { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 229, 255, .4); }
#mute-btn .spk-x { display: none; }
#mute-btn.muted { color: var(--dim); }
#mute-btn.muted .spk-waves { display: none; }
#mute-btn.muted .spk-x { display: block; }

.menu-hero {
  position: absolute;
  top: 150px;
  width: 100%;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 44px;
  color: var(--white);
  letter-spacing: .08em;
  text-shadow: 0 0 28px rgba(0, 229, 255, .8);
}
.menu-tagline {
  position: absolute;
  top: 216px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .3em;
}

.menu-cta-row {
  position: absolute;
  top: 284px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  height: 28px;
}
.menu-cta {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--cyan);
  text-shadow: 0 0 18px var(--cyan);
  letter-spacing: .05em;
  /* slow smooth breath, not a hard blink: with the EQ bars bouncing, two
     fast unsynced rhythms made the menu feel busy */
  animation: cta-breathe 2.4s ease-in-out infinite;
}
@keyframes cta-breathe { 50% { opacity: .55; } }
.menu-eq { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.menu-eq span {
  width: 8px;
  background: var(--cyan);
  height: 6px;
  transition: height 140ms ease-out;
}

.menu-advisory {
  position: absolute;
  top: 326px;
  width: 100%;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--pink);
  text-shadow: 0 0 10px rgba(255, 46, 136, .7);
  letter-spacing: .1em;
}
.menu-subline {
  position: absolute;
  top: 350px;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .1em;
}
#sound-hint {
  position: absolute;
  top: 372px;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .15em;
}

.menu-settings {
  position: absolute;
  top: 412px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
}
.menu-chip {
  border: 1px solid var(--dim-border);
  color: var(--dim);
  padding: 4px 6px;
  font-size: 8px;
}
.menu-gap { margin-left: 22px; }
.mode-option {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #2a4a7a;
  border: 2px solid var(--faint);
  padding: 8px 12px;
  letter-spacing: .05em;
}
.mode-option.active {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, .4);
}
.menu-track { color: var(--white); }
.menu-wpm #target-wpm { color: var(--white); }
.menu-wpm em { font-style: normal; color: var(--dim); }

.menu-rule {
  position: absolute;
  top: 470px;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: .12em;
}

.menu-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  border-top: 1px solid var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 10px;
  color: #2a4a7a;
  letter-spacing: .12em;
}
.menu-footer em { font-style: normal; color: var(--dim); }

/* ---------- About panel ---------- */

#about-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 14;
}
#about-body {
  max-width: 560px;
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #a9b8d8; /* var(--dim) washed out against the dark ground */
  letter-spacing: .04em;
}
#about-body p { margin-bottom: 14px; }
#about-body p:first-child { color: var(--cyan); }
#about-body p:last-child { color: var(--white); margin-bottom: 24px; }

.pause-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  color: var(--white);
  text-shadow: 0 0 20px var(--cyan);
  margin-bottom: 36px;
}

.menu-row {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .1em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 300px; /* shared left edge: the rows read as one aligned menu block */
}

.menu-key {
  display: inline-block;
  box-sizing: border-box;
  width: 68px; /* uniform badge width so all rows align as two clean columns */
  text-align: center;
  padding: 6px 0;
  border: 2px solid var(--cyan);
  color: var(--cyan);
}

.btn-menu {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--dim);
  border: 2px solid var(--dim-border);
  padding: 14px 22px;
}
.btn-menu:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- Results ---------- */

#results-overlay {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 64px;
  padding: 72px 64px;
}

.results-left { display: flex; flex-direction: column; max-width: 400px; }

.results-track { font-size: 14px; color: var(--dim); letter-spacing: .15em; margin-bottom: 20px; }

.results-headline {
  font-family: 'Press Start 2P', monospace;
  font-size: 40px;
  color: var(--white);
  text-shadow: 0 0 12px rgba(0, 229, 255, .5);
  line-height: 1.2;
  margin-bottom: 8px;
  /* Press Start 2P is monospaced: its space glyph is a full em wide,
     so word gaps need reining in at display sizes */
  word-spacing: -0.45em;
}

.results-grade {
  font-family: 'Press Start 2P', monospace;
  font-size: 96px;
  color: var(--pink);
  text-shadow: 0 0 10px rgba(255, 46, 136, .4);
  margin-bottom: 16px;
}

.results-summary { font-size: 14px; color: var(--dim); line-height: 1.6; margin-bottom: auto; }

.results-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.results-buttons button { white-space: nowrap; }

.btn-retry {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--cyan);
  border: 2px solid var(--cyan);
  padding: 14px 22px;
}
.btn-retry:hover { background: rgba(0, 229, 255, .12); }

.btn-next {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--white);
  background: var(--pink);
  border: 2px solid var(--pink);
  padding: 14px 22px;
}
.btn-next:disabled { opacity: .35; cursor: default; }

.results-right { display: flex; flex-direction: column; width: 320px; }

.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 2px solid var(--faint);
}

.stat-label { font-size: 14px; color: var(--dim); letter-spacing: .1em; }

.stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  color: var(--white);
}

.stat-best { font-size: 12px; color: var(--cyan); letter-spacing: .1em; padding: 10px 0 0; min-height: 28px; }

#bpm-chart {
  margin-top: 18px;
  height: 72px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.chart-bar { flex: 1; background: var(--cyan); opacity: .8; }
.chart-bar.muted-bar { background: var(--pink); opacity: .6; }

.chart-label { font-size: 10px; color: var(--dim); letter-spacing: .2em; margin-top: 8px; text-align: center; }
.chart-legend {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .1em;
  margin-top: 4px;
  text-align: center;
}
.chart-legend em { font-style: normal; color: var(--cyan); }
.chart-legend b { font-weight: normal; color: var(--pink); }

/* ---------- Top scores & name entry ---------- */

#scores-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 12;
}

#scores-list {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .08em;
  margin: 10px 0 22px;
  min-height: 120px;
}

.score-row { display: flex; gap: 22px; padding: 7px 0; }
.score-rank { color: var(--dim); width: 34px; }
.score-name { color: var(--white); width: 56px; }
.score-wpm { color: var(--cyan); width: 96px; text-align: right; }
.score-grade { color: var(--pink); }
.score-row.empty { color: var(--dim-border); }

.results-entry {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--white);
  letter-spacing: .15em;
  margin: 18px 0 4px;
}
#entry-chars { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
#entry-status { font-size: 10px; color: var(--dim); margin-left: 10px; }

/* ---------- Mobile notice ---------- */

#mobile-notice {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--dim);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 2;
  z-index: 100;
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 1024px) {
  #mobile-notice { display: flex; }
  #stage-wrap { display: none; }
}