/* Quiz Night Live - show engine styles.
   Design tokens, slide-stage CSS and the base controls are copied from the Quiz Presenter
   app so a quiz authored there looks identical here. */
:root{
  /* palette */
  --ink:#0B0E14;          /* deepest background            */
  --velvet:#161B26;       /* raised surface                */
  --velvet-2:#1E2532;     /* raised surface, one step up   */
  --velvet-3:#28303F;     /* hover / active surface        */
  --line:#313B4C;         /* hairlines, borders            */
  --line-soft:#252D3B;
  --chalk:#F4F1EA;        /* primary text (warm white)     */
  --slate:#9BA6B7;        /* secondary text                */
  --slate-dim:#6B7688;    /* tertiary text                 */
  --gold:#E8B923;         /* SIGNATURE accent — reveals    */
  --gold-ink:#241B00;     /* text on gold                  */
  --gold-soft:rgba(232,185,35,.14);
  --gold-line:rgba(232,185,35,.55);
  --curtain:#B23A2E;      /* secondary accent, used sparingly */
  --curtain-soft:rgba(178,58,46,.16);
  --good:#46C67C;
  --good-soft:rgba(70,198,124,.14);
  --danger:#FF6B6B;

  /* slide-type identity (builder only) */
  --t-title:#E8B923;
  --t-topics:#C9A24B;
  --t-sponsor:#8FA1B3;
  --t-question:#5B9BD5;
  --t-puzzle_clue:#9B7BD8;
  --t-puzzle_answer:#B23A2E;
  --t-round_answers:#46C67C;
  --t-list_topic:#3FB8AF;
  --t-list_clue_audio:#2E8B85;
  --t-list_reveal_all:#E0873D;

  /* typography */
  --font-display:"Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* radius / elevation */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 12px 34px rgba(0,0,0,.42);
  --shadow-3:0 30px 80px rgba(0,0,0,.55);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-1:.12s; --dur-2:.22s; --dur-3:.4s;

  color-scheme:dark;
  font-synthesis-weight:none;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}      /* so the hidden attribute still wins over display:flex rules */
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  
}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:600}
p{margin:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--gold)}
::selection{background:var(--gold);color:var(--gold-ink)}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--velvet-3) transparent}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-thumb{background:var(--velvet-3);border-radius:8px;border:2px solid var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:9px 15px;border-radius:var(--r-1);
  border:1px solid var(--line);background:var(--velvet-2);color:var(--chalk);
  font-weight:600;white-space:nowrap;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),opacity var(--dur-1);
}
.btn:hover{background:var(--velvet-3);border-color:var(--line)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.btn-primary:hover{background:#F2C63C;border-color:#F2C63C}
.btn-danger{background:transparent;border-color:rgba(255,107,107,.5);color:var(--danger)}
.btn-danger:hover{background:rgba(255,107,107,.12)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--velvet-2);border-color:var(--line-soft)}
.btn-sm{padding:5px 10px;font-size:13px;border-radius:7px}
.btn-lg{padding:14px 22px;font-size:16px;border-radius:var(--r-2)}
.btn-icon{padding:8px;width:34px;height:34px;justify-content:center}

.field{display:block;margin-bottom:var(--sp-4)}
.field > .lbl{display:block;font-weight:600;font-size:13px;color:var(--slate);margin-bottom:6px;letter-spacing:.02em}
.field .hint{font-size:12.5px;color:var(--slate-dim);margin-top:5px}
input[type=text],input[type=number],input[type=url],input[type=password],input[type=email],select,textarea{
  width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-1);
  padding:10px 12px;color:var(--chalk);
}
textarea{resize:vertical;min-height:76px;line-height:1.45}
input::placeholder,textarea::placeholder{color:var(--slate-dim)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.row{display:flex;gap:var(--sp-3);align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.spacer{flex:1}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.muted{color:var(--slate)}
.tiny{font-size:12.5px}
.divider{height:1px;background:var(--line-soft);margin:var(--sp-5) 0}
.kbd{display:inline-block;min-width:20px;text-align:center;padding:2px 7px;border-radius:6px;border:1px solid var(--line);border-bottom-width:2px;background:var(--velvet-2);font:600 12px/1.4 var(--font-body);color:var(--slate)}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid var(--line);color:var(--slate);
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:38px;height:22px;border-radius:999px;background:var(--velvet-3);border:1px solid var(--line);position:relative;transition:background var(--dur-1)}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--slate);transition:transform var(--dur-2) var(--ease),background var(--dur-1)}
.switch input:checked + .track{background:var(--gold-soft);border-color:var(--gold-line)}
.switch input:checked + .track::after{transform:translateX(16px);background:var(--gold)}
.switch input:focus-visible + .track{outline:2px solid var(--gold);outline-offset:2px}
/* ============================================================================
   PRESENTATION
   ========================================================================== */
