/* ============================================================
   GameRoch — Quiz Nova (V3 Live Update 1): the hub, a run, its result.
   Built on the nx- kit in css/next.css; every class here is `nxq-`.

   THE CLIMB. Four tiers, four fixed colours, one staircase that is drawn the
   same way on the hub, in play, at a checkpoint and on the result:

     easy    green   --nx-good        (the kit's "right / done")
     medium  blue    a FIXED blue     (not --gr-blue: in many of the 23 themes
                                       the accent is green, violet, pink or
                                       amber and would repeat another tier)
     hard    amber   --nx-warn
     expert  violet  --nx-rp

   THE FIVE GROUPS each have one hue. It is only ever used as a soft tint
   behind a glyph and as that glyph's ink (mixed with --gr-ink, so it is dark
   on a light theme and light on a dark one).

   Everything else belongs to the theme (--gr-*). On the loud gradient only
   white is used; anything that needs a tier or a right/wrong colour sits on a
   --gr-panel tray inside it, where those colours are known to be readable.
   ============================================================ */

#gr-complete {
  --nxq-easy: var(--nx-good);
  --nxq-medium: #2563d9;
  --nxq-hard: var(--nx-warn);
  --nxq-expert: var(--nx-rp);
  --nxq-gold: #dc9a00;
  --nxq-g-numbers: #3b5bdb;
  --nxq-g-thinking: #9c36b5;
  --nxq-g-science: #0b7285;
  --nxq-g-world: #c2410c;
  --nxq-g-words: #c2255c;
  --nxq-slot: color-mix(in srgb, var(--gr-ink) 56%, var(--gr-panel));   /* an empty star or pip: 3:1 on the panel */
  /* Secondary text ON A TINT (a group banner, a tier step): --gr-sub alone is 4.4:1 there in `kids`. */
  --nxq-sub-on-tint: color-mix(in srgb, var(--gr-sub) 60%, var(--gr-ink));
}
#gr-complete[data-tone=dark] {
  --nxq-medium: #8ab4ff;
  --nxq-gold: #ffcf5a;
  --nxq-g-numbers: #91a7ff;
  --nxq-g-thinking: #e599f7;
  --nxq-g-science: #66d9e8;
  --nxq-g-world: #ffa94d;
  --nxq-g-words: #faa2c1;
}
#gr-complete .nxq .is-easy { --nxq-t: var(--nxq-easy); }
#gr-complete .nxq .is-medium { --nxq-t: var(--nxq-medium); }
#gr-complete .nxq .is-hard { --nxq-t: var(--nxq-hard); }
#gr-complete .nxq .is-expert { --nxq-t: var(--nxq-expert); }
#gr-complete .nxq .is-g-numbers { --nxq-g: var(--nxq-g-numbers); }
#gr-complete .nxq .is-g-thinking { --nxq-g: var(--nxq-g-thinking); }
#gr-complete .nxq .is-g-science { --nxq-g: var(--nxq-g-science); }
#gr-complete .nxq .is-g-world { --nxq-g: var(--nxq-g-world); }
#gr-complete .nxq .is-g-words { --nxq-g: var(--nxq-g-words); }

#gr-complete .nxq { display: grid; gap: var(--nx-gap); min-width: 0; }
#gr-complete .nxq h1, #gr-complete .nxq h2, #gr-complete .nxq h3 {
  font-family: Outfit, 'DM Sans', sans-serif; font-weight: 800; letter-spacing: -0.02em;
}
/* :where() keeps these resets as weak as the shell's own element rules, so every
   component rule below still wins. */
#gr-complete :where(.nxq) p { margin: 0; }
#gr-complete :where(.nxq) ol, #gr-complete :where(.nxq) ul { list-style: none; margin: 0; padding: 0; }

/* ---------- shared pieces: a topic's glyph, a star ---------- */
#gr-complete .nxq-glyph {
  width: 48px; height: 48px; border-radius: 14px; flex: none; display: inline-grid; place-items: center;
  font: 800 22px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.03em; white-space: nowrap;
  background: color-mix(in srgb, var(--nxq-g) 14%, var(--gr-panel));
  color: color-mix(in srgb, var(--nxq-g) 72%, var(--gr-ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nxq-g) 24%, transparent);
}
#gr-complete .nxq-glyph.is-long { font-size: 15px; }
#gr-complete .nxq-glyph.is-sm { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
#gr-complete .nxq-glyph.is-sm.is-long { font-size: 10.5px; }
#gr-complete .nxq-glyph.is-daily {
  background: var(--nx-warn-soft); color: var(--nx-warn);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-warn) 24%, transparent);
}
#gr-complete .nxq-glyph svg { width: 22px; height: 22px; }

#gr-complete .nxq-stars { display: inline-flex; align-items: center; gap: 3px; }
#gr-complete .nxq-star { width: 17px; height: 17px; display: inline-grid; flex: none; }
#gr-complete .nxq-star svg {
  width: 100%; height: 100%; fill: none; stroke: var(--nxq-slot); stroke-width: 1.7;
}
#gr-complete .nxq-star.is-on svg { fill: var(--nxq-t); stroke: var(--nxq-t); }
#gr-complete .nxq-star.is-gold.is-on svg { fill: var(--nxq-gold); stroke: var(--nxq-gold); }

#gr-complete .nxq-honest {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  color: var(--gr-sub); font-size: 13px; margin-top: 10px;
}
#gr-complete .nxq-honest svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   THE HUB
   ============================================================ */

/* ---------- the loud panel, deepened ----------
   The kit's .nx-hero runs up to --gr-hero2 and lays two white discs over it. In
   the free themes that is too light for small white text — measured on the
   rendered hub: 2.5–4.4:1 in `kids`, 3.1–4.6:1 in `blue`. Quiz Nova's three loud
   panels therefore stay AT OR BELOW --gr-hero wherever anything is read: the
   gradient runs from a deepened hero to the hero itself, the discs are dark
   instead of white, and --gr-hero2 is only a glow in the hub's far corner,
   under tiles that carry their own dark plate. White on --gr-hero is the pair
   every theme is already held to (kids 4.7:1, blue 5.9:1, adult 8.7:1). */
#gr-complete .nxq-hero, #gr-complete .nxq-board, #gr-complete .nxq-res-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gr-hero) 84%, #000), var(--gr-hero));
}
/* The glow belongs to the wide layout only, where the corner holds nothing but
   the plated tiles; in one column the title would run into it. */
@container gr-shell (min-width: 851px) {
  #gr-complete .nxq-hero {
    background:
      radial-gradient(46% 80% at 100% 0%, color-mix(in srgb, var(--gr-hero2) 60%, transparent) 0%, transparent 100%),
      linear-gradient(135deg, color-mix(in srgb, var(--gr-hero) 84%, #000), var(--gr-hero));
  }
}
#gr-complete .nxq-hero::after, #gr-complete .nxq-board::after, #gr-complete .nxq-res-hero::after {
  opacity: 1;
  background:
    radial-gradient(circle at 10% 125%, #00000021 0 24%, transparent 24.4%),
    radial-gradient(circle at 78% -30%, #0000001a 0 26%, transparent 26.4%);
}

/* The kit paints every <p> on a loud panel at 85% white; on the lightest themes that
   is the difference between passing and failing AA, so here they are white. */
#gr-complete .nxq .nx-hero p { color: #fff; }

/* ---------- the hero ---------- */
#gr-complete .nxq-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 36px; align-items: center;
  padding: 34px 38px;
}
#gr-complete .nxq-eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: .01em; color: #fff;
  font-variant-numeric: tabular-nums;
}
#gr-complete .nxq-hero h1 {
  font-size: clamp(36px, 5.2cqi, 60px); line-height: 1; color: #fff; margin: 8px 0 0;
}
#gr-complete .nxq-hero-line { font-size: 18px; line-height: 1.4; color: #fff; margin: 12px 0 22px; }
#gr-complete .nxq-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#gr-complete .nxq-hero .gr-play,
#gr-complete .nxq-res-hero .gr-play {
  background: #fff; color: color-mix(in srgb, var(--gr-hero) 84%, #000);
  border-bottom-color: color-mix(in srgb, var(--gr-hero) 34%, #fff);
  font-size: 16px; padding: 13px 22px; min-height: 52px; border-radius: 14px;
  box-shadow: 0 10px 22px -10px #00000066;
}
#gr-complete .nxq-hero .gr-play:hover,
#gr-complete .nxq-res-hero .gr-play:hover { background: #fff; filter: none; }
#gr-complete .nxq-hero .gr-soft,
#gr-complete .nxq-res-hero .gr-soft {
  background: #0000002b; border: 1px solid #ffffff8c; color: #fff;
  font-size: 15px; padding: 13px 18px; min-height: 52px; border-radius: 14px;
}
#gr-complete .nxq-hero .gr-soft:hover,
#gr-complete .nxq-res-hero .gr-soft:hover { background: #00000047; }

