/* ============================================================
 * Weekend Road Trip — UI theme
 * ENGR 5513 Applied AI in Engineering, Lipscomb University, Summer 2026
 * ============================================================ */

:root {
  --gold: #f5d76e;
  --gold-bright: #ffe89a;
  --red: #d63a3a;
  --blue: #7ec3e8;
  --good: #7ee27e;
  --bad: #e85a1a;
  --panel: rgba(12, 14, 24, 0.92);
  --panel-border: rgba(245, 215, 110, 0.55);
  --text: #ececec;
  --dim: #9a9ab8;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 60px rgba(245, 215, 110, 0.12);
}

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

html, body {
  height: 100%;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #050810 100%);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

#frame {
  position: relative;
  /* content-box so the width/aspect-ratio below describe the CANVAS itself and
     the 3px border sits outside it. This keeps the canvas an exact 960:540 box
     (uniform device-pixel scale, zero aspect skew) instead of the border eating
     asymmetrically into a border-box frame. */
  box-sizing: content-box;
  /* Fit the 16:9 stage inside the viewport on BOTH axes without distorting the
     aspect ratio (the 6px accounts for the border so we never overflow). Capped
     at the 960px logical width so the HUD/menu overlays (fixed-px sizing) keep
     their intended proportions; crispness on HiDPI / large displays comes from
     the device-pixel backing store sized in game.js (resizeCanvas), not CSS. */
  width: min(960px, calc(100vw - 6px), calc((100vh - 6px) * 960 / 540));
  aspect-ratio: 960 / 540;
  border: 3px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #87ceeb;
}

.hidden { display: none !important; }

/* ============================================================
 * HUD (visible during gameplay)
 * ============================================================ */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  /* Query container so the HUD scales with the frame. Bot 1 caps #frame at the
     960x540 logical width, so the HUD sits at its reference size on large/4K
     displays and scales DOWN proportionally on smaller/shorter windows — which
     keeps the DOM cards a constant fraction of the canvas and therefore clear
     of the canvas toast "safe zone" (HUD_SAFE_TOP / COMBO_Y in game.js). */
  container-type: size;
}

/* Single fluid scaling root: 1em tracks frame height (1cqh = 1% of the canvas
   height), clamped so HUD text never gets illegibly small or oversized. Every
   size below is expressed in em so the whole HUD scales as one unit. */
.hud-row {
  display: flex;
  gap: 0.7em;
  align-items: flex-end;
  font-size: clamp(11px, 2.6cqh, 16px);
}
.hud-row.top { justify-content: flex-start; }
.hud-row.bottom { justify-content: space-between; align-items: flex-end; }

/* Shared card backplate. The opaque panel + drop shadow keep gold text legible
   over the brightest route skies and Broadway neon. */
.hud-card,
.hud-speedo,
.hud-fuel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 0.3em;
  backdrop-filter: blur(6px);
  box-shadow: 0 0.15em 0.6em rgba(0, 0, 0, 0.5);
}

.hud-card {
  padding: 0.45em 0.85em;
  min-width: 7em;
}