.pres{
  position:fixed;inset:0;z-index:150;background:#05070B;
  display:grid;place-items:center;overflow:hidden;cursor:none;
}
.pres.cursor{cursor:default}
.stage{
  position:relative;width:100vw;height:56.25vw;max-height:100vh;max-width:177.78vh;
  background:var(--pt-bg,var(--ink));color:var(--pt-text,var(--chalk));
  overflow:hidden;
}
/* staged lighting — quiet, consistent, behind everything */
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 18%,rgba(255,255,255,.05),transparent 55%);
}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 24vh 8vh rgba(0,0,0,.55);
}
.stage-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:7.4vh 8.5vw;                 /* safe margins */
  align-items:center;justify-content:center;text-align:center;gap:3.2vh;
  z-index:2;
}
.stage-hairline{position:absolute;left:8.5vw;right:8.5vw;height:2px;background:linear-gradient(90deg,transparent,var(--pt-accent,var(--gold)),transparent);opacity:.6;z-index:2}
.stage-hairline.top{top:5vh}
.stage-hairline.bot{bottom:5vh}

.pt-kicker{
  font:700 clamp(.9rem,1.7vw,1.5rem)/1 var(--font-body);
  letter-spacing:.34em;text-transform:uppercase;color:var(--pt-accent,var(--gold));
}
.pt-label{
  font:700 clamp(.8rem,1.5vw,1.35rem)/1 var(--font-body);
  letter-spacing:.22em;text-transform:uppercase;color:var(--pt-dim,var(--slate));
}
.pt-display{
  font-family:var(--font-display);font-weight:860;
  font-size:clamp(2.6rem,7.4vw,6.6rem);line-height:1.04;letter-spacing:-.012em;
  color:var(--pt-text,var(--chalk));
}
.pt-question{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(1.8rem,4.6vw,4.2rem);line-height:1.2;
  max-width:24ch;
}
.pt-body{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(1.15rem,2.5vw,2.1rem);line-height:1.45;color:var(--pt-dim,var(--slate));
  max-width:40ch;
}
.pt-mediawrap{
  flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;position:relative;
}
.pt-media{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.pt-media.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.stage.has-cover .stage-inner{background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.15) 45%,rgba(0,0,0,.5))}

/* video: one FIXED 16:9 frame so every clip is exactly the same size. Its height
   (basis * 9/16) is kept small enough that the round/question label above and the
   question below always fit — the question line is clamped so it can't push it. */
.stage.has-vid .stage-inner{justify-content:center;padding:4.5vh 6vw;gap:2vh}
.stage.has-vid .pt-label{flex:none}
.stage.has-vid .qband{flex:none;gap:1vh}
.stage.has-vid .pt-question{
  font-size:clamp(1.05rem,2.3vw,1.9rem);max-width:42ch;line-height:1.25;
  max-height:23vh;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
}
.stage.has-vid .q-numeral{font-size:clamp(1.2rem,2.6vw,2rem)}
.pt-mediawrap.vid{flex:none;align-self:center;display:flex;align-items:center;justify-content:center;background:transparent;box-shadow:none}
.pt-mediawrap.vid .vid-inner{
  width:min(74vw,76vh);aspect-ratio:16/9;
  background:#000;border-radius:8px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.5);
}
.pt-mediawrap.vid .vid-inner .pt-media{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0}
.pt-mediawrap.vid .vid-inner .pt-media.letterbox{object-fit:contain}
.s-answers .pt-mediawrap.vid .vid-inner{width:min(52vw,46vh)}

/* split layout — words on the left half, picture on the right half.
   Shared by the Ponderous Puzzle clue, the List topic slide and the Title slide. */