#gr-complete .nxq-hero-score {
  display: grid; grid-template-columns: auto auto; gap: 12px 22px; align-items: end; justify-items: center;
}
#gr-complete .nxq-hero-ring { display: grid; }
#gr-complete .nxq-hero .nx-ring > svg { width: 100%; height: 100%; }
#gr-complete .nxq-hero .nx-ring-track { stroke: #00000038; }
#gr-complete .nxq-hero .nx-ring-fill { stroke: #fff; }
#gr-complete .nxq-hero .nx-ring-inner { display: grid; justify-items: center; gap: 1px; color: #fff; }
#gr-complete .nxq-hero .nx-ring-inner b {
  font: 800 48px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
#gr-complete .nxq-hero .nx-ring-inner small { font-size: 14px; font-weight: 700; color: #fff; }
#gr-complete .nxq-ring-star { width: 18px; height: 18px; display: grid; }
#gr-complete .nxq-hero .nx-ring-inner .nxq-ring-star svg {
  position: static; width: 100%; height: 100%; fill: #fff; stroke: #fff; stroke-width: 1.6;
}

#gr-complete .nxq-hero-steps { display: flex; align-items: flex-end; gap: 6px; }
#gr-complete .nxq-hstep {
  width: 58px; height: calc(74px + var(--k) * 16px); padding: 8px 4px 6px;
  display: grid; align-content: start; justify-items: center; gap: 3px;
  border-radius: 14px 14px 5px 5px; background: #00000038; box-shadow: inset 0 1px 0 #ffffff33;
  color: #fff;
}
#gr-complete .nxq-hstep .nxq-star {
  width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--gr-panel);
}
#gr-complete .nxq-hstep b {
  font: 800 20px/1 Outfit, 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; margin-top: 2px;
}
#gr-complete .nxq-hstep span { font-size: 11px; font-weight: 700; color: #fff; }
#gr-complete .nxq-hero-goal {
  grid-column: 1 / -1; max-width: 400px; text-align: center; font-size: 13.5px; line-height: 1.4;
  color: #fff; font-weight: 500;
}

/* ---------- continue your run ---------- */
#gr-complete .nxq-resume {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-inline-start: 5px solid var(--gr-blue);
}
#gr-complete .nxq-resume-copy { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
#gr-complete .nxq-resume-copy b { font: 800 17px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.01em; }
#gr-complete .nxq-resume-copy > span { color: var(--gr-sub); font-size: 13.5px; font-variant-numeric: tabular-nums; }
#gr-complete .nxq-resume .gr-play { flex: none; }

/* ---------- today's quiz ---------- */
#gr-complete .nxq-daily {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.7fr);
  gap: 18px 26px; align-items: center; padding: 20px 22px;
}
#gr-complete .nxq-daily-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
#gr-complete .nxq-daily-ico {
  width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--nx-warn-soft); color: var(--nx-warn);
}
#gr-complete .nxq-daily-ico svg { width: 24px; height: 24px; }
#gr-complete .nxq-daily h2 { font-size: 20px; line-height: 1.15; }
#gr-complete .nxq-daily-main p { color: var(--gr-sub); font-size: 13.5px; line-height: 1.4; margin-top: 3px; }
#gr-complete .nxq-daily-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
#gr-complete .nxq-daily-topics li {
  display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.2;
}
#gr-complete .nxq-daily-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0;
  padding-inline-start: 24px; border-inline-start: 1px solid var(--gr-line);
}
#gr-complete .nxq-daily-facts dt { color: var(--gr-sub); font-size: 12.5px; }
#gr-complete .nxq-daily-facts dd {
  margin: 4px 0 0; display: flex; align-items: center; gap: 4px 7px; min-height: 24px; min-width: 0;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
#gr-complete .nxq-daily-best { font: 800 20px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.02em; }
#gr-complete .nxq-daily-starcount { display: inline-flex; white-space: nowrap; align-items: center; gap: 4px; font-size: 13px; color: var(--gr-sub); }
#gr-complete .nxq-daily-none { color: var(--gr-sub); font-weight: 600; }
#gr-complete .nxq-daily-streak svg { width: 17px; height: 17px; color: var(--gr-sub); flex: none; }
#gr-complete .nxq-daily-streak.is-on svg { color: var(--nx-warn); }

/* ---------- how a run works: the staircase, the rules, the two choices ---------- */
#gr-complete .nxq-how { padding: 22px; display: grid; gap: 16px; }
#gr-complete .nxq-how-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
#gr-complete .nxq-how-head h2 { font-size: 20px; }
#gr-complete .nxq-how-head p { color: var(--gr-sub); font-size: 14px; }
#gr-complete .nxq-stairs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end;
}
#gr-complete .nxq-step {
  min-height: calc(76px + var(--k) * 13px); padding: 11px 14px; border-radius: 14px;
  display: grid; align-content: start; gap: 2px; position: relative;
  background: color-mix(in srgb, var(--nxq-t) 12%, var(--gr-panel));
  border-top: 4px solid var(--nxq-t);
  font-size: 13px; color: var(--nxq-sub-on-tint);
}
#gr-complete .nxq-step b {
  font: 800 18px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--nxq-t) 72%, var(--gr-ink));
}
#gr-complete .nxq-step-pts { font-size: 12.5px; font-weight: 600; color: var(--nxq-sub-on-tint); margin-top: 2px; }
#gr-complete .nxq-step-pts strong {
  font: 800 20px/1.1 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--gr-ink); margin-inline-end: 2px;
}
#gr-complete .nxq-step-n {
  position: absolute; inset-block-start: 10px; inset-inline-end: 12px;
  font: 800 26px/1 Outfit, 'DM Sans', sans-serif; color: color-mix(in srgb, var(--nxq-t) 30%, transparent);
}
#gr-complete .nxq-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
#gr-complete .nxq-rules li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4; }
#gr-complete .nxq-rules svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--gr-blue); }
#gr-complete .nxq-points { font-size: 14px; }
#gr-complete .nxq-points summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; color: var(--gr-blue);
  min-height: 44px; list-style: none;
}
#gr-complete .nxq-points summary::-webkit-details-marker { display: none; }
#gr-complete .nxq-points summary svg { width: 16px; height: 16px; transition: transform .18s ease-out; }
#gr-complete .nxq-points[open] summary svg { transform: rotate(90deg); }
#gr-complete .nxq-points ul { display: grid; gap: 6px; padding-block: 4px; padding-inline: 22px 0; color: var(--gr-sub); line-height: 1.45; }
#gr-complete .nxq-points li { list-style: disc; }

#gr-complete .nxq-prefs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px;
  padding-top: 16px; border-top: 1px solid var(--gr-line);
}
#gr-complete .nxq-pref { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
#gr-complete .nxq-pref > div { display: grid; gap: 3px; min-width: 0; justify-items: start; }
#gr-complete .nxq-pref b { font-size: 14.5px; font-weight: 700; }
#gr-complete .nxq-pref small { font-size: 12.5px; line-height: 1.4; color: var(--gr-sub); }
#gr-complete .nxq-pref-note { color: var(--nx-warn); }
#gr-complete .nxq-pref-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gr-ink) 7%, transparent); color: var(--gr-sub);
}
#gr-complete button.nxq-switch {
  width: 52px; min-width: 52px; height: 44px; min-height: 44px; padding: 7px 0; flex: none;
  background: none; justify-content: flex-start; border-radius: 99px; position: relative;
}
#gr-complete button.nxq-switch::before {
  content: ""; position: absolute; inset: 7px 0; border-radius: 99px;
  background: color-mix(in srgb, var(--gr-ink) 28%, var(--gr-panel)); transition: background .18s ease-out;
}
#gr-complete button.nxq-switch[aria-checked=true]::before { background: var(--gr-blue); }
/* The knob moves by its inline margin, so it travels the right way in a right-to-left language too. */
#gr-complete .nxq-switch-knob {
  position: relative; width: 24px; height: 24px; border-radius: 50%; background: #fff; margin-inline-start: 3px;
  box-shadow: 0 1px 3px #0000004d; transition: margin .18s ease-out;
}
#gr-complete button.nxq-switch[aria-checked=true] .nxq-switch-knob { margin-inline-start: 25px; }
#gr-complete .nxq-seg {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 13px; margin-top: 3px;
  background: color-mix(in srgb, var(--gr-ink) 7%, transparent);
}
#gr-complete button.nxq-seg-btn {
  min-height: 38px; padding: 6px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--gr-sub);
}
#gr-complete button.nxq-seg-btn[aria-pressed=true] {
  background: var(--gr-panel); color: var(--gr-ink); box-shadow: 0 1px 2px #0002, 0 0 0 1px var(--gr-line);
}
#gr-complete button.nxq-pref-link { min-height: 30px; padding: 2px 0; font-size: 13px; }

/* ---------- the five shelves ---------- */
#gr-complete .nxq-shelves { display: grid; gap: 22px; margin-top: 10px; }
#gr-complete .nxq-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
#gr-complete .nxq-banner {
  grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between;
  gap: 14px; padding: 18px; border-radius: var(--nx-r); position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--nxq-g) 11%, var(--gr-panel));
  border: 1px solid color-mix(in srgb, var(--nxq-g) 26%, var(--gr-line));
}
#gr-complete .nxq-banner-head { display: flex; align-items: center; gap: 13px; min-width: 0; }
#gr-complete .nxq-banner-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--nxq-g); color: var(--gr-panel);
}
#gr-complete .nxq-banner-ico svg { width: 24px; height: 24px; }
#gr-complete .nxq-banner h2 { font-size: 24px; line-height: 1.1; }
#gr-complete .nxq-banner-copy { min-width: 0; }
#gr-complete .nxq-banner-copy p { color: var(--nxq-sub-on-tint); font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* The group's glyphs as large faint type: the shelf says what is on it. */
#gr-complete .nxq-banner-art {
  display: flex; align-items: center; gap: 14px; padding-inline-end: 4px;
  font: 800 34px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.04em; white-space: nowrap;
  color: color-mix(in srgb, var(--nxq-g) 26%, transparent); user-select: none;
}
#gr-complete .nxq-banner-art i { font-style: normal; }
#gr-complete .nxq-banner-progress { grid-column: 1 / -1; display: grid; gap: 7px; }
#gr-complete .nxq-banner-stars { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
#gr-complete .nxq-banner-stars .nxq-star { align-self: center; }
#gr-complete .nxq-banner-stars b { font: 800 20px/1 Outfit, 'DM Sans', sans-serif; }
#gr-complete .nxq-banner-stars small { font-size: 13px; color: var(--nxq-sub-on-tint); font-weight: 600; }
#gr-complete .nxq-banner .nx-bar { height: 8px; background: color-mix(in srgb, var(--nxq-g) 18%, transparent); }
#gr-complete .nxq-banner .nx-bar > i { background: var(--nxq-g); }
/* The tall banner (a shelf of eight): head, a 2-wide field of glyphs, progress. */
#gr-complete .nxq-shelf.is-big .nxq-banner {
  grid-column: span 1; grid-row: span 2; grid-template-columns: minmax(0, 1fr); align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#gr-complete .nxq-shelf.is-big .nxq-banner-head { flex-direction: column; align-items: flex-start; }
#gr-complete .nxq-shelf.is-big .nxq-banner-art {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; justify-items: center;
  gap: 14px 8px; font-size: 34px; padding: 0;
}

#gr-complete button.nxq-topic {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: start;
  align-content: start; gap: 8px; text-align: start;
  padding: 16px; min-height: 172px; border-radius: var(--nx-r); min-width: 0;
  background: var(--gr-panel); border: 1px solid var(--gr-line); box-shadow: var(--gr-shadow); color: var(--gr-ink);
  transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
}
/* Hover is for a pointer that can hover. On a touch screen the last tap "hovers" whatever
   is drawn under it next, and a card or an answer would look chosen before it is. */
#gr-complete button.nxq-topic:hover { background: var(--gr-panel); }
@media (hover: hover) {
  #gr-complete button.nxq-topic:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--nxq-g) 60%, var(--gr-line));
    box-shadow: 0 14px 24px -16px color-mix(in srgb, var(--nxq-g) 80%, transparent);
  }
}
#gr-complete button.nxq-topic:active { transform: translateY(1px); }
#gr-complete .nxq-topic-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
#gr-complete .nxq-topic-name {
  font: 700 16.5px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.01em; min-height: 2.4em;
  display: flex; align-items: flex-end; overflow-wrap: anywhere;
}
#gr-complete .nxq-topic-line { font-size: 13px; color: var(--gr-sub); font-variant-numeric: tabular-nums; min-height: 1.3em; }
#gr-complete .nxq-topic-line.is-best b { color: var(--gr-ink); font-weight: 800; }
#gr-complete .nxq-crown {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nx-warn-soft); color: var(--nx-warn);
}
#gr-complete .nxq-crown svg { width: 15px; height: 15px; }

/* ---------- one entrance, for the hero ---------- */
#gr-complete .nxq-hero.is-enter .nx-ring-fill { animation: nxq-ring-in .9s cubic-bezier(.2, .8, .2, 1) both; }
#gr-complete .nxq-hero.is-enter .nxq-hstep { animation: nxq-rise .45s ease-out both; animation-delay: calc(var(--k) * 70ms + 120ms); }
@keyframes nxq-ring-in { from { stroke-dashoffset: var(--nxq-c, 427px); } }
@keyframes nxq-rise { from { transform: translateY(14px); opacity: 0; } }

/* ---------- the hub on a tablet and on a phone ---------- */
@container gr-shell (max-width: 1100px) {
  #gr-complete .nxq-daily { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  #gr-complete .nxq-daily-facts {
    grid-column: 1 / -1; padding-inline-start: 0; border-inline-start: 0;
    padding-top: 14px; border-top: 1px solid var(--gr-line);
  }
  #gr-complete .nxq-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container gr-shell (max-width: 850px) {
  #gr-complete .nxq-hero { grid-template-columns: minmax(0, 1fr); padding: 26px; }
  #gr-complete .nxq-hero-score { justify-content: start; justify-items: start; }
  #gr-complete .nxq-hero-goal { text-align: start; }
  #gr-complete .nxq-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Nine cells for the shelf of eight (banner + 8); a strip above a row of three. */
  #gr-complete .nxq-shelf.is-big .nxq-banner { grid-column: span 1; grid-row: span 1; grid-template-rows: auto auto; align-content: space-between; }
  #gr-complete .nxq-shelf.is-big .nxq-banner-art { display: none; }
  #gr-complete .nxq-shelf:not(.is-big) .nxq-banner {
    grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto minmax(120px, 200px); align-items: center;
  }
  #gr-complete .nxq-shelf:not(.is-big) .nxq-banner-progress { grid-column: auto; }
  #gr-complete .nxq-shelf:not(.is-big) .nxq-banner-art { font-size: 30px; gap: 14px; }
  #gr-complete .nxq-prefs { grid-template-columns: minmax(0, 1fr); }
}
@container gr-shell (max-width: 620px) {
  /* The hero: title, the ring row, then the button — all on the first screen. */
  #gr-complete .nxq-hero { padding: 20px 18px; gap: 14px; }
  #gr-complete .nxq-hero-copy { display: contents; }
  #gr-complete .nxq-hero-copy > * { order: 0; }
  #gr-complete .nxq-hero h1 { font-size: 38px; margin: 0; }
  #gr-complete .nxq-eyebrow { font-size: 13px; margin-bottom: -8px; }
  #gr-complete .nxq-hero-line { font-size: 16px; margin: -6px 0 0; }
  #gr-complete .nxq-hero-score {
    order: 1; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; justify-items: stretch;
  }
  #gr-complete .nxq-hero-ring .nx-ring { --nx-ring: 96px !important; }
  #gr-complete .nxq-hero .nx-ring-inner b { font-size: 30px; }
  #gr-complete .nxq-hero .nx-ring-inner small { font-size: 12px; }
  #gr-complete .nxq-ring-star { width: 13px; height: 13px; }
  #gr-complete .nxq-hero-steps { justify-content: flex-end; gap: 5px; }
  #gr-complete .nxq-hstep { width: 48px; height: calc(56px + var(--k) * 10px); padding: 6px 2px 4px; gap: 1px; }
  #gr-complete .nxq-hstep .nxq-star { width: 20px; height: 20px; padding: 3px; }
  #gr-complete .nxq-hstep b { font-size: 16px; }
  #gr-complete .nxq-hstep span { font-size: 10px; }
  #gr-complete .nxq-hero-goal { font-size: 13px; }
  #gr-complete .nxq-hero-actions { order: 2; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
  #gr-complete .nxq-hero .gr-play, #gr-complete .nxq-hero .gr-soft { padding: 12px 6px; font-size: 14.5px; gap: 6px; white-space: nowrap; }
  #gr-complete .nxq-hero .gr-soft svg { display: none; }

  #gr-complete .nxq-resume { flex-wrap: wrap; padding: 14px; }
  #gr-complete .nxq-resume .gr-play { flex: 1 1 100%; }

  #gr-complete .nxq-daily { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 14px; }
  /* Three facts as three rows: a label and its value, nothing wrapped. */
  #gr-complete .nxq-daily-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 12px; }
  #gr-complete .nxq-daily-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #gr-complete .nxq-daily-facts dt { font-size: 13.5px; }
  #gr-complete .nxq-daily-facts dd { font-size: 14.5px; margin: 0; }
  #gr-complete .nxq-daily-best { font-size: 18px; }

  #gr-complete .nxq-how { padding: 16px; gap: 14px; }
  #gr-complete .nxq-stairs { gap: 6px; }
  #gr-complete .nxq-step { padding: 9px 8px; min-height: calc(82px + var(--k) * 12px); font-size: 11px; line-height: 1.3; border-radius: 12px; }
  #gr-complete .nxq-step b { font-size: 15px; }
  #gr-complete .nxq-step-pts { font-size: 11px; }
  #gr-complete .nxq-step-pts strong { font-size: 18px; display: block; }
  #gr-complete .nxq-step-n, #gr-complete .nxq-step-q { display: none; }
  #gr-complete .nxq-rules { grid-template-columns: minmax(0, 1fr); }

  #gr-complete .nxq-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #gr-complete .nxq-shelf .nxq-banner,
  #gr-complete .nxq-shelf.is-big .nxq-banner,
  #gr-complete .nxq-shelf:not(.is-big) .nxq-banner {
    grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(84px, 110px);
    grid-template-rows: auto; align-items: center; padding: 12px 14px; gap: 12px;
  }
  #gr-complete .nxq-shelf .nxq-banner-head,
  #gr-complete .nxq-shelf.is-big .nxq-banner-head { flex-direction: row; align-items: center; gap: 11px; }
  #gr-complete .nxq-shelf .nxq-banner-art,
  #gr-complete .nxq-shelf:not(.is-big) .nxq-banner-art { display: none; }
  #gr-complete .nxq-shelf .nxq-banner-progress { grid-column: auto; }
  #gr-complete .nxq-banner-ico { width: 40px; height: 40px; border-radius: 12px; }
  #gr-complete .nxq-banner h2 { font-size: 20px; }
  #gr-complete .nxq-banner-copy p { font-size: 12.5px; margin-top: 2px; }
  #gr-complete button.nxq-topic { padding: 14px; min-height: 160px; }
  #gr-complete .nxq-topic-name { font-size: 15.5px; }
  /* An odd last card takes the whole row, laid on its side, so no cell is empty. */
  #gr-complete .nxq-shelf > .nxq-topic:last-child:nth-child(even) {
    grid-column: 1 / -1; min-height: 0; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 5px;
    align-items: center;
  }
  #gr-complete .nxq-shelf > .nxq-topic:last-child:nth-child(even) .nxq-topic-top { grid-row: 1 / span 3; width: auto; gap: 8px; }
  #gr-complete .nxq-shelf > .nxq-topic:last-child:nth-child(even) .nxq-topic-name { min-height: 0; }
}

/* ============================================================
   THE STAGE — a run
   ============================================================ */
#gr-complete .nxq-play, #gr-complete .nxq-result, #gr-complete .nxq-fail {
  max-width: 980px; width: 100%; margin-inline: auto;
}
#gr-complete .nxq-stage { overflow: hidden; display: grid; }
#gr-complete .nxq-board {
  border-radius: 0; padding: 16px 22px 26px; display: grid; gap: 16px;
}

/* ---------- the top bar ---------- */
#gr-complete .nxq-hud { display: flex; align-items: center; gap: 14px; min-width: 0; }
#gr-complete button.nxq-leave {
  min-height: 44px; min-width: 44px; padding: 8px 14px 8px 10px; border-radius: 12px; flex: none;
  background: #00000033; color: #fff; font-size: 14px; font-weight: 700; gap: 6px;
}
#gr-complete button.nxq-leave:hover { background: #00000057; }
#gr-complete .nxq-hud-topic { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
#gr-complete .nxq-hud-name {
  display: grid; min-width: 0; font-size: 18px; line-height: 1.15; color: #fff; letter-spacing: -0.01em;
}
#gr-complete .nxq-hud-tag {
  font: 700 12px/1.2 'DM Sans', sans-serif; letter-spacing: .01em; color: #fff;
}
#gr-complete .nxq-lives { display: inline-flex; gap: 4px; flex: none; }
#gr-complete .nxq-life { width: 25px; height: 25px; display: grid; flex: none; }
#gr-complete .nxq-life svg { width: 100%; height: 100%; }
#gr-complete .nxq-heart-body { fill: #00000038; stroke: #fff; stroke-width: 1.7; }
#gr-complete .nxq-life.is-on .nxq-heart-body { fill: #fff; stroke: #fff; }
#gr-complete .nxq-heart-crack { stroke: #fff; stroke-width: 1.6; }
#gr-complete .nxq-hud-score {
  position: relative; display: grid; justify-items: end; gap: 1px; min-width: 62px; flex: none; line-height: 1;
}
#gr-complete .nxq-hud-score b {
  font: 800 25px/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff;
}
#gr-complete .nxq-hud-score small { font-size: 11px; font-weight: 700; color: #fff; }
#gr-complete .nxq-pop {
  position: absolute; inset-inline-end: 0; inset-block-start: -6px; pointer-events: none; white-space: nowrap;
  font: 800 19px/1 Outfit, 'DM Sans', sans-serif; color: #fff; text-shadow: 0 1px 6px #0006;
  animation: nxq-pop 1.1s ease-out both;
}
#gr-complete .nxq-hud-streak {
  display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 6px 12px 6px 9px; flex: none;
  border-radius: 99px; background: #00000033; color: #fff;
  font: 800 17px/1 Outfit, 'DM Sans', sans-serif; font-variant-numeric: tabular-nums;
}
#gr-complete .nxq-hud-streak svg { width: 17px; height: 17px; }
#gr-complete .nxq-hud-streak.is-hot { background: #fff; color: #b93a08; }

/* ---------- the ladder: 20 pips on four rising treads ---------- */
#gr-complete .nxq-ladder {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end;
  padding: 12px 14px 10px; border-radius: 16px; background: var(--gr-panel); color: var(--gr-ink);
  box-shadow: 0 8px 18px -12px #00000080;
}
#gr-complete .nxq-tier { display: grid; gap: 6px; min-width: 0; }
/* The tread: it rises a step with every tier and fills in as the climb reaches it. */
#gr-complete .nxq-tier::after {
  content: ""; height: calc(4px + var(--k) * 5px); border-radius: 4px;
  background: color-mix(in srgb, var(--nxq-t) 20%, var(--gr-panel));
}
#gr-complete .nxq-tier.is-now::after, #gr-complete .nxq-tier.is-done::after { background: var(--nxq-t); }
#gr-complete .nxq-pips { display: flex; align-items: center; gap: 6px; min-height: 14px; }
#gr-complete .nxq-pip {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 2px var(--nxq-slot);
}
#gr-complete .nxq-pip.is-right { background: var(--nx-good); box-shadow: none; }
#gr-complete .nxq-pip.is-wrong { background: var(--nx-bad); box-shadow: none; border-radius: 4px; }
#gr-complete .nxq-pip.is-skipped {
  height: 5px; border-radius: 3px; box-shadow: none; background: color-mix(in srgb, var(--gr-ink) 42%, var(--gr-panel));
}
#gr-complete .nxq-pip.is-now {
  background: var(--nxq-t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nxq-t) 30%, transparent);
  animation: nxq-pulse 1.5s ease-in-out infinite;
}
#gr-complete .nxq-tier-name {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; line-height: 1.1;
  color: var(--gr-sub);
}
#gr-complete .nxq-tier.is-now .nxq-tier-name, #gr-complete .nxq-tier.is-done .nxq-tier-name {
  color: color-mix(in srgb, var(--nxq-t) 74%, var(--gr-ink));
}
#gr-complete .nxq-tier-name .nxq-star { width: 13px; height: 13px; }

/* ---------- the question ---------- */
#gr-complete .nxq-ask { display: grid; gap: 12px; min-width: 0; }
#gr-complete .nxq-q-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 13.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
}
#gr-complete .nxq-tier-pill {
  padding: 4px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 800; line-height: 1.3;
  background: var(--gr-panel); color: color-mix(in srgb, var(--nxq-t) 76%, var(--gr-ink));
}
#gr-complete .nxq-worth { margin-inline-start: auto; }
#gr-complete .nxq-relaxed { display: inline-flex; align-items: center; gap: 5px; }
#gr-complete .nxq-relaxed svg { width: 15px; height: 15px; }
#gr-complete .nxq-clock { display: flex; align-items: center; gap: 10px; }
#gr-complete .nxq-clock-bar { flex: 1 1 auto; height: 9px; border-radius: 99px; overflow: hidden; background: #00000040; }
#gr-complete .nxq-clock-bar > i {
  display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .12s linear;
}
#gr-complete .nxq-clock-s {
  min-width: 36px; text-align: end; color: #fff;
  font: 800 16px/1 Outfit, 'DM Sans', sans-serif; font-variant-numeric: tabular-nums;
}
/* Low: the bar turns amber and the seconds beat. The NUMBER stays white — amber on the panel is under 4.5:1. */
#gr-complete .nxq-clock.is-low .nxq-clock-bar > i { background: #ffd34d; }
#gr-complete .nxq-clock.is-low:not(.is-stopped) .nxq-clock-s { animation: nxq-beat .5s ease-in-out infinite alternate; }
#gr-complete .nxq-clock.is-stopped .nxq-clock-bar > i { opacity: .6; }
#gr-complete .nxq-question {
  margin: 2px 0 0; color: #fff; outline: none; text-wrap: balance; overflow-wrap: anywhere;
  font-size: clamp(22px, 2.9cqi, 34px); line-height: 1.22;
}
#gr-complete .nxq-question.is-mid { font-size: clamp(20px, 2.35cqi, 27px); line-height: 1.26; }
#gr-complete .nxq-question.is-long { font-size: clamp(18px, 1.95cqi, 22px); line-height: 1.34; font-weight: 700; }
/* A puzzle of several sentences is read, not glanced at: body type, one sentence
   to a line behind a hanging dot, and the question itself last and loudest. */
#gr-complete .nxq-question.is-story {
  display: grid; gap: 5px; max-inline-size: 86ch; text-wrap: pretty;
  font: 600 clamp(16px, 1.5cqi, 17.5px)/1.5 'DM Sans', sans-serif; letter-spacing: 0;
}
#gr-complete .nxq-q-line { display: block; position: relative; padding-inline-start: 16px; }
#gr-complete .nxq-q-line::before {
  content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: #ffffffb3;
}
#gr-complete .nxq-q-ask {
  display: block; margin-block-start: 8px; text-wrap: balance;
  font: 800 clamp(19px, 2.1cqi, 24px)/1.28 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.02em;
}
/* A note after the question ("(1 byte = 8 bits.)") is not another clue: no dot. */
#gr-complete .nxq-q-ask ~ .nxq-q-line { padding-inline-start: 0; }
#gr-complete .nxq-q-ask ~ .nxq-q-line::before { content: none; }
#gr-complete .nxq-stage[data-lang=hi] .nxq-question { line-height: 1.5; letter-spacing: 0; }
#gr-complete .nxq-stage[data-lang=hi] .nxq-q-ask { line-height: 1.5; letter-spacing: 0; }
#gr-complete .nxq-board .nxq-eyebrow { font-size: 13.5px; }

/* ---------- while the questions are on their way ---------- */
#gr-complete .nxq-loading-line { color: #fff; font-size: 15px; font-weight: 600; padding-block: 6px 2px; }
#gr-complete .nxq-skel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#gr-complete .nxq-skel > span { height: 68px; border-radius: 16px; }

/* ---------- the four answers ---------- */
#gr-complete .nxq-body { display: grid; gap: 14px; padding: 18px 22px 20px; min-width: 0; }
#gr-complete .nxq-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#gr-complete button.nxq-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; justify-content: stretch; align-items: center;
  gap: 14px; min-height: 68px; padding: 12px 16px; text-align: start; border-radius: 16px;
  background: var(--gr-panel); color: var(--gr-ink); border: 2px solid var(--gr-line); border-bottom-width: 4px;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  transition: transform .15s ease-out, border-color .15s ease-out, background .15s ease-out;
}
/* An answer that looks picked before it is picked is a trap: the hover look is only
   for a pointer that hovers, never for the place a finger last touched. */
#gr-complete button.nxq-opt:hover:not(:disabled) { background: var(--gr-panel); }
@media (hover: hover) {
  #gr-complete button.nxq-opt:hover:not(:disabled) {
    background: var(--gr-tint); border-color: var(--gr-blue); transform: translateY(-2px);
  }
}
#gr-complete button.nxq-opt:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
#gr-complete button.nxq-opt:disabled { opacity: 1; cursor: default; }
#gr-complete .nxq-key {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font: 800 15px/1 Outfit, 'DM Sans', sans-serif; background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nxq-key svg { width: 18px; height: 18px; stroke-width: 3; }
#gr-complete .nxq-opt-text { overflow-wrap: anywhere; min-width: 0; }
#gr-complete .nxq-opt-word { font-size: 12px; font-weight: 800; white-space: nowrap; }
#gr-complete button.nxq-opt.is-right { background: var(--nx-good-soft); border-color: var(--nx-good); animation: nxq-yes .36s ease-out; }
#gr-complete .nxq-opt.is-right .nxq-key { background: var(--nx-good); color: var(--gr-panel); }
#gr-complete .nxq-opt.is-right .nxq-opt-word { color: color-mix(in srgb, var(--nx-good) 78%, var(--gr-ink)); }
#gr-complete button.nxq-opt.is-wrong { background: var(--nx-bad-soft); border-color: var(--nx-bad); animation: nxq-no .32s ease-out; }
#gr-complete .nxq-opt.is-wrong .nxq-key { background: var(--nx-bad); color: var(--gr-panel); }
#gr-complete .nxq-opt.is-wrong .nxq-opt-word { color: color-mix(in srgb, var(--nx-bad) 82%, var(--gr-ink)); }
/* Faded, but still text a player can read: at .66 the words keep 4.5:1 on the panel in every theme checked. */
#gr-complete button.nxq-opt.is-dim { opacity: .66; }
#gr-complete button.nxq-opt.is-gone { opacity: .6; border-style: dashed; }
#gr-complete .nxq-opt.is-gone .nxq-opt-text { text-decoration: line-through; }
#gr-complete .nxq-opt.is-gone .nxq-opt-word { color: var(--gr-sub); }
#gr-complete .nxq-answers.is-entering .nxq-opt { animation: nxq-in .28s ease-out both; animation-delay: calc(var(--i) * 45ms); }

/* ---------- the verdict ---------- */
#gr-complete .nxq-after {
  display: grid; gap: 9px; padding: 14px 16px; border-radius: 16px; min-width: 0;
  border: 1px solid var(--gr-line); animation: nxq-in .26s ease-out both;
}
#gr-complete .nxq-after.is-right {
  background: var(--nx-good-soft); border-color: color-mix(in srgb, var(--nx-good) 42%, var(--gr-line));
}
#gr-complete .nxq-after.is-wrong, #gr-complete .nxq-after.is-timeout {
  background: var(--nx-bad-soft); border-color: color-mix(in srgb, var(--nx-bad) 42%, var(--gr-line));
}
#gr-complete .nxq-verdict { display: flex; align-items: center; gap: 12px; min-width: 0; }
#gr-complete .nxq-verdict-ico {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--nx-good); color: var(--gr-panel);
}
#gr-complete .nxq-after:not(.is-right) .nxq-verdict-ico { background: var(--nx-bad); }
#gr-complete .nxq-verdict-ico svg { width: 20px; height: 20px; stroke-width: 3; }
#gr-complete .nxq-verdict-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
#gr-complete .nxq-verdict-word {
  font: 800 20px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--nx-good) 80%, var(--gr-ink));
}
#gr-complete .nxq-after:not(.is-right) .nxq-verdict-word { color: color-mix(in srgb, var(--nx-bad) 84%, var(--gr-ink)); }
#gr-complete .nxq-gain { font: 800 22px/1.1 Outfit, 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; color: var(--gr-ink); }
#gr-complete .nxq-inarow {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 7px; border-radius: 99px;
  font-size: 12.5px; font-weight: 800; background: var(--gr-panel); color: #b93a08; align-self: center;
}
#gr-complete[data-tone=dark] .nxq-inarow { color: #ffb37a; }
#gr-complete .nxq-inarow svg { width: 14px; height: 14px; }
#gr-complete .nxq-parts { flex: 1 1 100%; font-size: 13px; color: var(--gr-ink); opacity: .78; font-variant-numeric: tabular-nums; }
#gr-complete .nxq-answer-is { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13.5px; color: var(--gr-ink); }
#gr-complete .nxq-answer-is > span { opacity: .78; }
#gr-complete .nxq-answer-is b { font-size: 16px; font-weight: 800; }
#gr-complete .nxq-bonus, #gr-complete .nxq-lost {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--gr-ink);
}
#gr-complete .nxq-bonus svg { width: 17px; height: 17px; flex: none; color: var(--nx-warn); }
#gr-complete .nxq-lost svg { width: 19px; height: 19px; flex: none; }
#gr-complete .nxq-lost .nxq-heart-body { stroke: var(--nx-bad); }
#gr-complete .nxq-lost .nxq-heart-crack { stroke: var(--nx-bad); }
#gr-complete .nxq-expl { font-size: 15px; line-height: 1.5; color: var(--gr-ink); overflow-wrap: anywhere; }

/* ---------- lifelines and Next ---------- */
#gr-complete .nxq-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
#gr-complete .nxq-lifelines { display: flex; gap: 8px; }
#gr-complete button.nxq-lifeline { min-height: 48px; padding: 8px 12px 8px 14px; border-radius: 13px; font-size: 15px; font-weight: 700; gap: 8px; }
#gr-complete .nxq-uses {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  font: 800 12px/1 Outfit, 'DM Sans', sans-serif; background: var(--gr-blue); color: var(--gr-on);
}
#gr-complete button.nxq-lifeline:disabled .nxq-uses {
  background: color-mix(in srgb, var(--gr-ink) 16%, transparent); color: var(--gr-ink);
}
#gr-complete button.nxq-next { margin-inline-start: auto; min-height: 52px; padding: 12px 24px; font-size: 16px; border-radius: 14px; }
#gr-complete .nxq-keys { margin-inline-start: auto; font-size: 12.5px; color: var(--gr-sub); text-align: end; }
@media (hover: none) { #gr-complete .nxq-keys { display: none; } }

/* ---------- the checkpoint ---------- */
#gr-complete .nxq-checkpoint { display: grid; gap: 16px; padding: 18px 22px 20px; }
#gr-complete .nxq-cp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
#gr-complete .nxq-cp-item {
  display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 16px; min-width: 0;
  border: 1px solid var(--gr-line); background: var(--gr-bg); animation: nxq-in .3s ease-out both;
}
#gr-complete .nxq-cp-item:nth-child(2) { animation-delay: 70ms; }
#gr-complete .nxq-cp-item:nth-child(3) { animation-delay: 140ms; }
#gr-complete .nxq-cp-item:nth-child(4) { animation-delay: 210ms; }
#gr-complete .nxq-cp-item > svg, #gr-complete .nxq-cp-item > i { width: 34px; height: 34px; flex: none; }
#gr-complete .nxq-cp-item > div { display: grid; gap: 2px; min-width: 0; }
#gr-complete .nxq-cp-item b { font: 800 17px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.01em; }
#gr-complete .nxq-cp-item span { font-size: 13.5px; line-height: 1.35; color: var(--gr-sub); }
#gr-complete .nxq-cp-item.is-star {
  background: color-mix(in srgb, var(--nxq-t) 12%, var(--gr-panel));
  border-color: color-mix(in srgb, var(--nxq-t) 40%, var(--gr-line));
}
/* The quiet line sits on the tier's tint here, not on the page ground. */
#gr-complete .nxq-cp-item.is-star span { color: var(--nxq-sub-on-tint); }
#gr-complete .nxq-cp-item.is-star .nxq-star { animation: nxq-star-pop .55s cubic-bezier(.2, 1.5, .4, 1) .15s both; }
#gr-complete .nxq-cp-item.is-bonus > svg { color: var(--nx-warn); }
#gr-complete .nxq-cp-item.is-life .nxq-heart-body { fill: var(--nx-bad); stroke: var(--nx-bad); }
#gr-complete .nxq-cp-item.is-next > svg { color: var(--nxq-t); }

