/* Токены: тёмная — база; светлая — через media; data-theme побеждает всегда */
  :root {
    --scheme: dark;
    --bg: #0B0D14; --glow-in: #151A2B; --glow-out: #07080E;
    --ink: #EDEFF7; --sub: #9AA3BA; --faint: #5E6883; --stat-b: #8B95B0;
    --hint: #49526B;
    --btn-ink: #C9D3F2; --btn-bg: rgba(97, 122, 201, .10);
    --btn-border: rgba(124, 150, 232, .38);
    --btn-bg-h: rgba(97, 122, 201, .22); --btn-border-h: rgba(140, 164, 240, .6);
    --focus: #7C9AF0;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --scheme: light;
      --bg: #F7F8FB; --glow-in: #FFFFFF; --glow-out: #ECEEF4;
      --ink: #1F2536; --sub: #5C6680; --faint: #9199AD; --stat-b: #444E6A;
      --hint: #A6ADC0;
      --btn-ink: #3A54B8; --btn-bg: rgba(80, 110, 220, .07);
      --btn-border: rgba(80, 110, 220, .35);
      --btn-bg-h: rgba(80, 110, 220, .14); --btn-border-h: rgba(64, 94, 208, .55);
      --focus: #4C6FE8;
    }
  }
  :root[data-theme="dark"] {
    --scheme: dark;
    --bg: #0B0D14; --glow-in: #151A2B; --glow-out: #07080E;
    --ink: #EDEFF7; --sub: #9AA3BA; --faint: #5E6883; --stat-b: #8B95B0;
    --hint: #49526B;
    --btn-ink: #C9D3F2; --btn-bg: rgba(97, 122, 201, .10);
    --btn-border: rgba(124, 150, 232, .38);
    --btn-bg-h: rgba(97, 122, 201, .22); --btn-border-h: rgba(140, 164, 240, .6);
    --focus: #7C9AF0;
  }
  :root[data-theme="light"] {
    --scheme: light;
    --bg: #F7F8FB; --glow-in: #FFFFFF; --glow-out: #ECEEF4;
    --ink: #1F2536; --sub: #5C6680; --faint: #9199AD; --stat-b: #444E6A;
    --hint: #A6ADC0;
    --btn-ink: #3A54B8; --btn-bg: rgba(80, 110, 220, .07);
    --btn-border: rgba(80, 110, 220, .35);
    --btn-bg-h: rgba(80, 110, 220, .14); --btn-border-h: rgba(64, 94, 208, .55);
    --focus: #4C6FE8;
  }

  html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  .glow {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 42%,
                var(--glow-in) 0%, var(--bg) 55%, var(--glow-out) 100%);
  }
  canvas {
    position: fixed; inset: 0; display: block;
    touch-action: none; cursor: default;
  }
  .hud {
    position: fixed; top: 0; left: 0; padding: 26px 30px;
    pointer-events: none; user-select: none;
    max-width: min(46ch, calc(100vw - 60px));
  }
  .hud h1 {
    margin: 0 0 6px; font-size: 20px; font-weight: 650;
    letter-spacing: .012em; color: var(--ink);
  }
  .hud .sub {
    margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--sub);
    text-wrap: balance;
  }
  .hud .stats {
    margin: 0 0 16px; font-size: 10.5px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  .hud .stats b { color: var(--stat-b); font-weight: 650; }
  #replay {
    pointer-events: auto; cursor: pointer;
    font: 600 12.5px inherit; font-family: inherit;
    color: var(--btn-ink); background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 8px; padding: 8px 14px;
    transition: background .15s ease, border-color .15s ease;
  }
  #replay:hover { background: var(--btn-bg-h); border-color: var(--btn-border-h); }
  #replay:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .hint {
    position: fixed; right: 18px; bottom: 14px; margin: 0;
    font-size: 10.5px; letter-spacing: .03em; color: var(--hint);
    pointer-events: none; user-select: none;
  }
  @media (hover: none) { .hint { display: none; } }
  @media (max-width: 640px) {
    .hud { padding: 18px 20px; }
    .hud .sub { font-size: 12px; }
  }
  /* компактный режим внутри iframe: текст уже есть в статье вокруг */
  .embed .hud h1,
  .embed .hud .sub,
  .embed .hud .stats { display: none; }
  .embed .hud { padding: 12px 14px; }
  .embed .hint { display: none; }