.s-puzzleclue .stage-inner,.s-listtopic .stage-inner{padding:6vh 7vw;justify-content:center}
.s-puzzleclue .pc-split,.s-listtopic .pc-split,.s-title .pc-split{display:grid;grid-template-columns:1fr 1fr;gap:4.5vw;align-items:center;width:100%;height:100%}
.s-puzzleclue .pc-left,.s-listtopic .pc-left,.s-title .pc-left{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2vh;height:100%;text-align:left}
.s-puzzleclue .pc-left .pt-kicker,.s-puzzleclue .pc-left .pt-label,.s-listtopic .pc-left .pt-kicker,.s-title .pc-left .pt-kicker{align-self:flex-start}
.s-listtopic .pc-left .pt-display,.s-title .pc-left .pt-display{text-align:left;font-size:clamp(2rem,5vw,4.2rem)}
.s-listtopic .pc-left .pt-body,.s-title .pc-left .pt-body{text-align:left;max-width:34ch}
.s-title .pc-left .rounds{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.35em;max-width:none}
.s-title .pc-left .rounds li{padding-left:1em}
.s-title .pc-left .rounds li::before,.s-title .pc-left .rounds li + li::before{content:"•";position:absolute;left:0;color:var(--pt-accent,var(--gold));opacity:.6}
.s-title .pc-left .logo{align-self:flex-start;margin-bottom:0}
.s-puzzleclue .pc-clue{
  font-family:var(--font-body);font-weight:500;text-align:left;
  font-size:clamp(1rem,2.1vw,1.85rem);line-height:1.42;color:var(--pt-text,var(--chalk));
}
.s-puzzleclue .pc-right,.s-listtopic .pc-right,.s-title .pc-right{display:flex;align-items:center;justify-content:center;height:100%;min-height:0}
.s-puzzleclue .pc-right .pt-media,.s-listtopic .pc-right .pt-media,.s-title .pc-right .pt-media{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px}
@media (max-aspect-ratio:5/4){
  /* tall / narrow screen: stack the picture under the text instead of side by side */
  .s-puzzleclue .pc-split,.s-listtopic .pc-split,.s-title .pc-split{grid-template-columns:1fr;height:auto;align-content:center;gap:2.4vh}
  .s-puzzleclue .pc-left,.s-listtopic .pc-left,.s-title .pc-left,
  .s-puzzleclue .pc-right,.s-listtopic .pc-right,.s-title .pc-right{height:auto}
  .s-puzzleclue .pc-right .pt-media,.s-listtopic .pc-right .pt-media,.s-title .pc-right .pt-media{max-height:34vh}
  .s-title .pc-left .pt-display{font-size:clamp(1.8rem,7vw,3rem)}
}

.audio-bars{display:flex;align-items:flex-end;gap:.7vw;height:9vh}
.audio-bars i{width:1.5vw;background:var(--pt-accent,var(--gold));border-radius:2px;animation:eq 1s ease-in-out infinite}
.audio-bars i:nth-child(2){animation-delay:.15s}
.audio-bars i:nth-child(3){animation-delay:.3s}
.audio-bars i:nth-child(4){animation-delay:.45s}
.audio-bars i:nth-child(5){animation-delay:.6s}
.audio-bars i:nth-child(6){animation-delay:.75s}
@keyframes eq{0%,100%{height:22%}50%{height:100%}}
.audio-tag{position:absolute;right:3vw;bottom:3vh;display:flex;align-items:center;gap:.8vw;color:var(--pt-dim,var(--slate));font:600 clamp(.75rem,1.3vw,1.1rem)/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;z-index:3}
.audio-tag .mini{display:flex;gap:2px;align-items:flex-end;height:1.4em}
.audio-tag .mini i{width:3px;background:currentColor;animation:eq 1s ease-in-out infinite}
.audio-tag .mini i:nth-child(2){animation-delay:.2s}
.audio-tag .mini i:nth-child(3){animation-delay:.4s}

/* title slide */
.s-title .rounds{display:flex;flex-wrap:wrap;justify-content:center;gap:.7em 1.4em;max-width:34ch}
.s-title .rounds li{list-style:none;font:500 clamp(1rem,2.1vw,1.7rem)/1.3 var(--font-body);color:var(--pt-dim,var(--slate));position:relative}
.s-title .rounds li + li::before{content:"•";position:absolute;left:-.85em;color:var(--pt-accent,var(--gold));opacity:.6}
.s-title .logo,.s-sponsor .logo{max-height:16vh;max-width:40vw;object-fit:contain;margin-bottom:1vh}