.hud-label {
  font-size: 0.64em;          /* ~9px at reference */
  letter-spacing: 0.18em;
  color: var(--dim);
  margin-bottom: 0.15em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.hud-value {
  font-size: 1.15em;          /* ~16px at reference */
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.07em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hud-trip { min-width: 12.8em; }

/* Shared bar language: trip + fuel bars use the same recessed track
   (dark fill, hairline border, inset shadow) and the same glossy fill. */
.hud-trip-bar,
.hud-fuel-bar {
  margin-top: 0.4em;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.22em;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}
.hud-trip-bar { height: 0.5em; }   /* slimmer: secondary gauge */
.hud-fuel-bar { height: 0.85em; }  /* taller: primary gauge */

.hud-trip-fill,
.hud-fuel-fill {
  height: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);  /* shared gloss */
}
.hud-trip-fill {
  width: 0%;
  background: var(--blue);
  transition: width 0.2s linear;
}

.hud-speedo {
  border-width: 2px;
  border-color: var(--gold);
  border-radius: 0.45em;
  padding: 0.45em 1.55em;
  text-align: center;
}
.hud-mph {
  font-size: 3.15em;          /* ~44px at reference */
  font-weight: 900;
  color: var(--gold-bright);
  line-height: 1;
  text-shadow: 0 0 0.3em rgba(255, 232, 154, 0.5), 0 2px 3px rgba(0, 0, 0, 0.6);
}
.hud-mph-label {
  font-size: 0.71em;          /* ~10px at reference */
  letter-spacing: 0.24em;
  color: var(--dim);
  margin-top: 0.15em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.hud-fuel {
  padding: 0.55em 1em;
  min-width: 17em;
}
.hud-fuel-fill {
  width: 100%;
  background: linear-gradient(90deg, var(--good), var(--gold));
  transition: width 0.15s linear, background 0.3s linear;
}
.hud-fuel-fill.low  { background: var(--bad); }
.hud-fuel-fill.mid  { background: var(--gold); }

/* ============================================================
 * Menu overlay
 * ============================================================ */

#overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.65) 100%);
}

.screen {
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 28px 36px;
  text-align: center;
  max-width: 560px;
  width: 88%;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.screen-wide {
  max-width: 720px;
}

.screen h1 {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 5px;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(245,215,110,0.5);
  margin-bottom: 4px;
}
.screen h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 12px;
}
.screen h2.good { color: var(--good); }
.screen h2.bad { color: var(--bad); }

.screen .tagline {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.screen .story {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 22px;
  text-align: left;
}
.screen .story-short {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 14px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.screen p {
  margin-bottom: 12px;
  color: var(--text);
  line-height: 1.4;
}
.screen p.muted { color: var(--dim); font-size: 12px; }

.score-line {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--gold);
  margin: 14px 0;
}

button {
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 9px 22px;
  margin: 5px;
  cursor: pointer;
  border-radius: 4px;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
button:hover, button:focus {
  border-color: var(--gold);
  color: var(--gold);
  outline: none;
}
button.cta {
  border-color: var(--gold);
  color: var(--gold);
  font-size: 14px;
  padding: 11px 28px;
  margin: 12px 6px 6px;
}
button.cta:hover {
  background: var(--gold);
  color: #1a1a2e;
  box-shadow: 0 0 22px rgba(245,215,110,0.5);
}

.menu-actions {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ghost-status {
  min-height: 18px;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--blue);
}

#screen-title {
  max-width: 680px;
}
#screen-title .story {
  margin-bottom: 14px;
}

.credit {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--dim);
  opacity: 0.7;
}

.instructions {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--dim);
  margin-top: 14px;
}

.initials {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 18px 0;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.initial {
  font-size: 56px;
  font-weight: 900;
  color: var(--text);
  width: 56px;
  text-align: center;
}
.initial.active {
  color: var(--gold);
  border-bottom: 4px solid var(--gold);
}

.scores-list {
  list-style: none;
  text-align: left;
  margin: 12px auto;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  max-width: 420px;
}
.scores-list li {
  display: grid;
  grid-template-columns: 26px 60px 1fr 90px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
}
.scores-list li .rank { color: var(--dim); }
.scores-list li .player-initials { color: var(--gold); font-weight: 700; }
.scores-list li .score { color: var(--text); }
.scores-list li .date { color: var(--dim); font-size: 12px; text-align: right; }
.scores-list .empty {
  text-align: center;
  color: var(--dim);
  display: block;
  padding: 14px 0;
}

.achievements-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
  text-align: left;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.achievement {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
}
.achievement.unlocked {
  border-color: rgba(245, 215, 110, 0.55);
  background: rgba(245, 215, 110, 0.08);
}
.achievement-title {
  color: var(--gold);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.achievement-desc {
  color: var(--dim);
  font-size: 11px;
  line-height: 1.35;
}

.ghost-payload {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: rgba(0,0,0,0.35);
  color: var(--text);
  padding: 10px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.35;
}
.ghost-payload:focus {
  border-color: var(--gold);
  outline: none;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 10px auto;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text);
  text-align: left;
}
.setting-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

body.colorblind {
  --gold: #ffd23f;
  --gold-bright: #fff2a8;
  --red: #d55e00;
  --blue: #0072b2;
  --good: #009e73;
  --bad: #cc79a7;
  --panel-border: rgba(255, 210, 63, 0.7);
}

.help-table {
  margin: 12px auto;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}
.help-table td {
  padding: 4px 14px;
  font-size: 12px;
}
.help-table td:first-child {
  color: var(--gold);
  text-align: right;
}
.help-table td:last-child {
  color: var(--text);
  text-align: left;
}

@media (max-width: 700px) {
  .achievements-list {
    grid-template-columns: 1fr;
    max-height: 220px;
  }
  .screen {
    padding: 22px 20px;
  }
  .screen h1 {
    font-size: clamp(24px, 8vw, 32px);
    letter-spacing: 3px;
    line-height: 1.12;
  }
  .screen h2 {
    font-size: clamp(22px, 7vw, 26px);
    letter-spacing: 2px;
  }
}

.run-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 420px;
  margin: 4px auto 10px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}
