/* ==================================================================
   Quiz Hero — kwizzbit/quiz-hero  (playable homepage quiz)

   PLAIN treatment: no card containers. The quiz lives straight on a full
   coral segment. Answers are glassy overlays, set at slight wonky angles,
   that go solid white when chosen. A thin time-bar drains across the top.

   EVERYTHING is scoped under .quiz-hero so nothing leaks into other
   segments (all component CSS loads site-wide). Brand values are local
   custom props mirrored from theme.json.
   ================================================================== */

.quiz-hero{
  /* palette — light cream world; the UI is the INVERSE of the coral version:
     ink foreground on cream, coral as the single accent (was yellow on coral) */
  --qh-ink:#1D0B09;
  --qh-cream:#FCF0E6;
  --qh-coral:#FF3623;
  --qh-on:#1D0B09;                  /* foreground: text, icons, time-bar, solid fills */
  --qh-on-fg:#FCF0E6;               /* text/icons sitting ON the ink solids */
  --qh-soft:rgba(29,11,9,0.60);     /* muted foreground */
  --qh-glass:rgba(29,11,9,0.05);    /* answer fill */
  --qh-glass-hi:rgba(29,11,9,0.09); /* answer hover */
  --qh-line:rgba(29,11,9,0.18);     /* hairline */
  --qh-radius:0px;
  --qh-trim:0px;                    /* desktop trims this off the full height so the footer peeks */
  --qh-ease-out:cubic-bezier(0.22,1,0.36,1);

  position:relative;
  overflow:hidden;
  background:var(--qh-cream);   /* solid, matches the nav (#FCF0E6) */
  color:var(--qh-on);
  height:calc(100vh - var(--wp-admin--admin-bar--height,0px) - var(--qh-trim,0px));
  height:calc(100dvh - var(--wp-admin--admin-bar--height,0px) - var(--qh-trim,0px));
  padding:clamp(2.5rem,7vw,5rem) var(--wp--custom--layout--gutter,1.5rem) clamp(3rem,8vw,6rem);
  display:flex;
  justify-content:center;
  font-family:var(--wp--preset--font-family--body,'Roobert',system-ui,sans-serif);
}

.quiz-hero__inner{
  width:100%;
  max-width:560px;
  min-height:clamp(460px,62vh,580px);   /* steady height so stages don't jump */
  display:flex;
  flex-direction:column;
}

/* [hidden] must always win over any author display rule */
.quiz-hero [hidden]{ display:none !important; }

/* pre-JS veil: the inline script in the pattern adds .qh-veil during parse so
   the real question never paints before the gate; launchQuestion() lifts it */
.quiz-hero.qh-veil .qh-play,
.quiz-hero.qh-veil .qh-controls,
.quiz-hero.qh-veil .qh-timebar{ visibility:hidden; }

/* ==================================================================
   TIME-BAR — thin draining bar across the very top of the segment.
   JS sets transform:scaleX() on the fill each frame (1 → 0).
   ================================================================== */
.qh-timebar{
  position:absolute; top:0; left:0; right:0;
  height:5px;
  background:rgba(29,11,9,0.12);
  z-index:4;
  transform-origin:50% 50%;
}
/* ---- the keyboard-up layout (phones) ----------------------------------
   While the write-in is focused, the page behind is frozen (.qh-kb-lock) and the
   panel is pinned FIXED, glued to the visual viewport every frame (top =
   --qh-vtop = visualViewport.offsetTop, height = --qh-vh = visualViewport.height)
   so it follows iOS's keyboard pan. Content bottom-aligns inside; the time-bar
   is absolute at the panel top. See the @media block below. */
/* hard scroll-lock while typing: fixing the BODY (not just overflow:hidden,
   which iOS ignores mid focus-scroll) means the page physically cannot move,
   so iOS can't scroll the content off to chase the input. JS sets body.top
   to -savedScrollY (0 on this no-chrome page) and restores on blur. */
html.qh-kb-lock{ overflow:hidden; }
html.qh-kb-lock body{
  position:fixed; left:0; right:0; width:100%;
  overflow:hidden; touch-action:none;
}

@media (max-width:640px){
  /* THE REAL FIX. iOS opens the keyboard by PANNING the visual viewport (it
     slides the visible window down to clear the input) — it does NOT scroll the
     document. position:fixed pins to the LAYOUT viewport, so a fixed panel/bar
     slides up out of view when iOS pans (that's why the countdown vanished and
     content looked shoved up; a manual swipe just cancels the pan). position:
     relative left scroll room for the pan to mis-park. NEITHER followed the pan.
     So: pin the panel FIXED (out of flow → no scroll room) AND every frame set
     its top to the live visualViewport.offsetTop (--qh-vtop) and its height to
     visualViewport.height (--qh-vh), so it stays glued to the visible area no
     matter how iOS pans. The bar rides INSIDE it as absolute (below) → tracks
     with the panel AND stops tinting the status bar coral. */
  .quiz-hero.is-typing{
    position:fixed;
    left:0; right:0;
    top:var(--qh-vtop,0px);     /* JS = visualViewport.offsetTop each frame → follows iOS's keyboard pan */
    height:var(--qh-vh,100dvh); /* JS = visualViewport.height → exactly the area above the keyboard */
    padding-top:8px;
    padding-bottom:8px;         /* the input's gap above the keyboard */
  }
  /* drop the steady min-height so the inner collapses to the visible band */
  .quiz-hero.is-typing .quiz-hero__inner{ min-height:0; }
  /* bottom-align the stage so the input pins just above the keyboard; if content
     ever exceeds the band, the top (step label) clips, never the answers/input */
  .quiz-hero.is-typing .qh-play{ justify-content:flex-end; }
  /* hide the score/rank/superpowers/reacts HUD while typing — it isn't usable
     mid text-entry (you're committed to the field) and the ~86px it frees is
     exactly what keeps the QUESTION fully readable above the answers. It comes
     straight back when the keyboard dismisses. */
  .quiz-hero.is-typing .qh-hud{ display:none; }
}

/* the time-bar is ABSOLUTE inside the fixed, viewport-tracking panel — so it
   rides WITH the panel (always at the visible top) and, being absolute rather
   than a fixed element behind the status bar, it doesn't tint it coral. */
.quiz-hero.is-typing .qh-timebar{
  position:absolute; top:0; left:0; right:0;
  z-index:90;
}
.qh-timebar__fill{
  display:block; height:100%;
  background:linear-gradient(90deg,
    var(--qh-coral) 0%,
    var(--qh-coral) 45%,
    #FF9D4A 48%,
    #FFBE61 50%,
    #FF9D4A 52%,
    var(--qh-coral) 55%,
    var(--qh-coral) 100%
  );
  background-size:300% 100%;
  background-position:85% 0;    /* hot spot parked off-left when idle */
  transform-origin:left center;
  transform:scaleX(1);
  will-change:transform,filter;
}
/* pulse fires once per step-drop, triggered by JS toggling .is-pulsing.
   Fill plays brightness flash (0.45s) then yellow glow sweeps left→right (0.9s). */
.qh-timebar.is-pulsing{ animation:qh-bar-beat 0.45s ease-out forwards; }
.qh-timebar.is-pulsing .qh-timebar__fill{
  animation:qh-fill-pulse 0.45s linear forwards, qh-bar-shimmer 0.9s 0.45s linear forwards;
}

/* disintegration: each time the fill drops a chunk, JS seeds a handful of
   little coral squares along the vanished slice — they scatter, spin and
   dissolve away (the chunk crumbling into pixels). Spawned into .qh-timebar,
   so they sit right at the receding edge. */
.qh-pixel{
  position:absolute; top:0;
  width:var(--s,5px); height:var(--s,5px);
  background:var(--qh-coral);
  pointer-events:none;
  will-change:transform,opacity;
  /* accelerating curve = gravity: starts slow off the bar, then drops away */
  animation:qh-pixel-fly var(--dur,0.8s) cubic-bezier(0.45,0,0.85,0.55) forwards;
}
@keyframes qh-pixel-fly{
  0%  { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); }
  65% { opacity:0.9; }                  /* stay visible longer, then fade late */
  100%{ opacity:0; transform:translate(var(--dx,0),var(--dy,40px)) rotate(var(--rot,90deg)) scale(0.5); }
}

/* ==================================================================
   STAGES + the cross-fade between them
   ================================================================== */