/* topics board — auto-fits any number of rows into the 16:9 stage */
.s-topics .stage-inner{justify-content:flex-start;align-items:stretch;gap:1.4vh;padding:4vh 5vw}
.s-topics .pt-kicker{align-self:center}
.s-topics .tp-headwrap{display:flex;justify-content:center;flex:none}
.s-topics .tp-head{
  font-family:var(--font-display);font-weight:860;
  font-size:clamp(1.3rem,3.4vw,2.7rem);line-height:1;
  color:var(--pt-accent,var(--gold));
  padding:.22em .75em;border-radius:.5em;border:2px solid var(--pt-accent,var(--gold));
}
.s-topics .tp-colheads,.s-topics .tp-board{--tp-cols:minmax(5.5em,7em) minmax(0,1fr)}
.s-topics .hasq{--tp-cols:minmax(5.5em,7em) minmax(0,1fr) clamp(3em,6.5vw,4.8em)}
.s-topics .hasq.hasp{--tp-cols:minmax(5.5em,7em) minmax(0,1fr) clamp(3em,6.5vw,4.8em) clamp(3em,6.5vw,4.8em)}
.s-topics .hasp:not(.hasq){--tp-cols:minmax(5.5em,7em) minmax(0,1fr) clamp(3em,6.5vw,4.8em)}
.s-topics .tp-colheads,.s-topics .tp-board .tp-row{
  display:grid;grid-template-columns:var(--tp-cols);gap:clamp(.4vw,.9vw,1vw);
}
.s-topics .tp-colheads{flex:none;align-items:end;padding-bottom:.3vh}
.s-topics .tp-clab{
  text-align:center;font-weight:700;
  font-size:clamp(.55rem,1.05vw,.9rem);line-height:1.05;color:var(--pt-dim,var(--slate));
  text-transform:uppercase;letter-spacing:.03em;
}
.s-topics .tp-board{
  flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);
  gap:clamp(.3vh,.7vh,1vh);font-family:var(--font-body);
}
.s-topics .tp-row{align-items:stretch}
.s-topics .tp-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:.35em;background:color-mix(in srgb,var(--pt-accent,#E8B923) 26%,transparent);
  color:var(--pt-text,var(--chalk));font-weight:700;
  font-size:clamp(.6rem,1.2vw,1rem);line-height:1.05;padding:.2em .4em;
  text-transform:uppercase;letter-spacing:.02em;overflow:hidden;
}
.s-topics .tp-bar{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:.35em;padding:.2em .7em;overflow:hidden;
  font-weight:700;font-size:clamp(.8rem,1.9vw,1.7rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em;
}
.s-topics .tp-topic{background:var(--pt-text,#F4F1EA);color:#12151c;white-space:nowrap;text-overflow:ellipsis}
.s-topics .tp-break{
  grid-column:1 / span 2;
  background:color-mix(in srgb,var(--pt-accent,#E8B923) 42%,transparent);
  color:var(--pt-text,var(--chalk));text-transform:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(.9rem,2.1vw,1.9rem);
}
.s-topics .tp-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:.35em;background:color-mix(in srgb,var(--pt-accent,#E8B923) 26%,transparent);
  color:var(--pt-text,var(--chalk));font-weight:800;
  font-size:clamp(.85rem,1.9vw,1.6rem);line-height:1;
}
.s-topics .tp-box i{font-style:normal;font-weight:600;font-size:.42em;text-transform:uppercase;opacity:.7;letter-spacing:.04em}
.s-topics .tp-box.empty{background:transparent}
@supports not (background:color-mix(in srgb,red,blue)){
  .s-topics .tp-chip,.s-topics .tp-box{background:var(--gold-soft)}
  .s-topics .tp-break{background:var(--gold-line)}
}

/* question number motif */
.q-numeral{
  font-family:var(--font-display);font-weight:860;
  font-size:clamp(2rem,4vw,3.4rem);color:var(--pt-accent,var(--gold));
  width:1.9em;height:1.9em;display:grid;place-items:center;border-radius:50%;
  border:2px solid var(--pt-accent,var(--gold));line-height:1;
}
.split{display:grid;grid-template-rows:1fr auto;gap:3vh;height:100%;width:100%}
.split .pt-mediawrap{align-items:center}
.split .qband{display:flex;flex-direction:column;align-items:center;gap:1.6vh}

/* answers slide — the signature reveal */
.s-answers .qtext{font:600 clamp(1.3rem,3vw,2.6rem)/1.25 var(--font-body);color:var(--pt-dim,var(--slate));max-width:26ch}
.answer-slot{margin-top:1vh;min-height:20vh;display:flex;align-items:center;justify-content:center;width:100%}
.answer-reveal{
  font-family:var(--font-display);font-weight:860;
  font-size:clamp(2.2rem,6.4vw,5.8rem);line-height:1.06;color:var(--pt-text,var(--chalk));
  max-width:22ch;position:relative;
  opacity:0;transform:scale(.86);filter:blur(14px);
}
.answer-reveal.in{animation:answerIn .62s var(--ease) forwards}
@keyframes answerIn{
  0%{opacity:0;transform:scale(.86);filter:blur(14px)}
  60%{opacity:1;transform:scale(1.03);filter:blur(0)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
.answer-reveal.in::after{
  content:"";position:absolute;left:-8%;right:-8%;top:50%;height:130%;transform:translateY(-50%) scaleX(0);
  background:linear-gradient(90deg,transparent,var(--pt-accent,var(--gold)),transparent);opacity:.22;
  z-index:-1;animation:sweep .6s var(--ease) forwards;
}
@keyframes sweep{0%{transform:translateY(-50%) scaleX(0)}55%{transform:translateY(-50%) scaleX(1)}100%{transform:translateY(-50%) scaleX(1);opacity:0}}
.stage.flourish::after{animation:vignettePulse .6s var(--ease)}
@keyframes vignettePulse{0%,100%{box-shadow:inset 0 0 24vh 8vh rgba(0,0,0,.55)}45%{box-shadow:inset 0 0 24vh 8vh var(--curtain-soft),inset 0 0 0 .6vh var(--gold-line)}}
.answer-hidden-motif{display:flex;gap:1.4vw}
.answer-hidden-motif i{width:2.4vw;height:2.4vw;border-radius:50%;background:var(--pt-dim,var(--slate));opacity:.28}

/* list reveal-all */
.s-listall .cols{
  column-count:3;column-gap:4vw;max-width:82vw;text-align:left;
}
@media (max-aspect-ratio:16/10){.s-listall .cols{column-count:2}}
.s-listall .cols li{
  list-style:none;break-inside:avoid;margin-bottom:1.1vh;
  font:500 clamp(1rem,2vw,1.7rem)/1.3 var(--font-body);color:var(--pt-text,var(--chalk));
  padding-left:1.1em;position:relative;opacity:0;transform:translateY(10px);
}
.s-listall.in li{animation:itemIn .4s var(--ease) forwards}
.s-listall .cols li::before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:.5em;border-radius:50%;background:var(--pt-accent,var(--gold))}
@keyframes itemIn{to{opacity:1;transform:none}}
/* reveal-all WITH a "why some don't count" note: answers left, reason right.
   With no note the .cols block above fills the middle of the screen instead. */
.s-listall .la-split{
  display:grid;grid-template-columns:1.4fr 1fr;gap:4vw;align-items:start;
  width:100%;max-width:90vw;text-align:left;
}
.s-listall .la-split .cols{column-count:2;max-width:none}
.s-listall .la-excl{align-self:stretch;border-left:3px solid var(--pt-accent,var(--gold));padding-left:2vw}
.s-listall .la-excl-h{
  font:700 clamp(.75rem,1.3vw,1.1rem)/1 var(--font-body);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--pt-accent,var(--gold));margin-bottom:1.6vh;
}
.s-listall .la-excl-b{
  font:400 clamp(.95rem,1.7vw,1.45rem)/1.5 var(--font-body);
  color:var(--pt-dim,var(--slate));white-space:pre-wrap;
}
/* only stack on genuinely square / portrait screens — a widescreen or a
   16:10 laptop keeps the answers-left / note-right split */
@media (max-aspect-ratio:5/4){
  .s-listall .la-split{grid-template-columns:1fr;gap:2.6vh;max-width:82vw}
  .s-listall .la-split .cols{column-count:2}
}

/* puzzle answer — direct, dignified */
.s-puzzleans{--pt-accent:var(--curtain)}
.s-puzzleans .stage-glow{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 60%,var(--curtain-soft),transparent 70%);z-index:1;pointer-events:none}

/* transitions between slides */
.stage.trans-fade .stage-inner{animation:tFade .34s var(--ease)}
@keyframes tFade{from{opacity:0}to{opacity:1}}
.stage.trans-slide .stage-inner{animation:tSlide .34s var(--ease)}
@keyframes tSlide{from{opacity:0;transform:translateX(3vw)}to{opacity:1;transform:none}}

/* presentation HUD (host only, fades) */
.hud{
  position:fixed;left:0;right:0;bottom:0;z-index:160;
  display:flex;align-items:center;gap:var(--sp-4);
  padding:12px 20px;background:linear-gradient(0deg,rgba(5,7,11,.92),transparent);
  color:var(--slate);font-size:13px;opacity:0;transition:opacity var(--dur-2);
}
.pres:hover .hud,.pres.hud-show .hud{opacity:1}
.hud .prog{font-variant-numeric:tabular-nums;color:var(--chalk);font-weight:600}
.hud .dots{display:flex;gap:3px;flex:1;flex-wrap:wrap;max-width:60vw}
.hud .dots i{width:6px;height:6px;border-radius:50%;background:var(--velvet-3)}
.hud .dots i.on{background:var(--gold)}
.hud .dots i.cur{background:var(--chalk);transform:scale(1.5)}
.hud .hint{color:var(--slate-dim)}

/* jump overlay */
.jump-back{position:fixed;inset:0;z-index:170;background:rgba(4,6,10,.8);display:grid;place-items:center;padding:var(--sp-6);backdrop-filter:blur(4px)}
.jump{width:min(900px,100%);max-height:80vh;background:var(--velvet-2);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow-3);display:flex;flex-direction:column}
.jump h3{padding:var(--sp-5) var(--sp-5) var(--sp-2);font-family:var(--font-display);font-size:19px}
.jump .jgrid{padding:var(--sp-4) var(--sp-5) var(--sp-5);overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-3)}
.jump .jcell{text-align:left;padding:11px 12px;border-radius:var(--r-1);border:1px solid var(--line-soft);background:var(--velvet);color:var(--chalk)}
.jump .jcell:hover,.jump .jcell:focus-visible{border-color:var(--gold-line);background:var(--velvet-3)}
.jump .jcell .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tc,var(--slate))}
.jump .jcell .s{font-size:12.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jump .jcell.cur{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}

/* editable text (click-to-edit spans) */
.editable{cursor:text;border-bottom:1px dashed transparent;transition:border-color var(--dur-1)}
.editable:hover{border-bottom-color:var(--slate-dim)}
.editable.is-placeholder{color:var(--slate-dim)}

/* revealed-but-static answer states (preview pane + revisiting a revealed slide) */
.answer-reveal.shown{opacity:1;transform:none;filter:none}
.s-listall.shown .cols li{opacity:1;transform:none}

/* form controls used in the theme / audio panels */
input[type=range]{width:100%;accent-color:var(--gold);background:transparent;height:22px}
input[type=color]{border:1px solid var(--line);border-radius:8px;background:var(--ink);cursor:pointer}
body.output-mode{background:#05070B}
#outStage{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
.out-idle{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--slate)}
.out-idle .oi-mark{font-family:var(--font-display);font-weight:860;font-size:44px;color:var(--gold)}
.out-idle .oi-msg{font:600 16px/1.4 var(--font-body);letter-spacing:.02em}
#outStart{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(120% 80% at 50% 40%,#12161f,#05070B);color:var(--chalk);
}
#outStart .os-go{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;padding:20px 40px;border-radius:16px;
}
#outStart .os-go:hover{background:rgba(255,255,255,.04)}
#outStart .os-lead{font-family:var(--font-display);font-weight:860;font-size:clamp(2rem,5vw,3.6rem);color:var(--gold)}
#outStart .os-go small{color:var(--slate);font-size:clamp(.85rem,1.6vw,1.1rem);letter-spacing:.06em;text-transform:uppercase}
#outStart .os-go:hover .os-lead{filter:brightness(1.1)}
.os-audio{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  max-width:min(680px,90vw);text-align:center;
  background:var(--velvet);border:1px solid var(--line);border-radius:12px;padding:14px 18px;
}
.os-audio .os-a-label{color:var(--slate);font-size:13px}
.os-audio #osSinkName{color:var(--chalk);font-size:14px}
.os-audio .os-a-hint{flex-basis:100%;color:var(--slate-dim);font-size:12px;margin-top:2px}
.os-audio.warn{border-color:var(--gold-line)}
.os-audio.warn .os-a-hint{color:var(--gold)}
.mini{position:relative;overflow:hidden;background:#000;border:1px solid var(--line);border-radius:8px;flex:none}
.mini-holder{position:absolute;top:0;left:0;transform-origin:top left}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .answer-reveal{opacity:1;transform:none;filter:none}
  .s-listall .cols li{opacity:1;transform:none}
}

/* ---- Fact or Fiction brand logo ----
   The artwork has a black background. On our dark screens "screen" blending makes that black see-through
   (it only adds the glow), so it needs no cut-out. .solid is for a quiz theme with a light background. */
.fof{display:block;max-width:100%;height:auto;mix-blend-mode:screen;-webkit-user-drag:none;user-select:none}
.fof.solid{mix-blend-mode:normal;border-radius:1.6vh}
.fof-a{mix-blend-mode:normal}                    /* the transparent version needs no blending */
.fof-wm{width:auto}
.out-idle .oi-logo{height:44vh;width:auto;margin-bottom:1vh}
.s-title .logo.fof{max-height:none;max-width:none;width:auto;height:30vh;margin-bottom:1vh}
.s-title .pc-left .logo.fof{height:26vh}

/* ==== SPONSORS ==== */
:root{--t-advert:#E8742E}
.s-advert.stage{background:#000}
.s-advert.stage::before,.s-advert.stage::after{display:none}
.s-advert .stage-inner{padding:0;gap:0;background:transparent}
.s-advert .ad-video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background:#000;border-radius:0}
.s-advert .ad-video.cover{object-fit:cover}
.s-advert .ad-empty{display:flex;flex-direction:column;align-items:center;gap:2vh}
.sponsor-bug{position:absolute;z-index:6;pointer-events:none;width:auto;object-fit:contain;opacity:.96;filter:drop-shadow(0 .4vh 1vh rgba(0,0,0,.45))}
.sponsor-bug.c-tr{right:2.2vw;top:2.8vh;object-position:right top}
.sponsor-bug.c-tl{left:2.2vw;top:2.8vh;object-position:left top}
.sponsor-bug.c-br{right:2.2vw;bottom:2.8vh;object-position:right bottom}
.sponsor-bug.c-bl{left:2.2vw;bottom:2.8vh;object-position:left bottom}
.sponsor-bug.z-s{height:6vh;max-width:12vw}
.sponsor-bug.z-m{height:9vh;max-width:18vw}
.sponsor-bug.z-l{height:13vh;max-width:25vw}
.pt-presented{display:flex;align-items:center;justify-content:center;gap:1.4vw;margin-top:1vh;color:var(--pt-dim,var(--slate));font:700 clamp(.8rem,1.5vw,1.25rem)/1 var(--font-body);letter-spacing:.3em;text-transform:uppercase}
.pt-presented img{height:8vh;max-width:22vw;object-fit:contain}
.pt-presented b{font:860 clamp(1.4rem,3vw,2.6rem)/1 var(--font-display);letter-spacing:.01em;text-transform:none;color:var(--pt-text,var(--chalk))}
.s-title .pc-left .pt-presented{justify-content:flex-start}
/* ==== END SPONSORS ==== */

/* ==== SLIDE LAYOUTS ==== */
/* ---- The Cold Case clue */
.s-puzzleclue.cc-stage .stage-inner{padding:3.2vh 4.2vw 0;justify-content:flex-start;align-items:stretch;gap:0;text-align:left}
.cc{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.cc-title{flex:none;text-align:center;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.012em;line-height:1.02;
  color:var(--pt-accent,var(--gold));font-size:min(11.5vh,calc(230vh / var(--n,13)));text-shadow:0 .5vh 1.4vh rgba(0,0,0,.45);padding-bottom:.6vh}
.cc-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:3.4vw;align-items:stretch;padding:1.4vh 0 20vh}
.cc.no-arrow .cc-body{padding-bottom:4vh}
.cc-body.no-pic{grid-template-columns:minmax(0,1fr)}
.cc-text{min-height:0;overflow:hidden;display:flex;align-items:center}
.cc-clue{width:100%;font-family:var(--font-display);font-weight:540;line-height:1.24;color:var(--pt-text,var(--chalk));text-align:left}
.cc-clue b{font-weight:900}
.cc-body.no-pic .cc-text{justify-content:center}
.cc-body.no-pic .cc-clue{text-align:center;max-width:84%;margin:0 auto}
.cc-pic{position:relative;min-height:0}
.cc-pic .pt-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:.8vh;filter:drop-shadow(0 1vh 2.6vh rgba(0,0,0,.55))}
.cc-pic .audio-bars{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.cc-arrow{position:absolute;left:27vw;right:-4.2vw;bottom:3.4vh;height:15vh;display:flex;align-items:center;justify-content:center;padding-right:9%;
  background:#74B52E;clip-path:polygon(0 17%,90% 17%,90% 0,100% 50%,90% 100%,90% 83%,0 83%)}
.cc-arrow span{font-family:var(--font-display);font-weight:600;font-size:6vh;letter-spacing:.01em;color:#fff;text-shadow:0 .3vh .9vh rgba(0,0,0,.35)}

/* ---- The Streak slide */
.s-listtopic.ls-stage .stage-inner{padding:4.5vh 4.2vw 0;justify-content:flex-start;align-items:stretch;gap:0;text-align:center}
.ls{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.ls-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:3vw;align-items:stretch;padding-bottom:1vh}
.ls-main.no-side{grid-template-columns:minmax(0,1fr)}
.ls-text{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ls-copy{width:100%;font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:.012em;line-height:1.13;text-align:center;
  color:var(--pt-text,var(--chalk));text-shadow:0 .4vh 1.2vh rgba(0,0,0,.4)}
.ls-main.no-side .ls-copy{max-width:86%;margin:0 auto}
.ls-desc{font-size:.82em;font-weight:700;margin-top:.9em}
.ls-side{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh}
.ls-stage:has(> .sponsor-bug.c-tr) .ls-side{padding-top:9vh}
.ls-stage .audio-tag{display:none}
.ls-pic{position:relative;flex:1;min-height:0;width:100%}
.ls-pic .pt-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 1vh 2.6vh rgba(0,0,0,.5))}
.ls-clips{flex:none;display:flex;gap:2.6vw;justify-content:center;align-items:flex-start}
.ls-clips.solo{flex:1;align-items:center}
.ls-clip{display:flex;flex-direction:column;align-items:center;gap:.4vh;color:var(--pt-dim,var(--slate));transition:color .25s}
.ls-clip b{font:800 2.6vh/1 var(--font-body)}
.ls-ico{width:9vh;height:9vh}
.ls-clips.solo .ls-ico{width:17vh;height:17vh}
.ls-ico svg{width:100%;height:100%;display:block;overflow:visible}
.ls-ico path.w1,.ls-ico path.w2,.ls-ico path.w3{fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round}
.ls-clip.done{color:var(--pt-text,var(--chalk))}
.ls-clip.now{color:var(--pt-accent,var(--gold))}
.ls-clip.now .w2{animation:lsWave 1s ease-in-out infinite}
.ls-clip.now .w3{animation:lsWave 1s ease-in-out .25s infinite}
@keyframes lsWave{0%,100%{opacity:.25}50%{opacity:1}}
.ls-title{flex:none;text-align:center;font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.015em;line-height:1;
  color:var(--pt-accent,var(--gold));font-size:min(15vh,calc(300vh / var(--n,10)));padding:.8vh 0 3.4vh;text-shadow:0 .6vh 1.6vh rgba(0,0,0,.45)}
/* ==== END SLIDE LAYOUTS ==== */

/* ==== FOF MARK ==== */
/* the Fact or Fiction mark: bottom-left of every slide, small, never in the way of a click */
.stage > .fof-mark{position:absolute;left:2vw;bottom:2.4vh;height:6.2vh;width:auto;z-index:7;pointer-events:none;opacity:.95;filter:drop-shadow(0 .3vh .8vh rgba(0,0,0,.55))}
.stage:has(> .fof-mark) > .sponsor-bug.c-bl{bottom:10.6vh}                    /* a sponsor in the same corner sits just above it */
.stage.s-topics:has(> .fof-mark) .stage-inner{padding-bottom:10.4vh}           /* the Topics board is full: leave its last row clear of the mark */
.stage.s-listall:has(> .fof-mark) .stage-inner{padding-bottom:9.4vh}           /* ... and so is the Streak's list of answers */
/* ==== END FOF MARK ==== */