.run-stats .stat {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 7px 6px;
  background: rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.run-stats .stat span {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dim);
}
.run-stats .stat b {
  font-size: 17px;
  color: var(--gold);
}
.run-stats .stat-clean {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  color: var(--good);
  border-color: rgba(46, 204, 113, 0.4);
  background: rgba(46, 204, 113, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ============================================================
 * Accessibility & settings controls  (Bot 4: audio / a11y / settings)
 * Append-only block — no changes to layout/HUD rules above.
 * ============================================================ */

/* Visible keyboard focus ring on every interactive control. The base button
 * rule sets `outline:none` on :focus (for mouse clicks); :focus-visible re-adds
 * a strong ring ONLY for keyboard / assistive-tech navigation. */
button:focus-visible,
[data-action]:focus-visible,
.setting-row input:focus-visible,
.ghost-payload:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}
/* The gold CTA already turns gold on hover, so a gold ring would vanish — use a
 * dark ring + halo so focus stays visible against the gold fill. */
button.cta:focus-visible {
  outline-color: #1a1a2e;
  box-shadow: 0 0 0 3px var(--gold-bright);
}
/* Menu containers receive programmatic focus on screen change (so focus never
 * stays on a hidden screen). They are not interactive controls, so suppress the
 * default outline — real controls still show the :focus-visible ring above. */
.screen:focus { outline: none; }

/* Master-volume slider: the base `.setting-row input` rule forces an 18px box
 * (sized for checkboxes) which would crush a range input. */
.setting-row input[type="range"] {
  width: 150px;
  height: auto;
  flex: 0 0 auto;
  accent-color: var(--gold);
  cursor: pointer;
}
.setting-row .setting-value {
  margin-left: auto;
  min-width: 42px;
  text-align: right;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 12px;
  color: var(--gold);
}

/* Screen-reader-only live region / utility (visually hidden, still announced). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Reduce motion: when the player opts in (body.reduce-motion, set from
 * game.js), also calm CSS transitions/animations. Canvas-side motion (screen
 * shake + speed lines) is gated in game.js. Opt-in only — defaults untouched. */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ============================================================
 * Mobile / touch controls  (feature: mobile-touch-controls)
 * Append-only. On-screen buttons appear ONLY on coarse-pointer devices during
 * play and feed the same input path as the keyboard. Desktop is unaffected.
 * ============================================================ */

#touch-controls {
  position: absolute;
  inset: 0;
  z-index: 15;            /* above HUD (10), below the menu overlay (20) */
  pointer-events: none;   /* only the buttons are tappable; gaps pass through */
  display: none;          /* shown via @media (coarse pointer) + body.playing */
}
.tc-cluster { position: absolute; bottom: 16px; display: flex; align-items: flex-end; gap: 12px; }
.tc-left  { left: 16px; }
.tc-right { right: 16px; }
.tc-btn {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 56px; padding: 0 10px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  color: var(--gold);
  background: rgba(12, 14, 24, 0.46);
  border: 2px solid var(--panel-border);
  border-radius: 12px;
  backdrop-filter: blur(3px);
  transition: background 0.08s ease, transform 0.08s ease;
}
.tc-btn.tc-jump  { min-width: 78px; min-height: 78px; border-radius: 50%; font-size: 14px; border-color: var(--gold); }
.tc-btn.tc-duck  { min-height: 64px; }
.tc-btn.tc-pause { position: absolute; top: 14px; right: 16px; bottom: auto; min-width: 44px; min-height: 44px; font-size: 16px; border-radius: 10px; }
.tc-btn.tc-cam   { position: absolute; top: 14px; right: 68px; bottom: auto; min-width: 44px; min-height: 44px; font-size: 11px; border-radius: 10px; }
.tc-btn.pressed  { background: var(--gold); color: #1a1a2e; transform: scale(0.94); }

/* Keep the play surface from scrolling / pinch-zooming under the fingers. */
#game, #touch-controls { touch-action: none; }
html, body { overscroll-behavior: none; }

/* Show touch controls only on touch devices, only during play; lift the HUD
 * bottom row clear of the buttons, and grow menu tap targets to >=44px. */
@media (hover: none) and (pointer: coarse) {
  body.playing #touch-controls { display: block; }
  body.playing #hud { padding-bottom: 92px; }
  button { min-height: 44px; }
  .setting-row { padding: 12px; }
  .setting-row input[type="checkbox"] { width: 22px; height: 22px; }
}

/* Portrait nudge on phones: the game is 16:9, so encourage landscape. */
#rotate-hint { display: none; }
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 60;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: radial-gradient(circle at center, #1a1a2e 0%, #050810 100%);
    color: var(--gold); text-align: center; padding: 24px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  }
  #rotate-hint::before {
    content: "MUSIC CITY";
    width: min(260px, 78vw);
    padding: 8px 12px;
    border: 2px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 0 22px rgba(245, 215, 110, 0.24);
    font: 800 12px 'JetBrains Mono', 'Consolas', monospace;
    letter-spacing: 3px;
  }
  #rotate-hint .rh-icon { font-size: 52px; animation: rh-rotate 2s ease-in-out infinite; }
  #rotate-hint .rh-text { font-size: 15px; letter-spacing: 1px; color: var(--text); max-width: 280px; line-height: 1.5; }
}
@keyframes rh-rotate { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }

@media (max-width: 700px) and (orientation: portrait) {
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 60;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: radial-gradient(circle at center, #1a1a2e 0%, #050810 100%);
    color: var(--gold); text-align: center; padding: 24px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  }
  #rotate-hint::before {
    content: "MUSIC CITY";
    width: min(260px, 78vw);
    padding: 8px 12px;
    border: 2px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 0 22px rgba(245, 215, 110, 0.24);
    font: 800 12px 'JetBrains Mono', 'Consolas', monospace;
    letter-spacing: 3px;
  }
  #rotate-hint .rh-icon { font-size: 52px; animation: rh-rotate 2s ease-in-out infinite; }
  #rotate-hint .rh-text { font-size: 15px; letter-spacing: 1px; color: var(--text); max-width: 280px; line-height: 1.5; }
}

@media (max-height: 430px) and (orientation: landscape) {
  .screen {
    padding: 12px 18px;
    width: 86%;
  }
  #screen-title {
    max-width: 600px;
  }
  .screen h1 {
    font-size: clamp(25px, 5vw, 34px);
    letter-spacing: 4px;
    line-height: 1.05;
    margin-bottom: 2px;
  }
  .screen .tagline {
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  .screen .story {
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  button {
    font-size: 11px;
    padding: 7px 14px;
    margin: 3px;
  }
  button.cta {
    font-size: 12px;
    padding: 8px 24px;
    margin: 3px 4px;
  }
  .menu-actions {
    margin-top: 2px;
    gap: 3px;
  }
  .ghost-status {
    min-height: 14px;
    margin-top: 3px;
    font-size: 10px;
  }
  #screen-title .credit {
    display: none;
  }
}

/* ============================================================
 * Visual polish — menu entrance + micro-interactions (append-only).
 * All motion here is calmed by the body.reduce-motion rules above.
 * ============================================================ */
.screen { animation: screen-in 0.28s ease both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
button:active { transform: scale(0.96); }
.screen h1 { animation: title-glow 3.6s ease-in-out infinite alternate; }
@keyframes title-glow {
  from { text-shadow: 0 0 20px rgba(245, 215, 110, 0.45); }
  to   { text-shadow: 0 0 30px rgba(245, 215, 110, 0.85), 0 0 8px rgba(245, 215, 110, 0.5); }
}

/* ============================================================
 * Win celebration — confetti + score/stat fanfare (win screen).
 * Pure CSS; calmed by the body.reduce-motion rules above.
 * ============================================================ */
#screen-win { position: relative; overflow: hidden; }
#screen-win > *:not(.confetti) { position: relative; z-index: 1; }  /* keep text above confetti */
.confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.confetti span {
  position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 1px;
  opacity: 0; animation: confetti-fall 2.6s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(460px) rotate(900deg); opacity: 0; }
}
.confetti span:nth-child(1)  { left: 6%;  animation-delay: 0.00s; background: var(--gold); }
.confetti span:nth-child(2)  { left: 14%; animation-delay: 0.25s; background: var(--good); }
.confetti span:nth-child(3)  { left: 22%; animation-delay: 0.10s; background: var(--blue); }
.confetti span:nth-child(4)  { left: 31%; animation-delay: 0.40s; background: var(--gold-bright); }
.confetti span:nth-child(5)  { left: 40%; animation-delay: 0.05s; background: var(--red); }
.confetti span:nth-child(6)  { left: 48%; animation-delay: 0.30s; background: var(--good); }
.confetti span:nth-child(7)  { left: 56%; animation-delay: 0.15s; background: var(--gold); }
.confetti span:nth-child(8)  { left: 64%; animation-delay: 0.45s; background: var(--blue); }
.confetti span:nth-child(9)  { left: 72%; animation-delay: 0.08s; background: var(--gold-bright); }
.confetti span:nth-child(10) { left: 80%; animation-delay: 0.35s; background: var(--good); }
.confetti span:nth-child(11) { left: 88%; animation-delay: 0.18s; background: var(--gold); }
.confetti span:nth-child(12) { left: 94%; animation-delay: 0.50s; background: var(--red); }
#screen-win .score-line { animation: score-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes score-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#win-stats .stat { animation: stat-in 0.4s ease both; }
#win-stats .stat:nth-child(1) { animation-delay: 0.15s; }
#win-stats .stat:nth-child(2) { animation-delay: 0.25s; }
#win-stats .stat:nth-child(3) { animation-delay: 0.35s; }
#win-stats .stat:nth-child(4) { animation-delay: 0.45s; }
#win-stats .stat:nth-child(5) { animation-delay: 0.55s; }
@keyframes stat-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }