/* ============================================================================
   creak · Movie Trivia — Design System
   ============================================================================ */

/* Fonts loaded via _head.blade.php (Playfair Display + Manrope already in stack) */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  --tg-navy:        #031634;
  --tg-navy-2:      #02101f;
  --tg-ink:         #010a14;

  --tg-gold:        oklch(0.80 0.12 86);
  --tg-gold-soft:   oklch(0.86 0.08 90);
  --tg-gold-deep:   oklch(0.62 0.11 80);

  --tg-correct:     oklch(0.74 0.15 152);
  --tg-correct-dim: oklch(0.34 0.07 152);
  --tg-wrong:       oklch(0.62 0.20 24);
  --tg-wrong-dim:   oklch(0.33 0.10 24);

  --tg-bg:          var(--tg-navy);
  --tg-bg-2:        var(--tg-navy-2);
  --tg-surface:     oklch(0.26 0.03 250 / 0.55);
  --tg-surface-2:   oklch(0.30 0.035 250 / 0.7);
  --tg-line:        oklch(0.92 0.02 90 / 0.12);
  --tg-line-2:      oklch(0.92 0.02 90 / 0.22);
  --tg-text:        oklch(0.96 0.01 90);
  --tg-text-dim:    oklch(0.78 0.015 90 / 0.72);
  --tg-text-faint:  oklch(0.72 0.015 90 / 0.45);
  --tg-accent:      var(--tg-gold);
  --tg-accent-soft: var(--tg-gold-soft);
  --tg-accent-deep: var(--tg-gold-deep);
  --tg-on-accent:   #1a1205;

  --tg-font-display: 'Playfair Display', Georgia, serif;
  --tg-font-ui:      'Manrope', system-ui, sans-serif;

  --tg-radius:      16px;
  --tg-radius-sm:   10px;
  --tg-radius-lg:   24px;
  --tg-answer-radius: 14px;

  --tg-gap:         14px;
  --tg-pad:         20px;

  --tg-shadow:      0 18px 50px -20px rgba(0,0,0,0.7);
  --tg-glow:        0 0 0 1px oklch(0.80 0.12 86 / 0.4), 0 10px 40px -12px oklch(0.80 0.12 86 / 0.45);

  --tg-motif:       0.5;
}

/* ---- Theme: Midnight Gold (default) ---- */
[data-theme="midnight"] {
  --tg-bg: var(--tg-navy);
  --tg-bg-2: var(--tg-navy-2);
  --tg-accent: var(--tg-gold);
  --tg-accent-soft: var(--tg-gold-soft);
  --tg-accent-deep: var(--tg-gold-deep);
  --tg-on-accent: #1a1205;
}

/* ---- Theme: Noir Crimson ---- */
[data-theme="noir"] {
  --tg-bg: #0c0a09;
  --tg-bg-2: #050403;
  --tg-navy: #0c0a09; --tg-navy-2: #050403;
  --tg-accent: oklch(0.80 0.12 86);
  --tg-accent-soft: oklch(0.86 0.09 88);
  --tg-accent-deep: oklch(0.58 0.20 25);
  --tg-on-accent: #1a1205;
  --tg-surface: oklch(0.27 0.02 40 / 0.5);
  --tg-surface-2: oklch(0.32 0.025 40 / 0.66);
}

/* ---- Theme: Neon Screening ---- */
[data-theme="neon"] {
  --tg-bg: #0a0a0f;
  --tg-bg-2: #06060c;
  --tg-navy: #0a0a0f; --tg-navy-2: #06060c;
  --tg-accent: oklch(0.82 0.14 200);
  --tg-accent-soft: oklch(0.86 0.12 205);
  --tg-accent-deep: oklch(0.66 0.20 300);
  --tg-on-accent: #04141a;
  --tg-surface: oklch(0.30 0.05 285 / 0.42);
  --tg-surface-2: oklch(0.34 0.06 285 / 0.6);
  --tg-line-2: oklch(0.82 0.14 200 / 0.3);
}

/* ---- Font pairings ---- */
[data-font="classic"]   { --tg-font-display: 'Playfair Display', Georgia, serif; --tg-font-ui: 'Manrope', system-ui, sans-serif; }
[data-font="modern"]    { --tg-font-display: 'Space Grotesk', system-ui, sans-serif; --tg-font-ui: 'Space Grotesk', system-ui, sans-serif; }
[data-font="editorial"] { --tg-font-display: 'Fraunces', Georgia, serif; --tg-font-ui: 'Archivo', system-ui, sans-serif; }

/* ---- Background intensity ---- */
[data-bg="subtle"] { --tg-motif: 0.22; }
[data-bg="medium"] { --tg-motif: 0.5; }
[data-bg="vivid"]  { --tg-motif: 0.9; }

/* ----------------------------------------------------------------------------
   2. BASE + CINEMATIC BACKDROP
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

.tg {
  font-family: var(--tg-font-ui);
  color: var(--tg-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tg-screen {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background:
    radial-gradient(120% 70% at 50% -10%, oklch(0.40 0.05 250 / calc(0.5 * var(--tg-motif))), transparent 60%),
    radial-gradient(80% 50% at 85% 8%, oklch(0.78 0.12 86 / calc(0.16 * var(--tg-motif))), transparent 55%),
    linear-gradient(180deg, var(--tg-bg), var(--tg-bg-2) 60%, var(--tg-ink));
}

/* Two thin film-sprocket strips down the screen edges */
.tg-screen::before,
.tg-screen::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 18px;
  pointer-events: none;
  opacity: calc(0.6 * var(--tg-motif));
  background:
    linear-gradient(var(--tg-ink), var(--tg-ink)) padding-box,
    repeating-linear-gradient(180deg,
      transparent 0 14px,
      oklch(0.92 0.02 90 / 0.16) 14px 24px) border-box;
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 24px);
          mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 24px);
  background-color: oklch(0.92 0.02 90 / 0.14);
  z-index: 2;
}
.tg-screen::before { left: 0; }
.tg-screen::after  { right: 0; }

/* faint film-grain dots */
.tg-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: calc(0.5 * var(--tg-motif));
  background-image: radial-gradient(oklch(0.92 0.02 90 / 0.05) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
}

.tg-content {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 54px 22px 30px;
  gap: var(--tg-gap);
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------- */
.tg-kicker {
  font-family: var(--tg-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tg-accent);
}
.tg-display {
  font-family: var(--tg-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tg-text);
}
.tg-h1 { font-size: clamp(34px, 11vw, 52px); }
.tg-h2 { font-size: clamp(24px, 7vw, 34px); }
.tg-serif-em { font-style: italic; color: var(--tg-accent-soft); }
.tg-body { font-size: 16px; line-height: 1.5; color: var(--tg-text-dim); }
.tg-mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
   4. WORDMARK + MOTIF ICONS
   ------------------------------------------------------------------------- */
.tg-wordmark {
  font-family: var(--tg-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--tg-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tg-wordmark b { color: var(--tg-accent); font-weight: 800; }

.tg-clap {
  width: 26px; height: 22px; position: relative; flex: none;
  border: 2px solid currentColor; border-radius: 3px;
  color: var(--tg-accent);
}
.tg-clap::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: -8px; height: 7px;
  background: repeating-linear-gradient(115deg, currentColor 0 5px, transparent 5px 9px);
  border-radius: 2px; transform-origin: left bottom;
}

.tg-reel {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 2px solid var(--tg-accent);
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 50%, transparent 28%, oklch(0.80 0.12 86 / 0.10) 30%);
}
.tg-reel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tg-accent); }

/* ----------------------------------------------------------------------------
   5. TOP STATUS BAR
   ------------------------------------------------------------------------- */
.tg-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.tg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  font-size: 13px; font-weight: 600; color: var(--tg-text);
  backdrop-filter: blur(8px);
  text-decoration: none;
}
.tg-chip:hover { border-color: var(--tg-line-2); color: var(--tg-text); }
.tg-chip svg, .tg-chip .tg-dot { flex: none; }
.tg-chip--score { color: var(--tg-accent); }
.tg-chip__label { color: var(--tg-text-faint); font-weight: 600; }

/* circular timer */
.tg-timer { position: relative; width: 44px; height: 44px; flex: none; }
.tg-timer svg { transform: rotate(-90deg); display: block; }
.tg-timer__track { stroke: var(--tg-line-2); }
.tg-timer__fill  { stroke: var(--tg-accent); transition: stroke-dashoffset 1s linear, stroke 0.3s; }
.tg-timer.is-low .tg-timer__fill { stroke: var(--tg-wrong); }
.tg-timer__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tg-text);
}
.tg-timer.is-low .tg-timer__num { color: var(--tg-wrong); }

/* ----------------------------------------------------------------------------
   6. PROGRESS BAR
   ------------------------------------------------------------------------- */
.tg-progress { display: flex; flex-direction: column; gap: 7px; }
.tg-progress__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--tg-text-faint); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.tg-progress__meta b { color: var(--tg-text); font-size: 13px; }
.tg-progress__track {
  height: 12px; border-radius: 999px; position: relative; overflow: hidden;
  background: var(--tg-bg-2);
  border: 1px solid var(--tg-line);
  background-image: repeating-linear-gradient(90deg, transparent 0 11px, oklch(0.92 0.02 90 / 0.07) 11px 13px);
}
.tg-progress__fill {
  position: absolute; inset: 1px auto 1px 1px; border-radius: 999px;
  background: linear-gradient(90deg, var(--tg-accent-deep), var(--tg-accent));
  box-shadow: 0 0 12px -2px var(--tg-accent);
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
}

/* ----------------------------------------------------------------------------
   7. QUESTION CARD
   ------------------------------------------------------------------------- */
.tg-qcard {
  position: relative;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-lg);
  padding: 24px 22px;
  box-shadow: var(--tg-shadow);
  backdrop-filter: blur(10px);
}
.tg-qcard__index {
  font-family: var(--tg-font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--tg-accent);
  margin-bottom: 8px;
}
.tg-question {
  font-family: var(--tg-font-display);
  font-weight: 600;
  font-size: clamp(21px, 6.2vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   8. ANSWER OPTIONS
   ------------------------------------------------------------------------- */
.tg-answers { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

.tg-answer {
  --c: var(--tg-text);
  appearance: none;
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  padding: 16px 18px;
  min-height: 60px;
  font-family: var(--tg-font-ui);
  font-size: 16px; font-weight: 600; line-height: 1.3;
  color: var(--tg-text);
  background: var(--tg-surface-2);
  border: 1.5px solid var(--tg-line-2);
  border-radius: var(--tg-answer-radius);
  cursor: pointer;
  transition: transform .14s ease, border-color .2s, background .2s, box-shadow .2s;
}
.tg-answer:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--tg-accent); }
.tg-answer:active:not(:disabled) { transform: translateY(0) scale(0.995); }
.tg-answer:disabled { cursor: default; }

.tg-answer__key {
  flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--tg-font-display); font-weight: 700; font-size: 16px;
  color: var(--tg-accent);
  background: oklch(0.80 0.12 86 / 0.10);
  border: 1px solid var(--tg-line-2);
  transition: inherit;
}
.tg-answer__text { flex: 1; }
.tg-answer__mark { flex: none; width: 22px; height: 22px; opacity: 0; transition: opacity .2s; }

/* states */
.tg-answer.is-selected { border-color: var(--tg-accent); box-shadow: var(--tg-glow); }
.tg-answer.is-correct {
  border-color: var(--tg-correct);
  background: linear-gradient(0deg, var(--tg-correct-dim), var(--tg-surface-2));
  color: var(--tg-text);
}
.tg-answer.is-correct .tg-answer__key { color: var(--tg-correct); background: oklch(0.74 0.15 152 / 0.18); border-color: var(--tg-correct); }
.tg-answer.is-wrong {
  border-color: var(--tg-wrong);
  background: linear-gradient(0deg, var(--tg-wrong-dim), var(--tg-surface-2));
  animation: tg-shake .4s;
}
.tg-answer.is-wrong .tg-answer__key { color: var(--tg-wrong); background: oklch(0.62 0.20 24 / 0.18); border-color: var(--tg-wrong); }
.tg-answer.is-dimmed { opacity: 0.35; filter: saturate(0.5); }

@keyframes tg-shake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}

/* answer shape variants */
[data-answer-shape="rounded"] { --tg-answer-radius: 999px; }
[data-answer-shape="rounded"] .tg-answer { padding-left: 14px; }
[data-answer-shape="sharp"]   { --tg-answer-radius: 2px; }
[data-answer-shape="sharp"] .tg-answer__key { border-radius: 2px; }

/* ticket: notch the left+right mid-edges */
[data-answer-shape="ticket"] .tg-answer {
  --tg-answer-radius: 14px;
  -webkit-mask:
    radial-gradient(9px at 0 50%, transparent 98%, #000),
    radial-gradient(9px at 100% 50%, transparent 98%, #000);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
[data-answer-shape="ticket"] .tg-answer__key {
  border-radius: 9px;
  border-style: dashed;
}

/* ----------------------------------------------------------------------------
   9. BUTTONS
   ------------------------------------------------------------------------- */
.tg-btn {
  appearance: none; cursor: pointer;
  font-family: var(--tg-font-ui); font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .14s, box-shadow .2s, background .2s, opacity .2s;
}
.tg-btn:active { transform: translateY(1px) scale(0.99); }
.tg-btn--primary {
  background: linear-gradient(180deg, var(--tg-accent-soft), var(--tg-accent));
  color: var(--tg-on-accent);
  box-shadow: 0 10px 30px -10px var(--tg-accent);
}
.tg-btn--primary:hover { box-shadow: 0 14px 38px -10px var(--tg-accent); }
.tg-btn--ghost {
  background: var(--tg-surface); color: var(--tg-text);
  border-color: var(--tg-line-2); backdrop-filter: blur(8px);
}
.tg-btn--ghost:hover { border-color: var(--tg-accent); }
.tg-btn--block { width: 100%; }
.tg-btn:disabled { opacity: 0.4; cursor: default; transform: none; }

/* Hint button */
.tg-hint {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 999px;
  background: oklch(0.80 0.12 86 / 0.10);
  border: 1px dashed var(--tg-accent);
  color: var(--tg-accent); font-weight: 700; font-size: 14px;
  font-family: var(--tg-font-ui);
  transition: background .2s, transform .14s;
}
.tg-hint:hover { background: oklch(0.80 0.12 86 / 0.18); }
.tg-hint:disabled,
.tg-hint.is-used { opacity: 0.35; cursor: default; border-style: solid; color: var(--tg-text-faint); }

/* ----------------------------------------------------------------------------
   10. HINT POPUP
   ------------------------------------------------------------------------- */
.tg-modal-scrim {
  position: fixed; inset: 0; z-index: 9000;
  background: oklch(0.05 0.02 250 / 0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: tg-fade .2s ease;
}
.tg-popup {
  width: 100%; max-width: 420px;
  background: var(--tg-bg-2);
  background-image: linear-gradient(180deg, oklch(0.30 0.035 250 / 0.5), transparent 40%);
  border: 1px solid var(--tg-line-2);
  border-radius: var(--tg-radius-lg);
  padding: 24px 22px 20px;
  box-shadow: var(--tg-shadow), 0 0 0 1px oklch(0.80 0.12 86 / 0.18);
  animation: tg-rise .3s cubic-bezier(.2,.8,.2,1);
}
.tg-popup__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--tg-accent); }
.tg-popup__title { font-family: var(--tg-font-display); font-weight: 700; font-size: 19px; }
.tg-popup__body { font-size: 16px; line-height: 1.55; color: var(--tg-text-dim); margin-bottom: 18px; }
.tg-popup__body em { font-style: italic; color: var(--tg-accent-soft); }

@keyframes tg-fade { from { opacity: 0.01; } }
@keyframes tg-rise { from { transform: translateY(26px); } }

/* ----------------------------------------------------------------------------
   11. LEVEL SELECT
   ------------------------------------------------------------------------- */
.tg-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tg-level {
  position: relative; appearance: none; cursor: pointer; text-align: left;
  padding: 16px 16px 14px;
  border-radius: var(--tg-radius);
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  color: var(--tg-text);
  overflow: hidden;
  transition: transform .15s, border-color .2s, box-shadow .2s;
  min-height: 112px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tg-level:hover:not(.is-locked) { transform: translateY(-3px); border-color: var(--tg-accent); box-shadow: var(--tg-glow); }
.tg-level__num { font-family: var(--tg-font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.tg-level__name { font-size: 13px; color: var(--tg-text-dim); font-weight: 600; }
.tg-level__foot { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tg-text-faint); font-weight: 600; letter-spacing: 0.03em; }
.tg-level.is-locked { opacity: 0.5; cursor: not-allowed; }
.tg-level.is-current { border-color: var(--tg-accent); box-shadow: var(--tg-glow); }

.tg-level__reel {
  position: absolute; right: -12px; top: -12px; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--tg-line-2); opacity: 0.5;
}
.tg-level.is-locked .tg-level__num { color: var(--tg-text-faint); }

.tg-stars { display: inline-flex; gap: 2px; }
.tg-star { width: 12px; height: 12px; color: var(--tg-accent); opacity: 0.3; }
.tg-star.is-on { opacity: 1; }

.tg-level__hintbadge {
  position: absolute; right: 10px; top: 10px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  color: var(--tg-accent); background: oklch(0.80 0.12 86 / 0.12);
  border: 1px solid var(--tg-line-2);
}

/* ----------------------------------------------------------------------------
   12. RESULT / SUMMARY
   ------------------------------------------------------------------------- */
.tg-result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; justify-content: center; }

/* ----------------------------------------------------------------------------
   13. FIXED NEXT BAR
   ------------------------------------------------------------------------- */
.tg-next-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, oklch(8% 0.02 250 / 0.97) 55%, transparent);
  display: none;
  z-index: 70;
}
.tg-next-bar.is-visible {
  display: block;
  animation: trivia-fade-slide-up 0.22s ease-out both;
}

.tg-content { padding-bottom: 80px; }

/* ----------------------------------------------------------------------------
   14. STICKY TOP UI
   ------------------------------------------------------------------------- */
.tg-sticky-ui {
  position: sticky;
  top: 0;
  z-index: 15;
  margin: 0 -22px;
  padding: 10px 22px 12px;
  background: linear-gradient(to bottom, oklch(8% 0.02 250 / 0.97) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: var(--tg-gap);
}

/* Hide site chrome during gameplay — class added by trivia.js */
body.trivia-active .topnav           { display: none !important; }
body.trivia-active .mobile-bottomnav { display: none !important; }
body.trivia-active .tg-content       { padding-top: 0; }

/* Scroll clearance so fixed next bar doesn't cover explanation */
.trivia-explanation { scroll-margin-bottom: 80px; }

/* ----------------------------------------------------------------------------
   15. TIMER PULSE
   ------------------------------------------------------------------------- */
@keyframes tg-num-pulse {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(1.35); opacity: 0.85; }
  100% { transform: scale(1);    opacity: 1; }
}
.tg-timer__num.is-pulsing {
  animation: tg-num-pulse 0.38s ease-out;
}
.tg-result__ring {
  width: 168px; height: 168px; position: relative; margin: 4px 0 10px;
}
.tg-result__ring svg { transform: rotate(-90deg); }
.tg-result__pct {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.tg-result__pct b { font-family: var(--tg-font-display); font-size: 46px; font-weight: 700; line-height: 1; }
.tg-result__pct span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tg-text-faint); }
.tg-statgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; width: 100%; margin: 8px 0 4px; }
.tg-stat { background: var(--tg-surface); border: 1px solid var(--tg-line); border-radius: var(--tg-radius-sm); padding: 14px 8px; }
.tg-stat b { display: block; font-family: var(--tg-font-display); font-size: 24px; font-weight: 700; }
.tg-stat span { font-size: 11px; color: var(--tg-text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

.tg-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: auto; padding-top: 8px; }

/* hearts / lives */
.tg-lives { display: inline-flex; gap: 5px; align-items: center; }
.tg-heart { width: 18px; height: 18px; color: var(--tg-wrong); flex: none; transition: color .3s, transform .2s; }
.tg-heart.is-lost { color: var(--tg-line-2); transform: scale(0.85); }

/* ----------------------------------------------------------------------------
   13. HERO / HOME
   ------------------------------------------------------------------------- */
.tg-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.tg-hero__art {
  align-self: center; width: 116px; height: 116px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  border: 2px solid var(--tg-accent);
  background: radial-gradient(circle, oklch(0.80 0.12 86 / 0.12), transparent 70%);
  box-shadow: var(--tg-glow);
}
.tg-hero__art::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px dashed var(--tg-line-2);
}

.tg-divider { display: flex; align-items: center; gap: 10px; color: var(--tg-text-faint); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.tg-divider::before, .tg-divider::after { content: ""; height: 1px; flex: 1; background: var(--tg-line); }

.tg-marquee { display: flex; gap: 8px; justify-content: center; }
.tg-marquee i { width: 7px; height: 7px; border-radius: 50%; background: var(--tg-accent); opacity: 0.5; animation: tg-blink 1.6s infinite; }
.tg-marquee i:nth-child(2){ animation-delay:.2s } .tg-marquee i:nth-child(3){ animation-delay:.4s }
.tg-marquee i:nth-child(4){ animation-delay:.6s } .tg-marquee i:nth-child(5){ animation-delay:.8s }
@keyframes tg-blink { 0%,100%{opacity:.25} 50%{opacity:1} }

.tg-spacer { flex: 1; }
.tg-center { text-align: center; }
.tg-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; }
}