/* ==========================================================================
   1980s theme. Night sky, neon pink and cyan, grid horizon.

   Dark mode is a real readability risk for older eyes, so the rules here are
   strict: body copy is pure white or near white on a deep card, and neon is
   used for borders, headings and accents only, never for long text.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: #120727;
  --bg-fade: rgba(18, 7, 39, 0);
  /* Neon glow up top plus a faint perspective-free grid, the cheap and
     reliable version of the 1980s horizon. */
  --bg-accent-1: radial-gradient(
    115% 48% at 50% -6%,
    rgba(255, 46, 136, .55) 0%,
    rgba(120, 30, 160, .28) 42%,
    rgba(18, 7, 39, 0) 74%
  );
  --bg-accent-2: linear-gradient(
      rgba(0, 229, 255, .07) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 229, 255, .07) 1px, transparent 1px);

  --card: #1d0f3d;
  --card-border: #45268a;
  --card-shadow: 0 0 0 1px rgba(255, 46, 136, .18), 0 14px 30px rgba(0, 0, 0, .5);

  --ink: #ffffff;
  --ink-soft: #d5c9f2;
  --ink-faint: #a99cca;

  --accent: #ff2e88;
  --accent-ink: #14082b;
  --accent-soft: #2a1550;

  --option-bg: #2a1656;
  --option-border: #6a44c4;
  --option-ink: #ffffff;
  --option-badge-bg: #00e5ff;
  --option-badge-ink: #10062a;

  --correct: #5cf08f;
  --correct-bg: #17331f;
  --correct-border: #5cf08f;
  --wrong: #ff9a8a;
  --wrong-bg: #3a1620;
  --wrong-border: #ff7a66;

  --track: #35206b;

  /* Sharper corners than the other two decades. */
  --radius: 12px;
  --radius-sm: 8px;

  --display-weight: 900;
  --display-spacing: .02em;
  --display-transform: uppercase;
  --display-shadow: 0 0 18px rgba(255, 46, 136, .55);
}

/* Grid squares for the background pattern layer. */
body {
  background-size: auto, 46px 46px;
  background-position: center top, center top;
}

/* Chrome-style sheen on the big score number. */
.result-score {
  background: linear-gradient(180deg, #ffffff 0%, #ff2e88 55%, #a3126a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Fallback for anything that cannot paint text with a gradient. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .result-score {
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
  }
}