/* ==========================================================================
   BrainTrivia theme — maps braintrivia.net's design tokens onto the MixGames
   quiz engine. Appended to the copied assets/quiz.css, so it wins on overlap.

   Source of truth: tokens read from the live site's :root (braintrivia.net).
     --bg-page #f5f5f2   --bg-card #fff      --text-primary #16161c
     --text-muted #9a9aa2 --border-default #e2e2de --border-subtle #dcdcd6
     --brand #5a4be3      --brand-soft #e4e2ff
     difficulty: easy #1f9d57 / medium #d08a16 / hard #dd4b3e
     logo: purple #682AE3 + green #00D390

   The engine's geometry, animations and quiz-play UI are deliberately kept
   as-is (MixGames); only colour, surface and type tokens are re-pointed.
   ========================================================================== */

:root{
  /* type ------------------------------------------------------------------ */
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:'Space Grotesk','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* Every value below is a braintrivia.net token unless marked DERIVED.
     DERIVED values exist only where BT has no equivalent token (the engine
     needs tints/hovers their UI never uses) and are mixed from BT hexes. */

  /* ink ------------------------------------------------------------------- */
  --ink:#16161c;                /* BT --text-primary */
  --muted:#9a9aa2;              /* BT --text-muted */

  /* brand ----------------------------------------------------------------- */
  /* BT's CSS --brand is #5a4be3; its logo mark is the more saturated #682AE3.
     CTAs and the mascot use the LOGO purple; UI chrome uses the site token. */
  --logo:#682ae3;               /* BT logo mark */
  --logo-d:#5620c6;             /* DERIVED — logo purple darkened for gradients */
  --logo-l:#7d45e8;             /* DERIVED — logo purple lightened */
  --logo-green:#00d390;         /* BT logo accent */

  --primary:#5a4be3;            /* BT --brand */
  --primary2:#682ae3;           /* BT logo purple */
  --primaryd:#5a4be3;           /* BT --cat-triv-fg (text on brand-soft) */
  --primtint:#e4e2ff;           /* BT --brand-soft */
  --accent:#00d390;             /* BT logo accent */

  /* verdicts — BT difficulty palette ---------------------------------------- */
  --ok:#1f9d57;                 /* BT --diff-easy */
  --okbg:#d7f3ec;               /* BT --cat-geo-bg */
  --okink:#0e6b4a;              /* DERIVED — darkened for AA on the tint */
  --no:#dd4b3e;                 /* BT --diff-hard */
  --nobg:#ffe1dc;               /* BT --cat-pers-bg */
  --noink:#a3291d;              /* DERIVED — darkened for AA on the tint */

  /* surfaces --------------------------------------------------------------- */
  --card:#ffffff;               /* BT --bg-card */
  --line:#e2e2de;               /* BT --border-default */
  --field:#fafafa;              /* BT answer-option background */
  --bg1:#f5f5f2;                /* BT --bg-page */
  --bg2:#ececea;                /* BT card/header hairline, used as the 2nd stop */
  --surface:#ffffff;            /* BT --bg-card */
  --optHover:#efe3ff;           /* BT --cat-ent-bg (lavender hover) */
  --track:#e4e2ff;              /* BT --brand-soft */

  --glass:rgba(255,255,255,.94);  /* BT header background */
  --glassbrd:#ececea;             /* BT header hairline */
  --navbg:rgba(255,255,255,.94);  /* BT header background */

  --heroA:#ececea; --heroB:#f5f5f2; --heroloaded:#f5f5f2;   /* BT page + hairline */

  --toastbg:#16161c; --toastink:#ffffff;                     /* BT text-primary */
  --upA:#e4e2ff; --upB:#d7f3ec;                              /* BT brand-soft + geo tint */
  --pillbg:#f5f5f2;                                          /* BT --bg-page */
  --dykbg:#efe3ff; --dykbrd:#e4e2ff;                         /* BT cat-ent-bg + brand-soft */

  /* BT cards are flat — soften the MixGames drop shadow rather than remove it,
     so the quiz-play UI keeps its depth cues without looking foreign. */
  --shadow:0 6px 22px rgba(22,22,28,.07);
}

/* --------------------------------------------------------------------------
   Dark palette — DERIVED. braintrivia.net ships light-only (no .dark class,
   no prefers-color-scheme rules), so there is no upstream reference for this.
   Built to keep BT's warm-neutral character rather than MixGames' blue-grey:
   surfaces are warm charcoals, the brand is lifted for contrast on dark, and
   the logo green is retained as the accent.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --ink:#ececf0;
  --muted:#9a9aa4;              /* BT --text-muted, lifted for dark surfaces */

  --primary:#9463f5;            /* BT logo purple, lifted for contrast on charcoal */
  --primary2:#a98bf8;
  --primaryd:#d6c8ff;
  --primtint:#2a1f52;           /* BT brand-soft, inverted */
  --accent:#00d390;             /* BT logo accent — pure; it pops on dark */

  --ok:#35c07a;  --okbg:#0e2f26; --okink:#8fe8b5;   /* BT diff-easy / geo, inverted */
  --no:#ff6b5c;  --nobg:#3a1a16; --noink:#ffb5ad;   /* BT diff-hard / pers, inverted */

  --card:#1c1c23;
  --line:#2c2c34;
  --field:#232329;
  --bg1:#131318;
  --bg2:#1a1a20;
  --surface:#202028;
  --optHover:#2a2550;
  --track:#2c2c36;

  --glass:rgba(28,28,35,.92);
  --glassbrd:rgba(255,255,255,.07);
  --navbg:rgba(19,19,24,.92);

  --heroA:#22222b; --heroB:#1a1a21; --heroloaded:#1f1f27;

  --toastbg:#2c2c36; --toastink:#ffffff;
  --upA:#231f42; --upB:#12302a; --pillbg:#2a2550;
  --dykbg:#232046; --dykbrd:#39346b;

  --shadow:0 14px 40px rgba(0,0,0,.55);
}

/* no-JS fallback: honour the OS setting when no explicit choice is stored */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --ink:#ececf0; --muted:#9a9aa4;
    --primary:#8b7dff; --primary2:#a396ff; --primaryd:#cfc8ff; --primtint:#2a2550;
    --accent:#00d390;
    --ok:#35c07a; --okbg:#12301f; --okink:#8fe8b5;
    --no:#ff6b5c; --nobg:#391916; --noink:#ffb5ad;
    --card:#1c1c23; --line:#2c2c34; --field:#232329;
    --bg1:#131318; --bg2:#1a1a20; --surface:#202028;
    --optHover:#2a2550; --track:#2c2c36;
    --glass:rgba(28,28,35,.92); --glassbrd:rgba(255,255,255,.07); --navbg:rgba(19,19,24,.92);
    --heroA:#22222b; --heroB:#1a1a21; --heroloaded:#1f1f27;
    --toastbg:#2c2c36; --toastink:#ffffff;
    --upA:#231f42; --upB:#12302a; --pillbg:#2a2550;
    --dykbg:#232046; --dykbrd:#39346b;
    --shadow:0 14px 40px rgba(0,0,0,.55);
  }
}

/* Display face on headings — BT uses Space Grotesk with tight tracking. */
h1,h2,h3,.qtext,.tier,.brandword{font-family:var(--font-display);letter-spacing:-.02em}

/* ==========================================================================
   Hard overrides — MixGames coral/indigo that is baked into rules rather than
   read from :root. Without these the token theme above is overridden and the
   quiz still reads as MixGames orange. Everything here is re-pointed to the
   BrainTrivia brand purple, with the logo green as the secondary accent.
   ========================================================================== */

/* primary CTAs (Start / Next / result actions / mini-card play button).
   Painted in the LOGO purple #682AE3 so the main action reads as the brand. */
.btn.coral,
.abtn,
.abtn.coral,
.miniq .play{
  background:linear-gradient(100deg,var(--logo-d),var(--logo)) !important;
  box-shadow:0 10px 24px rgba(104,42,227,.30) !important;
  color:#fff;
}
.abtn,.abtn.coral{box-shadow:0 12px 28px rgba(104,42,227,.34) !important}
.btn.coral:hover,.abtn:hover,.miniq .play:hover{filter:brightness(1.08)}

/* progress bar — logo purple running into the logo green -------------------- */
.hbar i{
  background:linear-gradient(90deg,var(--logo),var(--logo-green)) !important;
  box-shadow:0 0 8px rgba(104,42,227,.45) !important;
}

/* chosen answer — the engine baked the old indigo in here; drive it from the
   brand token instead so it tracks light/dark ----------------------------- */
.opt.chosen{background:var(--primtint) !important;border-color:var(--primary) !important}
.opt.chosen .badge{background:var(--primary) !important}
.opt.chosen .mark::after{color:var(--primary) !important}

/* streak / speed pills.
   BrainTrivia's own header streak chip is orange, so warm pills stay warm —
   they're re-tuned to a cleaner amber that sits with the purple rather than
   the old coral, instead of being recoloured purple. */
.streakchip,.streakpill{
  background:linear-gradient(100deg,#ffa726,#f57c00) !important;
  color:#4a2400 !important;
}
.fastpill{
  background:linear-gradient(100deg,#ffd24d,#ffa726) !important;
  color:#5c3a00 !important;
}

/* --------------------------------------------------------------------------
   MASCOT — nothing here.

   This block used to re-theme Professor Hoot to the BrainTrivia palette: body
   and wing fills, beak, cheeks, talon strokes, spectacles, smile, ear tufts,
   and a full set of Oxford academic dress (mortarboard, gown, bow tie) with a
   tassel animation. Every one of those selectors targets a class that Memo's
   rig does not have — grepping quiz.js, personality.js and mascot.js returns
   zero references to any of them — so the whole block was dead the moment the
   owl was replaced.

   Deleted rather than left in place. Dead styling for a mascot that no longer
   exists is exactly what gets copied forward into the next port and then
   half-resurrected by a class-name collision. Memo's colour, rig and state
   choreography live in exactly one file: partials/bt-mascot.css.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   QA round 1 — reported 29 Jul. Each fix names the actual cause, because
   several of these looked like styling nits and were not.
   ========================================================================== */

/* [1] Shimmer was invisible, not missing.
   quiz.css animates .hero as a moving gradient between --heroA and --heroB.
   The BrainTrivia palette set those two to #ececea and #f5f5f2 — a 3-point
   lightness difference. The animation ran the whole time; there was simply
   nothing to see. Widened in both themes so the sweep reads without becoming
   a stripe. */
:root{ --heroA:#e3e3de; --heroB:#f7f7f4; }
:root[data-theme="dark"]{ --heroA:#38384a; --heroB:#131318; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){ --heroA:#38384a; --heroB:#131318; }
}
/* Dark needed a wider spread than light, not the same one. Absolute luminance
   is tiny down there, so a delta that reads clearly on white is invisible on
   charcoal — the first attempt at #282833/#16161c moved 1.4% and still looked
   static. #38384a/#131318 is a 1.62:1 ratio, which reads as a sweep without
   turning into a stripe. */

/* [6] "More quizzes for you" cards unreadable in dark mode.
   .miniq is a <button>. Buttons do NOT inherit `color` — without an explicit
   rule they use the UA's `buttontext`, which is near-black. In light mode that
   happened to look right; on a dark card it is black-on-charcoal. The card
   background was themed, the text never was. */
.miniq{color:var(--ink)}
.miniq b{color:var(--ink)}
.miniq .play.soon{color:var(--muted)}

/* [7] Final score not centred in the ring.
   Round 3. Centring the NUMBER+LABEL block together was measurably correct —
   the combined ink landed within 0.7px of the ring's centre — and still read
   as wrong, because that is not what the eye is measuring. "60" is 36px and
   bold and "/80" is 13px and grey, so the reader sees one object with a
   subscript, not two stacked lines. Centring their combined mass therefore
   pushes the thing people actually look at 8.5px above the centre of the
   circle, which is exactly the complaint, twice.

   The score is what the ticket asks to be centred, so the score is what gets
   centred: <b> alone is the flex item, and the label is taken out of flow and
   hung beneath it. That is also how every other score ring is drawn.

   Both nudges are in em of .ring-num, which now carries the font size, so they
   hold at the 42px and 36px steps without a second set of magic numbers. */
.ring-num{
  display:flex; align-items:center; justify-content:center;
  line-height:1; font-size:42px;
  /* `line-height:1` splits the font's unused leading unevenly around the
     digits — measured 5.25px above and 3.07px below at 36px — so the ink sits
     1.09px (.03em) below the box centre. Padding twice that off the bottom
     brings it back. */
  padding-bottom:.06em;
}
.ring-num b{ font-size:1em; position:static; transform:none; }
/* Hung from the ring's centre line rather than stacked, so its own height can
   never move the number. The offset is in px, not em, because em on this
   element resolves against ITS OWN 13px — the first attempt used .42em and
   landed 5px below centre, straight through the digits. Measured to clear the
   number's ink by 4px: 19px under a 42px score, 16px under a 36px one. */
.ring-num span{
  position:absolute; left:50%; top:50%; transform:translateX(-50%);
  margin-top:19px; font-size:13px; white-space:nowrap;
}
/* quiz.css drops <b> to 36px at this width; re-point that at the group so the
   padding scales with it instead of staying sized for 42px. */
@media (max-width:600px){
  .ring-num{ font-size:36px }
  .ring-num b{ font-size:1em }
  .ring-num span{ margin-top:16px }
}

/* [5] "Not quite" appeared off-centre.
   .reveal-card.hosted is a row: Memo on the left, .mg-say on the right.
   `justify-content:center` centres the verdict inside .mg-say — which is
   correct relative to the text column and wrong relative to the card, because
   the mascot occupies the left edge. On a phone that offset is most of the
   width. Stacking the card below 620px makes .mg-say full width, so "centred"
   means the same thing to the layout and to the reader. */
@media (max-width:620px){
  .reveal-card.hosted{ flex-direction:column; align-items:center; text-align:center; }
  .reveal-card.hosted .mg-side{ margin:0 auto 4px; }
  .reveal-card.hosted .mg-say{ width:100%; }
}