.qh-stage{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.qh-play,.qh-board,.qh-end,.qh-interval,.qh-vflash{ justify-content:center; }   /* every stage sits vertically centred in the window */

/* ---- the verdict flash: pixel thumb, one word, one assist line —
   centred, held for a beat ---- */
.qh-vflash{ align-items:center; text-align:center; }
.qh-vflash__thumb{
  width:clamp(50px,12.75vw,65px); height:auto;            /* the thumbs-down size */
  image-rendering:pixelated;                              /* crisp pixel art, like flow's hand */
  filter:drop-shadow(-7px 10px 0px rgba(0,0,0,0.12));     /* the site's hard pixel shadow */
  will-change:transform;                                  /* own layer: the shadow rasterises once
                                                             and rides the float — no per-frame
                                                             filter repaint, no lag */
  margin:0 0 1.2rem;
  /* the pop waits out the stage cross-fade (~0.2s) so it reads in full,
     and it's SPRINGY now — unmissable. The float takes over seamlessly
     (its resting frame matches the pop's end frame). */
  animation:qh-vf-pop-in 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.2s both,
            qh-vf-float 3s ease-in-out 0.75s infinite;
}
/* correct shows the payment portal's circle-tick badge — smooth art with its
   OWN shadow baked into the artwork, so the pixel rendering and the CSS
   shadow both come off (it was doubling) */
.qh-vflash.is-yes .qh-vflash__thumb{
  width:clamp(59px,15vw,77px);
  image-rendering:auto;
  filter:none;
}
.qh-vflash__word{
  font-family:var(--wp--preset--font-family--display,'Roobert Semimono',monospace);
  font-weight:400;
  font-size:clamp(2.4rem,9vw,3.2rem);
  letter-spacing:-0.06em; line-height:1;
  color:var(--qh-on);
  animation:qh-vf-pop 0.5s var(--qh-ease-out) 0.32s both;
}
.qh-vflash.is-yes .qh-vflash__word{ color:var(--qh-coral); }
.qh-vflash__sub{
  margin:0.7rem 0 0;
  font-weight:500; font-size:0.9375rem; line-height:1.3;
  color:var(--qh-soft);
  animation:qh-vf-pop 0.5s var(--qh-ease-out) 0.45s both;
}
@keyframes qh-vf-pop{
  from{ opacity:0; transform:translateY(16px) scale(0.92); }
  to{   opacity:1; transform:none; }
}
@keyframes qh-vf-pop-in{   /* the icon's spring entrance */
  from{ opacity:0; transform:scale(0.4) translateY(18px); }
  to{   opacity:1; transform:scale(1) translateY(0); }
}
@keyframes qh-vf-float{
  0%,100%{ transform:translate(0,0) rotate(0deg); }       /* matches the pop's end frame */
  50%{     transform:translate(-4px,-7px) rotate(2.5deg); }
}

.quiz-hero__inner.is-exiting{ animation:qh-out 0.22s var(--qh-ease-out) forwards; }
.quiz-hero__inner.is-entering{ animation:qh-in 0.4s var(--qh-ease-out) both; }

/* ==================================================================
   PLAY STAGE
   ================================================================== */
.qh-play{ position:relative; }   /* anchor for absolute stage furniture */
.qh-top{
  margin-bottom:clamp(0.35rem,1.4vw,0.55rem);   /* sit the eyebrow tight to the headline */
}
.qh-step{
  font-family:var(--wp--preset--font-family--pixel,'Pixelar',monospace);
  font-weight:400;
  font-size:var(--wp--preset--font-size--h-8-eyebrow,19px);  /* site-standard Pixelar eyebrow */
  letter-spacing:0.03em;
  color:var(--qh-coral);
  text-transform:uppercase;
}

/* sound + pause — pinned to the top-right corner of the whole segment */
.qh-controls{
  position:absolute; top:clamp(14px,2.2vw,22px); right:clamp(14px,3vw,28px);
  z-index:5;
  display:flex; align-items:center; gap:4px;
}
.qh-controls[hidden]{ display:none; }
.qh-pause[hidden]{ display:none; }

/* sound toggle — speaker with waves (on) / cross (muted) */
.qh-sound{
  flex:none;
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:0;
  border-radius:var(--qh-radius);
  color:var(--qh-coral); cursor:pointer;
  transition:opacity 0.16s var(--qh-ease-out),transform 0.16s var(--qh-ease-out);
}
.qh-sound:hover{ opacity:0.65; }
.qh-sound:active{ transform:scale(0.9); }
.qh-sound__svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.qh-sound__cone{ fill:currentColor; stroke:none; }
.qh-sound__wave{ opacity:0; transition:opacity 0.15s var(--qh-ease-out); }
.qh-sound__mute{ opacity:1; transition:opacity 0.15s var(--qh-ease-out); }
.qh-sound.is-on .qh-sound__wave{ opacity:1; }
.qh-sound.is-on .qh-sound__mute{ opacity:0; }

/* pause / resume — top-right of the play stage. CSS-drawn icon: two bars
   (pause) that become a single play triangle when .is-paused. */
.qh-pause{
  flex:none;
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; margin:-4px -4px -4px 0;       /* nudge to the optical edge */
  background:transparent; border:0;
  border-radius:var(--qh-radius);
  color:var(--qh-coral);
  cursor:pointer;
  transition:opacity 0.16s var(--qh-ease-out),transform 0.16s var(--qh-ease-out);
}
.qh-pause:hover{ opacity:0.65; }
.qh-pause:active{ transform:scale(0.9); }
.qh-pause__icon{ position:relative; width:14px; height:16px; display:block; }
.qh-pause__icon::before,
.qh-pause__icon::after{
  content:""; position:absolute; top:0;
  width:4px; height:100%;
  background:currentColor;
}
.qh-pause__icon::before{ left:1px; }
.qh-pause__icon::after{ right:1px; }
/* paused → show a play triangle */
.qh-pause.is-paused .qh-pause__icon::before{
  left:2px; top:0;
  width:0; height:0;
  background:transparent;
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent currentColor;
}
.qh-pause.is-paused .qh-pause__icon::after{ display:none; }

.qh-q{
  font-family:var(--wp--preset--font-family--display,'Roobert Semimono',monospace);
  font-weight:400;
  font-size:clamp(2rem,8.5vw,2.75rem);   /* mobile headline treatment, applied across all breakpoints */
  line-height:0.923;
  letter-spacing:-0.10769em;
  color:var(--qh-on);
  margin:0 0 0.85rem;
  max-width:90%;
}
/* the optional lead phrase, set 15% smaller than the headline */
.qh-q__lead{ font-size:0.85em; }

/* ==================================================================
   START GATE — a primary-style play button centred over the segment.
   Tapping it unlocks audio and starts the quiz.
   ================================================================== */
.qh-gate{
  position:absolute; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center;
  /* mirror the section's padding so the mock sits where the real question will */
  padding:clamp(2.5rem,7vw,5rem) var(--wp--custom--layout--gutter,1.5rem) clamp(3rem,8vw,6rem);
}
.qh-gate[hidden]{ display:none; }

/* ---- the pixelated question skeleton: pure CSS blocks, no filters ----
   Each block is a chunky two-tone checkerboard (7px cells) so it reads as
   "pixelated text", laid out in the exact shape of the play stage. */
.qh-gate__mock{
  width:100%; max-width:560px;
  min-height:clamp(460px,62vh,580px);     /* same steady height as the stages */
  display:flex; flex-direction:column; justify-content:center;
  pointer-events:none; user-select:none;
}
/* Each block is an empty frame that JS fills with genuinely RANDOM pixel
   cells (random tone per cell, ragged word edges) — a true mosaic, the same
   trick as the timebar's shed pixels, so it renders reliably everywhere. */
.qh-mock{ display:block; position:relative; overflow:hidden; }
.qh-mock i{ position:absolute; display:block; }
.qh-mock--eyebrow{ width:112px; height:18px; margin-bottom:clamp(0.6rem,1.8vw,0.85rem); }
.qh-mock-row{ display:flex; gap:10px; }
.qh-mock-row--headline{ margin-bottom:11px; }
.qh-mock-row--headline .qh-mock{ height:28px; }
.qh-mock--hook{ width:52%; height:13px; margin:6px 0 clamp(1.25rem,4vw,1.75rem); }
/* score blocks left, superpower pills right */
.qh-mock-row--score{ align-items:flex-end; margin-bottom:12px; overflow:hidden; }
.qh-mock-row--score .qh-mock--ink,
.qh-mock-row--score .qh-mock--coral:not(.qh-mock--pill){ height:22px; }
/* the room (real faces) + emoji dot stand-ins to its right */
.qh-mock-row--crew{ align-items:center; gap:14px; margin-bottom:clamp(0.9rem,3vw,1.3rem); overflow:hidden; }
.qh-gate__mock .qh-rivals{ opacity:0.8; flex:none; max-width:70%; }   /* knocked back so it doesn't outshine the mosaic */
.qh-mock--pill{ height:29px; border-radius:999px; }   /* superpower pills: mosaic clipped to the pill shape */
.qh-mock--dot{ width:18px; height:18px; border-radius:50%; }       /* emoji stand-ins */
@media (min-width:641px){
  .qh-mock-row--headline .qh-mock{ height:34px; }
}
/* answer skeleton rows: same glass bars + wonky offsets as the real answers */
.qh-mock-answer{
  display:flex; align-items:center;
  background:var(--qh-glass);
  padding:clamp(0.85rem,2.6vw,1.05rem) clamp(1rem,3vw,1.25rem);
  transform:translateX(var(--x,0));
}
.qh-mock-answer + .qh-mock-answer{ margin-top:clamp(10px,2.4vw,13px); }
.qh-mock-answer .qh-mock{ height:14px; }

/* the play button floats dead-centre over the skeleton */
.qh-gate__btn{ position:absolute; left:50%; top:50%; margin:-21px 0 0 -21px; }
.qh-gate__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  background:linear-gradient(to right, #FF3623, #FF6F5F);
  color:#fff;
  border:0; border-radius:var(--qh-radius); cursor:pointer;
  transition:transform 0.18s var(--qh-ease-out), background 0.14s var(--qh-ease-out);
}
.qh-gate__btn svg{ width:18px; height:18px; fill:currentColor; flex-shrink:0; margin-left:2px; }
@media (hover:hover){
  .qh-gate__btn:hover{
    background:linear-gradient(to right, #D82A18, #E85040);
    transform:translateY(-1px);
  }
}
.qh-gate__btn:active{
  background:linear-gradient(to right, #D82A18, #E85040);
  transform:translateY(1px);
}

/* the hook line: a pre-answer tease that becomes the reveal after answering.
   Kept as a block (not flex) so the reveal text + flashing period stay inline. */
.qh-hook{
  font-weight:500; font-size:0.9375rem;
  line-height:1.3;
  color:var(--qh-soft);
  margin:0 0 clamp(1.25rem,4vw,1.75rem);
  min-height:1.3em;                       /* reserve space so nothing jumps */
}
.qh-hook.is-revealed{ color:var(--qh-on); font-weight:600; }
/* final-10s nudge: nothing banked yet, so the hook leans in, in coral */
.qh-hook.is-hint{ color:var(--qh-coral); font-weight:600; }
.qh-hook.is-revealed::before{
  content:"\2713";
  font-weight:700;
  color:var(--qh-on);
  margin-right:6px;
}

/* ==================================================================
   LIVE HUD — running total + falling speed-bonus + streak / time left
   ================================================================== */
/* HUD (above the answers): score + superpowers on one row, the room below */
.qh-hud{
  display:flex; flex-direction:column;
  gap:12px;
  margin:0 0 clamp(0.9rem,3vw,1.3rem);
  font-variant-numeric:tabular-nums;
}
.qh-hud__top{
  /* top-aligned so the SCORE / RANK / SUPERPOWERS labels share one baseline;
     RANK sits left-biased after the score, the powers' auto margin pins them
     to the right margin bound */
  display:flex; align-items:flex-start; justify-content:flex-start;
  gap:18px;
}
.qh-hud__top .qh-powers{ margin-left:auto; }
/* tight column gap: the coral bonus hugs the total and rides right as it grows */
.qh-hud__score{ display:flex; align-items:baseline; gap:9px 5px; flex-wrap:wrap; flex:none; }
/* the room left, reactions filling the rest */
.qh-hud__bottom{ display:flex; align-items:center; gap:14px; }
.qh-hud__bottom .qh-rivals{ flex:none; max-width:70%; }
.qh-hud__bottom .qh-reacts{ flex:1 1 0; min-width:0; }
.qh-hud__label{
  display:block; width:100%;
  font-family:var(--wp--preset--font-family--pixel,'Pixelar',monospace);
  font-size:0.8125rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--qh-soft);
}
/* both figures sit in RESERVED slots (widest value they'll ever show), so the
   score block's width never changes as numbers tick — which is what kept
   nudging the powers/rivals lanes sideways via space-between */
.qh-total{
  font-family:var(--wp--preset--font-family--display,'Roobert Semimono',monospace);
  font-weight:400; font-size:1.7rem; line-height:1;
  color:var(--qh-on); font-variant-numeric:tabular-nums;
}
.qh-bonus{
  font-weight:700; font-size:0.9375rem; line-height:1;   /* 15px — stepped down 2px */
  color:var(--qh-coral); font-variant-numeric:tabular-nums;
  display:inline-block; min-width:6ch; text-align:left;
}
/* live rank: your leaderboard position, between SCORE and SUPERPOWERS.
   Same flex recipe as the score block, so label + figure land on the
   exact same vertical rhythm. */
.qh-hud__rank{ display:flex; align-items:baseline; gap:9px 5px; flex-wrap:wrap; flex:none; }
.qh-rank{
  font-family:var(--wp--preset--font-family--display,'Roobert Semimono',monospace);
  font-weight:400; font-size:1.7rem; line-height:1;
  color:var(--qh-on); font-variant-numeric:tabular-nums;
  /* reserved for the widest case ("13th ▼") so the SUPERPOWERS lane never
     budges as the rank ticks between 1 and 2 digits */
  display:inline-block; min-width:64px; text-align:left;
}
.qh-rank__suffix{ font-size:0.55em; }
.qh-rank.is-top{ color:var(--qh-coral); }
/* the direction marker: coral chevron on a move, grey dash when settled */
.qh-rank__dir{
  display:inline-block; margin-left:5px;
  font-size:0.5em; line-height:1;
  vertical-align:0.45em;
  color:var(--qh-soft);
}
.qh-rank__dir.is-up,
.qh-rank__dir.is-down{ color:var(--qh-coral); }

.qh-streak{
  display:inline-flex; align-items:center; gap:1px;
  font-weight:700; font-size:1rem; line-height:1;
  color:var(--qh-coral);
}
.qh-streak[hidden]{ display:none; }
.qh-streak__flame{ font-size:0.95em; }
.qh-streak.is-pop{ animation:qh-streak-pop 0.45s var(--qh-ease-out); }

/* superpowers — a labelled lane (same eyebrow treatment as SCORE) holding
   three translucent dark pills, Instagram-style. The pill row scrolls
   horizontally inside its max-width if the lane gets tight, so the HUD is
   always ONE row: score | superpowers | rivals. */
/* the two scrollable lanes (superpowers + reactions) share one treatment:
   hidden-scrollbar row, cream fade while there's more */
.qh-powers,
.qh-reacts{
  position:relative;             /* anchors the right-edge scroll fade */
  display:flex; flex-direction:column; gap:6px;
  flex:0 1 auto; min-width:0;    /* take what the score lane leaves; scroll inside it */
}
.qh-powers > .qh-hud__label{ width:auto; }
.qh-powers__row,
.qh-reacts__row{
  display:flex; align-items:center; gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;          /* Firefox */
  /* vertical breathing room inside the scroll clip so the hover/press lift
     never shaves pixels. Vertical ONLY — a horizontal negative margin makes
     the scroller settle 3px off on first layout (the load-in "budge"). */
  padding:3px 0;
  margin:-3px 0;
}
.qh-powers__row::-webkit-scrollbar,
.qh-reacts__row::-webkit-scrollbar{ display:none; }   /* WebKit */

/* reaction buttons — bare emoji, spam-friendly */
.qh-react{
  flex:none;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; background:transparent; border:0; border-radius:999px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:19px; line-height:1;
  cursor:pointer;
  transition:transform 0.14s var(--qh-ease-out);
}
@media (hover:hover){ .qh-react:hover{ transform:translateY(-1px) scale(1.15); } }
.qh-react:active{ transform:scale(0.88); }

/* a reaction in flight — floats up across the segment and fades */
.qh-float{
  position:absolute; z-index:6;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:22px; line-height:1;
  pointer-events:none;
  will-change:transform,opacity;
  animation:qh-float-up var(--dur,2.2s) ease-out forwards;
}
.qh-power{
  flex:none;
  padding:8px 13px;
  background:var(--qh-coral);      /* unused: full coral, ready to fire */
  border:0;
  border-radius:999px;
  color:#fff;
  font-family:inherit;
  font-size:0.8125rem; font-weight:600; line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:transform 0.16s var(--qh-ease-out), background 0.16s var(--qh-ease-out),
             color 0.16s var(--qh-ease-out), opacity 0.2s;
}
@media (hover:hover){
  .qh-power:not(:disabled):hover{ transform:translateY(-1px); background:#D82A18; }
}
.qh-power:not(:disabled):active{ transform:translateY(1px); background:#D82A18; }
.qh-power.is-armed{
  background:var(--qh-on); color:var(--qh-on-fg);   /* live this question: ink, breathing */
  animation:qh-armed 1.8s ease-in-out infinite;
}
.qh-power.is-spent{
  background:rgba(255,54,35,0.16);  /* used: light coral, dark text */
  color:var(--qh-on);
  text-decoration:line-through;
  cursor:default;
}
.qh-power:disabled:not(.is-spent){ opacity:0.45; cursor:default; }

/* the pinpointer — pops over a pill after a 1s hover, explains the benefit */
.qh-tip{
  position:absolute; z-index:8;
  transform:translate(-50%,-100%);
  background:var(--qh-on); color:var(--qh-on-fg);
  font-size:0.78rem; font-weight:600; line-height:1.35;
  padding:8px 11px;
  border-radius:0;   /* hard corners, per the brand */
  width:max-content; max-width:210px;
  text-align:center;
  pointer-events:none;
  animation:qh-tip-in 0.18s var(--qh-ease-out);
}
.qh-tip::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--qh-on);
}

/* spy: the room's picks — mini faces hopping onto the answer rows */
.qh-answer__crowd{ flex:none; display:inline-flex; align-items:center; }
.qh-crowd-face{
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--qh-cream);
  background-size:cover; background-position:center;
  margin-left:-7px;
  animation:qh-crowd-in 0.35s var(--qh-ease-out) backwards;
}
.qh-crowd-face:first-child{ margin-left:0; }

/* rival players — overlapping caterpillar row, right of the score. Everyone
   starts greyscale (opaque, so the overlaps stay clean); each snaps to full
   colour when they "answer". A cream fade on the right edge implies the row
   carries on beyond what's visible. */
/* clip-path cuts only the right side (truncating excess rivals), leaving left/top/bottom
   open so the first avatar's border and the pop animation never hit a clip edge */
.qh-rivals{ position:relative; display:flex; align-items:center; flex:none; clip-path:inset(-20px 0 -20px -20px); }
.qh-rivals::after{
  content:""; position:absolute; top:-3px; bottom:-3px; right:-4px; width:48px;
  background:linear-gradient(90deg, rgba(252,240,230,0) 0%, var(--qh-cream) 70%);
  pointer-events:none;
}
.qh-rival{
  flex:none;
  position:relative;   /* uniform paint layer: DOM order wins whether the
                          greyscale filter (a stacking context) is on or off,
                          so the caterpillar never re-shuffles on answer */
  width:30px; height:30px;
  border-radius:50%;
  overflow:hidden;     /* hard-clips ::before to the circle — no antialiasing gap at edge */
  box-shadow:0 0 0 2px var(--qh-cream);  /* ring renders outside the element, never filtered */
  background-size:cover; background-position:center;
  margin-left:-10px;
}
/* image layer — filter lives here, not on the parent, so the cream ring always stays cream */
.qh-rival::before{
  content:""; position:absolute; inset:0;
  background:inherit;   /* picks up the background-image JS sets on the parent */
  filter:grayscale(1) contrast(0.85) brightness(1.05);
  transition:filter 0.3s var(--qh-ease-out);
}
.qh-rival:first-child{ margin-left:2px; }   /* absorbs the ring (it paints outside) so nothing crosses the left margin */
.qh-rival.is-in{ animation:qh-rival-pop 0.42s var(--qh-ease-out); }
.qh-rival.is-in::before{ filter:none; }
/* scrambled (by the Scramble power): their buttons won't sit still — the 🌀
   badge lands and the face jolts on every re-shuffle (.is-shuffling pulses) */
.qh-rival.is-scrambled::after{
  content:"\1F300";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  background:rgba(255,54,35,0.30);
  border-radius:50%;
}
.qh-rival.is-shuffling{ animation:qh-shuffle 0.5s ease-in-out; }
@keyframes qh-shuffle{
  0%,100%{ transform:rotate(0); }
  25%{ transform:rotate(-14deg) scale(1.08); }
  50%{ transform:rotate(12deg); }
  75%{ transform:rotate(-8deg); }
}
/* frozen (by the Freeze power): image iced over, cream ring untouched */
.qh-rival.is-frozen::before{ filter:grayscale(1) brightness(1.15) contrast(0.8); }
.qh-rival.is-frozen::after{
  content:"\2744";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff;
  background:rgba(120,180,255,0.45);
  border-radius:50%;
  text-shadow:0 1px 2px rgba(0,40,90,0.4);
}
/* gate version: the face drawn tiny on a canvas, upscaled with no smoothing */
.qh-rival__px{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  border-radius:50%;
  image-rendering:pixelated;
  filter:grayscale(1) contrast(0.85) brightness(1.05);
}
@keyframes qh-rival-pop{
  0%  { transform:scale(1); }
  45% { transform:scale(1.3); }
  100%{ transform:scale(1); }
}
@media (max-width:640px){
  .qh-rival{ width:25px; height:25px; margin-left:-9px; box-shadow:0 0 0 1.5px var(--qh-cream); }
}
/* the room row (no title): larger faces */
.qh-rivals--lg .qh-rival{ width:35px; height:35px; margin-left:-12px; }
@media (max-width:640px){
  .qh-rivals--lg .qh-rival{ width:31px; height:31px; margin-left:-9px; }
}

/* anticipation beat — the chosen answer "checks" before the verdict lands */
.qh-answer.is-pending{
  background:var(--qh-glass-hi);
  animation:qh-pending 0.5s ease-in-out infinite;
}

/* urgency backdrop: coral overlay whose opacity JS drives up with each chunk drop */
.qh-urgency-bg{
  position:absolute; inset:0; z-index:1;
  background:var(--qh-coral);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.6s ease-out;
}

/* full-bleed reaction flash (sits over the content for a beat, never blocks it) */
.qh-flash{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; }
.qh-flash.is-correct{ animation:qh-flash-correct 0.6s ease-out; }
.qh-flash.is-wrong{ animation:qh-flash-wrong 0.5s ease-out; }

/* pixel explosion — a burst of square shards blown out from the centre on
   every verdict. JS seeds colour, size, vector + spin per shard. */
.qh-shard{
  position:absolute; top:0; left:0; z-index:3;
  width:var(--s,10px); height:var(--s,10px);
  background:var(--c,var(--qh-coral));
  pointer-events:none;
  will-change:transform,opacity;
  animation:qh-shard-fly var(--dur,0.9s) cubic-bezier(0.12,0.7,0.3,1) forwards;
}
@keyframes qh-shard-fly{
  0%  { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  12% { opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(0.3) rotate(var(--rot,90deg)); }
}

/* wrong answer shudder */
.quiz-hero__inner.is-shaking{ animation:qh-shake 0.4s ease-in-out; }

/* confetti canvas — the payment portal's coral celebration, fired on correct */
.qh-confetti{
  position:absolute; inset:0; z-index:7;
  width:100%; height:100%;
  pointer-events:none;
}

/* the chosen-correct answer gives a quick scale punch */
.qh-answer.is-correct{ animation:qh-answer-punch 0.42s var(--qh-ease-out); }

/* ==================================================================
   INTERVAL — answer explainer + 10s countdown between questions
   ================================================================== */
.qh-interval{ text-align:left; }
.qh-interval__verdict{
  display:block;   /* block so the beat-cascade transform applies */
  font-family:var(--wp--preset--font-family--pixel,'Pixelar',monospace);
  font-size:var(--wp--preset--font-size--h-8-eyebrow,19px);
  letter-spacing:0.03em; text-transform:uppercase;
  margin:0 0 0.6rem;
}
.qh-interval__verdict.is-correct{ color:var(--qh-coral); }
.qh-interval__verdict.is-wrong{ color:var(--qh-soft); }
/* the verdict's stamp: the answer-box circle-tick on correct, grey ✕ on a miss */
.qh-interval__verdict{ display:flex; align-items:center; }
.qh-interval__mark{ display:inline-flex; align-items:center; margin-right:8px; font-weight:700; }
.qh-interval__mark svg{ display:block; }
.qh-interval__verdict.is-wrong .qh-interval__mark{ color:var(--qh-soft); }
/* the correct answer carries the QUESTION headline treatment exactly */
.qh-interval__answer{
  font-family:var(--wp--preset--font-family--display,'Roobert Semimono',monospace);
  font-weight:400;
  font-size:clamp(2rem,8.5vw,2.75rem);
  line-height:0.923;
  letter-spacing:-0.10769em;
  color:var(--qh-on); margin:0 0 0.85rem; max-width:90%;
}
/* matches the question's under-headline body copy (.qh-hook) exactly */
.qh-interval__explainer{
  font-weight:500; font-size:0.9375rem;
  line-height:1.3; color:var(--qh-soft);
  margin:0 0 0.9rem; max-width:42ch;
}

/* ---- the room's split: compact bars, your pick chipped, the winner coral ---- */
.qh-int-room{ display:flex; flex-direction:column; gap:7px; margin:0 0 0.9rem; }
/* hand-placed wonk, same spirit as the answer boxes */
.qh-int-room .qh-int-bar:nth-child(1){ transform:translateX(-6px); }
.qh-int-room .qh-int-bar:nth-child(2){ transform:translateX(9px); }
.qh-int-room .qh-int-bar:nth-child(3){ transform:translateX(4px); }
.qh-int-room .qh-int-bar:nth-child(4){ transform:translateX(-7px); }
.qh-int-room .qh-int-bar:nth-child(5){ transform:translateX(6px); }
.qh-int-room .qh-int-bar:nth-child(6){ transform:translateX(-4px); }
.qh-int-bar{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:8px;
  min-height:28px; padding:0 10px;
  background:var(--qh-glass);
  font-size:0.8125rem; font-weight:600; color:var(--qh-on);
}
.qh-int-bar__fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0;
  background:rgba(29,11,9,0.10);
  transition:width 0.7s var(--qh-ease-out) 0.65s;   /* fills once the beat lands */
}
.qh-int-bar.is-win .qh-int-bar__fill{ background:rgba(255,54,35,0.22); }
.qh-interval.is-live .qh-int-bar__fill{ width:var(--w,0%); }
.qh-int-bar__label{ position:relative; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qh-int-bar__you{
  position:relative; flex:none;
  font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:#fff; background:var(--qh-coral);
  padding:2px 6px;
}
/* the judge's stamp on a write-in bar: ✓ accepted, ✕ rejected */
.qh-int-bar__mark{ position:relative; flex:none; font-weight:700; font-size:0.78rem; color:var(--qh-coral); }
/* who picked it: a mini overlapping caterpillar riding the bar */
.qh-int-bar__faces{ position:relative; flex:none; display:inline-flex; align-items:center; }
.qh-int-bar__faces .qh-int-face{
  width:16px; height:16px;
  box-shadow:0 0 0 1.5px var(--qh-cream);   /* ring outside the circle, same as the rivals row */
  margin-left:-5px;
}
.qh-int-bar__faces .qh-int-face:first-child{ margin-left:0; }
.qh-int-bar__pct{ position:relative; flex:none; font-weight:700; font-size:0.78rem; font-variant-numeric:tabular-nums; }
.qh-int-bar.is-win .qh-int-bar__pct{ color:var(--qh-coral); }

/* ---- the write-ins: the judge's ruling on yours + the room's finest ---- */
.qh-int-writes{ font-size:0.85rem; font-weight:500; line-height:1.55; color:var(--qh-soft); margin:0 0 0.9rem; }
.qh-int-writes:empty{ display:none; }
.qh-int-writes b{ font-weight:700; color:var(--qh-coral); }

/* ---- movement + the round award: a hero and a fool, every round ---- */
.qh-int-move{ display:flex; flex-direction:column; gap:5px; margin:0 0 0.9rem; font-size:0.9rem; font-weight:600; }
.qh-int-move__delta{ display:inline-flex; align-items:center; gap:7px; }   /* hosts the mover's face */
.qh-int-move__delta.is-up{ color:var(--qh-coral); }
.qh-int-move__delta.is-down{ color:var(--qh-soft); }
.qh-int-move__award{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:500; font-size:0.85rem; color:var(--qh-on);
}
.qh-int-face{
  flex:none; width:20px; height:20px; border-radius:50%;
  background-size:cover; background-position:center;
}
.qh-int-face--you{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--qh-coral); color:#fff;
  font-weight:700; font-size:0.62rem; line-height:1;
}

/* the round's story (biggest mover + award) sits under the leaderboard */
.qh-board__move{ margin:0.9rem 0 0; }

/* ---- ACT 2: the funniest write-in, alone on stage for 5 seconds ----
   .is-act2 clears everything except the spotlight, the foot and the bar;
   the quote lands in the question's own headline treatment. */
.qh-int-best{ display:none; }
.qh-interval.is-act2 > *{ display:none; }
.qh-interval.is-act2 > .qh-interval__foot{ display:flex; }
.qh-interval.is-act2 > .qh-interval__bar{ display:block; }
.qh-interval.is-act2 > .qh-int-best{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  margin:0 0 1.4rem;
}
.qh-interval.is-live.is-act2 > .qh-int-best{
  animation:qh-rise 0.5s var(--qh-ease-out) both;
  animation-delay:0s;             /* outranks the cascade's nth-child delay */
}
.qh-int-best__eyebrow{
  font-family:var(--wp--preset--font-family--pixel,'Pixelar',monospace);
  font-size:var(--wp--preset--font-size--h-8-eyebrow,19px);
  letter-spacing:0.03em; text-transform:uppercase;
  color:var(--qh-coral);
}
/* the judge's credentials, tucked under the eyebrow in question body copy */
.qh-int-best__note{
  margin:-8px 0 0;                 /* pulls in against the container's 16px gap */
  font-size:0.9375rem; font-weight:500; line-height:1.3;
  color:var(--qh-soft);
}
/* ---- the award ceremony: every write-in on its own grey offset card.
   They bounce in one by one (.is-in), the judge's highlight flickers
   across them (.is-scan), then the losers drop away (.is-out) and the
   winner is crowned (.is-winner) — solid ink, enlarged, gliding to the
   top as the others collapse, trophy floating off its corner. This same
   UI later accommodates player voting (cards become buttons). ---- */
.qh-int-cards{
  /* gap is sized so the wonky --x offsets (max 10px closure between
     neighbours) plus the focus pulse's swell can never make cards touch */
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  width:100%; max-width:600px;
}
@media (max-width:640px){
  .qh-int-cards{ grid-template-columns:repeat(2,1fr); }
}
.qh-int-card{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--qh-glass);
  border:1px solid transparent;
  border-radius:var(--qh-radius);
  min-height:120px;
  padding:0.85rem 0.9rem;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;                               /* waiting in the wings until .is-in */
  transform:translateX(var(--x,0));
  transition:background 0.18s var(--qh-ease-out), border-color 0.18s var(--qh-ease-out),
             color 0.18s var(--qh-ease-out), opacity 0.3s var(--qh-ease-out),
             transform 0.4s var(--qh-ease-out), scale 0.16s var(--qh-ease-out);
}
.qh-int-card__q{
  font-family:var(--wp--preset--font-family--display,'Roobert Semimono',monospace);
  font-weight:600;                         /* Roobert Semimono SemiBold */
  font-size:clamp(1.1rem,2.8vw,1.3rem);
  letter-spacing:-0.07em;
  color:var(--qh-on);
  line-height:1.15;
}
/* who wrote it: face + name/handle, small, atop the card */
.qh-int-card__byline{ display:flex; align-items:center; gap:8px; min-width:0; }
.qh-int-card__who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.qh-int-card__who b{
  font-size:0.72rem; font-weight:700; line-height:1.15; color:var(--qh-on);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qh-int-card__who i{
  font-style:normal; font-size:0.66rem; font-weight:500; line-height:1.15;
  color:var(--qh-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qh-int-card.is-winner .qh-int-card__who b{ color:var(--qh-on); }
.qh-int-card.is-winner .qh-int-card__who i{ color:var(--qh-soft); }
/* the entrance: a bounce up out of nowhere, then a gentle idle float */
.qh-int-card.is-in{
  animation:qh-card-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both,
            qh-card-float 3.4s ease-in-out 0.6s infinite;
}
.qh-int-cards .qh-int-card:nth-child(2).is-in{ animation-delay:0s, 1.4s; }
.qh-int-cards .qh-int-card:nth-child(3).is-in{ animation-delay:0s, 2.3s; }
@keyframes qh-card-in{
  from{ opacity:0; transform:translate(var(--x,0), 18px) scale(0.95); }
  to{   opacity:1; transform:translate(var(--x,0), 0)    scale(1); }
}
@keyframes qh-card-float{
  0%,100%{ transform:translate(var(--x,0), 0); }
  50%{     transform:translate(var(--x,0), -3px); }
}
/* the judge's eye, flicking across the candidates: a pure scale bump
   (the independent `scale` property rides on top of the float animation
   without restarting it — no border, no colour change) */
.qh-int-card.is-scan{
  scale:1.06;
}
/* the eye comes to REST on the winner-to-be: a held, throbbing focus.
   opacity is explicit — this animation replaces the entrance fill. */
.qh-int-card.is-focus{
  opacity:1;
  background:var(--qh-glass-hi);
  animation:qh-card-focus 0.4s var(--qh-ease-out) 3 both;
}
@keyframes qh-card-focus{
  0%,100%{ transform:translate(var(--x,0), 0) scale(1); }
  50%{     transform:translate(var(--x,0), 0) scale(1.05); }
}
/* the losers stay exactly where they stood — just recede: 3% smaller,
   half opacity. opacity is explicit (animation:none drops the entrance fill). */
.qh-int-card.is-out{
  opacity:0.5;
  transform:translate(var(--x,0), 0) scale(0.97);
  animation:none;
  pointer-events:none;
}
/* the crown: the winner stays IN ITS CELL — scales up over the grid, goes
   LIGHT CORAL with ink text, prize paid, trophy afloat (confetti fires from
   the JS crown). opacity is explicit — animation:none drops the entrance
   fill that was holding the card visible. */
.qh-int-card.is-winner{
  animation:none;
  opacity:1;
  z-index:1;                               /* grows over its neighbours */
  background:rgba(255,54,35,0.18);         /* light coral wash over the cream */
  border-color:var(--qh-coral);
  transform:translate(var(--x,0), 0) scale(1.12);
  transform-origin:center;
}
.qh-int-card.is-winner .qh-int-card__q{ color:var(--qh-on); }
.qh-int-card__prize{
  display:none;
  position:absolute; right:10px; bottom:10px;
  background:var(--qh-coral); color:#fff;
  /* sized DOWN so that after the winner card's 1.12 crown-scale it reads
     the same size as the input's "Funniest: +1,000" chip (0.72rem) */
  font-weight:700; font-size:0.64rem; letter-spacing:0.04em;
  padding:3px 6px; border-radius:var(--qh-radius);
  white-space:nowrap;
}
.qh-int-card.is-winner .qh-int-card__prize{ display:inline-flex; }
.qh-int-card__trophy{
  display:none;
  position:absolute; right:-12px; top:-6px;
  width:53px; height:auto;
  pointer-events:none;
}
.qh-int-card.is-winner .qh-int-card__trophy{
  display:block;
  animation:qh-trophy-float 2.6s ease-in-out infinite;
}
@keyframes qh-trophy-float{
  0%,100%{ transform:translateY(0) rotate(-6deg); }
  50%{     transform:translateY(-5px) rotate(3deg); }
}

/* ---- the beat cascade: every interval row deals in on its own beat ----
   Children are hidden until .is-live lands (re-toggled per visit), then rise
   in sequence: reveal → answer → explainer → room → write-ins → foot.
   The bars' fills sweep right as the room beat lands. */
.qh-interval > *{ opacity:0; }
.qh-interval.is-live > *{ animation:qh-rise 0.45s var(--qh-ease-out) both; }
.qh-interval.is-live > *:nth-child(1){ animation-delay:0s; }      /* verdict eyebrow */
.qh-interval.is-live > *:nth-child(2){ animation-delay:0.07s; }   /* the answer */
.qh-interval.is-live > *:nth-child(3){ animation-delay:0.3s; }    /* explainer */
.qh-interval.is-live > *:nth-child(4){ animation-delay:0.6s; }    /* the room's split */
.qh-interval.is-live > *:nth-child(5){ animation-delay:1.1s; }    /* write-ins ruling */
.qh-interval.is-live > *:nth-child(6){ animation-delay:0s; }      /* act-2 ceremony (hidden in act 1) */
.qh-interval.is-live > *:nth-child(7){ animation-delay:1.5s; }    /* foot */
.qh-interval.is-live > *:nth-child(8){ animation-delay:1.5s; }    /* countdown bar */
/* the cascade's safety net: ~2s in, the JS clock stamps .is-cascaded and
   everything snaps to its settled state — a no-op on a healthy run, a
   rescue when an entrance animation got frozen or dropped (offscreen
   pausing etc). Act 2's spotlight rule has higher specificity, so the
   ceremony still animates. */
.qh-interval.is-cascaded > *{ animation:none; opacity:1; }
.qh-interval__foot{ display:flex; align-items:center; gap:1rem; }
/* the opt-in: site secondary button (dark warm gradient, 42px) */
.qh-interval__next{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wp--preset--gradient--btn-secondary,linear-gradient(to right,#1D0B09,#3E1916));
  color:#fff; border:0;
  border-radius:var(--qh-radius);
  height:42px; padding:0 1.0625rem;
  font-family:inherit; font-size:var(--wp--preset--font-size--sm,0.9375rem); font-weight:700;
  line-height:1; cursor:pointer;
  transition:transform 0.16s var(--qh-ease-out), background 0.14s var(--qh-ease-out);
}
@media (hover:hover){
  .qh-interval__next:not(.is-opted):hover{
    background:var(--wp--preset--gradient--btn-secondary-hover,linear-gradient(to right,#0D0504,#2A100E));
    transform:translateY(-1px);
  }
}
.qh-interval__next:not(.is-opted):active{
  background:var(--wp--preset--gradient--btn-secondary-hover,linear-gradient(to right,#0D0504,#2A100E));
  transform:translateY(1px);
}
/* you're in: the button settles down and waits with you */
.qh-interval__next.is-opted{ opacity:0.8; cursor:default; }
/* the lobby count riding the button */
.qh-int-ready{
  font-variant-numeric:tabular-nums;
  font-weight:700; font-size:0.78rem;
  background:rgba(255,255,255,0.16);
  padding:3px 7px;
}
.qh-interval__count{
  font-family:var(--wp--preset--font-family--pixel,'Pixelar',monospace);
  font-size:1.0625rem; color:var(--qh-soft); font-variant-numeric:tabular-nums;
}
.qh-interval__bar{
  display:block; margin-top:1rem;
  height:4px; width:100%;
  background:var(--qh-glass-hi);
}
.qh-interval__bar-fill{
  display:block; height:100%;
  background:var(--qh-coral);
  transform-origin:left center; transform:scaleX(1);
}

/* ---- the answers: glassy overlays, set at slight wonky angles ---- */
.qh-answers{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(10px,2.4vw,13px); }
.qh-answer{
  position:relative;
  width:100%;
  display:flex; align-items:center; gap:12px;
  background:var(--qh-glass);
  border:1px solid transparent;
  border-radius:var(--qh-radius);
  /* a touch over the site's 42px CTA height; single-line rows sit at
     exactly 45, wrapped answers can still grow */
  min-height:45px;
  padding:0.4rem clamp(1rem,3vw,1.25rem);
  font-family:inherit;
  font-size:clamp(1rem,2.8vw,1.15rem);
  font-weight:600;
  color:var(--qh-on);
  text-align:left;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transform:translateX(var(--x,0));
  transition:background 0.18s var(--qh-ease-out),border-color 0.18s var(--qh-ease-out),opacity 0.2s var(--qh-ease-out),transform 0.18s var(--qh-ease-out);
}
/* hand-placed: each row nudged a touch differently on the X axis only */
.qh-answers li:nth-child(1) .qh-answer{ --x:-6px; }
.qh-answers li:nth-child(2) .qh-answer{ --x: 9px; }
.qh-answers li:nth-child(3) .qh-answer{ --x: 4px; }
.qh-answers li:nth-child(4) .qh-answer{ --x:-7px; }


/* hover: grey lift on unpicked answers only — a picked answer is already
   coral and already holds its scale, so hover changes nothing on it. The
   freestyle field opts out: it's a text input, not a button. */
.qh-answers:not(.is-locked) .qh-answer:not(.is-picked):not(.qh-answer--free):hover{ background:var(--qh-glass-hi); transform:scale(1.02) translateX(var(--x,0)); }

/* ENTRANCE — JS adds .is-intro to the play stage, then holds the clock until
   this top-to-bottom cascade lands (~0.7s). `backwards` fill keeps each row
   hidden through its delay; nothing locks afterwards, so hover still works. */
.qh-play.is-intro .qh-step { animation:qh-rise 0.40s var(--qh-ease-out) 0.00s backwards; }
.qh-play.is-intro .qh-q    { animation:qh-rise 0.46s var(--qh-ease-out) 0.07s backwards; }
.qh-play.is-intro .qh-hook { animation:qh-rise 0.40s var(--qh-ease-out) 0.13s backwards; }
.qh-play.is-intro .qh-hud  { animation:qh-rise 0.40s var(--qh-ease-out) 0.19s backwards; }
.qh-play.is-intro .qh-answers li:nth-child(1) .qh-answer{ animation:qh-answer-in 0.40s var(--qh-ease-out) 0.27s backwards; }
.qh-play.is-intro .qh-answers li:nth-child(2) .qh-answer{ animation:qh-answer-in 0.40s var(--qh-ease-out) 0.34s backwards; }
.qh-play.is-intro .qh-answers li:nth-child(3) .qh-answer{ animation:qh-answer-in 0.40s var(--qh-ease-out) 0.41s backwards; }
.qh-play.is-intro .qh-answers li:nth-child(4) .qh-answer{ animation:qh-answer-in 0.40s var(--qh-ease-out) 0.48s backwards; }
.qh-answer__label{ flex:1; }
.qh-answer__tick{ flex:none; font-size:1.1rem; opacity:0; }

/* ---- the freestyle slot: type your own answer (×1.5 if the judge buys it) ---- */
/* a touch darker than the listed answers, so it reads as a field, not a button;
   a subtle ink border wakes up while you're typing in it */
.qh-answer--free{ cursor:text; background:rgba(29,11,9,0.08); }
.qh-answer--free:focus-within{ border-color:rgba(29,11,9,0.30); }
/* the reserved verdict furniture (circle-tick + ✓ slot) gives up its space in
   this row — it was holding the go arrow ~60px off the right edge. It only
   returns when actually shown. */
.qh-answer--free .qh-answer__pick,
.qh-answer--free .qh-answer__tick{ display:none; }
.qh-answer--free.is-picked .qh-answer__pick{ display:inline-flex; }
.qh-answer--free.is-correct .qh-answer__tick,
.qh-answer--free.is-wrong .qh-answer__tick{ display:inline; }
/* once an answer is banked, the arrow's job is done (Enter still re-banks) */
.qh-answer--free.is-picked .qh-free__go{ display:none; }
.qh-free__input{
  flex:1 1 auto; min-width:0;
  background:transparent; border:0; outline:0;
  font:inherit; font-weight:700;        /* your typed answer lands bold */
  color:var(--qh-on);
  padding:0;
}
.qh-free__input::placeholder{ color:var(--qh-soft); opacity:1; font-weight:500; }   /* ghosts stay medium */
.qh-answer--free.is-correct .qh-free__input{ color:var(--qh-on-fg); }
/* the go arrow: appears once there's something to bank, tucked to the field's edge */
.qh-free__go{
  flex:none;
  width:28px; height:28px;
  margin-right:calc(clamp(1rem,3vw,1.25rem) * -1 + 7px);   /* eat most of the row padding */
  display:none; align-items:center; justify-content:center;
  padding:0; background:var(--qh-coral); color:#fff;
  border:0; border-radius:var(--qh-radius);
  font-size:1rem; line-height:1; cursor:pointer;
  transition:transform 0.16s var(--qh-ease-out);
}
.qh-answer--free.has-text:not(.is-picked) .qh-free__go{ display:inline-flex; }   /* once banked, the arrow's gone */
@media (hover:hover){ .qh-free__go:hover{ transform:translateY(-1px); } }
.qh-free__go:active{ transform:translateY(1px); }
.qh-answers.is-locked .qh-free__go{ display:none; }
/* the comedy hedge, stated upfront: funniest write-in of the round pays 1,000.
   The chip steps aside once you start typing (the go arrow takes its spot). */
.qh-free__prize{
  flex:none;
  font-size:0.72rem; font-weight:700; line-height:1;
  color:var(--qh-coral);
  white-space:nowrap;
}
.qh-answer--free.has-text .qh-free__prize,
.qh-answer--free.is-picked .qh-free__prize,
.qh-answers.is-locked .qh-free__prize{ display:none; }   /* once banked, the badge carries the +1,000 */

/* result states (set by JS on reveal) */
.qh-answers.is-locked .qh-answer{ cursor:default; }
.qh-answer.is-correct{
  background:var(--qh-on);
  border-color:var(--qh-on);
  color:var(--qh-on-fg);
}
.qh-answer.is-correct .qh-answer__tick{ opacity:1; color:var(--qh-on-fg); }
.qh-answer.is-wrong{
  background:rgba(29,11,9,0.04);
  border-color:rgba(29,11,9,0.45);
}
.qh-answer.is-wrong .qh-answer__tick{ opacity:0.85; color:var(--qh-on); }
.qh-answer.is-dim{ opacity:0.4; }

/* pending pick — coral wash + coral border + the flow-page circle tick.
   Changeable until the clock hits zero; verdict classes then take over.
   The pick breathes softly: it's armed, not parked. */
.qh-answer.is-picked{
  background:rgba(255,54,35,0.10);
  border-color:var(--qh-coral);
  transform:scale(1.02) translateX(var(--x,0));   /* holds the lift while banked — copy, chip and tick scale with it */
  animation:qh-armed 1.8s ease-in-out infinite;
}
/* the (empty) verdict tick gives up its slot while picked, so the chip and
   coral tick sit flush against the right edge of the cell */
.qh-answer.is-picked .qh-answer__tick{ display:none; }
/* the wager chip — your banked bonus stamped on the choice itself */
.qh-answer__bank{
  flex:none;
  display:none;
  font-size:0.72rem; font-weight:700; line-height:1;
  color:#fff; background:var(--qh-coral);
  padding:4px 8px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.qh-answer.is-picked .qh-answer__bank{
  display:inline-block;
  animation:qh-bank-in 0.3s var(--qh-ease-out);
}
/* tap punch — fires once per (re)pick; keeps the armed breath running */
.qh-answer.is-tap{
  animation:qh-pick-punch 0.3s var(--qh-ease-out), qh-armed 1.8s ease-in-out infinite;
}
/* final-5s heartbeat — re-triggered by JS on the shudder beat, in lockstep */
.qh-answer.is-beat{
  animation:qh-pick-beat 0.45s ease-out, qh-armed 1.8s ease-in-out infinite;
}
/* final 3s: everything but your pick falls away */
.qh-answers.is-endgame .qh-answer:not(.is-picked){ opacity:0.35; }
.qh-answer__pick{
  flex:none;
  display:inline-flex;
  transform:scale(0); opacity:0;
  transform-origin:center;
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;   /* springy pop, per flow page */
}
.qh-answer__pick svg{ width:20px; height:20px; display:block; }
.qh-answer.is-picked .qh-answer__pick{ transform:scale(1); opacity:1; }
.qh-answer.is-correct .qh-answer__pick,
.qh-answer.is-wrong .qh-answer__pick,
.qh-answer.is-dim .qh-answer__pick{ display:none; }   /* verdict tick replaces it */

/* ==================================================================
   LEADERBOARD STING — glass rows on the coral, YOU goes solid white
   ================================================================== */
.qh-board__lead{
  font-weight:700;
  font-size:clamp(1.25rem,4.4vw,1.7rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--qh-on);
  margin:0 0 1.1rem;
}
.qh-board__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
/* the table splits in two: the podium stays pinned, the rest scrolls.
   Side padding + negative margin give the wonky rows room before the clip. */
.qh-board__list--pinned{ position:relative; z-index:1; }
.qh-board__list--scroll{
  margin:8px -10px 0;
  padding:2px 10px;
  max-height:178px;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.qh-board__list--scroll::-webkit-scrollbar{ display:none; }
/* head + rows share one grid so the face / Q1 / Q2 / Pts columns line up exactly */
.qh-board__head,
.qh-board__row{
  display:grid;
  grid-template-columns:16px 28px 1fr 28px 28px 56px;
  align-items:center; gap:8px;
}
.qh-board__head{
  padding:0 1rem;
  font-family:var(--wp--preset--font-family--pixel,'Pixelar',monospace);
  font-size:0.75rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--qh-soft);
}
.qh-board__head span{ text-align:center; }
/* same cell recipe as the answers: glass fill, no hairline, hand-placed wonk */
.qh-board__row{
  background:var(--qh-glass);
  border:1px solid transparent;
  border-radius:var(--qh-radius);
  padding:0.55rem 1rem;
  font-size:1rem;
  color:var(--qh-on);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  will-change:transform;
  transform:translateX(var(--x,0));   /* the wonk is set inline per row (JS) */
  animation:qh-row-in 0.4s var(--qh-ease-out) forwards;   /* fade only — the shuffle owns Y */
}
/* the sort: every row, in both lists, slides home together */
.qh-board.is-sorting .qh-board__row{ transition:transform 0.65s cubic-bezier(0.22,1,0.36,1); }
/* opacity:1 here is load-bearing: swapping the animation drops the fade-in's
   forwards fill, which is what made the YOU row vanish after sorting */
.qh-board__row.is-you.is-landed{ opacity:1; animation:qh-board-land 0.45s var(--qh-ease-out); }
@keyframes qh-board-land{
  0%  { transform:scale(1) translateX(var(--x,0)); }
  40% { transform:scale(1.04) translateX(var(--x,0)); }
  100%{ transform:scale(1) translateX(var(--x,0)); }
}
.qh-board__row.is-you{
  background:rgba(255,54,35,0.18);    /* light coral, same wash as the crowned card */
  border-color:var(--qh-coral);
  color:var(--qh-on);
  font-weight:700;
}
.qh-board__rank{ font-weight:700; font-size:0.85rem; opacity:0.55; }
.qh-board__row.is-you .qh-board__rank{ opacity:1; }
/* player thumbnails */
.qh-board__face{
  width:28px; height:28px; border-radius:50%;
  background-size:cover; background-position:center;
}
.qh-board__face--you{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--qh-coral); color:#fff;
  font-weight:700; font-size:0.78rem; line-height:1;
}
/* Instagram-style identity: display name over a smaller @handle */
.qh-board__name{ min-width:0; }
.qh-board__n{
  display:block; font-weight:600; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qh-board__row.is-you .qh-board__n{ font-weight:700; }
.qh-board__h{
  display:block; font-weight:500; font-size:0.72rem; line-height:1.2;
  color:var(--qh-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qh-board__row.is-you .qh-board__h{ color:var(--qh-soft); }
/* the Q-by-Q verdicts: thick square-cornered brand tick, faded miss */
.qh-board__q{ display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; }
.qh-board__q svg{ display:block; }
.qh-board__q.is-miss{ opacity:0.45; }
/* writers get a speech bubble: coral when their write-in won, grey when it died */
.qh-board__q.is-bubble{ color:rgba(29,11,9,0.30); }
.qh-board__q.is-bubble.is-won{ color:var(--qh-coral); }
.qh-board__score{ font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
/* no buttons here — just the 10s count, right-aligned; the clock advances */
.qh-board .qh-interval__foot{ margin-top:1.1rem; justify-content:flex-end; }

/* ==================================================================
   SCORE SCREEN
   ================================================================== */
.qh-end__label{
  font-family:var(--wp--preset--font-family--pixel,'Pixelar',monospace);
  font-size:var(--wp--preset--font-size--h-8-eyebrow,1.1875rem);
  font-weight:400;
  text-transform:uppercase; letter-spacing:0.03em;
  color:var(--qh-soft);
  margin:0 0 0.4rem;
}
.qh-end__score{
  font-family:var(--wp--preset--font-family--display,'Roobert Semimono',monospace);
  font-size:clamp(3.5rem,14vw,5rem);
  line-height:0.9;
  letter-spacing:-0.03em;
  color:var(--qh-on);
  font-variant-numeric:tabular-nums;
  margin:0 0 0.5rem;
}
.qh-end__pct{
  font-weight:700;
  font-size:clamp(1.05rem,3.2vw,1.25rem);
  color:var(--qh-coral);
  margin:0 0 1.1rem;
}
.qh-end__line{
  font-weight:500;
  font-size:clamp(1rem,2.8vw,1.15rem);
  line-height:1.4;
  color:var(--qh-on);
  margin:0 0 1.7rem;
  max-width:34ch;
}
/* the coral arrow pointing back up at the board */
.qh-end__line-up{ color:var(--qh-coral); font-weight:700; margin-right:2px; }
/* the conversion CTA wears the site's SECONDARY button exactly (same as the
   interval's opt-in): dark warm gradient, 42px, bg-shift hover — no movement */
.qh-end__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--wp--preset--gradient--btn-secondary,linear-gradient(to right,#1D0B09,#3E1916));
  color:#fff;
  border-radius:var(--qh-radius);
  height:42px; padding:0 1.0625rem;
  font-family:inherit; font-size:var(--wp--preset--font-size--sm,0.9375rem); font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background 0.14s var(--qh-ease-out);
}
@media (hover:hover){
  .qh-end__cta:hover{
    background:var(--wp--preset--gradient--btn-secondary-hover,linear-gradient(to right,#0D0504,#2A100E));
  }
}
.qh-arrow{ font-size:1.05em; line-height:1; }
.qh-end__again{
  display:block; width:max-content;   /* shrink to the text, centred under the CTA */
  margin:0.9rem auto 0;
  padding:0;
  background:transparent; border:0; cursor:pointer;
  font-family:inherit; font-size:0.9rem; font-weight:500;
  color:var(--qh-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.qh-end__again:hover{ color:var(--qh-on); }

/* ---- the finale's beats: score counts → verdict → the final table deals
   in (YOUR row lands with the pop + confetti) → the pitch. Driven by
   TRANSITIONS, not animations, so a frozen-animation environment can never
   strand the screen half-shown. ---- */
.qh-end__board{
  list-style:none; margin:0 0 1.6rem; padding:0;
  width:100%; max-width:600px;
  display:flex; flex-direction:column; gap:6px;
}
.qh-end__board .qh-board__row{ animation:none; }   /* the beats own entry here */
.qh-end__seam{
  font-weight:700; color:var(--qh-soft); letter-spacing:0.2em;
  line-height:1; padding:0 0 0 16px;
  opacity:0;
}
.qh-end__pct,
.qh-end__board > *,
.qh-end__line,
.qh-end__cta,
.qh-end__again{
  opacity:0; transform:translateY(10px);
  transition:opacity 0.45s var(--qh-ease-out), transform 0.45s var(--qh-ease-out);
  transition-delay:var(--d,0s);
}
.qh-end.is-counted .qh-end__pct{ opacity:1; transform:none; }
.qh-end.is-board .qh-end__board > *{ opacity:1; transform:translateX(var(--x,0)); }
.qh-end.is-board .qh-end__seam{ transform:none; }
.qh-end.is-cta .qh-end__line,
.qh-end.is-cta .qh-end__cta,
.qh-end.is-cta .qh-end__again{ opacity:1; transform:none; transition-delay:0s; }

/* the reused, reduced-motion-aware flashing period */
.qh-flash-period{
  color:var(--qh-coral);
  animation:qh-period-blink 1.1s step-end infinite;
  display:inline-block;
}

/* ==================================================================
   KEYFRAMES
   ================================================================== */
@keyframes qh-bar-beat{
  0%,100%{ transform:scaleY(1); }
  8%     { transform:scaleY(2.4); }
  22%    { transform:scaleY(1); }
}
@keyframes qh-fill-pulse{
  0%  { filter:brightness(1.7); }
  14% { filter:brightness(1.0); }
  100%{ filter:brightness(1.0); }
}
@keyframes qh-bar-shimmer{
  from{ background-position:85% 0; }
  to  { background-position:15% 0; }
}
/* per-element deal-in: static rows rise+fade; answers keep their wonky --x */
@keyframes qh-rise{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes qh-answer-in{
  from{ opacity:0; transform:translate(var(--x,0),16px); }
  to  { opacity:1; transform:translate(var(--x,0),0); }
}
@keyframes qh-streak-pop{
  0%  { transform:scale(0.3); opacity:0; }
  60% { transform:scale(1.25); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes qh-time-jitter{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(1.5px); } }
@keyframes qh-pending{
  0%,100%{ box-shadow:inset 0 0 0 0 var(--qh-coral); }
  50%    { box-shadow:inset 0 0 0 2px var(--qh-coral); }
}
/* both verdict flashes share one restrained radial style — coral for correct,
   dim ink-red for wrong — so they read as a matched pair */
@keyframes qh-flash-correct{
  0%  { opacity:0; background:radial-gradient(circle at 50% 52%, rgba(255,54,35,0.06), rgba(255,54,35,0.22)); }
  22% { opacity:1; }
  100%{ opacity:0; }
}
@keyframes qh-flash-wrong{
  0%  { opacity:0; background:radial-gradient(circle at 50% 50%, rgba(120,20,10,0.04), rgba(120,20,10,0.20)); }
  22% { opacity:1; }
  100%{ opacity:0; }
}
@keyframes qh-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(3px); }
}
@keyframes qh-answer-punch{
  0%  { transform:scale(1) translateX(var(--x,0)); }
  40% { transform:scale(1.06) translateX(var(--x,0)); }
  100%{ transform:scale(1) translateX(var(--x,0)); }
}
/* a reaction floating up and away, with a little drift and tilt */
@keyframes qh-float-up{
  0%  { opacity:0; transform:translate(0,0) scale(0.5) rotate(0deg); }
  10% { opacity:1; transform:translate(0,-16px) scale(1.18) rotate(-5deg); }
  100%{ opacity:0; transform:translate(var(--dx,20px),var(--dy,-180px)) scale(var(--sc,1)) rotate(var(--rot,8deg)); }
}
/* the pinpointer rising into place */
@keyframes qh-tip-in{
  from{ opacity:0; transform:translate(-50%,-100%) translateY(4px); }
  to  { opacity:1; transform:translate(-50%,-100%) translateY(0); }
}
/* spy faces dropping onto the answer rows */
@keyframes qh-crowd-in{
  from{ opacity:0; transform:translateY(-6px) scale(0.4); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
/* the armed pick breathing (soft coral halo swelling and settling) */
@keyframes qh-armed{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,54,35,0); }
  50%    { box-shadow:0 0 0 3px rgba(255,54,35,0.18); }
}
/* banking chip pops up out of the row */
@keyframes qh-bank-in{
  from{ opacity:0; transform:translateY(4px) scale(0.8); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
/* the tap: a quick decisive press-punch (based at the picked 1.02 rest scale) */
@keyframes qh-pick-punch{
  0%  { transform:scale(1.02) translateX(var(--x,0)); }
  45% { transform:scale(1.07) translateX(var(--x,0)); }
  100%{ transform:scale(1.02) translateX(var(--x,0)); }
}
/* the final-seconds heartbeat — one throb per shudder tick (same 1.02 base) */
@keyframes qh-pick-beat{
  0%  { transform:scale(1.02) translateX(var(--x,0));  box-shadow:0 0 0 0 rgba(255,54,35,0); }
  30% { transform:scale(1.045) translateX(var(--x,0)); box-shadow:0 0 0 4px rgba(255,54,35,0.30); }
  100%{ transform:scale(1.02) translateX(var(--x,0));  box-shadow:0 0 0 0 rgba(255,54,35,0); }
}
@keyframes qh-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes qh-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes qh-row-in{ to{ opacity:1; } }   /* fade only — transform belongs to the sort */
@keyframes qh-period-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* ==================================================================
   MOBILE — question headline scaled down to feel proportionate
   ================================================================== */
/* desktop / tablet: smaller answer text, tighter stack */
@media (min-width:641px){
  .qh-answers{ gap:9px; }
  .qh-answer{ font-size:1rem; }   /* 16px — stepped down 1px */
  .qh-step{ position:relative; top:8px; }   /* eyebrow sits 8px lower, tighter to the headline */
}

@media (min-width:1025px){
  .quiz-hero{ --qh-trim:0px; }
}

@media (max-width:640px){
  .qh-q{ max-width:80%; }
  /* titles a tad LARGER on mobile (the interval answer shares the
     question-headline treatment, so they move together) */
  .qh-q,
  .qh-interval__answer{ font-size:2.2rem; }
  .qh-step{ font-size:1.125rem; }   /* eyebrow steps down on mobile, per site convention */

  /* ---- the breathing-room pass: the score/rank figures pull right in so
     the SUPERPOWERS lane gets real viewing room ---- */
  .qh-hud{ gap:14px; }
  .qh-hud__top{ gap:10px; }
  .qh-hud__bottom{ gap:12px; }
  .qh-total,
  .qh-rank{ font-size:1.425rem; }
  .qh-rank{ min-width:46px; }
  .qh-bonus{ font-size:0.8125rem; min-width:5ch; }
  .qh-hud__label{ font-size:0.8875rem; }
  .qh-power{ padding:7.5px 10px; font-size:0.8125rem; }
  .qh-react{ width:33px; height:33px; font-size:19px; }
  /* extend the scroll containers to the viewport right edge so pills and
     emojis bleed off naturally instead of stopping at the content gutter */
  .qh-powers__row,
  .qh-reacts__row{ margin-right:calc(-1 * var(--wp--custom--layout--gutter,1.5rem)); }

  /* answers + the freestyle input hold Apple's 16px floor: iOS Safari
     ZOOMS the page on focusing any input under 16px, so button/input type
     stays at 1rem (supersedes the earlier 1px trim on these rows). The
     wonk is reined right in so no row can leave the viewport, even while
     the picked lift (scale 1.02) holds */
  .qh-answer{ font-size:1rem; min-height:48px; }
  /* …EXCEPT the input itself: 16px is Apple's no-zoom threshold — a focused
     input below it makes iOS Safari zoom the whole page in */
  .qh-free__input{ font-size:1rem; }
  .qh-answers li:nth-child(1) .qh-answer{ --x:-3px; }
  .qh-answers li:nth-child(2) .qh-answer{ --x:4px; }
  .qh-answers li:nth-child(3) .qh-answer{ --x:2px; }
  .qh-answers li:nth-child(4) .qh-answer{ --x:-3px; }

  /* ceremony cards: the winner's 1.12 crown-scale needs the margin — keep
     those inside (!important beats the JS-set inline custom property).
     Board rows KEEP their wonk: max +9px sits well inside the gutter. */
  .qh-int-card{ --x:0 !important; }

  /* body copy on questions + intervals: 1px down */
  .qh-hook,
  .qh-interval__explainer,
  .qh-int-best__note{ font-size:0.9375rem; }

  /* leaderboards: shorter cells, smaller names + totals */
  .qh-board__row{ padding:0.5125rem 0.75rem; font-size:0.875rem; }
  .qh-board__face{ width:24px; height:24px; }
  .qh-board__h{ font-size:0.66rem; }

  /* every Pixelar eyebrow steps down together: QUESTION X, CORRECT /
     NOT QUITE, and the ceremony's FUNNIEST ANSWER all share 1rem */
  .qh-interval__verdict,
  .qh-int-best__eyebrow{ font-size:1.125rem; }

  /* finale verdict line, a touch smaller */
  .qh-end__pct{ font-size:0.95rem; }

  /* CTA + action buttons: nudge up 3px on mobile */
  .qh-interval__next,
  .qh-end__cta{ height:45px; }
}

/* ==================================================================
   REDUCED MOTION — fully playable, just calm. The time-bar still drains
   (it carries information); the cross-fades, row-ins and blink fall away.
   The wonky answer angles are a static design choice, so they stay.
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .quiz-hero__inner.is-exiting,
  .quiz-hero__inner.is-entering{ animation:none !important; }
  .qh-board__row{ opacity:1; transform:translateX(var(--x,0)); animation:none; }
  .qh-flash-period{ animation:none; }
  .qh-answer{ transition:none; }
  .qh-timebar,.qh-timebar__fill{ animation:none; }
  .qh-play.is-intro .qh-step,
  .qh-play.is-intro .qh-q,
  .qh-play.is-intro .qh-hook,
  .qh-play.is-intro .qh-hud,
  .qh-play.is-intro .qh-answer{ animation:none; }
  .qh-rival.is-in{ animation:none; }
  .qh-answer__pick{ transition:none; }
  .qh-answer.is-picked,
  .qh-answer.is-tap,
  .qh-answer.is-beat,
  .qh-answer.is-picked .qh-answer__bank{ animation:none; }
  .qh-power.is-armed{ animation:none; }
  .qh-crowd-face{ animation:none; }
  .qh-streak,.qh-flash,.qh-shard,
  .qh-answer.is-correct,
  .quiz-hero__inner.is-shaking,
  .qh-answer.is-pending,
  .qh-gate__btn{ transition:none; }
  .qh-rival.is-shuffling{ animation:none; }
  /* interval: everything visible at once, bars at full width, no cascade */
  .qh-interval > *{ opacity:1; }
  .qh-interval.is-live > *{ animation:none; }
  .qh-interval.is-live.is-act2 > .qh-int-best{ animation:none; }
  .qh-int-bar__fill{ transition:none; width:var(--w,0%); }
  /* ceremony: cards appear in place, no bounce/float, trophy holds still */
  .qh-int-card{ transition:none; }
  .qh-int-card.is-in{ animation:none; opacity:1; }
  .qh-int-card.is-winner .qh-int-card__trophy{ animation:none; }
  /* finale: every beat lands at once, no slides */
  .qh-end__pct, .qh-end__board > *, .qh-end__line, .qh-end__cta, .qh-end__again{ transition:none; }
  /* verdict flash: everything just appears, thumb holds still */
  .qh-vflash__word,
  .qh-vflash__sub,
  .qh-vflash__thumb{ animation:none; opacity:1; }
}