/* ============================================================
   THE RESULT
   ============================================================ */
#gr-complete .nxq-res-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: end; padding: 30px 34px;
  grid-template-areas: "top podium" "actions podium";
}
#gr-complete .nxq-res-top { grid-area: top; min-width: 0; }
#gr-complete .nxq-res-hero .nxq-podium { grid-area: podium; }
#gr-complete .nxq-res-hero .nxq-hero-actions { grid-area: actions; }
#gr-complete .nxq-res-topic { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; }
#gr-complete .nxq-res-hero h1 {
  font-size: clamp(26px, 3.5cqi, 40px); line-height: 1.08; color: #fff; margin: 12px 0 0; outline: none; text-wrap: balance;
}
#gr-complete .nxq-res-line { color: #fff; font-size: 16px; line-height: 1.4; margin-top: 8px; }
#gr-complete .nxq-res-score { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 2px; }
#gr-complete .nxq-res-score b {
  font: 800 clamp(48px, 7cqi, 72px)/1 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: #fff;
}
#gr-complete .nxq-res-score span { font-size: 16px; font-weight: 700; color: #fff; }
#gr-complete .nxq-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#gr-complete .nxq-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 99px;
  background: #fff; color: color-mix(in srgb, var(--gr-hero) 84%, #000); font-size: 13.5px; font-weight: 800;
  animation: nxq-star-pop .5s cubic-bezier(.2, 1.5, .4, 1) .9s both;
}
#gr-complete .nxq-badge svg { width: 15px; height: 15px; }
#gr-complete .nxq-res-prev { color: #fff; font-size: 14px; margin-top: 8px; }
#gr-complete .nxq-res-goal { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14.5px; font-weight: 600; margin-top: 10px; }
#gr-complete .nxq-res-goal svg { width: 16px; height: 16px; flex: none; }

/* The podium: four stars on four rising steps, on a panel tray. */
#gr-complete .nxq-podium {
  display: flex; align-items: flex-end; gap: 8px; padding: 16px 14px 14px; border-radius: 20px;
  background: var(--gr-panel); color: var(--gr-ink); box-shadow: 0 12px 24px -14px #00000080;
}
#gr-complete .nxq-pod { width: 84px; display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
#gr-complete .nxq-pod .nxq-star { width: 42px; height: 42px; margin-bottom: 2px; }
#gr-complete .nxq-pod b {
  font: 800 14px/1.15 Outfit, 'DM Sans', sans-serif; color: color-mix(in srgb, var(--nxq-t) 74%, var(--gr-ink));
}
#gr-complete .nxq-pod > span { font-size: 12px; color: var(--gr-sub); font-variant-numeric: tabular-nums; }
#gr-complete .nxq-pod::after {
  content: ""; width: 100%; height: calc(10px + var(--k) * 14px); margin-top: 7px; border-radius: 9px 9px 4px 4px;
  background: color-mix(in srgb, var(--nxq-t) 20%, var(--gr-panel));
}
#gr-complete .nxq-pod.is-won::after { background: var(--nxq-t); }
#gr-complete .nxq-pod.is-new .nxq-star {
  animation: nxq-star-pop .6s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--k) * 150ms + 450ms);
}

#gr-complete .nxq-res-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 20px 22px;
}
#gr-complete .nxq-res-stats .nx-stat > b { font-size: 24px; }
#gr-complete .nxq-res-daily {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 16px 22px; font-size: 14.5px;
}
#gr-complete .nxq-res-daily .nxq-daily-streak { display: inline-flex; align-items: center; gap: 7px; }
#gr-complete .nxq-res-daily .nxq-daily-streak b { font: 800 18px/1 Outfit, 'DM Sans', sans-serif; }
#gr-complete .nxq-res-daily .nxq-daily-streak svg { width: 20px; height: 20px; }
#gr-complete .nxq-res-daily p { color: var(--gr-sub); }
#gr-complete .nxq-res-next { margin-inline-start: auto; }
#gr-complete .nxq-res-next .nx-countdown { color: var(--gr-ink); }

/* ---------- the review ---------- */
#gr-complete .nxq-review { overflow: hidden; }
#gr-complete .nxq-review summary {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 14px 20px; cursor: pointer;
  font: 800 17px/1.2 Outfit, 'DM Sans', sans-serif; letter-spacing: -0.01em; list-style: none;
}
#gr-complete .nxq-review summary::-webkit-details-marker { display: none; }
#gr-complete .nxq-review summary svg { width: 18px; height: 18px; color: var(--gr-blue); transition: transform .18s ease-out; }
#gr-complete .nxq-review[open] summary svg { transform: rotate(90deg); }
#gr-complete .nxq-review-n {
  margin-inline-start: auto; min-width: 28px; padding: 3px 9px; border-radius: 99px; text-align: center;
  font: 800 13px/1.3 Outfit, 'DM Sans', sans-serif; background: var(--gr-tint); color: var(--gr-blue);
}
#gr-complete .nxq-review-list { display: grid; padding: 0 20px 6px; }
#gr-complete .nxq-rev {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--gr-line);
}
#gr-complete .nxq-rev-n {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  font: 800 13px/1 Outfit, 'DM Sans', sans-serif;
  background: color-mix(in srgb, var(--nxq-t) 14%, var(--gr-panel)); color: color-mix(in srgb, var(--nxq-t) 74%, var(--gr-ink));
}
#gr-complete .nxq-rev-q { font-size: 15px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
#gr-complete .nxq-rev dl { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 7px 0 0; }
#gr-complete .nxq-rev dt { font-size: 12px; color: var(--gr-sub); }
#gr-complete .nxq-rev dd { margin: 1px 0 0; display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
#gr-complete .nxq-rev dd svg { width: 15px; height: 15px; flex: none; stroke-width: 3; }
#gr-complete .nxq-rev.is-right .nxq-rev-you dd, #gr-complete .nxq-rev-right dd { color: color-mix(in srgb, var(--nx-good) 82%, var(--gr-ink)); }
#gr-complete .nxq-rev.is-wrong .nxq-rev-you dd { color: color-mix(in srgb, var(--nx-bad) 86%, var(--gr-ink)); }
#gr-complete .nxq-rev dd.is-none { color: var(--gr-sub); }
#gr-complete .nxq-rev-x { font-size: 13.5px; line-height: 1.5; color: var(--gr-sub); margin-top: 7px; overflow-wrap: anywhere; }

#gr-complete .nxq-fail { gap: 14px; }
#gr-complete .nxq-fail-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- the motion of a run: each one answers something the player did ---------- */
@keyframes nxq-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes nxq-yes { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes nxq-no { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 60% { transform: translateX(4px); } 85% { transform: translateX(-2px); } }
@keyframes nxq-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.8); }
  22% { opacity: 1; transform: translateY(-8px) scale(1.12); }
  70% { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(1); }
}
@keyframes nxq-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--nxq-t) 12%, transparent); } }
@keyframes nxq-beat { to { transform: scale(1.14); } }
@keyframes nxq-star-pop { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
@keyframes nxq-break { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.85) rotate(6deg); } 100% { transform: none; } }
#gr-complete .nxq-life.is-breaking { animation: nxq-break .5s ease-out; }
#gr-complete .nxq-life.is-back { animation: nxq-star-pop .5s cubic-bezier(.2, 1.5, .4, 1) both; }

/* ---------- a run on a tablet and on a phone ---------- */
@container gr-shell (max-width: 850px) {
  /* Score, then the stars it earned, then what to do next. */
  #gr-complete .nxq-res-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "podium" "actions"; padding: 26px; }
  #gr-complete .nxq-podium { justify-self: start; }
  #gr-complete .nxq-res-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container gr-shell (max-width: 620px) {
  #gr-complete .nxq-board { padding: 10px 12px 16px; gap: 10px; }
  #gr-complete .nxq-hud { gap: 9px; }
  #gr-complete button.nxq-leave { padding: 0; width: 44px; }
  #gr-complete .nxq-leave > span { display: none; }
  #gr-complete .nxq-hud-topic { gap: 8px; }
  /* Leave · glyph · lives · score · streak is all a 320px row can hold: with a
     five-figure score the name would be cut to "Wo…". The glyph is the topic
     here; the name stays the page's heading for a screen reader. */
  #gr-complete .nxq-hud-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #gr-complete .nxq-hud-topic .nxq-glyph { width: 34px; height: 34px; }
  #gr-complete .nxq-lives { gap: 2px; }
  #gr-complete .nxq-life { width: 19px; height: 19px; }
  #gr-complete .nxq-hud-score { min-width: 0; }
  #gr-complete .nxq-hud-score b { font-size: 20px; }
  #gr-complete .nxq-hud-score small { display: none; }
  #gr-complete .nxq-hud-streak { min-height: 32px; padding: 4px 8px 4px 6px; font-size: 14.5px; gap: 3px; }
  #gr-complete .nxq-hud-streak svg { width: 15px; height: 15px; }
  #gr-complete .nxq-ladder { padding: 9px 10px 8px; gap: 6px; border-radius: 14px; }
  #gr-complete .nxq-pips { gap: 4px; min-height: 11px; }
  #gr-complete .nxq-pip { width: 10px; height: 10px; }
  #gr-complete .nxq-pip.is-skipped { height: 4px; }
  #gr-complete .nxq-tier { gap: 5px; }
  #gr-complete .nxq-tier::after { height: calc(3px + var(--k) * 3px); }
  #gr-complete .nxq-tier-name { font-size: 11px; }
  #gr-complete .nxq-ask { gap: 10px; }
  #gr-complete .nxq-q-meta { font-size: 12.5px; gap: 4px 9px; }
  #gr-complete .nxq-question { font-size: 21px; line-height: 1.25; }
  #gr-complete .nxq-question.is-mid { font-size: 19px; }
  #gr-complete .nxq-question.is-long { font-size: 17px; }
  #gr-complete .nxq-question.is-story { font-size: 15.5px; line-height: 1.46; gap: 4px; }
  #gr-complete .nxq-q-line { padding-inline-start: 14px; }
  #gr-complete .nxq-q-ask { font-size: 18.5px; margin-block-start: 6px; }
  #gr-complete .nxq-body { padding: 14px; gap: 12px; }
  #gr-complete .nxq-answers, #gr-complete .nxq-skel { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  #gr-complete .nxq-skel > span { height: 56px; }
  #gr-complete button.nxq-opt { min-height: 56px; padding: 8px 12px; gap: 11px; font-size: 16px; border-radius: 14px; }
  #gr-complete .nxq-key { width: 30px; height: 30px; border-radius: 9px; }
  #gr-complete .nxq-after { padding: 12px 13px; }
  #gr-complete .nxq-expl { font-size: 14.5px; }
  /* Lifelines share a row; Next is the whole width at the bottom of the card. */
  #gr-complete .nxq-foot { gap: 9px; }
  #gr-complete .nxq-lifelines { flex: 1 1 100%; }
  #gr-complete button.nxq-lifeline { flex: 1 1 0; }
  #gr-complete .nxq-foot.is-answered .nxq-lifelines { display: none; }
  #gr-complete button.nxq-next { flex: 1 1 100%; margin: 0; }
  #gr-complete .nxq-keys { display: none; }
  #gr-complete .nxq-checkpoint { padding: 14px; gap: 12px; }
  #gr-complete .nxq-cp-list { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  #gr-complete .nxq-cp-item { padding: 11px 12px; }

  #gr-complete .nxq-res-hero { padding: 20px 18px; gap: 16px; }
  #gr-complete .nxq-res-hero .nxq-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #gr-complete .nxq-res-hero .gr-play, #gr-complete .nxq-res-hero .gr-soft { white-space: normal; }
  #gr-complete .nxq-podium { justify-self: stretch; justify-content: space-between; gap: 6px; padding: 14px 10px 12px; }
  #gr-complete .nxq-pod { width: auto; flex: 1 1 0; }
  #gr-complete .nxq-pod .nxq-star { width: 36px; height: 36px; }
  #gr-complete .nxq-res-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 14px; }
  #gr-complete .nxq-res-daily { padding: 14px 16px; }
  #gr-complete .nxq-res-next { margin-inline-start: 0; }
  #gr-complete .nxq-review summary { padding: 12px 14px; }
  #gr-complete .nxq-review-list { padding: 0 14px 4px; }
  #gr-complete .nxq-rev { gap: 11px; }
}

/* ---------- right-to-left: arrows and chevrons point the way the language reads ---------- */
#gr-complete:dir(rtl) .nxq-next svg, #gr-complete:dir(rtl) .nxq-resume .gr-play svg,
#gr-complete:dir(rtl) .nxq-fail-actions svg, #gr-complete:dir(rtl) .nxq-hero .gr-soft svg { transform: scaleX(-1); }
#gr-complete:dir(rtl) .nxq-points:not([open]) summary svg, #gr-complete:dir(rtl) .nxq-review:not([open]) summary svg { transform: scaleX(-1); }

/* ---------- a short window: the whole question fits ----------
 * A laptop with its toolbars open, a browser sharing the screen with something else: about 560px
 * of height, of which the site's header keeps 80. The stage as drawn above needs 556px, so the
 * fourth answer and both lifelines were under the fold — a question that cannot be answered
 * without scrolling, on a clock (the old suite's QZ.15, "all controls are visible at a short
 * height", and the rebuilt stage broke it). Nothing is taken away here: the same top bar, the
 * same ladder, the same four answers and lifelines, each given a little less air. Phones are a
 * different shape (narrow, and tall enough) and are laid out by the container rules above. */
@media (max-height: 700px) and (min-width: 700px) {
  #gr-complete .nxq-board { padding: 10px 22px 14px; gap: 9px; }
  #gr-complete button.nxq-leave { min-height: 44px; }
  #gr-complete .nxq-ladder { padding: 7px 12px 6px; }
  #gr-complete .nxq-tier { gap: 3px; }
  #gr-complete .nxq-tier::after { height: calc(3px + var(--k) * 2px); }
  #gr-complete .nxq-ask { gap: 7px; }
  #gr-complete .nxq-question { margin: 0; font-size: clamp(20px, 2.2cqi, 26px); line-height: 1.18; }
  #gr-complete .nxq-question.is-mid { font-size: clamp(18px, 1.9cqi, 22px); line-height: 1.2; }
  #gr-complete .nxq-question.is-long { font-size: clamp(16px, 1.6cqi, 19px); line-height: 1.26; }
  #gr-complete .nxq-body { padding: 12px 22px; gap: 10px; }
  #gr-complete .nxq-answers { gap: 8px; }
  #gr-complete button.nxq-opt { min-height: 52px; padding: 7px 14px; font-size: 16px; border-radius: 14px; }
  #gr-complete button.nxq-lifeline { min-height: 44px; }
  #gr-complete button.nxq-next { min-height: 46px; padding: 9px 22px; }
}

/* ---------- motion off ---------- */
#gr-complete[data-motion=off] .nxq *, #gr-complete[data-motion=off] .nxq *::before, #gr-complete[data-motion=off] .nxq *::after {
  animation: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #gr-complete .nxq *, #gr-complete .nxq *::before, #gr-complete .nxq *::after {
    animation: none !important; transition: none !important;
  }
}