:root {
      --bg:       #0c1118;
      --surface:  #141c26;
      --surface2: #1c2736;
      --border:   #263040;
      --text:     #e2e8f0;
      --muted:    #8899aa;
      --accent:   #10b981;
      --accent-dim: rgba(16,185,129,0.12);
      --font-display: 'Anton', sans-serif;
      --font-body: 'DM Sans', system-ui, sans-serif;
      --font-mono: 'Space Mono', monospace;
      --accent-fire:    #e8873a;
      --accent-ice:     #4db8c4;
      --accent-gold:    #f0c040;
      --ease-broadcast: cubic-bezier(0.22, 1, 0.36, 1);
      --reveal-stagger: 120ms;
      /* ── VP palette (cooler, more atmospheric than main UI) ── */
      --vp-bg:         #07090d;
      --vp-surface:    #0d1117;
      --vp-surface2:   #161b22;
      --vp-border:     #21262d;
      --vp-text:       #c9d1d9;
      --vp-text-dim:   #6e7681;
      --vp-text-mute:  #484f58;
      --vp-text-ghost: #4e6478;
      /* ── Broadcast frame ── */
      --broadcast-red:  #e23b3b;
      --lower-third:    rgba(16,185,129,0.16);
      --panel-edge:     rgba(255,255,255,0.05);
      --slider-track:   #334155;
      /* ── Strategy visual grammar: ONE consistent meaning everywhere.
           danger=active threat · unstable=uncertain/negotiating · trust=trust/info
           · strategy=long-term plans · safe=confirmed/positive. Solid=public/confirmed,
           dashed=suspected/private, faded=stale. ── */
      --sg-danger:   #f0506e;
      --sg-unstable: #e0a72e;
      --sg-trust:    #57a6e8;
      --sg-strategy: #b483f0;
      --sg-safe:     #3fb950;
      --sg-neutral:  #8b98a8;
      --sg-ink:      #e6edf3;
      --sg-dim:      #8b949e;
      --sg-ghost:    #6e7681;

      /* ── The weekly reader's dress ──────────────────────────────────────
         Every colour the Big Brother week is drawn in — the nomination
         ceremony, the veto meeting, the eviction, the competitions, the
         overview. They are gathered here so a SEASON THEME can retint the
         whole week by overriding this block under `.rp-theme-<id>`, and a
         MOOD can override a subset again under `.is-mood-<name>`.

         Held as RGB TRIPLETS rather than colours, because these accents are
         used both solid and as washes derived from them — `#f85149` on a
         border and `rgba(248,81,73,.13)` behind the card it belongs to. A
         triplet drives both, so one override retints the border, the glow,
         the frame and the wash together instead of leaving three of them
         behind on the old palette.

         The defaults below are EXACTLY the values the weekly screens have
         always drawn themselves in: an unthemed season must be unchanged. */
      --bbx-danger-rgb:  248,81,73;    /* on the block, evicted, the alarm  */
      --bbx-note-rgb:    240,165,0;    /* a reason spoken out loud          */
      --bbx-key-rgb:     227,179,65;   /* a key turned, safety confirmed    */
      --bbx-good-rgb:    63,185,80;    /* saved, survived                   */
      --bbx-info-rgb:    88,166,255;   /* neutral information               */
      --bbx-dim-rgb:     139,148,158;  /* labels, quiet borders             */
      /* Surfaces. The week is drawn in gradients, so each is a pair. */
      --bbx-stage-rgb:   16,21,28;     /* the sticky stage, top stop        */
      --bbx-stage2-rgb:  10,13,18;     /* the sticky stage, bottom stop     */
      --bbx-screen-rgb:  17,22,29;     /* a monitor, top stop               */
      --bbx-screen2-rgb: 8,11,15;      /* a monitor, bottom stop            */
      --bbx-card-rgb:    22,28,36;     /* a feed card, top stop             */
      --bbx-card2-rgb:   15,19,25;     /* a feed card, bottom stop          */
      --bbx-ink:         #d6dde5;      /* body copy in the feed             */
      --bbx-ink-quiet:   #f2e7cf;      /* a spoken reason                   */
      --bbx-faint:       #39424e;      /* screen numbering, dead labels     */
      --bbx-glyph:       #232c37;      /* the mark a screen shows before it reveals */
      --bbx-display:     var(--font-display);
    }

    /* ── Strategy grammar components (reusable across every strategic VP surface) ── */
    .sg-chip { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body); font-size:9.5px; font-weight:700; letter-spacing:.2px; line-height:1.35; padding:3px 9px; border-radius:999px; margin:2px 6px 2px 0; white-space:nowrap; color:#0c1118; background:var(--c,var(--sg-neutral)); }
    .sg-chip--dashed { color:var(--c,var(--sg-neutral)); background:transparent; border:1px dashed var(--c,var(--sg-neutral)); }
    .sg-chip--outline { color:var(--c,var(--sg-neutral)); background:color-mix(in srgb, var(--c,var(--sg-neutral)) 14%, transparent); border:1px solid color-mix(in srgb, var(--c,var(--sg-neutral)) 42%, transparent); }
    .sg-chip--faded { opacity:.5; }
    .sg-chip--new { box-shadow:0 0 0 2px rgba(63,185,80,.75); }
    .sg-badge { display:inline-block; font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 6px; border-radius:4px; color:#0c1118; background:var(--c,var(--sg-neutral)); }
    .sg-badge--ghost { color:var(--c,var(--sg-neutral)); background:transparent; border:1px solid color-mix(in srgb, var(--c,var(--sg-neutral)) 45%, transparent); }
    .sg-portrait-chip { display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 2px; border-radius:999px; background:var(--vp-surface2); border:1px solid var(--vp-border); font-size:11px; font-weight:600; color:var(--sg-ink); }
    .sg-portrait-chip img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
    .sg-arrow { color:var(--sg-ghost); font-weight:400; padding:0 3px; }
    .sg-section { font-family:var(--font-body); font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--c,var(--sg-dim)); display:flex; align-items:center; gap:8px; margin:16px 0 9px; }
    .sg-section::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--c,var(--sg-dim)); box-shadow:0 0 8px var(--c,var(--sg-dim)); flex:none; }
    .sg-empty { padding:12px 14px; border:1px dashed var(--vp-border); border-radius:8px; color:var(--sg-ghost); font-size:11px; text-align:center; font-style:italic; }
    .sg-bar-track { height:5px; border-radius:3px; background:var(--vp-surface2); overflow:hidden; }
    .sg-bar-fill { height:100%; border-radius:3px; background:var(--c,var(--sg-neutral)); transition:width .3s var(--ease-broadcast); }
    .sg-card { background:linear-gradient(180deg,#12161d,#0f1319); border:1px solid var(--vp-border); border-radius:12px; overflow:hidden; }
    .sg-card-head { padding:12px 16px; border-bottom:1px solid var(--vp-border); background:radial-gradient(120% 150% at 0 0, color-mix(in srgb, var(--c,var(--sg-trust)) 12%, transparent), transparent 62%); }
    .sg-card-title { font-family:var(--font-body); font-size:12px; font-weight:900; letter-spacing:2px; color:var(--sg-ink); }
    .sg-card-sub { font-size:9px; color:var(--sg-ghost); letter-spacing:.5px; margin-top:2px; }
    .sg-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c,var(--sg-neutral)); flex:none; }
    .sg-legend { margin:2px 12px 6px; }
    .sg-legend > summary { cursor:pointer; font-size:10px; font-weight:700; color:var(--sg-trust); padding:6px 2px; list-style:none; }
    .sg-legend > summary::-webkit-details-marker { display:none; }
    .sg-legend > summary::marker { content:''; }
    .sg-legend-body { font-size:10px; color:var(--sg-dim); line-height:1.4; padding:4px 4px 10px; }
    .sg-legend-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
    @media (prefers-reduced-motion: reduce){ .sg-bar-fill{ transition:none; } }
    /* ── Strategy Hub: one framed panel, switchable tabs + episode toggle ── */
    .strat-hub { margin-top:16px; border:1px solid var(--vp-border); border-radius:12px; background:var(--vp-surface); overflow:hidden; }
    .strat-hub-bar { display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:space-between; align-items:center; padding:9px 11px; border-bottom:1px solid var(--vp-border); background:radial-gradient(120% 150% at 0 0, color-mix(in srgb, var(--sg-strategy) 12%, transparent), transparent 60%); }
    .strat-hub-tabs { display:flex; flex-wrap:wrap; gap:4px; }
    .strat-hub-tab { font-family:var(--font-body); font-size:11px; font-weight:700; padding:5px 11px; border-radius:7px; cursor:pointer; border:1px solid var(--vp-border); background:transparent; color:var(--sg-dim); transition:background .15s, border-color .15s, color .15s; }
    .strat-hub-tab:hover { color:var(--sg-ink); border-color:var(--sg-ghost); }
    .strat-hub-tab.hub-on { border-color:var(--sg-trust); background:color-mix(in srgb, var(--sg-trust) 16%, transparent); color:var(--sg-ink); }
    .strat-hub-eps { display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
    .strat-hub-ep { min-width:21px; height:21px; font-size:9px; border-radius:5px; cursor:pointer; border:1px solid var(--vp-border); background:transparent; color:var(--sg-ghost); }
    .strat-hub-ep:hover { color:var(--sg-ink); }
    .strat-hub-ep.hub-on { border-color:var(--sg-trust); background:color-mix(in srgb, var(--sg-trust) 22%, transparent); color:var(--sg-ink); }
    .strat-hub-content { padding:2px 4px 4px; }

    /* ── Light theme: override the SHELL palette only. The VP/recap keep their
         own --vp-* dark palette, so the cinematic screens stay dark. ── */
    [data-theme="light"] {
      --bg:        #eef1f6;
      --surface:   #ffffff;
      --surface2:  #e4e9f0;
      --border:    #cdd5e0;
      --text:      #16202e;
      --muted:     #5a6a7d;
      --accent-dim: rgba(16,185,129,0.14);
      --lower-third: rgba(16,185,129,0.20);
      --panel-edge: rgba(0,0,0,0.04);
      --slider-track: #c2cbd6;
    }
    [data-theme="light"] body { background: var(--bg); color: var(--text); }

    /* ── VP: Time-of-day backgrounds ── */
    .tod-dawn       { background: linear-gradient(to bottom, #0f0e18, #1a1530); }
    .tod-morning    { background: linear-gradient(to bottom, #0d1018, #181624); }
    .tod-merge-am   { background: linear-gradient(to bottom, #0e1014, #1a1a28); }
    .tod-midday     { background: linear-gradient(to bottom, #0c1118, #111820); }
    .tod-afternoon  { background: linear-gradient(to bottom, #0b1219, #0e1a26); }
    .tod-golden     { background: linear-gradient(to bottom, #100e0a, #1c1508); }
    .tod-dusk       { background: linear-gradient(to bottom, #130d06, #1e1205); }
    .tod-night      { background: linear-gradient(to bottom, #090d12, #0d0705); }
    .tod-deepnight  { background: linear-gradient(to bottom, #050709, #08050a); }
    .tod-posttribal { background: linear-gradient(to bottom, #080c11, #0d1018); }
    .tod-arena      { background: linear-gradient(to bottom, #0d1318, #131a20); }

    /* ── VP: BIG BROTHER house interiors ──
       The house has no sky. Total Drama's backgrounds are dawns, dusks and
       golden hours, which describe a camp outdoors; a houseguest sees fixtures,
       no clocks and no window that opens. These are lit by the building rather
       than by the weather, and each carries the same faint vignette — the room
       is always being watched from the corners. */
    .bb-room        { position: relative; background:
                      radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.045), transparent 60%),
                      linear-gradient(to bottom, #10141a, #0b0e13); }
    .bb-room::after { content: ''; position: absolute; inset: 0; pointer-events: none;
                      background: radial-gradient(85% 60% at 50% 45%, transparent 55%, rgba(0,0,0,.42)); }
    /* Before anybody has power — flat, even, nothing decided. */
    .bb-open        { background:
                      radial-gradient(120% 80% at 50% -10%, rgba(180,205,235,.07), transparent 60%),
                      linear-gradient(to bottom, #111721, #0c1016); }
    /* Somebody holds the key — the HOH room is the only warm light in the house. */
    .bb-power       { background:
                      radial-gradient(110% 70% at 50% -5%, rgba(240,165,0,.10), transparent 62%),
                      linear-gradient(to bottom, #16130d, #0d0b08); }
    /* Two chairs are occupied and the room has gone cold about it. */
    .bb-block       { background:
                      radial-gradient(110% 70% at 50% -5%, rgba(200,60,70,.09), transparent 62%),
                      linear-gradient(to bottom, #150f11, #0b0809); }
    /* Live eviction — studio red, the only night the house sees an audience. */
    .bb-live        { background:
                      radial-gradient(120% 75% at 50% 0%, rgba(201,52,60,.16), transparent 58%),
                      linear-gradient(to bottom, #170d0f, #090607); }

    /* ── VP: BIG BROTHER live feed ──
       Total Drama is a show with a camera crew; Big Brother is a house with no
       crew in it at all, so the only voice the format has is the feed itself.
       Everything here is built to read as surveillance rather than as coverage:
       a camera identifier on every beat, a clock that never stops, and the wall
       of faces the house itself stares at. The identity is the watching. */

    .bbf-feed       { position: relative; border: 1px solid rgba(201,52,60,.22); border-radius: 8px;
                      background: linear-gradient(180deg, rgba(14,17,22,.92), rgba(9,11,15,.92));
                      box-shadow: 0 10px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
                      padding: 0 0 4px; overflow: hidden; }
    /* Scanlines: faint enough to read through, present enough to feel recorded. */
    .bbf-feed::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
                      background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px); }
    .bbf-feed > *   { position: relative; z-index: 1; }
    /* Corner brackets — a viewfinder, not a frame. */
    .bbf-feed::after { content:''; position:absolute; inset:7px; z-index:0; pointer-events:none;
                      border: 1px solid transparent;
                      background:
                        linear-gradient(90deg,rgba(201,52,60,.5) 0 16px,transparent 16px) 0 0/100% 1px no-repeat,
                        linear-gradient(90deg,transparent calc(100% - 16px),rgba(201,52,60,.5) calc(100% - 16px)) 0 0/100% 1px no-repeat,
                        linear-gradient(90deg,rgba(201,52,60,.5) 0 16px,transparent 16px) 0 100%/100% 1px no-repeat,
                        linear-gradient(90deg,transparent calc(100% - 16px),rgba(201,52,60,.5) calc(100% - 16px)) 0 100%/100% 1px no-repeat,
                        linear-gradient(0deg,rgba(201,52,60,.5) 0 16px,transparent 16px) 0 100%/1px 100% no-repeat,
                        linear-gradient(0deg,transparent calc(100% - 16px),rgba(201,52,60,.5) calc(100% - 16px)) 0 0/1px 100% no-repeat,
                        linear-gradient(0deg,rgba(201,52,60,.5) 0 16px,transparent 16px) 100% 100%/1px 100% no-repeat,
                        linear-gradient(0deg,transparent calc(100% - 16px),rgba(201,52,60,.5) calc(100% - 16px)) 100% 0/1px 100% no-repeat; }

    /* The HUD strip: camera, clock, and the state of the week. */
    .bbf-hud        { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                      padding:8px 12px; border-bottom:1px solid rgba(201,52,60,.18);
                      background:linear-gradient(90deg, rgba(201,52,60,.12), transparent 65%);
                      font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;
                      font-size:9.5px; letter-spacing:1.4px; color:#8b949e; text-transform:uppercase; }
    .bbf-rec        { display:inline-flex; align-items:center; gap:5px; color:#f85149; font-weight:700; }
    .bbf-rec::before { content:''; width:7px; height:7px; border-radius:50%; background:#f85149;
                      box-shadow:0 0 8px rgba(248,81,73,.9); animation:bbfRec 1.6s ease-in-out infinite; }
    @keyframes bbfRec { 0%,100%{opacity:1} 50%{opacity:.22} }
    .bbf-hud-sp     { margin-left:auto; }

    /* ── The wall: where everybody stands, at a glance ── */
    .bbf-wall       { display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
                      gap:10px; padding:14px 12px 12px; }
    .bbf-tile       { text-align:center; }
    .bbf-frame      { position:relative; aspect-ratio:1; border-radius:4px; overflow:hidden;
                      background:#0b0e13; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
    .bbf-frame img  { width:100%; height:100%; object-fit:cover; display:block; }
    .bbf-name       { font-size:8.5px; letter-spacing:.3px; color:#c9d1d9; margin-top:4px;
                      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* Status is a physical marker on the wall, the way the house reads it. */
    .bbf-mark       { display:block; margin-top:3px; font-size:7.5px; font-weight:800; letter-spacing:1.2px;
                      border-radius:2px; padding:1.5px 0; font-family:ui-monospace,Consolas,monospace; }
    .bbf-tile.is-hoh  .bbf-frame { box-shadow:inset 0 0 0 2px #f0a500, 0 0 16px rgba(240,165,0,.45); }
    .bbf-tile.is-hoh  .bbf-mark  { background:#f0a500; color:#1a1206; }
    .bbf-tile.is-veto .bbf-frame { box-shadow:inset 0 0 0 2px #3fb950, 0 0 14px rgba(63,185,80,.35); }
    .bbf-tile.is-veto .bbf-mark  { background:#3fb950; color:#08210d; }
    .bbf-tile.is-nom  .bbf-frame { box-shadow:inset 0 0 0 2px #f85149, 0 0 14px rgba(248,81,73,.35); }
    .bbf-tile.is-nom  .bbf-mark  { background:#f85149; color:#2a0a08; }
    .bbf-tile.is-nom  .bbf-frame img { filter:grayscale(.35) contrast(1.05); }
    .bbf-tile.is-out  .bbf-frame { box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
    .bbf-tile.is-out  .bbf-frame img { filter:grayscale(1) brightness(.42); }
    .bbf-tile.is-out  .bbf-name  { color:#3d444d; text-decoration:line-through; }

    /* ── The camera bank ──
       A stretch of house life should be takeable in before it is read: which
       rooms were live, how busy each was, and where the loud things happened.
       The underline on a tab means something in that room moved the season. */
    .bbf-bank       { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
                      padding:9px 12px; margin:0 0 4px;
                      border-top:1px solid rgba(255,255,255,.05);
                      border-bottom:1px solid rgba(255,255,255,.05); }
    .bbf-bank-l     { font-family:ui-monospace,Consolas,monospace; font-size:8px;
                      letter-spacing:1.6px; color:#4d545c; margin-right:2px; }
    .bbf-bank-n     { margin-left:auto; font-family:ui-monospace,Consolas,monospace;
                      font-size:8.5px; letter-spacing:.6px; color:#5b6472; }
    /* Tabs are buttons: pick up a camera and watch one room. A week runs to a
       hundred and thirty beats and reading all of them top to bottom is a
       chore, so the bank earns its space by filtering rather than labelling. */
    .bbf-tab        { position:relative; display:inline-flex; align-items:center; gap:5px;
                      padding:4px 8px 6px; border-radius:4px; cursor:pointer;
                      font:inherit; -webkit-appearance:none; appearance:none;
                      background:color-mix(in srgb, var(--bbf-c,#8b949e) 7%, transparent);
                      border:1px solid color-mix(in srgb, var(--bbf-c,#8b949e) 20%, transparent);
                      opacity:.62; transition:opacity .14s ease, background .14s ease,
                                              border-color .14s ease, transform .14s ease; }
    .bbf-tab:hover  { opacity:.9; transform:translateY(-1px);
                      background:color-mix(in srgb, var(--bbf-c,#8b949e) 13%, transparent); }
    .bbf-tab:focus-visible { outline:2px solid var(--bbf-c,#8b949e); outline-offset:2px; }
    .bbf-tab.is-on  { opacity:1;
                      background:color-mix(in srgb, var(--bbf-c,#8b949e) 20%, transparent);
                      border-color:color-mix(in srgb, var(--bbf-c,#8b949e) 62%, transparent);
                      box-shadow:0 0 14px color-mix(in srgb, var(--bbf-c,#8b949e) 26%, transparent),
                                 inset 0 1px 0 rgba(255,255,255,.06); }
    .bbf-tab b      { font-size:9px; font-weight:700; letter-spacing:.7px;
                      text-transform:uppercase; color:var(--bbf-c,#8b949e); }
    .bbf-tab i      { font-style:normal; font-family:ui-monospace,Consolas,monospace;
                      font-size:7.5px; letter-spacing:.8px; color:#4d545c; }
    .bbf-tab em     { font-style:normal; font-family:ui-monospace,Consolas,monospace;
                      font-size:9px; font-weight:700; color:#c9d1d9; }
    /* The live-camera underline, drawn only on the camera being watched. */
    .bbf-tab u      { position:absolute; left:6px; right:6px; bottom:2px; height:2px;
                      border-radius:2px; background:var(--bbf-c,#8b949e); opacity:.45; }
    .bbf-tab.is-on u { opacity:1; box-shadow:0 0 8px var(--bbf-c,#8b949e); }
    .bbf-all        { --bbf-c:#8b949e; }
    .bbf-all.is-on  { --bbf-c:#c9d1d9; }

    @media (prefers-reduced-motion: reduce) {
      .bbf-tab, .bbf-tab:hover { transition:none; transform:none; }
    }

    /* ── Feed cards: one beat, one camera ──
       Three weights, because every card looking the same made a stretch of the
       week an undifferentiated wall with nowhere for the eye to land. */
    .bbf-cards      { position:relative; padding:2px 12px 12px 26px; }
    /* The time rail. A stretch of house life is a few hours passing, and it
       should read that way rather than as an unordered pile. */
    .bbf-cards::before { content:''; position:absolute; left:13px; top:4px; bottom:12px;
                      width:1px; background:linear-gradient(180deg,
                        color-mix(in srgb, var(--bbf-c,#8b949e) 55%, transparent),
                        transparent); }

    .bbf-card       { position:relative; margin-bottom:8px; padding:9px 11px;
                      border-radius:6px; background:rgba(17,21,28,.62);
                      border:1px solid rgba(255,255,255,.05);
                      border-left:3px solid var(--bbf-a,rgba(139,148,158,.35)); }
    .bbf-node       { position:absolute; left:-16px; top:15px; width:7px; height:7px;
                      border-radius:50%; background:#0d1117;
                      box-shadow:0 0 0 2px var(--bbf-a,#8b949e); }

    /* The beats that move the season. Bigger type, a lit edge, and room to
       breathe — a final two should not look like a remark about the slop. */
    .bbf-card.is-headline { background:linear-gradient(100deg,
                        color-mix(in srgb, var(--bbf-a,#8b949e) 13%, rgba(17,21,28,.72)),
                        rgba(17,21,28,.72) 62%);
                      border-color:color-mix(in srgb, var(--bbf-a,#8b949e) 34%, transparent);
                      box-shadow:0 2px 14px rgba(0,0,0,.32); padding:11px 13px; }
    .bbf-card.is-headline .bbf-txt { font-size:13.5px; line-height:1.6; color:#e6edf3; }
    .bbf-card.is-headline .bbf-node { width:9px; height:9px; left:-17px;
                      box-shadow:0 0 0 2px var(--bbf-a,#8b949e), 0 0 12px var(--bbf-a,#8b949e); }
    .bbf-card.is-standard { opacity:.94; }

    .bbf-head       { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
    .bbf-slug       { font-family:ui-monospace,Consolas,monospace; font-size:8px;
                      letter-spacing:1.2px; color:#6e7681; }
    .bbf-head .bbf-cat { margin-left:auto; }
    .bbf-cat        { font-family:ui-monospace,Consolas,monospace; font-size:7.5px; font-weight:700;
                      letter-spacing:1.1px; padding:2px 6px; border-radius:2px; white-space:nowrap; }
    .bbf-body       { display:flex; align-items:flex-start; gap:10px; }
    .bbf-faces      { flex-shrink:0; display:flex; gap:3px; }
    .bbf-txt        { flex:1; font-size:12.5px; line-height:1.55; color:#c9d1d9; }

    /* Ambient chatter: one skimmable line. The house is always talking and not
       all of it is the story, but leaving it out entirely made the place feel
       empty between the moments that counted. */
    .bbf-row        { display:flex; align-items:baseline; gap:9px; padding:3px 0 3px 2px; }
    .bbf-row::before { content:''; position:absolute; left:10px; width:3px; height:3px;
                      margin-top:6px; border-radius:50%;
                      background:color-mix(in srgb, var(--bbf-c,#8b949e) 60%, transparent); }
    .bbf-row-t      { flex-shrink:0; font-family:ui-monospace,Consolas,monospace;
                      font-size:7.5px; letter-spacing:1px; color:#414850; }
    .bbf-row-x      { flex:1; font-size:11.5px; line-height:1.5; color:#7d8590; font-style:italic; }

    /* ── What the beat actually changed ──
       The events have always moved bonds, targets, suspicion and deals, and the
       feed never once said so. */
    .bbf-fx         { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px;
                      padding-top:7px; border-top:1px dashed rgba(255,255,255,.07); }
    .bbf-chip       { display:inline-flex; align-items:center; gap:4px;
                      font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                      letter-spacing:.3px; padding:2px 7px; border-radius:9px;
                      background:rgba(255,255,255,.04); color:#8b949e;
                      border:1px solid rgba(255,255,255,.07); }
    .bbf-chip i     { font-style:normal; font-size:7px; opacity:.9; }
    .bbf-chip.is-bond.is-up   { color:#7ee787; border-color:rgba(63,185,80,.3);  background:rgba(63,185,80,.08); }
    .bbf-chip.is-bond.is-down { color:#ffb3ae; border-color:rgba(248,81,73,.3);  background:rgba(248,81,73,.08); }
    .bbf-chip.is-target { color:#ffb3ae; border-color:rgba(248,81,73,.34); background:rgba(248,81,73,.09); }
    .bbf-chip.is-deal   { color:#f0d48a; border-color:rgba(227,179,65,.38); background:rgba(227,179,65,.1); }
    .bbf-chip.is-break  { color:#ff9d96; border-color:rgba(248,81,73,.5);  background:rgba(248,81,73,.14); }
    .bbf-chip.is-expose { color:#d2a8ff; border-color:rgba(163,113,247,.34); background:rgba(163,113,247,.1); }
    .bbf-chip.is-susp   { color:#e3b341; border-color:rgba(227,179,65,.26); background:rgba(227,179,65,.07); }
    .bbf-chip.is-rom    { color:#ff9ec4; border-color:rgba(255,158,196,.3); background:rgba(255,158,196,.08); }
    .bbf-chip.is-pop    { color:#79c0ff; border-color:rgba(88,166,255,.28); background:rgba(88,166,255,.08); }

    /* Feed blocks, by room: you pick a camera and watch that room. Each has
       its own accent so a stretch of the week is legible by colour before a
       word of it is read. */
    .bbf-room-block { position:relative; margin: 0 0 10px; }
    .bbf-room-h     { display:flex; align-items:center; gap:7px; padding:9px 12px 6px;
                      font-family:ui-monospace,Consolas,monospace; font-size:9.5px;
                      letter-spacing:1.6px; text-transform:uppercase; color:var(--bbf-c,#8b949e); }
    .bbf-room-i     { flex-shrink:0; }
    .bbf-room-n     { flex-shrink:0; font-weight:800; }
    .bbf-room-cam   { flex-shrink:0; opacity:.55; font-size:8px; letter-spacing:1.2px; }
    .bbf-room-h::after { content:''; flex:1; height:1px;
                      background:linear-gradient(90deg, var(--bbf-c,#8b949e), transparent); opacity:.3; }
    .bbf-room-c     { order:5; flex-shrink:0; opacity:.7; }

    .bbf-rel        { display:grid; grid-template-columns:auto 1fr 2fr auto; gap:11px;
                      align-items:center; padding:8px 0;
                      border-bottom:1px solid rgba(255,255,255,.04); }
    .bbf-rel:last-child { border-bottom:0; }
    .bbf-rel-faces  { display:flex; gap:3px; flex-shrink:0; }
    /* The faces are the point of these rows — they were 24px beside a name that
       had to be truncated to "Axel & Bri…" for want of space that was there all
       along. The size itself comes from the `_bbAvatar(name, 34)` call: the
       helper writes it inline on `.bb-av`. */
    .bbf-rel-who    { font-size:12.5px; color:#c9d1d9; overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; }
    .bbf-rel-mid    { display:flex; flex-direction:column; gap:3px; }
    .bbf-rel-lab    { font-size:9.5px; letter-spacing:.6px; text-transform:lowercase; }
    .bbf-rel-show   { font-style:normal; color:#ff7b72; }
    .bbf-rel-show::before { content:'· '; }
    .bbf-rel-num    { display:flex; flex-direction:column; align-items:flex-end; gap:2px;
                      font-family:ui-monospace,Consolas,monospace; font-size:11px; }
    .bbf-rel-d      { font-style:normal; font-size:8.5px; letter-spacing:.4px; }
    .bbf-rel-d.up   { color:#3fb950; }
    .bbf-rel-d.down { color:#f85149; }
    .bbf-rel-d.flat { color:#4d545c; }

    /* The written read on a pair — the sentence, not just the bar. */
    .bbf-read       { display:grid; grid-template-columns:auto 1fr auto; gap:10px;
                      align-items:center; padding:7px 0;
                      border-bottom:1px solid rgba(255,255,255,.04); }
    .bbf-read:last-child { border-bottom:0; }
    .bbf-read-faces { display:flex; gap:2px; flex-shrink:0; }
    .bbf-read-txt   { display:flex; flex-direction:column; gap:2px; }
    .bbf-read-txt b { font-size:12px; font-weight:500; color:#c9d1d9; line-height:1.45; }
    .bbf-read-txt i { font-size:10.5px; font-style:italic; color:#6e7681; line-height:1.4; }

    .bbf-ally       { display:flex; align-items:center; gap:11px; padding:9px 0;
                      border-bottom:1px solid rgba(255,255,255,.04); }
    .bbf-ally:last-child { border-bottom:0; }
    .bbf-ally-n     { font-size:12.5px; color:#d29922; min-width:118px; flex-shrink:0; line-height:1.35; }
    .bbf-ally-m     { display:flex; flex-wrap:wrap; gap:6px; flex:1; }

    /* ── A GROUP THAT ENDED THIS WEEK ──
       It keeps its row rather than being replaced by a sentence underneath a
       list that still showed it in play. Greyed, with the reason where the
       member count goes, until the episode is over. */
    .bbf-ally.is-over            { opacity:.42; }
    .bbf-ally.is-over .bbf-ally-n { color:#8b949e; text-decoration:line-through;
                      text-decoration-color:rgba(139,148,158,.45); }
    .bbf-ally.is-over .bbf-hold-face { filter:grayscale(1); }
    .bbf-ally.is-over .bbf-ally-c { color:#8b949e; text-transform:none;
                      font-family:inherit; font-size:10.5px; letter-spacing:0; text-align:right;
                      max-width:150px; line-height:1.35; }

    .bbf-ally-c     { font-family:ui-monospace,Consolas,monospace; font-size:10px; color:#6e7681; }
    .bbf-panel-h small { float:right; font-size:8.5px; letter-spacing:.8px;
                      text-transform:none; color:#4d545c; }

    /* ── Side panels: the two things the house is actually made of ── */
    /* Two panels, each taking half of whatever is going: at minmax(240px) with
       three tracks available the pair sat in the left two thirds of the screen
       and the rest of the row was empty, with the faces inside them shrunk to
       22px to fit a width nothing was using. */
    .bbf-panels     { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
                      gap:12px; margin-top:14px; align-items:start; }
    .bbf-panel      { border:1px solid var(--border,#30363d); border-radius:8px; padding:13px 15px;
                      background:rgba(13,17,23,.6); }
    .bbf-panel-h    { font-family:ui-monospace,Consolas,monospace; font-size:9.5px; letter-spacing:1.6px;
                      color:#6e7681; text-transform:uppercase; margin-bottom:10px; }
    .bbf-row        { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:11.5px; color:#c9d1d9; }
    .bbf-bar        { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; }
    .bbf-bar i      { display:block; height:100%; border-radius:2px; }
    .bbf-tag        { font-size:9px; letter-spacing:.8px; color:#6e7681; font-family:ui-monospace,Consolas,monospace; }

    /* Move-in day: frames on the wall that have nobody in them yet. */
    .bbf-tile.is-empty .bbf-frame { background:#0d1014; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }
    .bbf-tile.is-empty .bbf-name  { color:#2b3138; }
    .bbf-tile.is-now   .bbf-frame { box-shadow:inset 0 0 0 2px #f0a500, 0 0 22px rgba(240,165,0,.55); }

    /* The door, and the eye over it. The house is watching before anybody is
       in it — that is the whole premise, so it is the first thing drawn. */
    .bbf-door       { display:block; width:100%; max-width:420px; margin:0 auto; }
    .bbf-eye-pupil  { animation:bbfLook 7s ease-in-out infinite; transform-origin:center; }
    @keyframes bbfLook { 0%,100%{transform:translateX(0)} 30%{transform:translateX(5px)} 65%{transform:translateX(-5px)} }

    /* The arrival close-up: one face, held. */
    .bbf-spot       { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
                      padding:16px; border-radius:6px; border-left:3px solid #f0a500;
                      background:linear-gradient(90deg, rgba(240,165,0,.12), rgba(13,17,23,.55) 58%);
                      animation:bbfCut .3s var(--ease-broadcast, ease-out) both; }
    @keyframes bbfCut { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

    /* ── The memory wall ──
       Not a grid of avatars: a lit screen on the living room wall, which is the
       one object in the house everybody looks at every day. Portraits sit in
       glowing bezels on a magenta field, rows centred the way the real wall
       centres a short row, and the people who have gone are dark glass. */
    .bbw-screen     { border-radius:10px; padding:9px; margin:14px 0;
                      background:linear-gradient(160deg,#1b1e24,#0c0e12);
                      box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
    .bbw-panel      { position:relative; overflow:hidden; border-radius:5px; padding:18px 14px;
                      background:
                        radial-gradient(120% 90% at 50% 0%, rgba(255,190,230,.42), transparent 62%),
                        linear-gradient(150deg,#b6265f 0%, #d63a72 28%, #a51f52 58%, #7d1440 100%); }
    /* the sheen a big screen throws back at the room */
    .bbw-panel::after { content:''; position:absolute; inset:0; pointer-events:none;
                      background:linear-gradient(104deg, rgba(255,255,255,.16) 0 14%, transparent 34%),
                                 linear-gradient(0deg, rgba(0,0,0,.22), transparent 45%); }
    .bbw-grid       { position:relative; z-index:1; display:flex; flex-wrap:wrap;
                      justify-content:center; gap:12px; }
    .bbw-cell       { width:86px; text-align:center; }
    .bbw-frame      { position:relative; padding:4px; border-radius:3px;
                      background:linear-gradient(160deg,#5fe3f0,#1f93b4 55%,#0e6a86);
                      box-shadow:0 0 14px rgba(70,215,240,.45), 0 3px 10px rgba(0,0,0,.45),
                                 inset 0 1px 0 rgba(255,255,255,.5); }
    .bbw-photo      { position:relative; aspect-ratio:1.08; overflow:hidden; border-radius:1px;
                      background:linear-gradient(180deg,#8a8d86,#6d716b); }
    .bbw-photo img  { width:100%; height:100%; object-fit:cover; display:block; }
    .bbw-name       { margin-top:5px; font-size:10px; font-weight:600; letter-spacing:.4px;
                      color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; }

    /* This week's standing, marked on the wall itself — the wall is the thing
       the house stares at every day, so it is where the week should be read. */
    .bbw-frame      { position:relative; }
    .bbw-mark       { position:absolute; top:-1px; left:-1px; right:-1px; z-index:2;
                      font-family:ui-monospace,Consolas,monospace; font-size:8px;
                      font-weight:800; letter-spacing:1.2px; padding:2px 0;
                      border-radius:2px 2px 0 0; }
    .bbw-cell.is-hoh  .bbw-frame { background:linear-gradient(160deg,#ffd76a,#c98a00 60%,#8a5c00);
                      box-shadow:0 0 20px rgba(240,165,0,.55), 0 3px 10px rgba(0,0,0,.45),
                                 inset 0 1px 0 rgba(255,255,255,.6); }
    .bbw-cell.is-hoh  .bbw-mark { background:#f0a500; color:#1a1206; }
    .bbw-cell.is-nom  .bbw-frame { background:linear-gradient(160deg,#ff8b84,#b3231b 60%,#7a140f);
                      box-shadow:0 0 18px rgba(248,81,73,.5), 0 3px 10px rgba(0,0,0,.45),
                                 inset 0 1px 0 rgba(255,255,255,.45); }
    .bbw-cell.is-nom  .bbw-mark { background:#f85149; color:#2a0a08; }
    .bbw-cell.is-nom  .bbw-photo img { filter:grayscale(.3) contrast(1.05); }
    .bbw-cell.is-veto .bbw-frame { background:linear-gradient(160deg,#86efac,#1f9d4d 60%,#0d5f2c);
                      box-shadow:0 0 18px rgba(63,185,80,.45), 0 3px 10px rgba(0,0,0,.45),
                                 inset 0 1px 0 rgba(255,255,255,.5); }
    .bbw-cell.is-veto .bbw-mark { background:#3fb950; color:#08210d; }
    /* gone: the frame goes dead and the glass goes dark */
    .bbw-cell.is-out .bbw-frame { background:linear-gradient(160deg,#3c4048,#22262c);
                      box-shadow:0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
    .bbw-cell.is-out .bbw-photo img { filter:grayscale(1) brightness(.34); }
    .bbw-cell.is-out .bbw-photo::after { content:''; position:absolute; inset:0; background:rgba(4,6,9,.5); }
    .bbw-cell.is-out .bbw-name  { color:rgba(255,255,255,.42); text-decoration:line-through; }

    /* A face on its own — no frame, no caption, fixed size. Used anywhere a
       row is too tight for the full portrait component. */
    .bb-av          { display:inline-flex; flex-shrink:0; position:relative;
                      border-radius:3px; overflow:hidden; background:#0b0e13;
                      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
    .bb-av img      { width:100%; height:100%; object-fit:cover; display:block; }
    .bb-av i        { display:none; width:100%; height:100%; align-items:center;
                      justify-content:center; font-style:normal; font-weight:800;
                      font-size:10px; color:#4d545c; }

    /* Standing rows carry a face: a name in a list of fourteen is a lookup,
       a face is recognition. */
    .bbst-row       { display:flex; align-items:center; gap:9px; padding:5px 8px;
                      border-radius:4px; min-height:38px; overflow:hidden; }
    .bbst-face      { display:flex; flex-shrink:0; }
    .bbst-name      { font-size:12px; flex:1; overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; }
    .bbst-stats     { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }

    /* Who is hunting whom, and what people wrongly believe. Both drove every
       decision in the house and neither was ever drawn. */
    .bbh-top        { display:flex; align-items:center; gap:9px; padding:7px 9px; margin-bottom:8px;
                      border-radius:5px; background:rgba(248,81,73,.10);
                      border-left:2px solid #f85149; font-size:11.5px; color:#c9d1d9; }
    .bbh-top-k      { font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                      letter-spacing:1.3px; text-transform:uppercase; color:#f85149; flex-shrink:0; }
    .bbh-row        { display:flex; align-items:center; gap:6px; padding:5px 8px;
                      border-left:2px solid rgba(248,81,73,.4); background:rgba(248,81,73,.05);
                      border-radius:4px; font-size:11px; }
    .bbh-arrow      { font-size:9px; color:#6e7681; letter-spacing:.4px; flex-shrink:0; }
    .bbh-name       { color:#c9d1d9; }
    .bbh-why        { margin-left:auto; font-size:9px; color:#4d545c; font-style:italic;
                      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40%; }

    .bbm-row        { display:flex; align-items:center; gap:9px; padding:6px 0;
                      border-bottom:1px solid rgba(255,255,255,.04); }
    .bbm-row:last-child { border-bottom:0; }
    .bbm-txt        { flex:1; font-size:11.5px; color:#c9d1d9; line-height:1.45; }
    .bbm-num        { flex-shrink:0; font-family:ui-monospace,Consolas,monospace; font-size:10px;
                      color:#8b949e; text-align:right; }
    .bbm-num i      { font-style:normal; font-size:8px; color:#4d545c; margin-left:6px; }

    /* ── Game plans: shield, target, goat, and what was promised ──
       The plan layer decides nominations, the veto and the vote, so it gets a
       readable row per houseguest rather than a paragraph nobody scans. */
    .bbg-row        { display:flex; align-items:flex-start; gap:10px; padding:7px 0;
                      border-bottom:1px solid rgba(255,255,255,.04); }
    .bbg-row:last-child { border-bottom:0; }
    .bbg-body       { flex:1; min-width:0; }
    .bbg-name       { font-size:12px; font-weight:600; color:#e6edf3; margin-bottom:4px; }
    .bbg-name i     { font-style:normal; font-size:9px; letter-spacing:.5px; color:#6e7681;
                      text-transform:uppercase; margin-left:6px; }
    /* What they have actually won — the one part of somebody's threat that the
       whole house can see. */
    .bbg-rec        { display:inline-block; margin-left:7px; text-decoration:none;
                      font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                      letter-spacing:.4px; color:#e3b341; }
    /* Filled frames are tabs: click one to bring that introduction back. */
    .bbf-tile.is-in { cursor:pointer; transition:transform .15s ease; }
    .bbf-tile.is-in:hover { transform:translateY(-2px); }
    .bbf-tile.is-in:hover .bbf-frame { border-color:rgba(240,165,0,.6); }

    /* Move-in introductions: the self-intro reads as speech, the first-read
       chips as the room's snap judgement. */
    .bbf-introq    { font-size:13.5px; line-height:1.55; color:#e6edf3; margin-bottom:8px;
                     padding-left:10px; border-left:3px solid rgba(240,165,0,.55);
                     font-style:italic; }
    .bbf-reads     { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:9px; }
    .bbf-reads-k   { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.8px; color:#6e7681; }
    .bbf-read      { font-size:10px; color:#c9d1d9; padding:2px 8px; border-radius:9px;
                     background:rgba(240,165,0,.08); border:1px solid rgba(240,165,0,.25); }

    /* ── eviction night ────────────────────────────────────────────────
       The live hour as a studio: nominee chairs with a tally stacking under
       each like torches going out, the majority slot ringed so every vote is
       measurable against it, and the front door on the end — shut all night,
       open exactly once. */
    .bbev-stage    { position:sticky; top:46px; z-index:30; display:flex; gap:12px;
                     align-items:stretch; padding:14px; border-radius:10px;
                     background:linear-gradient(180deg, rgba(34,10,10,.97), rgba(16,6,7,.99));
                     border:1px solid rgba(var(--bbx-danger-rgb),.28);
                     box-shadow:0 14px 34px rgba(0,0,0,.55); margin-bottom:14px; }
    .bbev-onair    { position:absolute; top:-9px; left:14px; display:flex; align-items:center;
                     gap:6px; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:2.4px; font-weight:800; color:#ff6b63;
                     background:#1a0806; border:1px solid rgba(var(--bbx-danger-rgb),.5);
                     border-radius:3px; padding:2px 8px; }
    .bbev-onair i  { width:7px; height:7px; border-radius:50%; background:rgb(var(--bbx-danger-rgb));
                     animation:bbevBlink 1.4s ease-in-out infinite; }
    @keyframes bbevBlink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
    .bbev-stage.is-decided .bbev-onair i { animation:none; }

    .bbev-chairs   { flex:1; display:flex; gap:12px; justify-content:center; }
    .bbev-chair    { width:150px; text-align:center; padding:10px 8px 8px; border-radius:9px;
                     background:rgba(var(--bbx-danger-rgb),.06); border:1.5px solid rgba(var(--bbx-danger-rgb),.4);
                     transition:all .4s ease; }
    .bbev-frame .bb-av { width:92px !important; height:92px !important; border-radius:7px;
                     border:2px solid rgba(var(--bbx-danger-rgb),.5); }
    .bbev-cname    { font-family:var(--bbx-display); font-size:15px; letter-spacing:1px;
                     color:#fff; margin:6px 0 7px; text-shadow:0 2px 8px rgba(0,0,0,.7); }
    /* The tally: one key per possible vote, the majority slot ringed. */
    .bbev-keys     { display:flex; justify-content:center; gap:4px; margin-bottom:5px; }
    .bbev-key      { width:13px; height:19px; border-radius:3px 3px 5px 5px;
                     background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
                     transition:all .3s ease; }
    .bbev-key.is-maj { border-color:rgba(var(--bbx-note-rgb),.6); box-shadow:inset 0 0 0 1px rgba(var(--bbx-note-rgb),.25); }
    .bbev-key.is-cast { background:linear-gradient(180deg,#ff8b84,#b3231b);
                     border-color:rgb(var(--bbx-danger-rgb)); box-shadow:0 0 10px rgba(var(--bbx-danger-rgb),.55);
                     animation:bbevCast .3s ease-out both; }
    @keyframes bbevCast { from { transform:translateY(-5px); opacity:0; } to { transform:none; opacity:1; } }
    .bbev-count    { font-family:ui-monospace,Consolas,monospace; font-size:12px;
                     font-weight:800; color:#ff8b84; }
    .bbev-count i  { font-style:normal; font-size:8px; letter-spacing:1.2px; color:rgb(var(--bbx-dim-rgb)); }
    .bbev-tag      { margin-top:5px; font-family:ui-monospace,Consolas,monospace; font-size:8px;
                     letter-spacing:1.8px; font-weight:800; color:rgb(var(--bbx-danger-rgb)); }
    .bbev-chair.is-evicted { border-color:rgba(var(--bbx-dim-rgb),.45); background:rgba(var(--bbx-dim-rgb),.05); }
    .bbev-chair.is-evicted .bbev-frame .bb-av { filter:grayscale(1) brightness(.7);
                     border-color:rgba(var(--bbx-dim-rgb),.5); }
    .bbev-chair.is-evicted .bbev-tag { color:rgb(var(--bbx-dim-rgb)); }
    .bbev-chair.is-survived { border-color:rgba(var(--bbx-good-rgb),.55);
                     box-shadow:0 0 18px rgba(var(--bbx-good-rgb),.2); }
    .bbev-chair.is-survived .bbev-tag { color:rgb(var(--bbx-good-rgb)); }

    /* The front door. Shut is two dark slabs; open is light from outside. */
    .bbev-door     { width:96px; flex-shrink:0; display:flex; flex-direction:column;
                     align-items:center; justify-content:center; gap:8px;
                     padding:10px 8px; border-radius:8px;
                     background:rgba(255,255,255,.025); border:1px dashed rgba(255,255,255,.12); }
    .bbev-door-slab{ display:flex; gap:2px; width:56px; height:84px; }
    .bbev-door-slab span { flex:1; border-radius:3px;
                     background:linear-gradient(180deg,#2b3138,#171b20);
                     border:1px solid rgba(255,255,255,.12); transition:all .5s ease; }
    .bbev-door.is-open .bbev-door-slab { gap:26px; }
    .bbev-door.is-open .bbev-door-slab span {
                     background:linear-gradient(180deg,#ffe9a8,rgb(var(--bbx-key-rgb)));
                     box-shadow:0 0 26px rgba(var(--bbx-note-rgb),.6); }
    .bbev-door-t   { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.4px; color:rgb(var(--bbx-dim-rgb)); text-align:center; line-height:1.5; }
    .bbev-door.is-open .bbev-door-t { color:rgb(var(--bbx-key-rgb)); }

    .bbev-meta     { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
                     display:flex; gap:14px; font-family:ui-monospace,Consolas,monospace;
                     font-size:8px; letter-spacing:1.4px; color:rgb(var(--bbx-dim-rgb));
                     background:#160607; border:1px solid rgba(var(--bbx-danger-rgb),.3);
                     border-radius:3px; padding:2px 10px; white-space:nowrap; }
    .bbev-stage    { position:relative; position:sticky; }
    .bbev-ballot.is-broke { border-left:3px solid rgb(var(--bbx-danger-rgb)); }
    .bbev-tie      { border-left:3px solid rgb(var(--bbx-note-rgb)); }
    .bbev-verdict  { border-left:3px solid rgb(var(--bbx-danger-rgb));
                     background:linear-gradient(90deg, rgba(var(--bbx-danger-rgb),.12), transparent 65%); }
    .bbev-verdict .bbns-card-b { font-size:15px; line-height:1.6; }
    @media (prefers-reduced-motion:reduce) {
      .bbev-onair i, .bbev-key.is-cast { animation:none; }
    }

    /* ── the room, after a blowup ───────────────────────────────────────
       Fourteen people react to one accusation, and the first version simply
       printed fourteen sentences. It read as a wall — and it threw away the
       only thing the mechanic actually computes, which is HOW THE ROOM SPLIT.
       So the split is the card: one band per verdict, the faces in it, and a
       quote from the person who felt it most strongly. The quiet middle stays
       portraits, because "seven people privately filed it away" is one fact,
       not seven sentences. */
    /* The verdict on the accusation — audience-only knowledge, so it reads as
       an aside under the speech rather than as a second badge competing with
       the register in the header. */
    .bbev-truth    { margin-top:12px; padding-top:9px; border-top:1px dashed rgba(255,255,255,.10);
                     font-family:ui-monospace,Consolas,monospace; font-size:9.5px;
                     letter-spacing:1.3px; text-transform:uppercase; line-height:1.6; }
    .bbev-truth.is-true  { color:rgb(var(--bbx-danger-rgb)); }
    .bbev-truth.is-false { color:rgb(var(--bbx-dim-rgb)); }

    /* The confrontation — the one card where somebody still playing acts on
       what they heard, so it reads as dialogue rather than as narration. */
    .bbev-fight    { border-left:3px solid rgb(var(--bbx-danger-rgb));
                     background:linear-gradient(90deg, rgba(var(--bbx-danger-rgb),.10), transparent 70%); }
    .bbev-fight-l  { font-size:13px; line-height:1.65; padding:5px 0 5px 11px; margin-bottom:3px;
                     border-left:2px solid transparent; }
    .bbev-fight-l.is-challenger { border-left-color:rgb(var(--bbx-note-rgb)); color:#f0f6fc; }
    .bbev-fight-l.is-accused    { border-left-color:rgb(var(--bbx-info-rgb)); color:#f0f6fc; margin-left:16px; }
    .bbev-fight-l.is-close      { color:rgb(var(--bbx-dim-rgb)); font-style:italic; border-left-color:rgba(255,255,255,.10); }
    .bbev-fight-cost { margin-top:9px; padding-top:8px; border-top:1px dashed rgba(var(--bbx-danger-rgb),.28);
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.2px;
                     text-transform:uppercase; color:rgb(var(--bbx-danger-rgb)); line-height:1.6; }

    .bbev-room     { display:flex; flex-direction:column; gap:7px; }
    .bbev-band     { border:1px solid rgba(255,255,255,.08); border-radius:7px;
                     padding:8px 10px; background:rgba(255,255,255,.02); }
    .bbev-band-h   { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .bbev-band-t   { font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                     letter-spacing:1.8px; text-transform:uppercase; color:rgb(var(--bbx-dim-rgb)); }
    .bbev-band-n   { font-family:ui-monospace,Consolas,monospace; font-size:11px;
                     color:#e6edf3; background:rgba(255,255,255,.06); border-radius:20px;
                     padding:1px 8px; }
    .bbev-band-faces { display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
    .bbev-band-faces .bb-av { border:1px solid rgba(255,255,255,.16); }
    .bbev-quote    { font-size:12.5px; line-height:1.6; color:#c9d1d9;
                     border-left:2px solid rgba(255,255,255,.14); padding-left:9px;
                     margin-top:5px; }
    .bbev-band.is-dismissed { border-color:rgba(var(--bbx-info-rgb),.30); background:rgba(var(--bbx-info-rgb),.05); }
    .bbev-band.is-dismissed .bbev-band-t { color:#79c0ff; }
    .bbev-band.is-dismissed .bbev-quote  { border-left-color:rgba(var(--bbx-info-rgb),.5); }
    .bbev-band.is-torn      { border-color:rgba(var(--bbx-note-rgb),.32); background:rgba(var(--bbx-note-rgb),.06); }
    .bbev-band.is-torn .bbev-band-t      { color:rgb(var(--bbx-note-rgb)); }
    .bbev-band.is-torn .bbev-quote       { border-left-color:rgba(var(--bbx-note-rgb),.55); }
    .bbev-band.is-bought    { border-color:rgba(var(--bbx-danger-rgb),.34); background:rgba(var(--bbx-danger-rgb),.06); }
    .bbev-band.is-bought .bbev-band-t    { color:rgb(var(--bbx-danger-rgb)); }
    .bbev-band.is-bought .bbev-quote     { border-left-color:rgba(var(--bbx-danger-rgb),.55); }

    /* ── the veto ceremony ─────────────────────────────────────────────
       Same stage grammar as the nomination ceremony, with the medallion as the
       centrepiece: unlit until "I have decided", gold when used, ash when the
       block stands. The saved houseguest's frame clears to green and STAYS —
       they are the story of the meeting — and the replacement lights up as a
       new frame beside them. */
    .bbvc-stage    { align-items:stretch; }
    .bbvc-medalbox { display:flex; flex-direction:column; align-items:center;
                     justify-content:center; gap:6px; min-width:118px;
                     padding:12px 10px; border-radius:8px;
                     background:rgba(255,255,255,.03);
                     border:1px dashed rgba(var(--bbx-key-rgb),.25); }
    .bbvc-medal    { width:58px; height:58px; opacity:.28;
                     filter:grayscale(1); transition:all .5s ease; }
    .bbvc-medal svg{ width:100%; height:100%; }
    .bbvc-medalbox.is-lit .bbvc-medal { opacity:1; filter:none;
                     animation:bbvcGlow 2.4s ease-in-out infinite; }
    @keyframes bbvcGlow { 0%,100% { filter:drop-shadow(0 0 4px rgba(227,179,65,.35)); } 50% { filter:drop-shadow(0 0 14px rgba(227,179,65,.75)); } }
    .bbvc-stage.is-kept .bbvc-medalbox.is-lit .bbvc-medal { filter:grayscale(.8);
                     animation:none; opacity:.6; }
    .bbvc-medal-t  { font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:2px; font-weight:700; color:rgb(var(--bbx-key-rgb)); }
    .bbvc-stage.is-kept .bbvc-medal-t { color:rgb(var(--bbx-dim-rgb)); }
    .bbvc-medal-s  { font-size:10px; color:rgb(var(--bbx-dim-rgb)); text-align:center; }

    /* Doubled selectors on purpose: `.bbns-screen.is-on` sets the red frame,
       red wash and red tag later in the sheet, so the saved state has to win
       the specificity fight or the vetoed houseguest keeps reading as
       nominated with a green stamp floating over it — which is exactly how the
       first render came out. */
    .bbns-screen.bbvc-slot.is-saved { border-color:rgba(var(--bbx-good-rgb),.75);
                     background:linear-gradient(180deg, rgba(14,46,22,.9), rgba(6,18,9,.98));
                     box-shadow:0 0 26px rgba(var(--bbx-good-rgb),.32), inset 0 0 46px rgba(var(--bbx-good-rgb),.1); }
    .bbns-screen.bbvc-slot.is-saved .bbns-tag { color:#08210d; background:rgb(var(--bbx-good-rgb)); }
    .bbns-screen.bbvc-slot.is-repl { animation:bbvcIn .4s ease-out both,
                     bbns-flash .62s ease-out both; }
    @keyframes bbvcIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
    /* The stamp across a saved face: the medallion did this. */
    .bbvc-stamp    { position:absolute; top:38%; left:50%;
                     transform:translate(-50%,-50%) rotate(-14deg);
                     font-family:ui-monospace,Consolas,monospace; font-size:15px;
                     font-weight:800; letter-spacing:5px; color:rgb(var(--bbx-good-rgb));
                     border:2.5px solid rgb(var(--bbx-good-rgb)); border-radius:4px; padding:2px 9px;
                     background:rgba(8,33,13,.55); text-shadow:0 0 12px rgba(var(--bbx-good-rgb),.6); }
    .bbvc-slot     { position:relative; }
    .bbvc-used     { border-left:3px solid rgb(var(--bbx-good-rgb)); }
    .bbvc-kept     { border-left:3px solid #6e7681; }
    .bbvc-adjourn  { border-left:3px solid rgb(var(--bbx-danger-rgb)); }
    @media (prefers-reduced-motion:reduce) {
      .bbvc-medalbox.is-lit .bbvc-medal, .bbvc-slot.is-repl { animation:none; }
    }

    /* ── the announcement ──────────────────────────────────────────────
       The wall screen wakes up and the sofas fill. Dark glass until the
       reveal step, then the eye burns in the twist's own palette and the
       scanline starts moving — broadcast, not decoration. */
    .bbta-wall     { display:flex; flex-direction:column; align-items:center; gap:12px;
                     padding:18px 14px 14px; margin-bottom:14px; border-radius:10px;
                     background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25));
                     border:1px solid rgba(139,148,158,.2); }
    .bbta-screenframe { position:relative; width:min(340px, 80%); padding:14px 20px;
                     border-radius:8px; background:#05070d; overflow:hidden;
                     border:2px solid rgba(139,148,158,.35);
                     box-shadow:inset 0 0 30px rgba(0,0,0,.8); transition:all .6s ease; }
    .bbta-screenframe svg { width:100%; height:auto; display:block; opacity:.25;
                     filter:grayscale(1); transition:all .6s ease; }
    .bbta-wall.is-lit .bbta-screenframe { border-color:rgba(240,165,0,.55);
                     box-shadow:0 0 34px rgba(240,165,0,.22), inset 0 0 30px rgba(0,0,0,.6); }
    .bbvc-dmd .bbta-wall.is-lit .bbta-screenframe { border-color:rgba(126,231,255,.6);
                     box-shadow:0 0 34px rgba(126,231,255,.25), inset 0 0 30px rgba(0,0,0,.6); }
    .bbta-wall.is-lit .bbta-screenframe svg { opacity:1; filter:none; }
    .bbta-scan     { position:absolute; inset:0; pointer-events:none; opacity:0;
                     background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px); }
    .bbta-wall.is-lit .bbta-scan { opacity:1; animation:bbtaScan 6s linear infinite; }
    @keyframes bbtaScan { 0%,100% { opacity:.55; } 50% { opacity:1; } }
    .bbta-sofas    { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
    .bbta-voice    { border-left:3px solid #8b949e; font-style:italic; }
    .bbta-reveal .bbns-card-b { font-size:14.5px; line-height:1.65; }
    .bbta-sting    { display:block; margin-top:8px; font-family:ui-monospace,Consolas,monospace;
                     font-size:11px; letter-spacing:1.6px; color:#f0a500; }
    .bbvc-dmd .bbta-sting { color:#7ee7ff; }
    @media (prefers-reduced-motion:reduce) { .bbta-wall.is-lit .bbta-scan { animation:none; } }

    /* ── Pandora's Box + the detonation ────────────────────────────────
       The box is temptation drawn in gold on black; the detonation borrows
       the whole diamond palette (bbvc-dmd on the page root) and adds only
       the floating gem above the cards. */
    .bbpb-hall     { display:flex; align-items:flex-end; justify-content:center; gap:18px;
                     padding:18px 12px 12px; margin-bottom:14px; border-radius:10px;
                     background:linear-gradient(180deg, rgba(227,179,65,.05), rgba(0,0,0,.3));
                     border:1px solid rgba(227,179,65,.25); }
    .bbpb-door     { width:96px; transition:filter .5s ease; filter:drop-shadow(0 0 10px rgba(227,179,65,.25)); }
    .bbpb-door svg { width:100%; height:auto; display:block; }
    .bbpb-hall.is-open .bbpb-door { filter:drop-shadow(0 0 22px rgba(227,179,65,.6)); animation:bbpbPulse 2.8s ease-in-out infinite; }
    @keyframes bbpbPulse { 0%,100% { filter:drop-shadow(0 0 10px rgba(227,179,65,.3)); } 50% { filter:drop-shadow(0 0 24px rgba(227,179,65,.65)); } }
    .bbpb-open     { border-left:3px solid #e3b341 !important;
                     background:linear-gradient(90deg, rgba(227,179,65,.12), transparent 60%) !important; }
    .bbdd-gem      { display:flex; justify-content:center; margin:2px 0 12px; }
    .bbdd-gem svg  { width:74px; height:74px; opacity:.35; filter:grayscale(.8); transition:all .6s ease; }
    .bbdd-gem.is-lit svg { opacity:1; filter:drop-shadow(0 0 18px rgba(126,231,255,.6));
                     animation:bbvcDmdGlow 2.6s ease-in-out infinite; }
    @media (prefers-reduced-motion:reduce) {
      .bbpb-hall.is-open .bbpb-door, .bbdd-gem.is-lit svg { animation:none; }
    }

    /* the detail behind those digits, on House Status where there is room */
    .bbb-holds     { margin:8px 0 4px; padding:6px 8px; border-radius:6px;
                     background:rgba(255,255,255,.035); clear:both; }
    .bbb-holds-h   { font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.2px; text-transform:uppercase; color:#8b949e;
                     margin-bottom:4px; }
    .bbb-hold-row  { display:flex; align-items:baseline; gap:7px; font-size:11px;
                     padding:1.5px 0; }
    .bbb-hold-row b{ font-family:ui-monospace,Consolas,monospace; font-size:11px;
                     min-width:26px; text-align:right; }
    .bbb-hold-row span { color:#e6edf3; min-width:74px; }
    .bbb-hold-row em   { color:#8b949e; font-style:normal; font-size:10.5px; }
    .bbb-crack     { margin-top:5px; font-size:10.5px; color:#f0a500; }

    /* ── the hold on an alliance ───────────────────────────────────────
       One digit under the face, in the alliance panel that already existed.
       A whole screen for this was too much furniture for a single number per
       person — the point is reading an alliance at a glance and seeing which
       of them is going, not being handed a report. The reasoning lives on the
       house status screen, where there is room for it. */
    .bbf-hold      { display:inline-flex; flex-direction:column; align-items:center;
                     gap:3px; margin-right:2px; vertical-align:top; }
    /* A wrapper the greyed-out state can filter without touching the digit
       under it. The size is inline on `.bb-av` from the call site. */
    .bbf-hold-face { display:inline-flex; }
    .bbf-hold b    { font-family:ui-monospace,Consolas,monospace; font-size:11px;
                     font-weight:700; line-height:1; }
    /* Behind the wall on a Split House: present in the alliance, unreachable
       this week, and no hold shown because nobody on this side can see it. */
    .bbf-hold.is-away        { opacity:.32; filter:grayscale(1); }
    .bbf-hold.is-away b      { color:#6e7681; }
    .bbf-hold.is-weak img, .bbf-hold.is-weak .rp-portrait {
                     outline:1.5px solid #c9343c; outline-offset:1px; border-radius:4px; }
    /* Whether the number moved since last week. The pair rows beside these
       have always had arrows; the hold digit did not, so a week that cost an
       alliance real trust drew identically to a quiet one. */
    .bbf-hold-d    { font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                     font-style:normal; font-weight:700; line-height:1; letter-spacing:-.2px; }
    .bbf-hold-d.up   { color:#3fb950; }
    .bbf-hold-d.down { color:#f47067; }

    .spl-why       { margin:6px 2px 0; font-size:10.5px; line-height:1.4; color:#8b949e;
                     text-align:center; }

    /* ── the Whacktivity doors ─────────────────────────────────────────
       Three doorways side by side, each one lit in its power's colour, with
       the people who chose it queued underneath. The drama is the CROWD: you
       can see at a glance which door everybody wanted and which one somebody
       walked into alone. What is behind them stays dark. */
    .bbwk-hall     { display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
                     margin-bottom:14px; }
    .bbwk-door     { position:relative; border-radius:10px 10px 4px 4px; padding:10px 8px 9px;
                     background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.34));
                     border:1px solid rgba(255,255,255,.14); text-align:center; }
    .bbwk-door.is-empty { opacity:.45; }
    .bbwk-arch     { height:52px; margin:0 auto 7px; width:44px; border-radius:22px 22px 3px 3px;
                     background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.4));
                     border:2px solid currentColor; box-shadow:0 0 14px -2px currentColor inset; }
    .bbwk-power    { font-family:var(--font-display,Georgia,serif); font-size:12px;
                     line-height:1.2; color:#e6edf3; margin-bottom:5px; min-height:29px; }
    .bbwk-queue    { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; min-height:24px; }
    .bbwk-count    { margin-top:6px; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.2px; text-transform:uppercase; }
    .bbwk-sealed   { margin-top:5px; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1px; color:#6e7681; }
    .bbwk-sat      { margin:-4px 0 14px; text-align:center; font-size:11px; color:#8b949e; }
    .bbwk-sat b    { color:#cdd6f4; font-weight:600; }
    @media (max-width:560px) { .bbwk-hall { grid-template-columns:1fr; } }

    /* ── the App Store ─────────────────────────────────────────────────
       The one distributor with no room and no door: it happens on a phone,
       somewhere else, in a country the houseguests cannot see. So the screen
       is a handset — app tiles on a grid, a download bar per power, and a
       recipient field that stays redacted, because the viewer finds out the
       same night the house does. */
    .bbas-phone    { max-width:330px; margin:0 auto 16px; padding:14px 12px 16px;
                     border-radius:26px; background:linear-gradient(180deg,#11131a,#05070d);
                     border:1px solid rgba(99,102,241,.35);
                     box-shadow:0 0 30px rgba(99,102,241,.16), inset 0 1px 0 rgba(255,255,255,.06); }
    .bbas-notch    { width:88px; height:5px; border-radius:3px; margin:0 auto 12px;
                     background:rgba(255,255,255,.16); }
    .bbas-grid     { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .bbas-app      { text-align:center; opacity:.35; transition:opacity .5s ease, transform .5s ease; }
    .bbas-app.is-on { opacity:1; transform:translateY(-2px); }
    .bbas-tile     { width:100%; aspect-ratio:1; border-radius:14px; display:flex;
                     align-items:center; justify-content:center; margin-bottom:5px;
                     background:linear-gradient(145deg, rgba(99,102,241,.35), rgba(99,102,241,.08));
                     border:1px solid rgba(99,102,241,.4); font-size:20px; }
    .bbas-app.is-on .bbas-tile { box-shadow:0 0 14px rgba(99,102,241,.5); }
    .bbas-name     { font-size:8.5px; line-height:1.25; color:#cdd6f4; letter-spacing:.2px; }
    .bbas-bar      { height:4px; border-radius:2px; margin-top:4px; background:rgba(255,255,255,.09);
                     overflow:hidden; }
    .bbas-bar i    { display:block; height:100%; width:0; border-radius:2px;
                     background:linear-gradient(90deg,#6366f1,#a5b4fc); transition:width 1.1s ease; }
    .bbas-app.is-on .bbas-bar i { width:100%; }
    .bbas-to       { margin-top:12px; padding:8px; border-radius:8px; text-align:center;
                     background:rgba(0,0,0,.4); border:1px dashed rgba(99,102,241,.35);
                     font-family:ui-monospace,Consolas,monospace; font-size:10px;
                     letter-spacing:1.4px; color:#6366f1; }
    .bbas-to b     { display:inline-block; color:transparent; background:rgba(99,102,241,.28);
                     border-radius:3px; padding:0 22px; margin-left:6px; }
    @media (prefers-reduced-motion:reduce) {
      .bbas-app, .bbas-bar i { transition:none; }
    }

    /* ── the Den of Temptation ─────────────────────────────────────────
       Not a door and not a box: a booth. One chair, one screen, one person,
       lit red from below the way a confessional never is. The scales are the
       whole idea — what is offered on one side, who pays on the other — and
       they TIP on accept, which is the only motion on the screen. */
    .bbdt          { --bbdt-red:#c9343c; --bbdt-ember:#f0a500; }
    .bbdt-booth    { position:relative; display:flex; align-items:center; justify-content:center;
                     gap:20px; padding:20px 12px 16px; margin-bottom:14px; border-radius:10px;
                     background:radial-gradient(120% 90% at 50% 108%, rgba(201,52,60,.28), rgba(0,0,0,.45) 62%);
                     border:1px solid rgba(201,52,60,.32); overflow:hidden; }
    .bbdt-booth::after { content:''; position:absolute; left:50%; bottom:0; width:60%; height:3px;
                     transform:translateX(-50%); background:linear-gradient(90deg,transparent,#c9343c,transparent);
                     filter:blur(2px); }
    .bbdt-scales   { width:120px; height:74px; }
    .bbdt-scales svg { width:100%; height:100%; display:block; overflow:visible; }
    .bbdt-beam     { transform-origin:60px 22px; transition:transform 1.1s cubic-bezier(.34,1.4,.5,1); }
    .bbdt-booth.is-taken .bbdt-beam { transform:rotate(13deg); }
    .bbdt-booth.is-refused .bbdt-beam { transform:rotate(-9deg); }
    .bbdt-tag      { font-family:ui-monospace,Consolas,monospace; font-size:10px; letter-spacing:1.6px;
                     text-transform:uppercase; color:#c9343c; }
    .bbdt-take     { border-left:3px solid #c9343c !important;
                     background:linear-gradient(90deg, rgba(201,52,60,.16), transparent 62%) !important; }
    .bbdt-refuse   { border-left:3px solid #4ade80 !important;
                     background:linear-gradient(90deg, rgba(74,222,128,.13), transparent 62%) !important; }
    .bbdt-curse    { border-left:3px solid #f0a500 !important;
                     background:linear-gradient(90deg, rgba(240,165,0,.15), transparent 62%) !important; }
    /* the hunt: who pointed at whom, and whether it landed */
    .bbdt-hunt     { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .bbdt-arrow    { display:flex; align-items:center; gap:6px; padding:4px 9px; border-radius:20px;
                     font-size:11px; background:rgba(255,255,255,.05);
                     border:1px solid rgba(255,255,255,.12); }
    .bbdt-arrow.is-right { border-color:rgba(240,165,0,.55); color:#f0a500; }
    .bbdt-arrow i  { font-style:normal; opacity:.5; }
    @media (prefers-reduced-motion:reduce) { .bbdt-beam { transition:none; } }

    /* ── the Bonus Life ────────────────────────────────────────────────
       An arcade extra life, because that is exactly what BB20 called it and
       what the app icon drew. Nothing else in the format is pixel art, so the
       whole screen is deliberately the wrong medium for the show it is in:
       CRT green on black, a heart meter, and a fuse burning down the window.
       The competition is one gauge against one line — you clear it or you do
       not, which is the only honest way to draw a pass/fail run. */
    .bbbl          { --bbbl-lit:#4ade80; --bbbl-dead:#7f1d1d; }
    .bbbl-meter    { display:flex; align-items:center; justify-content:center; gap:14px;
                     padding:16px 12px; margin-bottom:14px; border-radius:10px;
                     background:linear-gradient(180deg, rgba(74,222,128,.06), rgba(0,0,0,.34));
                     border:1px solid rgba(74,222,128,.25); }
    .bbbl-hearts   { display:flex; gap:7px; }
    .bbbl-heart    { width:26px; height:26px; }
    .bbbl-heart svg { width:100%; height:100%; display:block; }
    .bbbl-heart.is-spent svg { opacity:.28; filter:grayscale(1); }
    .bbbl-heart.is-lit svg   { filter:drop-shadow(0 0 9px rgba(74,222,128,.75));
                     animation:bbblBeat 1.4s ease-in-out infinite; }
    @keyframes bbblBeat { 0%,100% { transform:scale(1); } 45% { transform:scale(1.16); } }
    .bbbl-fuse     { flex:1; max-width:220px; height:8px; border-radius:4px; overflow:hidden;
                     background:rgba(255,255,255,.08); position:relative; }
    .bbbl-fuse i   { position:absolute; inset:0 auto 0 0; display:block; border-radius:4px;
                     background:linear-gradient(90deg,#4ade80,#f0a500); transition:width .6s ease; }
    .bbbl-fuse.is-out i { background:linear-gradient(90deg,#f0a500,#c9343c); }
    .bbbl-label    { font-family:ui-monospace,Consolas,monospace; font-size:10px;
                     letter-spacing:1.6px; color:#4ade80; text-transform:uppercase; }
    /* the run: a bar, and the line it has to clear */
    .bbbl-gauge    { position:relative; height:34px; margin:6px 0 2px; border-radius:6px;
                     background:rgba(255,255,255,.06); overflow:hidden;
                     border:1px solid rgba(255,255,255,.1); }
    .bbbl-gauge i  { position:absolute; left:0; top:0; bottom:0; display:block;
                     background:linear-gradient(90deg, rgba(74,222,128,.5), #4ade80);
                     transition:width 1s cubic-bezier(.22,1,.36,1); }
    .bbbl-gauge.is-fail i { background:linear-gradient(90deg, rgba(201,52,60,.5), #c9343c); }
    .bbbl-line     { position:absolute; top:-3px; bottom:-3px; width:2px; background:#e3b341;
                     box-shadow:0 0 8px rgba(227,179,65,.8); }
    .bbbl-line b   { position:absolute; top:-14px; left:50%; transform:translateX(-50%);
                     font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1px; color:#e3b341; white-space:nowrap; }
    .bbbl-hoard    { border-left:3px solid #6b7280 !important; opacity:.9;
                     background:linear-gradient(90deg, rgba(107,114,128,.14), transparent 60%) !important; }
    .bbbl-back     { border-left:3px solid #4ade80 !important;
                     background:linear-gradient(90deg, rgba(74,222,128,.16), transparent 62%) !important; }
    @media (prefers-reduced-motion:reduce) {
      .bbbl-heart.is-lit svg { animation:none; }
      .bbbl-gauge i, .bbbl-fuse i { transition:none; }
    }

    /* ── the Diamond Power of Veto ─────────────────────────────────────
       When the medallion is the diamond, the whole ceremony refracts: the
       broadcast green gives way to ice and violet, the gem carries a moving
       light streak, and a prismatic sweep crosses the stage — the room is
       lit by the stone. Everything gated on .bbvc-dmd so an ordinary
       ceremony never pays for it. */
    .bbvc-dmd .bbvc-title { color:#7ee7ff !important;
                     text-shadow:0 0 22px rgba(126,231,255,.35), 0 0 46px rgba(177,140,255,.2) !important; }
    .bbvc-dmd .bbvc-medalbox { border:1px solid rgba(126,231,255,.35);
                     background:linear-gradient(160deg, rgba(126,231,255,.07), rgba(177,140,255,.06));
                     box-shadow:0 0 24px rgba(126,231,255,.12), inset 0 0 30px rgba(94,125,232,.08); }
    .bbvc-dmd .bbvc-medal { opacity:.85; filter:none; }
    .bbvc-dmd .bbvc-medalbox.is-lit .bbvc-medal { animation:bbvcDmdGlow 2.6s ease-in-out infinite; }
    @keyframes bbvcDmdGlow { 0%,100% { filter:drop-shadow(0 0 6px rgba(126,231,255,.5)); }
                     50% { filter:drop-shadow(0 0 18px rgba(177,140,255,.8)); } }
    .bbvc-dmd .bbvc-medal-t { color:#7ee7ff; text-shadow:0 0 10px rgba(126,231,255,.45); }
    .bbvc-dmd-ray  { animation:bbvcDmdRay 3.2s ease-in-out infinite; }
    @keyframes bbvcDmdRay { 0%,18% { opacity:0; }
                     34% { opacity:.9; } 50%,100% { opacity:0; } }
    /* The prismatic sweep: one band of refracted light crossing the stage. */
    .bbvc-dmd .bbvc-stage { position:relative; overflow:hidden;
                     border:1px solid rgba(126,231,255,.22); border-radius:10px; }
    .bbvc-dmd .bbvc-stage::after { content:''; position:absolute; inset:0;
                     pointer-events:none;
                     background:linear-gradient(115deg, transparent 30%,
                       rgba(126,231,255,.09) 42%, rgba(177,140,255,.12) 50%,
                       rgba(126,231,255,.09) 58%, transparent 70%);
                     background-size:280% 100%;
                     animation:bbvcDmdSweep 5.5s linear infinite; }
    @keyframes bbvcDmdSweep { from { background-position:120% 0; } to { background-position:-160% 0; } }
    /* The rule card: cut glass. A gradient edge, a cold interior, and a
       shimmer that runs once per sweep so the rule reads as an artifact. */
    .bbvc-diamond  { position:relative; overflow:hidden;
                     border:1px solid transparent !important;
                     background:linear-gradient(rgba(9,14,26,.96), rgba(9,14,26,.96)) padding-box,
                       linear-gradient(120deg, #7ee7ff, #5f7de8, #b18cff, #7ee7ff) border-box !important;
                     box-shadow:0 0 22px rgba(94,125,232,.18); }
    .bbvc-diamond::after { content:''; position:absolute; inset:0; pointer-events:none;
                     background:linear-gradient(115deg, transparent 40%,
                       rgba(223,246,255,.10) 50%, transparent 60%);
                     background-size:260% 100%;
                     animation:bbvcDmdSweep 4.2s ease-in-out infinite; }
    .bbvc-dmd-pill { color:#04121f !important;
                     background:linear-gradient(120deg, #7ee7ff, #b18cff) !important;
                     text-shadow:none !important; letter-spacing:1.6px; }
    /* The seizure: the holder keeps the floor. Violet edge, cold wash — a
       power move drawn as one. */
    .bbvc-seize    { border-left:3px solid #b18cff !important;
                     background:linear-gradient(90deg, rgba(177,140,255,.13), transparent 60%) !important;
                     animation:bbvcSeize .5s ease-out both; }
    @keyframes bbvcSeize { from { transform:translateX(-6px); opacity:0; }
                     60% { transform:translateX(2px); } to { transform:none; opacity:1; } }
    /* Replacement + saved slots refract too, so the stage agrees with the
       cards about whose power did this. */
    .bbvc-dmd .bbns-screen.bbvc-slot.is-repl { border-color:rgba(177,140,255,.7);
                     box-shadow:0 0 24px rgba(177,140,255,.3), inset 0 0 40px rgba(94,125,232,.12); }
    .bbvc-dmd .bbns-screen.bbvc-slot.is-repl .bbns-tag { color:#120826; background:#b18cff; }
    .bbvc-dmd .bbvc-stamp { color:#7ee7ff; border-color:#7ee7ff;
                     background:rgba(8,24,33,.6); text-shadow:0 0 12px rgba(126,231,255,.6); }
    @media (prefers-reduced-motion:reduce) {
      .bbvc-dmd .bbvc-stage::after, .bbvc-diamond::after,
      .bbvc-dmd .bbvc-medalbox.is-lit .bbvc-medal,
      .bbvc-dmd-ray, .bbvc-seize { animation:none; }
    }

    /* A nomination that broke a promise. The handshake happened one screen
       earlier, so the ceremony has to acknowledge it or the two scenes are
       telling different stories. */
    .bbns-broke    { margin-top:9px; padding:8px 10px; border-radius:5px;
                     background:rgba(var(--bbx-danger-rgb),.08); border:1px solid rgba(var(--bbx-danger-rgb),.28);
                     font-size:11.5px; line-height:1.5; color:#ffb3ae; }
    .bbns-broke span { display:block; font-family:ui-monospace,Consolas,monospace;
                     font-size:8.5px; letter-spacing:2px; color:rgb(var(--bbx-danger-rgb)); margin-bottom:4px; }
    /* Leaving an alliance is not the same event as breaking a promise to
       somebody, so it does not borrow the broken-promise red. */
    .bbns-exit       { background:rgba(210,153,34,.08); border-color:rgba(210,153,34,.32);
                     color:#e2c17a; }
    .bbns-exit span  { color:#d29922; }
    /* The one nobody in the house knows about. Cold rather than loud. */
    .bbns-quiet      { background:rgba(var(--bbx-info-rgb),.07); border-color:rgba(var(--bbx-info-rgb),.3);
                     color:#a9c9ee; }
    .bbns-quiet span { color:rgb(var(--bbx-info-rgb)); }

    /* An alliance that ENDED this week. It used to just stop being drawn. */
    .bbf-gone      { margin-top:9px; padding-top:8px; border-top:1px dashed #30363d; }
    .bbf-gone-row  { font-size:10.5px; line-height:1.5; color:#8b949e; }
    .bbf-gone-row b { color:#c9d1d9; }

    /* Somebody the alliance threw out, still drawn in the row it happened in
       so the removal has a place to be seen, then gone next episode. */
    .bbb-out       { position:relative; display:inline-block; opacity:.4; filter:grayscale(1); }
    .bbb-out::after{ content:''; position:absolute; left:-1px; right:-1px; top:50%;
                     height:1.5px; background:#f85149; transform:rotate(-12deg); }
    .bbb-out-note  { margin-top:5px; font-size:10.5px; color:#f47067; line-height:1.4; }

    /* The group was asked and said yes. Not a betrayal, so not red. */
    .bbns-signed      { background:rgba(var(--bbx-good-rgb),.07); border-color:rgba(var(--bbx-good-rgb),.28);
                     color:#9fd8ab; }
    .bbns-signed span { color:rgb(var(--bbx-good-rgb)); }

    /* Somebody holding two things at once — HOH who won the veto, nominee who
       took themselves off — needs both badges, side by side across the top of
       the frame. */
    .bbw-mark.is-multi { display:flex; gap:1px; padding:0; }
    .bbw-mark.is-multi b { flex:1; font-weight:800; padding:2px 0; }
    .bbw-m-hoh     { background:#f0a500; color:#1a1206; }
    .bbw-m-nom     { background:#f85149; color:#2a0a08; }
    .bbw-m-veto    { background:#3fb950; color:#08210d; }

    /* ── competition results ───────────────────────────────────────────
       Counted up from last place, so the board fills bottom-up and the last two
       are alone on it. The controls are pinned to the viewport because a
       fourteen-person reveal is fourteen clicks and the button was at the
       bottom of the page for every one of them. */
    .bbc           { padding-bottom:74px; }        /* room for the pinned bar */

    /* What the competition is, which the screen never used to say. */
    .bbc-what      { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
                     border-radius:8px; padding:12px 14px; margin-bottom:14px; }
    .bbc-what-h    { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
    .bbc-what-cat  { font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                     letter-spacing:1.8px; border:1px solid; border-radius:3px; padding:2px 6px; }
    .bbc-what-h b  { font-size:15px; color:#e6edf3; }
    .bbc-what-d    { margin:0 0 10px; font-size:12.5px; line-height:1.55; color:#8b949e; }
    .bbc-what-w    { display:flex; flex-wrap:wrap; gap:7px 14px; margin-bottom:9px; }
    .bbc-stat      { display:flex; align-items:center; gap:6px; font-size:10px; }
    .bbc-stat i    { font-style:normal; color:#8b949e; text-transform:uppercase;
                     letter-spacing:.8px; font-size:8.5px; min-width:64px; }
    .bbc-stat-bar  { width:54px; height:3px; border-radius:2px;
                     background:rgba(255,255,255,.08); overflow:hidden; }
    .bbc-stat-bar b{ display:block; height:100%; border-radius:2px; }
    .bbc-stat u    { text-decoration:none; font-family:ui-monospace,Consolas,monospace;
                     font-size:9px; color:#6e7681; }
    .bbc-what-f    { display:flex; gap:14px; font-family:ui-monospace,Consolas,monospace;
                     font-size:9px; letter-spacing:1px; color:#6e7681;
                     border-top:1px solid rgba(255,255,255,.06); padding-top:8px; }

    /* The board fills from the bottom. */
    .bbc-row.is-hidden { opacity:.16; }
    .bbc-row.is-lit    { animation:bbcIn .28s ease-out both; }
    @keyframes bbcIn { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:none; } }
    .bbc-blank     { display:block; width:26px; height:26px; border-radius:5px;
                     background:rgba(255,255,255,.05); }

    .bbc-verdict   { text-align:center; font-size:12px; color:#f0a500; letter-spacing:.4px;
                     margin:10px 0 4px; }

    /* One card per placement. */
    .bbc-cards     { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
    .bbc-card      { border:1px solid rgba(255,255,255,.08); border-left:3px solid #30363d;
                     border-radius:7px; padding:10px 12px; background:#12181f;
                     animation:bbcIn .3s ease-out both; }
    .bbc-card.is-hidden { opacity:.1; text-align:center; color:#484f58; padding:9px;
                     border-left-color:#30363d; animation:none; }
    .bbc-card.is-second { border-left-color:#58a6ff; }
    .bbc-card.is-threw  { border-left-color:#8b949e; border-style:dashed; }
    .bbc-card.is-win    { border-left-color:#f0a500; background:linear-gradient(90deg,
                     rgba(240,165,0,.10), transparent 60%); }
    .bbc-card header { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
    .bbc-card-pos  { font-family:ui-monospace,Consolas,monospace; font-size:15px;
                     font-weight:700; color:#484f58; min-width:22px; }
    .bbc-card.is-win .bbc-card-pos { color:#f0a500; }
    .bbc-card-tag  { font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                     letter-spacing:1.8px; color:#8b949e; }
    .bbc-card.is-win .bbc-card-tag { color:#f0a500; }
    .bbc-card-threw{ margin-left:auto; font-family:ui-monospace,Consolas,monospace;
                     font-size:8px; letter-spacing:1.4px; color:#8b949e;
                     border:1px dashed rgba(139,148,158,.4); border-radius:3px; padding:1px 5px; }
    .bbc-card-b    { display:flex; align-items:center; gap:11px; }
    .bbc-card-b p  { margin:0; font-size:12.5px; line-height:1.55; color:#c9d1d9; }

    /* Pinned, because the reveal is the whole screen. */
    .bbc-controls  { position:fixed; left:0; right:0; bottom:0; z-index:40;
                     display:flex; align-items:center; justify-content:center; gap:9px;
                     padding:10px 14px; background:rgba(13,17,23,.94);
                     border-top:1px solid rgba(255,255,255,.09);
                     backdrop-filter:blur(8px); }
    .bbc-count     { font-family:ui-monospace,Consolas,monospace; font-size:10px;
                     letter-spacing:1.2px; color:#6e7681; }
    .bbc-done      { font-size:11px; color:#6e7681; letter-spacing:.6px; }

    @media (prefers-reduced-motion:reduce) {
      .bbc-row.is-lit, .bbc-card { animation:none; }
    }

    /* ── the house meeting ─────────────────────────────────────────────
       Everybody in one room, so the card is the room: the caller on the left,
       the person it is about on the right, and the whole house standing
       between them deciding whether to speak. The four outcomes are coloured
       differently because they leave the house in different places. */
    .bbf-meet      { position:relative; margin:14px 0; padding:14px 16px 12px;
                     border-radius:8px; background:#12181f;
                     border:1px solid rgba(255,255,255,.09);
                     border-left:4px solid var(--meet, #8b949e); }
    .bbf-meet.is-lands  { --meet:#e3b341; }
    .bbf-meet.is-turns  { --meet:#f85149; }
    .bbf-meet.is-silent { --meet:#58a6ff; }
    .bbf-meet.is-flat   { --meet:#6e7681; }
    .bbf-meet-h    { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
    .bbf-meet-call { font-family:ui-monospace,Consolas,monospace; font-size:10px;
                     letter-spacing:3px; font-weight:700; color:var(--meet);
                     text-shadow:0 0 14px color-mix(in srgb, var(--meet) 45%, transparent); }
    .bbf-meet-room { display:flex; align-items:center; gap:12px; margin-bottom:11px; }
    .bbf-meet-who  { margin:0; text-align:center; flex-shrink:0; }
    .bbf-meet-who .bb-av { border:2px solid var(--meet); border-radius:6px; }
    .bbf-meet-who.is-about .bb-av { border-color:rgba(255,255,255,.25); }
    .bbf-meet-who figcaption { font-size:10px; color:#c9d1d9; margin-top:4px; line-height:1.3; }
    .bbf-meet-who figcaption i { display:block; font-style:normal; font-size:8px;
                     letter-spacing:1.1px; text-transform:uppercase; color:#6e7681; }
    /* The house itself: a crowd, deliberately smaller than the two who matter. */
    .bbf-meet-crowd{ flex:1; min-width:0; display:flex; align-items:center;
                     flex-wrap:wrap; gap:3px; padding:7px 9px; border-radius:6px;
                     background:rgba(255,255,255,.03);
                     border:1px dashed rgba(255,255,255,.08); }
    .bbf-meet-face .bb-av { border-radius:4px; opacity:.75; }
    .bbf-meet.is-silent .bbf-meet-face .bb-av { opacity:.4; filter:grayscale(1); }
    .bbf-meet-count{ width:100%; font-family:ui-monospace,Consolas,monospace;
                     font-size:8.5px; letter-spacing:1.2px; color:#6e7681; margin-top:4px; }
    /* The meeting as a sequence: a spine down the left, one beat per step, the
       speaker's face where somebody speaks and a node where the room does. */
    .bbf-meet-beats{ list-style:none; margin:0 0 11px; padding:0 0 0 4px;
                     position:relative; }
    .bbf-meet-beats::before { content:''; position:absolute; left:14px; top:10px; bottom:10px;
                     width:1px; background:linear-gradient(180deg,
                       transparent, rgba(255,255,255,.14) 12%, rgba(255,255,255,.14) 88%, transparent); }
    .bbf-meet-beats li { position:relative; display:flex; gap:10px; align-items:flex-start;
                     padding:6px 0; }
    .bbf-meet-b-who{ flex-shrink:0; width:22px; z-index:1; }
    .bbf-meet-b-who .bb-av { border-radius:4px; border:1px solid rgba(255,255,255,.18); }
    .bbf-meet-b-dot{ flex-shrink:0; width:22px; height:22px; border-radius:50%; z-index:1;
                     background:#12181f; border:1px solid rgba(255,255,255,.16);
                     position:relative; }
    .bbf-meet-b-dot::after { content:''; position:absolute; inset:7px; border-radius:50%;
                     background:var(--meet); opacity:.55; }
    .bbf-meet-b-txt{ font-size:12.5px; line-height:1.55; color:#c9d1d9; padding-top:2px; }
    /* The two loudest steps carry the accent. */
    .bbf-meet-beats li.is-case .bbf-meet-b-txt,
    .bbf-meet-beats li.is-answer .bbf-meet-b-txt { color:#e6edf3; }
    .bbf-meet-beats li.is-verdict .bbf-meet-b-txt { color:var(--meet); font-size:12px; }
    .bbf-meet-beats li.is-assemble .bbf-meet-b-txt { color:#8b949e; font-size:11.5px; }

    .bbf-meet-txt  { font-size:13px; line-height:1.6; color:#c9d1d9; margin-bottom:10px; }
    .bbf-meet-out  { display:flex; flex-direction:column; gap:2px;
                     padding-top:9px; border-top:1px solid rgba(255,255,255,.07); }
    .bbf-meet-out span { font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
                     color:#6e7681; font-family:ui-monospace,Consolas,monospace; }
    .bbf-meet-out b{ font-size:12px; color:var(--meet); font-weight:600; }
    @media (max-width:700px) {
      .bbf-meet-room { flex-wrap:wrap; }
      .bbf-meet-crowd { order:3; width:100%; }
    }

    /* ── THE HOUSE GAZETTE ──────────────────────────────────────────────
       A front page, printed on paper, pasted into a very dark screen. The
       contrast is the point: every other panel here is a lit surface reporting
       state, and this one is an object reporting news. Newsprint means real
       newsprint — a warm stock, hairline column rules, ink that is never pure
       black, and photographs that have been through a press. */
    .bbgz          { background:#f4efe4; color:#1b1815; border-radius:3px; padding:20px 22px 18px;
                     margin:0 0 16px; font-family:Georgia,'Iowan Old Style','Times New Roman',serif;
                     box-shadow:0 18px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5);
                     /* The fibre in the stock. */
                     background-image:
                       repeating-linear-gradient(90deg, rgba(120,100,70,.035) 0 1px, transparent 1px 3px),
                       repeating-linear-gradient(0deg, rgba(120,100,70,.028) 0 1px, transparent 1px 4px); }
    .bbgz-masthead { display:flex; align-items:center; gap:12px; }
    .bbgz-rule     { flex:1; height:0; border-top:3px double #1b1815; }
    .bbgz-title    { font-size:34px; line-height:1; letter-spacing:.5px; font-weight:700;
                     font-variant:small-caps; white-space:nowrap; }
    .bbgz-dateline { display:flex; justify-content:center; gap:9px; flex-wrap:wrap;
                     font-size:9.5px; letter-spacing:2.4px; text-transform:uppercase;
                     font-family:ui-monospace,Consolas,monospace; color:#6b5f4c;
                     border-bottom:1px solid #1b1815; padding:7px 0 8px; margin-bottom:14px; }

    /* Kickers carry the only colour on the page, the way a masthead spot does. */
    .bbgz-kicker   { display:inline-block; font-family:ui-monospace,Consolas,monospace;
                     font-size:9px; letter-spacing:2.2px; font-weight:700; color:#f4efe4;
                     background:#1b1815; padding:2.5px 8px; margin-bottom:7px; }
    .bbgz-k-eviction .bbgz-kicker { background:#8c1c13; }
    .bbgz-k-betrayal .bbgz-kicker { background:#6b2d5c; }
    .bbgz-k-survival .bbgz-kicker { background:#1f6f43; }
    .bbgz-k-romance  .bbgz-kicker { background:#a8434f; }
    .bbgz-k-power    .bbgz-kicker { background:#8a6516; }
    .bbgz-k-split    .bbgz-kicker { background:#1c4f7c; }
    .bbgz-k-feud     .bbgz-kicker { background:#8a3a12; }

    .bbgz-lead     { display:flex; gap:20px; align-items:flex-start;
                     border-bottom:2px solid #1b1815; padding-bottom:15px; margin-bottom:14px; }
    .bbgz-lead-body{ flex:1; min-width:0; }
    .bbgz-hed      { font-size:31px; line-height:1.06; font-weight:700; margin:0 0 8px;
                     letter-spacing:-.4px; color:#12100e; }
    .bbgz-standfirst{ font-size:14px; line-height:1.5; margin:0; color:#3a332a; }
    .bbgz-standfirst.no-drop::first-letter { font-size:inherit; float:none; line-height:inherit; margin:0; padding:0; font-weight:inherit; }
    .bbgz-standfirst:not(.no-drop)::first-letter { font-size:31px; float:left; line-height:.86;
                     padding:2px 6px 0 0; font-weight:700; color:#12100e; }

    /* Three columns of newsprint, with the hairline rules between them. */
    .bbgz-cols     { column-count:3; column-gap:16px; column-rule:1px solid rgba(27,24,21,.22); }
    .bbgz-story    { break-inside:avoid; margin:0 0 14px; }
    .bbgz-hed-sm   { font-size:16px; line-height:1.13; font-weight:700; margin:0 0 5px; color:#12100e; }
    .bbgz-body     { font-size:11.5px; line-height:1.48; margin:0; color:#443c31;
                     hyphens:auto; text-align:justify; }

    /* Press photographs: dotted, over-inked, and slightly off-square. */
    .bbgz-cuts     { display:flex; gap:8px; margin-top:8px; }
    .bbgz-cut      { margin:0; }
    .bbgz-cut .bb-av { border-radius:1px; border:1px solid #1b1815;
                     filter:grayscale(1) contrast(1.5) brightness(1.06); }
    .bbgz-cut.is-lead .bb-av { box-shadow:3px 3px 0 rgba(27,24,21,.28); }
    .bbgz-cut figcaption { font-family:ui-monospace,Consolas,monospace; font-size:8px;
                     letter-spacing:.8px; text-transform:uppercase; color:#6b5f4c;
                     margin-top:3px; text-align:center; max-width:92px;
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    .bbgz-brief    { border-top:3px double #1b1815; margin-top:4px; padding-top:9px; }
    .bbgz-brief-h  { font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:2.4px; font-weight:700; color:#6b5f4c; }
    .bbgz-brief ul { margin:6px 0 0; padding:0 0 0 15px; }
    .bbgz-brief li { font-size:11px; line-height:1.5; color:#443c31; margin-bottom:2px; }

    @media (max-width:760px) {
      .bbgz-cols   { column-count:1; }
      .bbgz-lead   { flex-direction:column; }
      .bbgz-title  { font-size:24px; white-space:normal; }
      .bbgz-hed    { font-size:24px; }
    }

    /* ── power structures ─────────────────────────────────────────────
       A group's danger is its size times how many people have noticed it, so
       the exposure bar is the whole point of the row rather than decoration. */
    .bbb-row       { padding:7px 9px; margin-bottom:6px; border-radius:4px;
                     background:rgba(210,168,255,.05); }
    .bbb-head      { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:5px; }
    .bbb-kind      { font-family:ui-monospace,Consolas,monospace; font-size:8px;
                     letter-spacing:1.4px; color:#d2a8ff; border:1px solid rgba(210,168,255,.35);
                     border-radius:3px; padding:1px 5px; }
    .bbb-state     { margin-left:auto; font-family:ui-monospace,Consolas,monospace;
                     font-size:8.5px; letter-spacing:1.4px; }
    .bbb-faces     { display:flex; align-items:center; gap:3px; margin-bottom:5px; }
    .bbb-votes     { margin-left:6px; font-size:10px; color:#8b949e; }
    /* The caption under this bar used to be position:absolute inside a 4px-tall
       track, so it occupied NO layout space and everything after it had to
       guess a margin — .bbb-hunt guessed 14px, which is already too small for
       the two-line captions this thing usually renders. Anything else added
       below the bar then wrote straight over it. The track is a ::before now
       and the caption flows normally, so it takes the room it needs and
       whatever follows sits under it at one line or three. */
    .bbb-bar         { position:relative; margin-bottom:3px; }
    .bbb-bar::before { content:''; display:block; height:4px; border-radius:2px;
                       background:rgba(255,255,255,.07); }
    .bbb-bar i       { position:absolute; top:0; left:0; height:4px;
                       border-radius:2px; opacity:.85; }
    .bbb-bar span    { display:block; margin-top:4px; font-size:9px; color:#6e7681;
                       letter-spacing:.3px; line-height:1.35; }
    .bbb-hunt      { margin-top:8px; font-size:10px; color:#f85149; letter-spacing:.2px; }

    .bbg-chips      { display:flex; flex-wrap:wrap; gap:5px; }
    .bbg-chip       { font-size:10px; line-height:1.5; padding:2px 7px; border-radius:9px;
                      border:1px solid rgba(255,255,255,.09); color:#c9d1d9;
                      background:rgba(255,255,255,.03); }
    .bbg-chip b     { font-weight:600; }
    .bbg-t          { border-color:rgba(248,81,73,.4);  color:#ffb3ae; background:rgba(248,81,73,.09); }
    .bbg-s          { border-color:rgba(88,166,255,.4); color:#a9d1ff; background:rgba(88,166,255,.09); }
    .bbg-g          { border-color:rgba(63,185,80,.4);  color:#9ae6a6; background:rgba(63,185,80,.09); }
    .bbg-d          { border-color:rgba(227,179,65,.45);color:#f0d48a; background:rgba(227,179,65,.1); }
    .bbg-n          { color:#5b6472; font-style:italic; }

    .bbg-deal       { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 9px;
                      margin-bottom:6px; border-radius:6px;
                      border:1px solid rgba(227,179,65,.22); background:rgba(227,179,65,.05); }
    .bbg-deal.is-f2 { border-color:rgba(227,179,65,.5); background:rgba(227,179,65,.1); }
    /* A promise that did not survive the week. Struck through, because it is
       still a fact about the season — it just is not a plan any more. */
    .bbg-deal.is-broken { border-color:rgba(248,81,73,.45); background:rgba(248,81,73,.07); }
    .bbg-deal.is-broken .bbg-tier { background:#f85149; color:#2a0a08; }
    .bbg-deal.is-broken .bbg-who b { text-decoration:line-through; opacity:.75; }
    .bbg-deal.is-broken .bbg-warn  { color:#f85149; }
    .bbg-tier       { font-family:ui-monospace,Consolas,monospace; font-size:8.5px; font-weight:800;
                      letter-spacing:1.1px; color:#1a1206; background:#e3b341;
                      padding:2px 6px; border-radius:3px; flex-shrink:0; }
    .bbg-who        { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#e6edf3; }
    .bbg-who i      { font-style:normal; color:#6e7681; margin:0 2px; }
    .bbg-warn       { flex:1; text-align:right; font-size:10px; color:#d29922; font-style:italic; }
    .bbg-ok         { flex:1; text-align:right; font-size:10px; color:#4d545c; font-style:italic; }

    /* ── The nomination ceremony ──
       The screens are the set piece, so they stay put: a sticky stage of one
       big panel per nomination, blank with a question mark until its key turns,
       with the memory wall alongside for the rest of the house. Controls are
       pinned to the bottom, so the ceremony plays without the page moving. */
    .bbns          { padding-bottom:76px; }

    .bbns-stage    { position:sticky; top:46px; z-index:6; display:flex; gap:14px;
                     align-items:stretch; margin:0 0 18px; padding:14px;
                     border-radius:12px; border:1px solid rgba(var(--bbx-danger-rgb),.2);
                     background:linear-gradient(180deg, rgba(var(--bbx-stage-rgb),.98), rgba(var(--bbx-stage2-rgb),.99));
                     box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 0 70px rgba(0,0,0,.45);
                     backdrop-filter:blur(8px); }
    .bbns-stage.is-locked { border-color:rgba(var(--bbx-danger-rgb),.45);
                     box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 0 70px rgba(var(--bbx-danger-rgb),.09); }

    /* The screens. */
    .bbns-screens  { flex:1; display:grid; gap:12px;
                     grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
    .bbns-screen   { position:relative; border-radius:9px; overflow:hidden; aspect-ratio:3/4;
                     background:linear-gradient(180deg, rgb(var(--bbx-screen-rgb)), rgb(var(--bbx-screen2-rgb)));
                     border:1px solid rgba(255,255,255,.07);
                     box-shadow:inset 0 0 40px rgba(0,0,0,.7); }
    /* A dead screen still hums. */
    .bbns-screen::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
                     background:repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
    .bbns-num      { position:absolute; top:6px; left:7px; z-index:2;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px;
                     letter-spacing:1.2px; color:var(--bbx-faint); }
    .bbns-inner    { position:absolute; inset:0; display:flex; flex-direction:column;
                     align-items:center; justify-content:center; gap:5px; }
    .bbns-q        { font-family:var(--bbx-display); font-size:52px; line-height:1; color:var(--bbx-glyph);
                     text-shadow:0 0 26px rgba(var(--bbx-info-rgb),.12); animation:bbns-pulse 2.8s ease-in-out infinite; }
    @keyframes bbns-pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
    .bbns-wait     { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.4px; color:#2c3540; }

    .bbns-screen.is-on { border-color:rgba(var(--bbx-danger-rgb),.65);
                     background:linear-gradient(180deg, rgba(60,16,14,.9), rgba(20,8,8,.98));
                     box-shadow:0 0 26px rgba(var(--bbx-danger-rgb),.3), inset 0 0 46px rgba(var(--bbx-danger-rgb),.12);
                     animation:bbns-flash .62s ease-out both; }
    @keyframes bbns-flash {
      0%   { filter:brightness(3.4); transform:scale(1.05); }
      35%  { filter:brightness(1.2); }
      100% { filter:none; transform:none; }
    }
    .bbns-shot .bb-av { width:104px !important; height:104px !important; border-radius:6px; }
    .bbns-name     { font-family:var(--bbx-display); font-size:16px; letter-spacing:1px; color:#fff;
                     text-shadow:0 2px 10px rgba(0,0,0,.8); }
    .bbns-tag      { font-family:ui-monospace,Consolas,monospace; font-size:7.5px; font-weight:800;
                     letter-spacing:1.6px; color:#2a0a08; background:rgb(var(--bbx-danger-rgb));
                     padding:2px 7px; border-radius:2px; }

    /* The wall, beside it. */
    .bbns-wall     { width:186px; flex-shrink:0; display:flex; flex-direction:column; gap:7px;
                     padding:9px; border-radius:8px; background:rgba(255,255,255,.02);
                     border:1px solid rgba(255,255,255,.05); }
    .bbns-wall-h   { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.6px; color:#5b6472; text-align:center; }
    .bbns-wall-grid{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
    .bbns-cell     { display:inline-flex; border-radius:3px; overflow:hidden;
                     box-shadow:0 0 0 1px rgba(255,255,255,.06); transition:box-shadow .25s ease; }
    .bbns-cell.is-out .bb-av img { filter:grayscale(1) brightness(.34); }
    .bbns-cell.is-nom { box-shadow:0 0 0 2px rgb(var(--bbx-danger-rgb)), 0 0 12px rgba(var(--bbx-danger-rgb),.55); }
    .bbns-keys     { display:flex; align-items:center; gap:5px; justify-content:center; margin-top:auto;
                     padding-top:7px; border-top:1px solid rgba(255,255,255,.05); }
    .bbns-kh       { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.05);
                     box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); transition:all .25s ease; }
    .bbns-kh.is-turned { background:rgb(var(--bbx-key-rgb)); box-shadow:0 0 9px rgba(var(--bbx-key-rgb),.7); }
    .bbns-kc       { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1px; color:#5b6472; margin-left:3px; }

    /* The cards. */
    .bbns-feed     { display:flex; flex-direction:column; gap:8px; }
    .bbns-card     { border-radius:8px; padding:11px 13px;
                     background:linear-gradient(180deg, rgba(var(--bbx-card-rgb),.85), rgba(var(--bbx-card2-rgb),.9));
                     border:1px solid rgba(255,255,255,.06);
                     border-left:3px solid rgba(var(--bbx-dim-rgb),.4);
                     box-shadow:0 2px 12px rgba(0,0,0,.3);
                     animation:bbns-in .35s ease-out both; }
    @keyframes bbns-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
    .bbns-card.is-hidden { display:flex; align-items:center; justify-content:center; padding:9px;
                     opacity:.1; border-left-color:transparent; animation:none;
                     font-family:var(--font-display); font-size:15px; color:var(--muted); }
    .bbns-card.is-open   { border-left-color:rgb(var(--bbx-dim-rgb)); }
    .bbns-card.is-key    { border-left-color:rgb(var(--bbx-danger-rgb));
                     background:linear-gradient(100deg, rgba(var(--bbx-danger-rgb),.13), rgba(var(--bbx-card2-rgb),.9) 58%); }
    .bbns-card.is-reason { border-left-color:rgb(var(--bbx-note-rgb));
                     background:linear-gradient(100deg, rgba(var(--bbx-note-rgb),.11), rgba(var(--bbx-card2-rgb),.9) 58%); }
    .bbns-card.is-final  { border-left-color:rgb(var(--bbx-danger-rgb)); border-color:rgba(var(--bbx-danger-rgb),.3);
                     background:linear-gradient(180deg, rgba(60,16,14,.5), rgba(var(--bbx-card2-rgb),.92)); }
    .bbns-card-h   { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
    .bbns-card-b   { font-size:13px; line-height:1.62; color:var(--bbx-ink); }
    .bbns-card.is-reason .bbns-card-b { font-size:14px; color:var(--bbx-ink-quiet); font-style:italic; }
    .bbns-pill     { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     font-weight:800; letter-spacing:1.3px; padding:3px 8px; border-radius:3px;
                     background:rgba(255,255,255,.06); color:rgb(var(--bbx-dim-rgb)); }
    .bbns-pill.red  { background:rgb(var(--bbx-danger-rgb)); color:#2a0a08; }
    .bbns-pill.gold { background:rgb(var(--bbx-note-rgb)); color:#1a1206; }
    .bbns-pill.green{ background:rgb(var(--bbx-good-rgb)); color:#08210d; }
    .bbns-pill.blue { background:rgb(var(--bbx-info-rgb)); color:#06203f; }
    .bbns-pill.purple { background:#a371f7; color:#1b0b34; }
    .bbns-pill.orange { background:#f0883e; color:#2a1405; }

    /* Pinned controls: the ceremony plays without the page moving. */
    .bbns-controls { position:fixed; left:0; right:0; bottom:0; z-index:40;
                     display:flex; gap:9px; align-items:center; justify-content:center;
                     padding:11px 16px; background:rgba(7,9,13,.95);
                     border-top:1px solid rgba(var(--bbx-danger-rgb),.22); backdrop-filter:blur(14px); }
    .bbns-count    { font-family:ui-monospace,Consolas,monospace; font-size:10px;
                     letter-spacing:1px; color:#6e7681; }
    .bbns-done     { font-size:11px; letter-spacing:.6px; color:rgb(var(--bbx-dim-rgb)); }

    @media (max-width: 760px) {
      .bbns-stage  { flex-direction:column; }
      .bbns-wall   { width:auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      .bbns-q, .bbns-screen.is-on, .bbns-card { animation:none; }
      .bbns-cell, .bbns-kh { transition:none; }
    }

    /* ── The count going in ──
       Prefixed bbct- rather than bbvp-: the latter is a tripwire. A test
       asserts no screen contains it, to stop anybody rebuilding a private Big
       Brother visual-player kit instead of using the shared one. */
       Total Drama shows a vote as a set of plans before it shows it as a
       result. A house went straight to reading ballots, so a blindside arrived
       with no setup and read as an accident. Every number here is what a
       houseguest BELIEVES, which is the only reason the ballots mean anything. */
    .bbvp          { margin:0 0 16px; padding:12px; border-radius:10px;
                     border:1px solid rgba(88,166,255,.2); background:rgba(88,166,255,.04); }
    .bbct-h        { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .bbct-t        { font-family:ui-monospace,Consolas,monospace; font-size:9px; font-weight:800;
                     letter-spacing:1.7px; color:rgb(var(--bbx-info-rgb)); }
    .bbct-m        { margin-left:auto; font-family:ui-monospace,Consolas,monospace;
                     font-size:9px; letter-spacing:1px; color:#6e7681; }

    .bbct-sides    { display:flex; gap:10px; margin-bottom:12px; }
    .bbct-side     { flex:1; padding:9px; border-radius:8px; background:rgba(255,255,255,.02);
                     border:1px solid rgba(255,255,255,.06); }
    .bbct-side.is-ahead { border-color:rgba(var(--bbx-danger-rgb),.45); background:rgba(var(--bbx-danger-rgb),.07); }
    .bbct-side-h   { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
    .bbct-side-n   { font-size:12px; font-weight:600; color:#e6edf3; }
    .bbct-side-c   { margin-left:auto; font-family:var(--bbx-display); font-size:21px; color:rgb(var(--bbx-danger-rgb)); }
    .bbct-side-f   { display:flex; flex-wrap:wrap; gap:3px; min-height:24px; }
    .bbct-side-f i { font-style:italic; font-size:10px; color:#4d545c; }

    .bbct-rows     { display:flex; flex-direction:column; }
    .bbct-row      { display:flex; align-items:center; gap:7px; padding:4px 2px;
                     border-bottom:1px solid rgba(255,255,255,.04); font-size:11px; }
    .bbct-row:last-child { border-bottom:0; }
    .bbct-v        { font-weight:600; color:#e6edf3; min-width:74px; }
    .bbct-arrow    { color:#4d545c; font-size:9.5px; }
    .bbct-tgt      { color:#ffb3ae; font-weight:600; min-width:74px; }
    .bbct-why      { flex:1; color:#6e7681; font-size:10px; font-style:italic; }
    .bbct-firm     { font-family:ui-monospace,Consolas,monospace; font-size:8px; font-weight:700;
                     letter-spacing:1px; padding:2px 6px; border-radius:3px; text-transform:uppercase; }
    .bbct-firm.is-firm  { background:rgba(var(--bbx-good-rgb),.14);  color:#7ee787; }
    .bbct-firm.is-soft  { background:rgba(var(--bbx-key-rgb),.14); color:rgb(var(--bbx-key-rgb)); }
    .bbct-firm.is-loose { background:rgba(var(--bbx-danger-rgb),.14);  color:#ffb3ae; }
    .bbct-belief   { font-family:ui-monospace,Consolas,monospace; font-size:9px; color:#6e7681;
                     min-width:84px; text-align:right; }
    .bbct-belief b { color:#c9d1d9; font-size:11px; }
    .bbct-belief i { font-style:normal; color:#4d545c; }
    .bbct-belief.is-sure b { color:rgb(var(--bbx-info-rgb)); }
    .bbct-foot     { margin-top:9px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.07);
                     font-size:9.5px; color:#4d545c; text-align:center; font-style:italic; }

    /* The reckoning, once the votes are read. */
    .bbct-verdict  { margin:16px 0 0; padding:12px; border-radius:10px;
                     border:1px solid rgba(var(--bbx-danger-rgb),.35); background:rgba(var(--bbx-danger-rgb),.06); }
    .bbct-verdict .bbct-t { color:rgb(var(--bbx-danger-rgb)); }
    .bbct-row.is-wrong .bbct-why { color:rgb(var(--bbx-dim-rgb)); font-style:normal; }
    .bbct-row.is-wrong .bbct-why b { color:#ffb3ae; }

    @media (max-width: 640px) { .bbct-sides { flex-direction:column; } }

    /* ── the vote as an operation: the four Voting Plans sections ──
       Alliance plans read like rooms — a header naming the target, the
       organiser's line in their own voice, and one row per member's answer.
       Recruitment reads like fieldwork; a lie gets an audience-only strip. */
    .bbop-sec      { margin:0 0 16px; padding:12px; border-radius:10px;
                     border:1px solid rgba(255,255,255,.08); background:rgba(13,17,23,.55); }
    .bbop-plan     { margin:10px 0 0; padding:10px; border-radius:8px;
                     border:1px solid rgba(var(--bbx-info-rgb),.18); background:rgba(var(--bbx-info-rgb),.04); }
    .bbop-plan-h   { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
    .bbop-aname    { font-family:var(--bbx-display); font-size:14px; letter-spacing:.5px; color:#e6edf3; }
    .bbop-wants    { font-size:10px; color:#6e7681; text-transform:uppercase; letter-spacing:1px; }
    .bbop-tname    { font-size:12.5px; font-weight:600; color:#ffb3ae; }
    .bbop-tag      { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                     letter-spacing:1.2px; padding:3px 8px; border-radius:8px; }
    .bbop-tag.is-holds  { background:rgba(var(--bbx-good-rgb),.15);  color:#7ee2a8; border:1px solid rgba(var(--bbx-good-rgb),.4); }
    .bbop-tag.is-thinks { background:rgba(var(--bbx-note-rgb),.12);  color:#f0c674; border:1px solid rgba(var(--bbx-note-rgb),.4); }
    .bbop-tag.is-short  { background:rgba(var(--bbx-danger-rgb),.1);   color:#ffb3ae; border:1px solid rgba(var(--bbx-danger-rgb),.35); }
    .bbop-organizer{ margin:8px 0 6px; font-size:12px; line-height:1.55; color:#c9d1d9;
                     display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .bbop-members  { display:flex; flex-wrap:wrap; gap:6px; }
    .bbop-member   { display:flex; align-items:center; gap:5px; padding:3px 8px 3px 4px;
                     border-radius:14px; background:rgba(255,255,255,.03);
                     border:1px solid rgba(255,255,255,.07); font-size:11px; color:#c9d1d9; }
    .bbop-member i { color:#6e7681; font-size:10px; }
    .bbop-mname    { font-weight:600; }
    .bbop-count    { margin:10px 0 4px; font-size:12px; line-height:1.6; color:#c9d1d9;
                     display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
    .bbop-approach { margin:6px 0 0 12px; padding:8px 10px; border-radius:8px;
                     border:1px dashed rgba(255,255,255,.12); background:rgba(255,255,255,.02); }
    .bbop-approach-h{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .bbop-arrow    { color:#6e7681; font-size:11px; }
    .bbop-arg      { margin-top:6px; font-size:11.5px; line-height:1.6; color:rgb(var(--bbx-dim-rgb)); font-style:italic; }
    .bbop-secret   { margin-top:6px; padding:5px 9px; border-radius:6px; font-size:10.5px;
                     background:rgba(var(--bbx-danger-rgb),.08); border-left:3px solid rgba(var(--bbx-danger-rgb),.5); color:#ffb3ae; }

    /* ── THE EXIT INTERVIEW: a studio, a desk, a monitor ──
       The walk-out, the sit-down, the goodbye messages as TV frames with the
       camera held on the person watching them. */
    .biv-stage     { margin:0 0 16px; padding:12px 14px 10px; border-radius:12px;
                     border:1px solid rgba(201,52,60,.4); background:
                     radial-gradient(ellipse at 50% -30%, rgba(201,52,60,.16), transparent 60%),
                     linear-gradient(180deg, #160b0d, #0d1117 75%); }
    .biv-stage.is-done { border-color:rgba(255,255,255,.14); }
    .biv-strip     { display:flex; align-items:center; gap:12px; margin-bottom:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .biv-onair     { display:inline-flex; align-items:center; gap:5px; color:#f85149;
                     border:1px solid rgba(248,81,73,.5); border-radius:4px; padding:2px 8px; }
    .biv-onair i   { width:6px; height:6px; border-radius:50%; background:#f85149;
                     animation:bbarBlink 1.2s steps(2) infinite; }
    .is-done .biv-onair { color:#8b949e; border-color:rgba(255,255,255,.18); }
    .is-done .biv-onair i { background:#6e7681; animation:none; }
    .biv-show      { color:#e8b4b8; }
    .biv-wk        { margin-left:auto; color:#6e7681; }
    .biv-desk      { display:flex; align-items:stretch; justify-content:center; gap:14px; }
    .biv-seat      { text-align:center; }
    .biv-frame     { display:flex; justify-content:center; }
    .biv-frame img { border-radius:10px; border:2px solid rgba(255,255,255,.14); }
    .biv-frame.is-evicted img { border-color:rgba(248,81,73,.55); }
    .biv-name      { font-family:var(--font-display); font-size:13px; color:#e6edf3; margin-top:4px; }
    .biv-role      { font-family:ui-monospace,Consolas,monospace; font-size:7.5px; letter-spacing:1.6px;
                     color:#8b949e; margin-top:2px; }
    .biv-monitor   { flex:0 1 220px; display:flex; flex-direction:column; border-radius:8px; overflow:hidden;
                     border:1px solid rgba(255,255,255,.16); background:#05070a; }
    .biv-mon-screen{ flex:1; display:flex; align-items:center; justify-content:center; min-height:74px;
                     background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), #05070a; }
    .biv-mon-idle  { font-family:var(--font-display); font-size:20px; color:#22303e; letter-spacing:4px; }
    .biv-monitor.is-live .biv-mon-screen { box-shadow:inset 0 0 26px rgba(201,52,60,.14); }
    .biv-mon-tag   { padding:3px 0; text-align:center; font-family:ui-monospace,Consolas,monospace;
                     font-size:7px; letter-spacing:1.8px; color:#6e7681; border-top:1px solid rgba(255,255,255,.09); }
    .biv-crowd     { display:flex; align-items:center; gap:12px; margin-top:11px; }
    .biv-lights    { display:flex; gap:4px; flex:1; }
    .biv-lights i  { flex:1; height:4px; border-radius:2px; background:rgba(201,52,60,.5);
                     animation:bivPulse 2.2s ease-in-out infinite; }
    @keyframes bivPulse { 50% { opacity:.25; } }
    .biv-crowd-t   { font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px; color:#8b949e; }
    /* Q&A as a conversation, not a list */
    .biv-qa        { display:flex; flex-direction:column; gap:7px; }
    .biv-q, .biv-a { display:flex; align-items:flex-end; gap:7px; }
    .biv-a         { justify-content:flex-end; }
    .biv-bubble    { max-width:82%; padding:8px 11px; border-radius:12px; font-size:12.5px; line-height:1.6; }
    .biv-bubble.is-host  { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
                     border-bottom-left-radius:3px; color:#c9d1d9; }
    .biv-bubble.is-guest { background:rgba(201,52,60,.1); border:1px solid rgba(201,52,60,.3);
                     border-bottom-right-radius:3px; color:#e6edf3; }
    .biv-flag      { align-self:flex-start; margin-top:2px; }
    /* the truth panel */
    .biv-truth .bbns-card-b { display:flex; flex-direction:column; gap:7px; }
    .biv-truth-row { display:flex; align-items:center; gap:8px; font-size:12px; line-height:1.55;
                     padding:6px 9px; border-radius:7px; background:rgba(240,165,0,.06);
                     border-left:3px solid rgba(240,165,0,.5); }
    .biv-truth-react { font-style:italic; color:#e8b4b8; padding-top:4px; }
    /* the goodbye messages: TV frames */
    .biv-bye       { padding:0; overflow:hidden; }
    .biv-tv        { border-radius:8px 8px 0 0; overflow:hidden; background:#05070a; }
    .biv-tv-top    { display:flex; align-items:center; gap:10px; padding:5px 10px;
                     font-family:ui-monospace,Consolas,monospace; font-size:7.5px; letter-spacing:1.6px;
                     color:#8b949e; border-bottom:1px solid rgba(255,255,255,.08); }
    .biv-rec       { display:inline-flex; align-items:center; gap:4px; color:#f85149; }
    .biv-rec i     { width:5px; height:5px; border-radius:50%; background:#f85149;
                     animation:bbarBlink 1.4s steps(2) infinite; }
    .biv-tv-top .bbns-pill { margin-left:auto; }
    .biv-tv-screen { display:flex; align-items:flex-start; gap:11px; padding:12px;
                     background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px), #070a0f; }
    .biv-tv-screen img { border-radius:8px; flex-shrink:0; }
    .biv-tv-text   { font-size:12.5px; line-height:1.65; color:#dbe3ea; }
    .biv-tv-bar    { padding:4px 12px; font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.8px; color:#6e7681; border-top:1px solid rgba(255,255,255,.08); }
    .biv-bye.is-confess .biv-tv-bar { color:#f0c674; }
    .biv-bye.is-cold .biv-tv-bar    { color:#ffb3ae; }
    .biv-bye.is-warm .biv-tv-bar    { color:#7ee2a8; }
    .biv-montage-faces { display:flex; gap:4px; flex-wrap:wrap; flex-shrink:0; max-width:120px; }
    .biv-react     { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:11.5px;
                     font-style:italic; color:#a9b4bf; background:rgba(255,255,255,.02); }
    @media (max-width: 640px) { .biv-desk { flex-wrap:wrap; } .biv-monitor { order:3; flex-basis:100%; } }
    @media (prefers-reduced-motion: reduce) {
      .biv-onair i, .biv-rec i, .biv-lights i { animation:none; }
    }

    /* ── THE BLOCK BUSTER: the arena under pressure ──
       Three podiums, a vote clock that counts DOWN as the reveals climb, and
       a stage that goes from alert-amber to decided-green the moment the
       buzzer lands. The pressure is the identity. */
    .bbar-stage    { position:relative; margin:0 0 16px; padding:14px 14px 12px; border-radius:12px;
                     border:1px solid rgba(240,165,0,.35); background:
                     radial-gradient(ellipse at 50% -20%, rgba(240,165,0,.14), transparent 60%),
                     linear-gradient(180deg, #14100a, #0d1117 78%); overflow:hidden; }
    .bbar-stage.is-decided { border-color:rgba(63,185,80,.4); }
    .bbar-strip    { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bbar-live     { display:inline-flex; align-items:center; gap:5px; color:#f85149;
                     border:1px solid rgba(248,81,73,.5); border-radius:4px; padding:2px 8px; }
    .bbar-live i   { width:6px; height:6px; border-radius:50%; background:#f85149;
                     animation:bbarBlink 1.1s steps(2) infinite; }
    .is-decided .bbar-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .is-decided .bbar-live i { background:#3fb950; animation:none; }
    @keyframes bbarBlink { 50% { opacity:.15; } }
    .bbar-title-sm { color:#f0c674; }
    .bbar-clock    { margin-left:auto; color:#8b949e; }
    .bbar-clock b  { color:#f0a500; font-size:12px; letter-spacing:2px; }
    .bbar-podiums  { display:flex; gap:10px; justify-content:center; }
    .bbar-podium   { flex:1; max-width:170px; text-align:center; padding:10px 8px 8px; border-radius:10px;
                     border:1px solid rgba(240,165,0,.25); background:rgba(240,165,0,.05);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .bbar-podium.is-out   { opacity:.55; border-color:rgba(248,81,73,.4); background:rgba(248,81,73,.05); }
    .bbar-podium.is-saved { border-color:rgba(63,185,80,.6); background:rgba(63,185,80,.09);
                     box-shadow:0 0 24px rgba(63,185,80,.18); }
    .bbar-frame    { display:flex; justify-content:center; margin-bottom:6px; }
    .bbar-frame img{ border-radius:10px; }
    .bbar-name     { font-family:var(--font-display); font-size:14px; color:#e6edf3; letter-spacing:.5px; }
    .bbar-meter    { height:5px; margin:7px 10px 4px; border-radius:3px; background:rgba(255,255,255,.07);
                     overflow:hidden; }
    .bbar-meter i  { display:block; height:100%; border-radius:3px; background:#f0a500;
                     transition:width .5s ease; }
    .is-saved .bbar-meter i { background:#3fb950; }
    .is-out .bbar-meter i   { background:#f85149; }
    .bbar-score    { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#c9d1d9; }
    .bbar-tag      { margin-top:5px; font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.6px; color:#8b949e; }
    .is-saved .bbar-tag { color:#7ee2a8; }
    .is-out .bbar-tag   { color:#ffb3ae; }
    .bbar-meta     { display:flex; justify-content:center; gap:18px; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#6e7681; }
    .bbar-fall .bbns-card-h .bbns-pill { animation:none; }
    .bbar-savecard { border-color:rgba(63,185,80,.5); }
    @media (prefers-reduced-motion: reduce) { .bbar-live i { animation:none; } }

    /* ══════════════════════════════════════════════════════════════════
       BLOCK BUSTER ARENA GAMES — one stage per game
       Thirteen arena-exclusive games, thirteen instruments. Each prefix owns its
       palette and its primitive; nothing is shared but the pressure strip
       (LIVE / room / THE VOTE IN mm:ss) and the three-word footer.
       ══════════════════════════════════════════════════════════════════ */

    /* ── bfw- FLASH WALL: the memory wall. Deep violet, symbol tiles that
       light one per remembered symbol. A dead row goes dark; the saved row
       burns. ── */
    .bfw-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(148,110,255,.35);
                     background:radial-gradient(ellipse at 50% -25%, rgba(148,110,255,.2), transparent 62%),
                       linear-gradient(180deg,#150f28,#0b0a14 80%); }
    .bfw-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .bfw-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bfw-live      { display:inline-flex; align-items:center; gap:5px; color:#c4a2ff;
                     border:1px solid rgba(148,110,255,.5); border-radius:4px; padding:2px 8px; }
    .bfw-live i    { width:6px; height:6px; border-radius:50%; background:#a97bff;
                     animation:bfwPulse 1.2s ease-in-out infinite; }
    .bfw-stage.is-decided .bfw-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bfw-stage.is-decided .bfw-live i { background:#3fb950; animation:none; }
    @keyframes bfwPulse { 50% { opacity:.2; } }
    .bfw-title     { color:#d9c6ff; }
    .bfw-clock     { margin-left:auto; color:#8b83a8; }
    .bfw-clock b   { color:#c4a2ff; font-size:12px; letter-spacing:2px; }
    .bfw-grid      { display:flex; flex-direction:column; gap:8px; }
    .bfw-row       { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                     padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(148,110,255,.2); background:rgba(148,110,255,.05);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .bfw-row.is-out   { opacity:.45; border-color:rgba(248,81,73,.3); background:rgba(20,10,24,.6); }
    .bfw-row.is-saved { border-color:rgba(126,226,168,.55); background:rgba(63,185,80,.08);
                     box-shadow:0 0 26px rgba(126,226,168,.18); }
    .bfw-who       { display:flex; align-items:center; gap:7px; min-width:130px; }
    .bfw-who b     { font-size:12px; color:#efe9ff; }
    .bfw-tiles     { display:flex; gap:5px; flex-wrap:wrap; flex:1; min-width:150px; }
    .bfw-tile      { width:24px; height:24px; border-radius:5px; display:flex;
                     align-items:center; justify-content:center; color:#3a3055;
                     background:rgba(255,255,255,.03); border:1px solid rgba(148,110,255,.14);
                     transition:color .3s, box-shadow .3s, background .3s; }
    .bfw-tile svg  { width:14px; height:14px; }
    .bfw-tile.is-lit { color:#c4a2ff; background:rgba(148,110,255,.16);
                     border-color:rgba(148,110,255,.5); box-shadow:0 0 10px rgba(148,110,255,.4);
                     animation:bfwLit .5s ease-out both; }
    .is-saved .bfw-tile.is-lit { color:#9df5c0; border-color:rgba(63,185,80,.55);
                     background:rgba(63,185,80,.14); box-shadow:0 0 12px rgba(63,185,80,.4); }
    .is-out .bfw-tile.is-lit { color:#6a4f5a; box-shadow:none; background:rgba(255,255,255,.03); }
    @keyframes bfwLit { from { transform:scale(.7); opacity:0; } to { transform:none; opacity:1; } }
    .bfw-len       { font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#d9c6ff; }
    .bfw-len i     { font-style:normal; font-size:7.5px; letter-spacing:1.4px; color:#6f6490;
                     margin-right:5px; }
    .bfw-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#efe9ff;
                     min-width:38px; text-align:right; }
    .bfw-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#645b85; }
    @media (prefers-reduced-motion: reduce) {
      .bfw-live i, .bfw-tile.is-lit { animation:none; }
    }

    /* ── bsh- HOUSE OF CARDS: felt table green and amber. Towers of stacked
       card tents; a fallen tower is scattered on the felt. ── */
    .bsh-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(227,179,65,.32);
                     background:radial-gradient(ellipse at 50% 120%, rgba(30,90,55,.55), transparent 60%),
                       linear-gradient(180deg,#0d1613,#0b1210 80%); }
    .bsh-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bsh-strip     { display:flex; align-items:center; gap:12px; margin-bottom:10px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bsh-live      { display:inline-flex; align-items:center; gap:5px; color:#e3b341;
                     border:1px solid rgba(227,179,65,.5); border-radius:4px; padding:2px 8px; }
    .bsh-live i    { width:6px; height:6px; border-radius:50%; background:#e3b341;
                     animation:bshBlink 1.1s steps(2) infinite; }
    .bsh-stage.is-decided .bsh-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bsh-stage.is-decided .bsh-live i { background:#3fb950; animation:none; }
    @keyframes bshBlink { 50% { opacity:.15; } }
    .bsh-title     { color:#d8c58a; }
    .bsh-clock     { margin-left:auto; color:#7f8f83; }
    .bsh-clock b   { color:#e3b341; font-size:12px; letter-spacing:2px; }
    .bsh-felt      { display:flex; gap:10px; justify-content:center; align-items:flex-end;
                     flex-wrap:wrap; padding:8px 4px 0; }
    .bsh-col       { flex:1 1 150px; max-width:200px; text-align:center; }
    .bsh-build     { display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
                     min-height:132px; }
    .bsh-level     { width:58px; }
    .bsh-tent      { width:58px; height:26px; }
    .bsh-tent svg,
    .bsh-deck svg  { width:100%; height:100%; display:block; }
    .bsh-deck      { width:58px; height:7px; margin:1px 0 0; }
    .bsh-rubble    { width:88px; height:22px; opacity:.75; }
    .bsh-rubble svg{ width:100%; height:100%; display:block; }
    .bsh-table     { height:5px; border-radius:3px; margin:3px 8px 8px;
                     background:linear-gradient(180deg,#2b6a45,#17402a);
                     box-shadow:0 3px 10px rgba(0,0,0,.5); transition:transform .4s ease; }
    .bsh-col.is-out .bsh-table   { transform:rotate(-2.4deg); background:linear-gradient(180deg,#6a3030,#3d1c1c); }
    .bsh-col.is-saved .bsh-table { background:linear-gradient(180deg,#3fb950,#1d6b31);
                     box-shadow:0 0 20px rgba(63,185,80,.35); }
    .bsh-col.is-out .bsh-build   { opacity:.6; }
    .bsh-col.is-saved .bsh-build { filter:drop-shadow(0 0 12px rgba(227,179,65,.45)); }
    .bsh-who       { display:flex; align-items:center; justify-content:center; gap:6px; }
    .bsh-who b     { font-size:12px; color:#eae4d2; }
    .bsh-h         { margin-top:4px; font-family:ui-monospace,Consolas,monospace; font-size:11px;
                     color:#d8c58a; }
    .bsh-h i       { font-style:normal; font-size:7.5px; letter-spacing:1.4px; color:#6d7d72;
                     margin-right:5px; }
    .bsh-h em      { font-style:normal; color:#eae4d2; margin-left:6px; }
    .bsh-horn      { display:flex; align-items:center; gap:9px; justify-content:center; margin-top:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.6px;
                     color:#6d7d72; }
    .bsh-horn-bar  { display:flex; gap:3px; }
    .bsh-horn-bar i{ width:9px; height:5px; border-radius:1.5px; background:rgba(255,255,255,.07); }
    .bsh-horn-bar i.is-blown { background:#e3b341; box-shadow:0 0 7px rgba(227,179,65,.55); }
    .bsh-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:10px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#5f6f65; }
    @media (prefers-reduced-motion: reduce) {
      .bsh-live i { animation:none; } .bsh-table { transition:none; }
    }

    /* ── bvg- VERTIGO: steel and teal. Circular mazes drawn as broken rings,
       one ball each; a lost maze tilts and the ball leaves the board. ── */
    .bvg-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(86,168,180,.35);
                     background:radial-gradient(ellipse at 50% -20%, rgba(86,168,180,.18), transparent 60%),
                       linear-gradient(180deg,#0d1719,#0a1013 80%); }
    .bvg-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bvg-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bvg-live      { display:inline-flex; align-items:center; gap:5px; color:#7fd4dd;
                     border:1px solid rgba(86,168,180,.5); border-radius:4px; padding:2px 8px; }
    .bvg-live i    { width:6px; height:6px; border-radius:50%; background:#56a8b4;
                     animation:bvgSweep 1.6s linear infinite; }
    .bvg-stage.is-decided .bvg-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bvg-stage.is-decided .bvg-live i { background:#3fb950; animation:none; }
    @keyframes bvgSweep { 50% { transform:scale(1.5); opacity:.35; } }
    .bvg-title     { color:#a9d8de; }
    .bvg-clock     { margin-left:auto; color:#7d8f93; }
    .bvg-clock b   { color:#7fd4dd; font-size:12px; letter-spacing:2px; }
    .bvg-decks     { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .bvg-col       { flex:1 1 150px; max-width:200px; text-align:center; }
    .bvg-maze      { max-width:150px; margin:0 auto; transition:transform .45s ease; }
    .bvg-maze svg  { width:100%; height:auto; display:block; color:#7fd4dd; }
    .bvg-col.is-out .bvg-maze   { transform:rotate(7deg); opacity:.5; }
    .bvg-col.is-saved .bvg-maze { filter:drop-shadow(0 0 14px rgba(63,185,80,.45)); }
    .bvg-ball      { fill:#e6edf3; stroke:rgba(0,0,0,.55); stroke-width:1;
                     filter:drop-shadow(0 0 6px rgba(230,237,243,.55)); transition:cx .5s ease, cy .5s ease; }
    .bvg-col.is-out .bvg-ball   { fill:#f85149; filter:none; }
    .bvg-col.is-saved .bvg-ball { fill:#3fb950; filter:drop-shadow(0 0 10px rgba(63,185,80,.8)); }
    .bvg-who       { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; }
    .bvg-who b     { font-size:12px; color:#dceff2; }
    .bvg-read      { margin-top:3px; font-family:ui-monospace,Consolas,monospace; font-size:11px;
                     color:#dceff2; }
    .bvg-read i    { display:block; font-style:normal; font-size:7.5px; letter-spacing:1.5px;
                     color:#6d8388; margin-bottom:2px; }
    .bvg-col.is-saved .bvg-read i { color:#7ee2a8; }
    .bvg-col.is-out .bvg-read i   { color:#ffb3ae; }
    .bvg-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#5d6f73; }
    @media (prefers-reduced-motion: reduce) {
      .bvg-live i { animation:none; } .bvg-maze, .bvg-ball { transition:none; }
    }

    /* ── blk- LOCKOUT: industrial black and red LED. A keypad each, a
       four-digit display, and one door status that flips green. ── */
    .blk-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(248,81,73,.32);
                     background:repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px),
                       linear-gradient(180deg,#141011,#0a0a0b 80%); }
    .blk-stage.is-decided { border-color:rgba(63,185,80,.45); }
    .blk-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .blk-live      { display:inline-flex; align-items:center; gap:5px; color:#ff6b63;
                     border:1px solid rgba(248,81,73,.5); border-radius:3px; padding:2px 8px; }
    .blk-live i    { width:6px; height:6px; border-radius:1px; background:#f85149;
                     animation:blkTick 1s steps(2) infinite; }
    .blk-stage.is-decided .blk-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .blk-stage.is-decided .blk-live i { background:#3fb950; animation:none; }
    @keyframes blkTick { 50% { opacity:.12; } }
    .blk-title     { color:#c9a09d; }
    .blk-clock     { margin-left:auto; color:#847c7c; }
    .blk-clock b   { color:#ff6b63; font-size:12px; letter-spacing:2px; }
    .blk-panels    { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
    .blk-panel     { flex:1 1 160px; max-width:210px; padding:10px; border-radius:8px;
                     border:1px solid rgba(255,255,255,.09);
                     background:linear-gradient(180deg,#171719,#0e0e10);
                     box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .3s, opacity .3s; }
    .blk-panel.is-out   { opacity:.55; border-color:rgba(248,81,73,.45); }
    .blk-panel.is-saved { border-color:rgba(63,185,80,.6); box-shadow:0 0 22px rgba(63,185,80,.2); }
    .blk-head      { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
    .blk-head b    { font-size:12px; color:#e6edf3; overflow:hidden; text-overflow:ellipsis;
                     white-space:nowrap; }
    .blk-led       { margin-left:auto; width:8px; height:8px; border-radius:50%;
                     background:#3a2020; box-shadow:inset 0 0 3px rgba(0,0,0,.8); }
    .blk-panel.is-out .blk-led   { background:#f85149; box-shadow:0 0 8px rgba(248,81,73,.7); }
    .blk-panel.is-saved .blk-led { background:#3fb950; box-shadow:0 0 9px rgba(63,185,80,.8); }
    .blk-display   { display:flex; gap:5px; justify-content:center; padding:7px 6px; border-radius:5px;
                     background:#08090a; border:1px solid rgba(255,255,255,.07); }
    .blk-dig       { font-family:ui-monospace,Consolas,monospace; font-size:20px; font-weight:700;
                     letter-spacing:2px; color:#2a1414; width:18px; text-align:center; }
    .blk-dig.is-on { color:#ff4a41; text-shadow:0 0 10px rgba(248,81,73,.8);
                     animation:blkPunch .35s ease-out both; }
    .blk-panel.is-saved .blk-dig.is-on { color:#3fb950; text-shadow:0 0 10px rgba(63,185,80,.8); }
    @keyframes blkPunch { from { transform:translateY(-3px); opacity:.2; } to { transform:none; opacity:1; } }
    .blk-pad       { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:9px 0; }
    .blk-pad i     { height:12px; border-radius:2px; background:rgba(255,255,255,.05);
                     border:1px solid rgba(255,255,255,.06); }
    .blk-pad i.is-hit { background:rgba(248,81,73,.22); border-color:rgba(248,81,73,.4); }
    .blk-panel.is-saved .blk-pad i.is-hit { background:rgba(63,185,80,.2); border-color:rgba(63,185,80,.4); }
    .blk-door      { display:flex; align-items:center; justify-content:center; gap:6px; padding:5px;
                     border-radius:4px; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:2px; color:#7d7373; background:rgba(255,255,255,.03);
                     border:1px dashed rgba(255,255,255,.1); }
    .blk-x         { width:13px; height:13px; color:#f85149; }
    .blk-panel.is-out .blk-door   { color:#ffb3ae; border-color:rgba(248,81,73,.4); }
    .blk-panel.is-saved .blk-door { color:#7ee2a8; border-style:solid;
                     border-color:rgba(63,185,80,.5); background:rgba(63,185,80,.1); }
    .blk-score     { margin-top:6px; text-align:center; font-family:ui-monospace,Consolas,monospace;
                     font-size:11px; color:#c9d1d9; }
    .blk-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#6b6363; }
    @media (prefers-reduced-motion: reduce) {
      .blk-live i, .blk-dig.is-on { animation:none; }
    }

    /* ── pfs- PERFECT SHOT: hardwood and sodium light. Three marks receding
       from the hoop, and a lane that shows how far back somebody got. ── */
    .pfs-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(214,150,70,.34);
                     background:radial-gradient(ellipse at 78% -20%, rgba(255,190,90,.15), transparent 60%),
                       linear-gradient(180deg,#1a1310,#0e0b09 82%); }
    .pfs-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .pfs-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .pfs-live      { display:inline-flex; align-items:center; gap:5px; color:#ffc06a;
                     border:1px solid rgba(255,190,90,.5); border-radius:12px; padding:2px 9px; }
    .pfs-live i    { width:6px; height:6px; border-radius:50%; background:#ffbe5a;
                     animation:pfsBulb 1.5s ease-in-out infinite; }
    .pfs-stage.is-decided .pfs-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .pfs-stage.is-decided .pfs-live i { background:#3fb950; animation:none; }
    @keyframes pfsBulb { 50% { opacity:.28; } }
    .pfs-title     { color:#f2cd95; }
    .pfs-clock     { margin-left:auto; color:#9b8570; }
    .pfs-clock b   { color:#ffc06a; font-size:12px; letter-spacing:2px; }
    .pfs-lanes     { display:flex; flex-direction:column; gap:9px; }
    .pfs-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(255,190,90,.18); background:rgba(255,190,90,.045);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .pfs-lane.is-out   { opacity:.5; border-color:rgba(248,81,73,.32); background:rgba(60,24,18,.34); }
    .pfs-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 22px rgba(63,185,80,.14); }
    .pfs-who       { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
    .pfs-who b     { font-size:12px; color:#f8eee0; }
    .pfs-sunk      { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.4px; color:#f2cd95; }
    .pfs-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#f8eee0;
                     min-width:38px; text-align:right; }
    .pfs-court     { display:flex; align-items:center; gap:10px; }
    .pfs-marks     { display:flex; align-items:center; flex:1; min-width:0; }
    .pfs-gap       { flex:1; height:1px; background:repeating-linear-gradient(90deg,
                       rgba(255,190,90,.3) 0 5px, transparent 5px 11px); }
    .pfs-mark      { display:flex; flex-direction:column; align-items:center; gap:3px; }
    .pfs-mark i    { width:13px; height:13px; border-radius:50%; box-sizing:border-box;
                     border:2px solid rgba(255,190,90,.32); transition:background .3s, border-color .3s; }
    .pfs-mark b    { font-family:ui-monospace,Consolas,monospace; font-size:7px; letter-spacing:1.2px;
                     color:#8b7460; }
    .pfs-mark.is-reached i  { background:rgba(255,190,90,.55); border-color:#ffbe5a; }
    .pfs-mark.is-standing i { background:#ffbe5a; box-shadow:0 0 12px rgba(255,190,90,.7); }
    .pfs-mark.is-reached b  { color:#f2cd95; }
    .pfs-hoop svg  { width:34px; height:22px; display:block; }
    @media (prefers-reduced-motion: reduce) { .pfs-live i { animation:none; } }

    /* ── ngb- NIAGARA BALLS: spray and cold light. A beam, five falls running
       whether anybody is under them or not, and a cradle that fills. ── */
    .ngb-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(90,200,220,.32);
                     background:radial-gradient(ellipse at 50% -25%, rgba(120,220,235,.15), transparent 62%),
                       linear-gradient(180deg,#0b1a1f,#071115 82%); }
    .ngb-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .ngb-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .ngb-live      { display:inline-flex; align-items:center; gap:5px; color:#79dced;
                     border:1px solid rgba(120,220,235,.45); border-radius:12px; padding:2px 9px; }
    .ngb-live i    { width:6px; height:6px; border-radius:50%; background:#79dced;
                     animation:ngbBulb 1.5s ease-in-out infinite; }
    .ngb-stage.is-decided .ngb-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .ngb-stage.is-decided .ngb-live i { background:#3fb950; animation:none; }
    @keyframes ngbBulb { 50% { opacity:.3; } }
    .ngb-title     { color:#a8e8f3; }
    .ngb-clock     { margin-left:auto; color:#6f8f96; }
    .ngb-clock b   { color:#79dced; font-size:12px; letter-spacing:2px; }
    .ngb-lanes     { display:flex; flex-direction:column; gap:9px; }
    .ngb-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(120,220,235,.17); background:rgba(120,220,235,.05);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .ngb-lane.is-out   { opacity:.5; border-color:rgba(248,81,73,.32); background:rgba(30,40,50,.4); }
    .ngb-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 22px rgba(63,185,80,.14); }
    .ngb-who       { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
    .ngb-who b     { font-size:12px; color:#eaf8fb; }
    .ngb-carried   { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.4px; color:#a8e8f3; }
    .ngb-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#eaf8fb;
                     min-width:38px; text-align:right; }
    .ngb-course    { position:relative; display:flex; align-items:center; gap:10px; height:30px; }
    .ngb-beam      { position:absolute; left:0; right:64px; top:19px; height:3px; border-radius:2px;
                     background:linear-gradient(90deg,rgba(160,190,205,.55),rgba(160,190,205,.2)); }
    .ngb-falls     { position:relative; display:flex; gap:14px; flex:1; height:30px; padding-left:6px; }
    .ngb-fall      { width:3px; height:100%; border-radius:2px; align-self:flex-start;
                     background:linear-gradient(180deg,rgba(190,240,250,.85),rgba(120,220,235,0));
                     animation:ngbFall 1.1s linear infinite; }
    @keyframes ngbFall { 0% { opacity:.25; transform:scaleY(.6); } 45% { opacity:.9; transform:scaleY(1); }
                         100% { opacity:.25; transform:scaleY(.6); } }
    .ngb-cradle    { display:flex; gap:3px; padding:4px 6px; border-radius:7px;
                     border:1px solid rgba(120,220,235,.3); background:rgba(10,26,32,.6); }
    .ngb-cradle i  { width:7px; height:7px; border-radius:50%; background:rgba(120,220,235,.14);
                     transition:background .3s, box-shadow .3s; }
    .ngb-cradle i.is-in { background:#79dced; box-shadow:0 0 8px rgba(120,220,235,.65); }
    @media (prefers-reduced-motion: reduce) { .ngb-live i, .ngb-fall { animation:none; } }

    /* ── knm- KNIGHT MOVES: ivory and graphite. A board that burns out behind
       whoever is crossing it. ── */
    .knm-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(200,196,186,.28);
                     background:linear-gradient(180deg,#16171a,#0d0e10 84%); }
    .knm-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .knm-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .knm-live      { display:inline-flex; align-items:center; gap:5px; color:#dcd8ce;
                     border:1px solid rgba(200,196,186,.42); border-radius:12px; padding:2px 9px; }
    .knm-live i    { width:6px; height:6px; border-radius:50%; background:#dcd8ce;
                     animation:knmBulb 1.6s ease-in-out infinite; }
    .knm-stage.is-decided .knm-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .knm-stage.is-decided .knm-live i { background:#3fb950; animation:none; }
    @keyframes knmBulb { 50% { opacity:.3; } }
    .knm-title     { color:#e8e4da; }
    .knm-clock     { margin-left:auto; color:#8b8880; }
    .knm-clock b   { color:#dcd8ce; font-size:12px; letter-spacing:2px; }
    .knm-lanes     { display:flex; flex-direction:column; gap:9px; }
    .knm-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(200,196,186,.15); background:rgba(200,196,186,.04);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .knm-lane.is-out   { opacity:.5; border-color:rgba(248,81,73,.3); background:rgba(40,26,26,.36); }
    .knm-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 22px rgba(63,185,80,.14); }
    .knm-who       { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
    .knm-who b     { font-size:12px; color:#f2efe7; }
    .knm-sq-n      { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.4px; color:#c9c5bb; }
    .knm-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#f2efe7;
                     min-width:38px; text-align:right; }
    .knm-board     { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-width:100%; }
    .knm-sq        { aspect-ratio:1; border-radius:2px; background:rgba(232,228,218,.13);
                     display:flex; align-items:center; justify-content:center;
                     transition:background .3s, opacity .3s; }
    .knm-sq.is-dark  { background:rgba(232,228,218,.05); }
    .knm-sq.is-used  { background:rgba(20,20,22,.92); }
    .knm-sq.is-here  { background:rgba(232,228,218,.9); }
    .knm-kn        { font-style:normal; font-size:11px; line-height:1; color:#16171a; }
    @media (prefers-reduced-motion: reduce) { .knm-live i { animation:none; } }

    /* ── icw- INSTANT CROSSWORD: newsprint. Black squares, filled letters, and
       a grid that has to be pulled apart when an answer is wrong. ── */
    .icw-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(224,214,190,.3);
                     background:linear-gradient(180deg,#1b1a16,#100f0d 84%); }
    .icw-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .icw-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .icw-live      { display:inline-flex; align-items:center; gap:5px; color:#e6dcc0;
                     border:1px solid rgba(224,214,190,.44); border-radius:12px; padding:2px 9px; }
    .icw-live i    { width:6px; height:6px; border-radius:50%; background:#e6dcc0;
                     animation:icwBulb 1.6s ease-in-out infinite; }
    .icw-stage.is-decided .icw-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .icw-stage.is-decided .icw-live i { background:#3fb950; animation:none; }
    @keyframes icwBulb { 50% { opacity:.3; } }
    .icw-title     { color:#efe6cd; }
    .icw-clock     { margin-left:auto; color:#8f8873; }
    .icw-clock b   { color:#e6dcc0; font-size:12px; letter-spacing:2px; }
    .icw-lanes     { display:flex; flex-direction:column; gap:9px; }
    .icw-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(224,214,190,.16); background:rgba(224,214,190,.04);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .icw-lane.is-out   { opacity:.5; border-color:rgba(248,81,73,.3); background:rgba(44,30,26,.36); }
    .icw-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 22px rgba(63,185,80,.14); }
    .icw-who       { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
    .icw-who b     { font-size:12px; color:#f6f0e2; }
    .icw-filled    { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.4px; color:#efe6cd; }
    .icw-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#f6f0e2;
                     min-width:38px; text-align:right; }
    .icw-grid      { display:grid; grid-template-columns:repeat(13,1fr); gap:2px; max-width:100%; }
    .icw-cell      { aspect-ratio:1; border-radius:1px; box-sizing:border-box;
                     border:1px solid rgba(224,214,190,.22); background:rgba(224,214,190,.06);
                     display:flex; align-items:center; justify-content:center;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; color:transparent;
                     transition:background .3s, color .3s; }
    .icw-cell.is-block  { background:#0b0a09; border-color:rgba(224,214,190,.12); }
    .icw-cell.is-filled { background:#efe6cd; color:#16150f; border-color:#efe6cd; }
    @media (prefers-reduced-motion: reduce) { .icw-live i { animation:none; } }

    /* ── otl- ON TILT: backglass neon. Bumpers light, three balls drain, and
       the tilt panel takes everything the ball earned. ── */
    .otl-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(230,80,190,.34);
                     background:radial-gradient(ellipse at 30% -20%, rgba(120,230,240,.14), transparent 58%),
                       radial-gradient(ellipse at 80% -10%, rgba(230,80,190,.16), transparent 60%),
                       linear-gradient(180deg,#150a18,#0a060c 84%); }
    .otl-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .otl-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .otl-live      { display:inline-flex; align-items:center; gap:5px; color:#ff7bd5;
                     border:1px solid rgba(230,80,190,.5); border-radius:12px; padding:2px 9px; }
    .otl-live i    { width:6px; height:6px; border-radius:50%; background:#ff7bd5;
                     animation:otlBulb 1s ease-in-out infinite; }
    .otl-stage.is-decided .otl-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .otl-stage.is-decided .otl-live i { background:#3fb950; animation:none; }
    @keyframes otlBulb { 50% { opacity:.25; } }
    .otl-title     { color:#8ff0ff; }
    .otl-clock     { margin-left:auto; color:#9a7d96; }
    .otl-clock b   { color:#ff7bd5; font-size:12px; letter-spacing:2px; }
    .otl-lanes     { display:flex; flex-direction:column; gap:9px; }
    .otl-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(230,80,190,.2); background:rgba(230,80,190,.05);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .otl-lane.is-out    { opacity:.5; border-color:rgba(248,81,73,.32); background:rgba(50,18,34,.4); }
    .otl-lane.is-saved  { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 22px rgba(63,185,80,.14); }
    .otl-lane.is-tilted { border-color:rgba(248,81,73,.5); }
    .otl-who       { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
    .otl-who b     { font-size:12px; color:#fbeaf6; }
    .otl-balls     { margin-left:auto; display:flex; gap:4px; }
    .otl-ball      { width:9px; height:9px; border-radius:50%; box-sizing:border-box;
                     border:1px solid rgba(143,240,255,.5); transition:background .3s, box-shadow .3s; }
    .otl-ball.is-played { background:#8ff0ff; box-shadow:0 0 9px rgba(143,240,255,.7); }
    .otl-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#fbeaf6;
                     min-width:38px; text-align:right; }
    .otl-table     { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px;
                     background:rgba(12,6,14,.6); border:1px solid rgba(230,80,190,.16); }
    .otl-bumpers   { display:flex; gap:7px; flex:1; }
    .otl-bumpers i { width:11px; height:11px; border-radius:50%; background:rgba(230,80,190,.14);
                     box-sizing:border-box; border:1px solid rgba(230,80,190,.3);
                     transition:background .3s, box-shadow .3s; }
    .otl-bumpers i.is-lit { background:#ff7bd5; box-shadow:0 0 11px rgba(255,123,213,.75); }
    .otl-tilt      { font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:2.4px;
                     color:rgba(248,81,73,.3); border:1px solid rgba(248,81,73,.24);
                     border-radius:4px; padding:2px 8px; }
    .otl-tilt.is-on { color:#ff6a5f; border-color:#f85149; background:rgba(248,81,73,.14);
                     animation:otlTilt .5s steps(2) infinite; }
    @keyframes otlTilt { 50% { opacity:.35; } }
    @media (prefers-reduced-motion: reduce) { .otl-live i, .otl-tilt.is-on { animation:none; } }

    /* ── bls- LAST SHOT: midway crimson and gold. A rail of ten targets per
       nominee and a rack of twelve balls that never restocks. ── */
    .bls-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(214,80,70,.35);
                     background:radial-gradient(ellipse at 50% -20%, rgba(240,180,60,.16), transparent 62%),
                       linear-gradient(180deg,#1b0f0e,#120b0b 80%); }
    .bls-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .bls-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bls-live      { display:inline-flex; align-items:center; gap:5px; color:#ffb45c;
                     border:1px solid rgba(240,180,60,.5); border-radius:12px; padding:2px 9px; }
    .bls-live i    { width:6px; height:6px; border-radius:50%; background:#f0b43c;
                     animation:blsBulb 1.4s ease-in-out infinite; }
    .bls-stage.is-decided .bls-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bls-stage.is-decided .bls-live i { background:#3fb950; animation:none; }
    @keyframes blsBulb { 50% { opacity:.3; } }
    .bls-title     { color:#f0c98a; }
    .bls-clock     { margin-left:auto; color:#997f79; }
    .bls-clock b   { color:#ffb45c; font-size:12px; letter-spacing:2px; }
    .bls-lanes     { display:flex; flex-direction:column; gap:9px; }
    .bls-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(240,180,60,.2); background:rgba(240,180,60,.05);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .bls-lane.is-out   { opacity:.5; border-color:rgba(248,81,73,.35); background:rgba(60,20,20,.35); }
    .bls-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 22px rgba(63,185,80,.15); }
    .bls-who       { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
    .bls-who b     { font-size:12px; color:#f7ece0; }
    .bls-count     { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.4px; color:#f0c98a; }
    .bls-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#f7ece0;
                     min-width:38px; text-align:right; }
    .bls-rail      { display:flex; align-items:flex-end; gap:4px; flex-wrap:wrap;
                     padding:4px 4px 0; border-bottom:2px solid rgba(240,180,60,.3); }
    .bls-t         { width:22px; height:29px; display:block; transform-origin:50% 100%;
                     transition:transform .45s ease, opacity .45s ease; }
    .bls-t svg     { width:100%; height:100%; display:block; }
    .bls-t.is-down { transform:rotate(74deg) translateY(3px); opacity:.35; }
    .bls-lane.is-saved .bls-t.is-down { opacity:.5;
                     filter:drop-shadow(0 0 6px rgba(63,185,80,.5)); }
    .bls-ammo      { display:flex; align-items:center; gap:4px; margin-top:7px;
                     font-family:ui-monospace,Consolas,monospace; font-size:7.5px; letter-spacing:1.5px;
                     color:#8b746c; flex-wrap:wrap; }
    .bls-ammo i    { width:8px; height:8px; border-radius:50%; background:#e8dcc4;
                     box-shadow:inset -1px -1px 2px rgba(0,0,0,.35); }
    .bls-ammo i.is-spent { background:rgba(255,255,255,.06); box-shadow:none; }
    .bls-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#7a6660; }
    @media (prefers-reduced-motion: reduce) {
      .bls-live i { animation:none; } .bls-t { transition:none; }
    }

    /* ── bur- UNRAVEL: hemp and rust. Fifty feet of rope drawn as one line
       per nominee; a marker runs it, and a lost rope re-knots backwards. ── */
    .bur-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(186,140,90,.35);
                     background:radial-gradient(ellipse at 50% -25%, rgba(186,140,90,.16), transparent 60%),
                       linear-gradient(180deg,#171208,#100d09 80%); }
    .bur-stage.is-decided { border-color:rgba(126,226,168,.42); }
    .bur-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bur-live      { display:inline-flex; align-items:center; gap:5px; color:#d8a86c;
                     border:1px solid rgba(186,140,90,.5); border-radius:4px; padding:2px 8px; }
    .bur-live i    { width:6px; height:6px; border-radius:50%; background:#c07c3a;
                     animation:burTug 1.5s ease-in-out infinite; }
    .bur-stage.is-decided .bur-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bur-stage.is-decided .bur-live i { background:#3fb950; animation:none; }
    @keyframes burTug { 50% { opacity:.4; } }
    .bur-title     { color:#e0c49a; }
    .bur-clock     { margin-left:auto; color:#8c7c6a; }
    .bur-clock b   { color:#d8a86c; font-size:12px; letter-spacing:2px; }
    .bur-lanes     { display:flex; flex-direction:column; gap:9px; }
    .bur-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(186,140,90,.2); background:rgba(186,140,90,.05);
                     transition:opacity .3s, border-color .3s; }
    .bur-lane.is-out   { opacity:.55; border-color:rgba(248,81,73,.32); }
    .bur-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.07); }
    .bur-who       { display:flex; align-items:center; gap:7px; }
    .bur-who b     { font-size:12px; color:#f2e6d3; }
    .bur-score     { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:12px;
                     color:#f2e6d3; }
    .bur-rope      { margin:4px 0 2px; }
    .bur-rope svg  { width:100%; height:64px; display:block; color:#a97a45; }
    .bur-slack     { fill:none; stroke:rgba(186,140,90,.22); stroke-width:5;
                     stroke-linecap:round; stroke-linejoin:round; }
    .bur-run       { fill:none; stroke:#c9903f; stroke-width:5; stroke-linecap:round;
                     stroke-linejoin:round; transition:stroke-dashoffset .6s ease; }
    .bur-lane.is-out .bur-run   { stroke:#a33d33; }
    .bur-lane.is-saved .bur-run { stroke:#3fb950; }
    .bur-tangle    { color:rgba(186,140,90,.55); }
    .bur-key       { color:#8d7c63; }
    .bur-lane.is-saved .bur-key { color:#e3b341; filter:drop-shadow(0 0 8px rgba(227,179,65,.7)); }
    .bur-mark      { fill:#f2e6d3; stroke:rgba(0,0,0,.5); stroke-width:1;
                     transition:cx .6s ease, cy .6s ease; }
    .bur-lane.is-out .bur-mark   { fill:#f85149; }
    .bur-lane.is-saved .bur-mark { fill:#3fb950; }
    .bur-tag       { font-family:ui-monospace,Consolas,monospace; font-size:7.5px; letter-spacing:1.6px;
                     color:#8c7c6a; }
    .bur-lane.is-out .bur-tag   { color:#ffb3ae; }
    .bur-lane.is-saved .bur-tag { color:#7ee2a8; }
    .bur-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#7b6c5c; }
    @media (prefers-reduced-motion: reduce) {
      .bur-live i { animation:none; } .bur-run, .bur-mark { transition:none; }
    }

    /* ── bbo- BLACKOUT: night vision green on near-black. A corridor each,
       obstacles barely visible, and one dot crossing from memory. ── */
    .bbo-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(60,220,120,.3);
                     background:radial-gradient(ellipse at 50% -20%, rgba(60,220,120,.12), transparent 60%),
                       linear-gradient(180deg,#050b07,#030604 80%); }
    .bbo-stage.is-decided { border-color:rgba(63,185,80,.55); }
    .bbo-strip     { display:flex; align-items:center; gap:12px; margin-bottom:12px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bbo-live      { display:inline-flex; align-items:center; gap:5px; color:#6cf5a0;
                     border:1px solid rgba(60,220,120,.45); border-radius:2px; padding:2px 8px; }
    .bbo-live i    { width:6px; height:6px; border-radius:50%; background:#3cdc78;
                     animation:bboScan 1.8s linear infinite; }
    .bbo-stage.is-decided .bbo-live i { animation:none; }
    @keyframes bboScan { 0%,100% { opacity:1; } 45% { opacity:.15; } }
    .bbo-title     { color:#8ce0ae; }
    .bbo-clock     { margin-left:auto; color:#5c7d69; }
    .bbo-clock b   { color:#6cf5a0; font-size:12px; letter-spacing:2px; }
    .bbo-lanes     { display:flex; flex-direction:column; gap:9px; }
    .bbo-lane      { padding:8px 10px; border-radius:8px; max-width:100%;
                     border:1px solid rgba(60,220,120,.16); background:rgba(10,24,15,.6);
                     transition:opacity .3s, border-color .3s; }
    .bbo-lane.is-out   { opacity:.5; border-color:rgba(248,81,73,.3); }
    .bbo-lane.is-saved { border-color:rgba(63,185,80,.55); box-shadow:0 0 24px rgba(63,185,80,.16); }
    .bbo-who       { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
    .bbo-who b     { font-size:12px; color:#c9f2d8; }
    .bbo-score     { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:12px;
                     color:#c9f2d8; }
    .bbo-corridor  { position:relative; border-radius:5px; overflow:hidden; }
    .bbo-corridor svg { width:100%; height:58px; display:block; color:#3cdc78; }
    /* the night-vision layer: scanlines and a faint vertical grain */
    .bbo-nv        { position:absolute; inset:0; pointer-events:none;
                     background:repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px),
                       repeating-linear-gradient(90deg, rgba(60,220,120,.05) 0 2px, transparent 2px 5px),
                       radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.6) 100%); }
    .bbo-wall      { stroke:rgba(60,220,120,.35); stroke-width:2; fill:none; }
    .bbo-obs       { fill:#3cdc78; }
    .bbo-buzz      { color:rgba(60,220,120,.35); }
    .bbo-lane.is-saved .bbo-buzz { color:#7ee2a8; filter:drop-shadow(0 0 9px rgba(63,185,80,.8)); }
    .bbo-dot       { fill:#8cffbc; filter:drop-shadow(0 0 7px rgba(60,220,120,.8));
                     transition:cx .6s ease; }
    .bbo-lane.is-out .bbo-dot   { fill:#f85149; filter:none; }
    .bbo-tag       { margin-top:4px; font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.6px; color:#5c7d69; }
    .bbo-lane.is-out .bbo-tag   { color:#ffb3ae; }
    .bbo-lane.is-saved .bbo-tag { color:#7ee2a8; }
    .bbo-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#4e6b59; }
    @media (prefers-reduced-motion: reduce) {
      .bbo-live i { animation:none; } .bbo-dot { transition:none; }
    }

    /* ── bdt- DOWN THE TUBE: glass and pool-water cyan. A standing tube per
       nominee filling ball by ball toward a printed line, with the narrow
       beam and its carrier underneath. ── */
    .bdt-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(78,190,214,.34);
                     background:radial-gradient(ellipse at 50% 115%, rgba(46,140,170,.28), transparent 62%),
                       linear-gradient(180deg,#0a1418,#070f12 80%); }
    .bdt-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bdt-strip     { display:flex; align-items:center; gap:12px; margin-bottom:10px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bdt-live      { display:inline-flex; align-items:center; gap:5px; color:#7fd9ec;
                     border:1px solid rgba(78,190,214,.5); border-radius:4px; padding:2px 8px; }
    .bdt-live i    { width:6px; height:6px; border-radius:50%; background:#4ebed6;
                     animation:bdtDrip 1.5s ease-in infinite; }
    .bdt-stage.is-decided .bdt-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bdt-stage.is-decided .bdt-live i { background:#3fb950; animation:none; }
    @keyframes bdtDrip { 0%,100% { opacity:.9; } 55% { opacity:.3; } }
    .bdt-title     { color:#a8e3f0; }
    .bdt-clock     { margin-left:auto; color:#728b93; }
    .bdt-clock b   { color:#7fd9ec; font-size:12px; letter-spacing:2px; }
    .bdt-bay       { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .bdt-col       { flex:1 1 150px; max-width:200px; text-align:center; padding:8px 6px 6px;
                     border-radius:10px; border:1px solid rgba(78,190,214,.18);
                     background:rgba(78,190,214,.04); transition:opacity .3s, border-color .3s; }
    .bdt-col.is-out   { opacity:.55; border-color:rgba(248,81,73,.34); }
    .bdt-col.is-saved { border-color:rgba(126,226,168,.55); background:rgba(63,185,80,.08);
                     box-shadow:0 0 24px rgba(63,185,80,.16); }
    .bdt-tube      { position:relative; max-width:78px; margin:0 auto; }
    .bdt-tube svg  { width:100%; height:auto; display:block; }
    .bdt-glass     { fill:rgba(255,255,255,.035); stroke:rgba(160,225,240,.45); stroke-width:2; }
    .bdt-sheen     { fill:none; stroke:rgba(255,255,255,.12); stroke-width:1;
                     /* the highlight down the near face of the glass */ }
    .bdt-line      { stroke:#f0c674; stroke-width:2; stroke-dasharray:5 4; }
    .bdt-ball      { fill:#e6edf3; stroke:rgba(20,50,60,.6); stroke-width:1; }
    .bdt-col.is-saved .bdt-ball { fill:#8ef0b4; }
    .bdt-col.is-out .bdt-ball   { fill:#9fb3ba; }
    .bdt-mark      { display:block; margin-top:2px; font-family:ui-monospace,Consolas,monospace;
                     font-size:7px; letter-spacing:1.5px; color:#c2a35c; }
    .bdt-beam      { max-width:170px; margin:2px auto 0; }
    .bdt-beam svg  { width:100%; height:auto; display:block; }
    .bdt-plank     { stroke:#8a6a44; stroke-width:5; stroke-linecap:round; }
    .bdt-legs      { stroke:rgba(138,106,68,.7); stroke-width:3; stroke-linecap:round; fill:none; }
    .bdt-walker    { transition:transform .55s ease; }
    .bdt-carry     { fill:#f0c674; }
    .bdt-body      { stroke:#dcecf1; stroke-width:2.2; stroke-linecap:round; fill:none; }
    .bdt-col.is-saved .bdt-body { stroke:#7ee2a8; }
    .bdt-spill     { fill:rgba(248,81,73,.55); }
    .bdt-who       { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; }
    .bdt-who b     { font-size:12px; color:#dceff4; }
    .bdt-read      { margin-top:3px; font-family:ui-monospace,Consolas,monospace; font-size:11px;
                     color:#dceff4; }
    .bdt-read i    { display:block; font-style:normal; font-size:7.5px; letter-spacing:1.5px;
                     color:#6f8990; margin-bottom:2px; }
    .bdt-read em   { font-style:normal; color:#a8e3f0; margin-left:5px; }
    .bdt-col.is-saved .bdt-read i { color:#7ee2a8; }
    .bdt-col.is-out .bdt-read i   { color:#ffb3ae; }
    .bdt-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#5c757c; }
    @media (prefers-reduced-motion: reduce) {
      .bdt-live i { animation:none; } .bdt-walker { transition:none; }
    }

    /* ── bhc- HEAD COUNT: control-room blue-white. A monitor each replaying the
       same chaotic minute behind static, a row of answer lamps, and a lockout
       ring that fills for every wrong guess. ── */
    .bhc-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(96,150,220,.34);
                     background:radial-gradient(ellipse at 50% -20%, rgba(96,150,220,.16), transparent 60%),
                       linear-gradient(180deg,#0b1018,#080b11 80%); }
    .bhc-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bhc-strip     { display:flex; align-items:center; gap:12px; margin-bottom:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bhc-live      { display:inline-flex; align-items:center; gap:5px; color:#9dc2f5;
                     border:1px solid rgba(96,150,220,.5); border-radius:4px; padding:2px 8px; }
    .bhc-live i    { width:6px; height:6px; border-radius:1px; background:#6096dc;
                     animation:bhcFlick .7s steps(3) infinite; }
    .bhc-stage.is-decided .bhc-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bhc-stage.is-decided .bhc-live i { background:#3fb950; animation:none; }
    @keyframes bhcFlick { 33% { opacity:.25; } 66% { opacity:.85; } }
    .bhc-title     { color:#c2d8f5; }
    .bhc-clock     { margin-left:auto; color:#79849a; }
    .bhc-clock b   { color:#9dc2f5; font-size:12px; letter-spacing:2px; }
    .bhc-rows      { display:flex; flex-direction:column; gap:9px; }
    .bhc-row       { display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:8px 10px;
                     border-radius:10px; max-width:100%;
                     border:1px solid rgba(96,150,220,.18); background:rgba(96,150,220,.05);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .bhc-row.is-out   { opacity:.5; border-color:rgba(248,81,73,.32); background:rgba(24,12,14,.5); }
    .bhc-row.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 24px rgba(63,185,80,.15); }
    .bhc-mon       { position:relative; width:118px; flex-shrink:0; border-radius:4px; overflow:hidden;
                     border:1px solid rgba(160,190,230,.22); }
    .bhc-mon svg   { width:100%; height:auto; display:block; }
    .bhc-screen    { fill:#0c1420; }
    .bhc-door      { fill:none; stroke:rgba(157,194,245,.4); stroke-width:1.4; }
    .bhc-fig       { fill:#9dc2f5; }
    .bhc-streak    { stroke:rgba(240,198,116,.5); stroke-width:2; stroke-linecap:round; fill:none; }
    /* the recording layer: scanlines plus a slow roll bar */
    .bhc-static    { position:absolute; inset:0; pointer-events:none;
                     background:repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 1px, transparent 1px 3px),
                       linear-gradient(180deg, rgba(255,255,255,.07), transparent 22%);
                     animation:bhcRoll 4.5s linear infinite; }
    @keyframes bhcRoll { from { background-position:0 0, 0 -100%; } to { background-position:0 0, 0 200%; } }
    .bhc-body      { flex:1 1 190px; min-width:170px; }
    .bhc-who       { display:flex; align-items:center; gap:7px; }
    .bhc-who b     { font-size:12px; color:#dbe7f7; }
    .bhc-score     { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:12px;
                     color:#dbe7f7; }
    .bhc-qs        { display:flex; gap:4px; flex-wrap:wrap; margin:7px 0 5px; }
    .bhc-q         { width:15px; height:15px; border-radius:3px; background:rgba(255,255,255,.04);
                     border:1px solid rgba(157,194,245,.16); }
    .bhc-q.is-right { background:rgba(63,185,80,.25); border-color:rgba(63,185,80,.55);
                     box-shadow:0 0 7px rgba(63,185,80,.35); }
    .bhc-q.is-wrong { background:rgba(248,81,73,.22); border-color:rgba(248,81,73,.5); }
    .bhc-tag       { font-family:ui-monospace,Consolas,monospace; font-size:7.5px; letter-spacing:1.6px;
                     color:#6c7b91; }
    .bhc-row.is-out .bhc-tag   { color:#ffb3ae; }
    .bhc-row.is-saved .bhc-tag { color:#7ee2a8; }
    .bhc-lock      { position:relative; width:52px; flex-shrink:0; text-align:center; }
    .bhc-lock svg  { width:44px; height:44px; display:block; margin:0 auto; }
    .bhc-ring      { fill:none; stroke:rgba(255,255,255,.08); stroke-width:3.4; }
    .bhc-ring-on   { fill:none; stroke:#f85149; stroke-width:3.4; stroke-linecap:round;
                     transition:stroke-dashoffset .55s ease; }
    .bhc-row.is-saved .bhc-ring-on { stroke:#3fb950; }
    .bhc-lock span { position:absolute; top:13px; left:0; right:0;
                     font-family:ui-monospace,Consolas,monospace; font-size:14px; color:#dbe7f7; }
    .bhc-lock i    { display:block; font-style:normal; font-size:6.5px; letter-spacing:1.3px;
                     color:#6c7b91; margin-top:1px; }
    .bhc-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#5d6a80; }
    @media (prefers-reduced-motion: reduce) {
      .bhc-live i, .bhc-static { animation:none; } .bhc-ring-on { transition:none; }
    }

    /* ── bln- THE LONG NUMBER: slate and phosphor amber. A jigsaw strip that
       fills piece by piece, a stack of near-identical decoys, and ten keypad
       slots that either hold a digit or hold nothing. ── */
    .bln-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(212,160,58,.32);
                     background:repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 14px, transparent 14px 28px),
                       linear-gradient(180deg,#15130d,#0c0b09 80%); }
    .bln-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bln-strip     { display:flex; align-items:center; gap:12px; margin-bottom:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bln-live      { display:inline-flex; align-items:center; gap:5px; color:#e8bf6a;
                     border:1px solid rgba(212,160,58,.5); border-radius:4px; padding:2px 8px; }
    .bln-live i    { width:6px; height:6px; border-radius:50%; background:#d4a03a;
                     animation:blnCount 1.3s ease-in-out infinite; }
    .bln-stage.is-decided .bln-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bln-stage.is-decided .bln-live i { background:#3fb950; animation:none; }
    @keyframes blnCount { 50% { opacity:.35; } }
    .bln-title     { color:#e3cf9d; }
    .bln-clock     { margin-left:auto; color:#8a8271; }
    .bln-clock b   { color:#e8bf6a; font-size:12px; letter-spacing:2px; }
    .bln-rows      { display:flex; flex-direction:column; gap:9px; }
    .bln-row       { padding:9px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(212,160,58,.2); background:rgba(212,160,58,.045);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .bln-row.is-out   { opacity:.55; border-color:rgba(248,81,73,.32); }
    .bln-row.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.07); }
    .bln-who       { display:flex; align-items:center; gap:7px; }
    .bln-who b     { font-size:12px; color:#f0e6cd; }
    .bln-score     { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:12px;
                     color:#f0e6cd; }
    .bln-puzzle    { display:flex; align-items:center; gap:9px; margin:7px 0 5px; }
    .bln-puzzle svg{ flex:1; min-width:150px; height:26px; display:block; }
    .bln-pc        { fill:rgba(255,255,255,.045); stroke:rgba(212,160,58,.22); stroke-width:1.1; }
    .bln-pc.is-on  { fill:rgba(212,160,58,.35); stroke:rgba(232,191,106,.75); }
    .bln-row.is-saved .bln-pc.is-on { fill:rgba(63,185,80,.32); stroke:rgba(126,226,168,.8); }
    .bln-cap       { font-family:ui-monospace,Consolas,monospace; font-size:7.5px; letter-spacing:1.4px;
                     color:#8a8271; white-space:nowrap; }
    .bln-board     { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:6px; }
    .bln-decoy     { font-family:ui-monospace,Consolas,monospace; font-size:10px; letter-spacing:1px;
                     padding:2px 6px; border-radius:4px; color:#7f7867;
                     background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); }
    .bln-decoy.is-true { color:#e8bf6a; border-color:rgba(212,160,58,.55);
                     background:rgba(212,160,58,.1); }
    .bln-row.is-saved .bln-decoy.is-true { color:#7ee2a8; border-color:rgba(63,185,80,.55);
                     background:rgba(63,185,80,.1); }
    .bln-pad       { display:flex; gap:4px; flex-wrap:wrap; padding:6px; border-radius:6px;
                     background:#07070a; border:1px solid rgba(255,255,255,.07); }
    .bln-key       { flex:1 1 22px; max-width:34px; text-align:center; border-radius:3px;
                     font-family:ui-monospace,Consolas,monospace; font-size:15px; font-weight:700;
                     color:#2c2718; background:rgba(255,255,255,.03); padding:2px 0; }
    .bln-key.is-in { color:#ffc857; text-shadow:0 0 9px rgba(212,160,58,.75);
                     background:rgba(212,160,58,.12); animation:blnKey .3s ease-out both; }
    .bln-row.is-saved .bln-key.is-in { color:#7ee2a8; text-shadow:0 0 9px rgba(63,185,80,.75);
                     background:rgba(63,185,80,.12); }
    @keyframes blnKey { from { transform:translateY(3px); opacity:.25; } to { transform:none; opacity:1; } }
    .bln-tag       { margin-top:5px; font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.6px; color:#8a8271; }
    .bln-row.is-out .bln-tag   { color:#ffb3ae; }
    .bln-row.is-saved .bln-tag { color:#7ee2a8; }
    .bln-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#77705f; }
    @media (prefers-reduced-motion: reduce) {
      .bln-live i, .bln-key.is-in { animation:none; }
    }

    /* ── bwk- WHITE KNUCKLE: bone white on gunmetal, heat coming up through it.
       Two paddles squeezing together, a half-dial that climbs with the
       resistance, and eight horn marks for eight ramp-ups survived. ── */
    .bwk-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(226,226,232,.24);
                     background:radial-gradient(ellipse at 50% 120%, rgba(200,60,50,.22), transparent 58%),
                       linear-gradient(180deg,#15161a,#0b0c0e 80%); }
    .bwk-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bwk-strip     { display:flex; align-items:center; gap:12px; margin-bottom:10px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bwk-live      { display:inline-flex; align-items:center; gap:5px; color:#e8e8ee;
                     border:1px solid rgba(226,226,232,.35); border-radius:4px; padding:2px 8px; }
    .bwk-live i    { width:6px; height:6px; border-radius:50%; background:#e2e2e8;
                     animation:bwkTremor .35s ease-in-out infinite; }
    .bwk-stage.is-decided .bwk-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bwk-stage.is-decided .bwk-live i { background:#3fb950; animation:none; }
    @keyframes bwkTremor { 50% { transform:translate(1px,-1px); } }
    .bwk-title     { color:#c8c8d2; }
    .bwk-clock     { margin-left:auto; color:#82838c; }
    .bwk-clock b   { color:#e8e8ee; font-size:12px; letter-spacing:2px; }
    .bwk-rigs      { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .bwk-col       { flex:1 1 150px; max-width:200px; text-align:center; padding:8px 6px 6px;
                     border-radius:10px; border:1px solid rgba(226,226,232,.13);
                     background:rgba(255,255,255,.025); transition:opacity .3s, border-color .3s; }
    .bwk-col.is-out   { opacity:.5; border-color:rgba(248,81,73,.35); }
    .bwk-col.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.07);
                     box-shadow:0 0 24px rgba(63,185,80,.15); }
    .bwk-rig       { max-width:150px; margin:0 auto; }
    .bwk-rig svg   { width:100%; height:auto; display:block; }
    .bwk-arm       { fill:rgba(255,255,255,.05); }
    .bwk-paddle    { fill:#dcdce4; transition:transform .5s ease; }
    .bwk-col.is-out .bwk-paddle   { fill:#8a8a93; }
    .bwk-col.is-saved .bwk-paddle { fill:#9ff0c0; }
    .bwk-rod       { stroke:rgba(140,140,150,.85); stroke-width:3; fill:none; }
    .bwk-grip      { fill:#c0392f; }
    .bwk-col.is-saved .bwk-grip { fill:#3fb950; }
    .bwk-dial      { max-width:120px; margin:2px auto 0; }
    .bwk-dial svg  { width:100%; height:auto; display:block; }
    .bwk-arc       { fill:none; stroke:rgba(255,255,255,.1); stroke-width:6; stroke-linecap:round; }
    .bwk-arc-hot   { fill:none; stroke:#e0503f; stroke-width:6; stroke-linecap:round;
                     transition:stroke-dashoffset .6s ease; }
    .bwk-col.is-saved .bwk-arc-hot { stroke:#3fb950; }
    .bwk-needle    { stroke:#f0f0f6; stroke-width:2.6; stroke-linecap:round;
                     transition:d .6s ease; }
    .bwk-hub       { fill:#3a3b42; stroke:rgba(255,255,255,.3); stroke-width:1; }
    .bwk-lbl       { display:block; font-family:ui-monospace,Consolas,monospace; font-size:7px;
                     letter-spacing:1.6px; color:#82838c; }
    .bwk-horns     { display:flex; gap:3px; justify-content:center; margin:6px 0 2px; }
    .bwk-horns i   { width:11px; height:4px; border-radius:1.5px; background:rgba(255,255,255,.08); }
    .bwk-horns i.is-past { background:#e0503f; box-shadow:0 0 6px rgba(224,80,63,.6); }
    .bwk-col.is-saved .bwk-horns i.is-past { background:#3fb950; box-shadow:0 0 6px rgba(63,185,80,.6); }
    .bwk-who       { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:5px; }
    .bwk-who b     { font-size:12px; color:#eef0f4; }
    .bwk-read      { margin-top:3px; font-family:ui-monospace,Consolas,monospace; font-size:11px;
                     color:#eef0f4; }
    .bwk-read i    { display:block; font-style:normal; font-size:7.5px; letter-spacing:1.5px;
                     color:#82838c; margin-bottom:2px; }
    .bwk-read em   { font-style:normal; color:#c8c8d2; margin-left:5px; }
    .bwk-col.is-saved .bwk-read i { color:#7ee2a8; }
    .bwk-col.is-out .bwk-read i   { color:#ffb3ae; }
    .bwk-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#71727b; }
    @media (prefers-reduced-motion: reduce) {
      .bwk-live i { animation:none; }
      .bwk-paddle, .bwk-arc-hot, .bwk-needle { transition:none; }
    }

    /* ── bsc- SPIN CYCLE: padded-floor magenta and gym lacquer. Bat, beam and
       plinth drawn end to end in one lane, with a runner who leans as hard as
       the spins left them leaning. ── */
    .bsc-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(226,90,166,.32);
                     background:radial-gradient(ellipse at 50% 118%, rgba(226,90,166,.2), transparent 60%),
                       linear-gradient(180deg,#180d16,#0d080c 80%); }
    .bsc-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bsc-strip     { display:flex; align-items:center; gap:12px; margin-bottom:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bsc-live      { display:inline-flex; align-items:center; gap:5px; color:#f3a0cf;
                     border:1px solid rgba(226,90,166,.5); border-radius:9px; padding:2px 9px; }
    .bsc-live i    { width:6px; height:6px; border-radius:50%; background:#e25aa6;
                     animation:bscSpin 1.1s linear infinite; transform-origin:50% 50%; }
    .bsc-stage.is-decided .bsc-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bsc-stage.is-decided .bsc-live i { background:#3fb950; animation:none; }
    @keyframes bscSpin { 50% { opacity:.4; } }
    .bsc-title     { color:#f0bcda; }
    .bsc-clock     { margin-left:auto; color:#8e7684; }
    .bsc-clock b   { color:#f3a0cf; font-size:12px; letter-spacing:2px; }
    .bsc-lanes     { display:flex; flex-direction:column; gap:9px; }
    .bsc-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(226,90,166,.2); background:rgba(226,90,166,.05);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .bsc-lane.is-out   { opacity:.5; border-color:rgba(248,81,73,.32); background:rgba(34,12,20,.5); }
    .bsc-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.08);
                     box-shadow:0 0 22px rgba(63,185,80,.15); }
    .bsc-who       { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
    .bsc-who b     { font-size:12px; color:#f8e2f0; }
    .bsc-blocks    { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.4px; color:#f0bcda; }
    .bsc-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#f8e2f0;
                     min-width:38px; text-align:right; }
    .bsc-run svg   { width:100%; height:84px; display:block; }
    .bsc-floor     { stroke:rgba(226,90,166,.22); stroke-width:3; stroke-linecap:round; fill:none; }
    .bsc-bat       { stroke:#c9a97a; stroke-width:5; stroke-linecap:round; fill:#c9a97a; }
    .bsc-spinarc   { stroke:rgba(243,160,207,.7); stroke-width:2; fill:none; stroke-dasharray:4 4; }
    .bsc-spinhead  { fill:#f3a0cf; stroke:none; }
    .bsc-beam      { stroke:#8e6b46; stroke-width:6; stroke-linecap:round; fill:none; }
    .bsc-props     { stroke:rgba(142,107,70,.7); stroke-width:3; stroke-linecap:round; fill:none; }
    .bsc-runner    { fill:#f8e2f0; transition:transform .55s ease; }
    .bsc-lane.is-out .bsc-runner   { fill:#f85149; }
    .bsc-lane.is-saved .bsc-runner { fill:#7ee2a8; }
    .bsc-limbs     { stroke:currentColor; stroke-width:2.2; stroke-linecap:round; fill:none;
                     color:#f8e2f0; }
    .bsc-lane.is-saved .bsc-limbs { color:#7ee2a8; }
    .bsc-lane.is-out .bsc-limbs   { color:#f85149; }
    .bsc-block     { fill:rgba(243,160,207,.35); stroke:#f3a0cf; stroke-width:1.6; }
    .bsc-lane.is-saved .bsc-block { fill:rgba(63,185,80,.35); stroke:#7ee2a8; }
    .bsc-lane.is-out .bsc-block   { fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.2); }
    .bsc-plinth    { stroke:rgba(226,90,166,.5); stroke-width:4; stroke-linecap:round; fill:none; }
    .bsc-tag       { margin-top:3px; font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.6px; color:#8e7684; }
    .bsc-lane.is-out .bsc-tag   { color:#ffb3ae; }
    .bsc-lane.is-saved .bsc-tag { color:#7ee2a8; }
    .bsc-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#7c6875; }
    @media (prefers-reduced-motion: reduce) {
      .bsc-live i { animation:none; } .bsc-runner { transition:none; }
    }

    /* ── bcr- CHAIN REACTION: workshop pine and cold steel. A zig-zag of ramps
       that only exist once they are built; the unbuilt ones sag and dash, and
       the ball sits wherever the last good test left it. ── */
    .bcr-stage     { margin:0 0 16px; padding:14px; border-radius:12px; overflow:hidden;
                     border:1px solid rgba(150,178,196,.3);
                     background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 6px, transparent 6px 12px),
                       linear-gradient(180deg,#101519,#0a0d10 80%); }
    .bcr-stage.is-decided { border-color:rgba(126,226,168,.45); }
    .bcr-strip     { display:flex; align-items:center; gap:12px; margin-bottom:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:1.6px; }
    .bcr-live      { display:inline-flex; align-items:center; gap:5px; color:#b9d3e2;
                     border:1px solid rgba(150,178,196,.45); border-radius:4px; padding:2px 8px; }
    .bcr-live i    { width:6px; height:6px; border-radius:50%; background:#96b2c4;
                     animation:bcrRoll 1.4s ease-in-out infinite; }
    .bcr-stage.is-decided .bcr-live { color:#7ee2a8; border-color:rgba(63,185,80,.5); }
    .bcr-stage.is-decided .bcr-live i { background:#3fb950; animation:none; }
    @keyframes bcrRoll { 0%,100% { opacity:.75; } 50% { opacity:1; } }
    .bcr-title     { color:#cfe0ea; }
    .bcr-clock     { margin-left:auto; color:#7c8892; }
    .bcr-clock b   { color:#b9d3e2; font-size:12px; letter-spacing:2px; }
    .bcr-lanes     { display:flex; flex-direction:column; gap:9px; }
    .bcr-lane      { padding:8px 10px; border-radius:10px; max-width:100%;
                     border:1px solid rgba(150,178,196,.17); background:rgba(150,178,196,.04);
                     transition:opacity .3s, border-color .3s, background .3s; }
    .bcr-lane.is-out   { opacity:.55; border-color:rgba(248,81,73,.3); }
    .bcr-lane.is-saved { border-color:rgba(126,226,168,.5); background:rgba(63,185,80,.07);
                     box-shadow:0 0 22px rgba(63,185,80,.14); }
    .bcr-who       { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
    .bcr-who b     { font-size:12px; color:#e3edf3; }
    .bcr-feet      { margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:9px;
                     letter-spacing:1.4px; color:#b9d3e2; }
    .bcr-score     { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#e3edf3;
                     min-width:38px; text-align:right; }
    .bcr-bench svg { width:100%; height:96px; display:block; }
    .bcr-post      { stroke:#96b2c4; stroke-width:3; stroke-linecap:round; fill:#96b2c4; }
    .bcr-ramp      { stroke:rgba(255,255,255,.1); stroke-width:3.4; stroke-linecap:round;
                     stroke-dasharray:6 6; fill:none; }
    .bcr-ramp.is-set { stroke:#c49a63; stroke-dasharray:none; }
    .bcr-lane.is-saved .bcr-ramp.is-set { stroke:#7ee2a8; }
    .bcr-joint     { fill:rgba(255,255,255,.08); }
    .bcr-joint.is-set { fill:#96b2c4; }
    .bcr-buzz      { stroke:#96b2c4; stroke-width:2.4; stroke-linecap:round; fill:none; }
    .bcr-dome      { fill:rgba(248,81,73,.35); stroke:#e0685e; stroke-width:2; }
    .bcr-lane.is-saved .bcr-dome { fill:rgba(63,185,80,.45); stroke:#7ee2a8;
                     filter:drop-shadow(0 0 9px rgba(63,185,80,.7)); }
    .bcr-ball      { fill:#e6edf3; stroke:rgba(0,0,0,.5); stroke-width:1;
                     transition:cx .6s ease, cy .6s ease; }
    .bcr-lane.is-out .bcr-ball   { fill:#f85149; }
    .bcr-lane.is-saved .bcr-ball { fill:#3fb950; }
    .bcr-tag       { margin-top:3px; font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                     letter-spacing:1.6px; color:#7c8892; }
    .bcr-lane.is-out .bcr-tag   { color:#ffb3ae; }
    .bcr-lane.is-saved .bcr-tag { color:#7ee2a8; }
    .bcr-foot      { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:11px;
                     font-family:ui-monospace,Consolas,monospace; font-size:8px; letter-spacing:1.8px;
                     color:#6d7883; }
    @media (prefers-reduced-motion: reduce) {
      .bcr-live i { animation:none; } .bcr-ball { transition:none; }
    }

    /* Eviction night: the four-stage chain under a ballot — wanted, asked,
       said, cast. A flip glows; the final stage is the one that counts. */
    .bbev-chain    { margin-top:9px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.08);
                     display:flex; align-items:center; flex-wrap:wrap; gap:4px;
                     font-family:ui-monospace,Consolas,monospace; font-size:9.5px; }
    .bbev-chain-step { padding:2px 7px; border-radius:7px; background:rgba(255,255,255,.03);
                     border:1px solid rgba(255,255,255,.08); color:#c9d1d9; }
    .bbev-chain-step i { font-style:normal; color:#6e7681; font-size:8px; letter-spacing:.6px;
                     text-transform:uppercase; margin-right:4px; }
    .bbev-chain-step.is-flip  { border-color:rgba(var(--bbx-note-rgb),.45); color:#f0c674; }
    .bbev-chain-step.is-final { border-color:rgba(var(--bbx-info-rgb),.4); color:#e6edf3; }
    .bbev-chain-arrow { color:#4d545c; }

    /* ── The veto draw ──
       Six play: the Head of Household, the nominees, and three pulled out of a
       bag in front of everybody. Drawing a name is luck; drawing HOUSEGUEST'S
       CHOICE is a decision made in public that cannot be taken back, and the
       house watches who a nominee reaches for. */
    .bbvd          { margin:12px 0 0; padding:11px; border-radius:9px;
                     border:1px solid rgba(63,185,80,.2); background:rgba(63,185,80,.04); }
    .bbvd-h        { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
    .bbvd-t        { font-family:ui-monospace,Consolas,monospace; font-size:8.5px; font-weight:800;
                     letter-spacing:1.7px; color:#3fb950; }
    .bbvd-n        { margin-left:auto; font-family:ui-monospace,Consolas,monospace;
                     font-size:8.5px; letter-spacing:1px; color:#6e7681; }

    .bbvd-auto     { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:9px; }
    .bbvd-seat     { display:flex; flex-direction:column; align-items:center; gap:2px; width:56px; }
    .bbvd-seat b   { font-size:9.5px; color:#e6edf3; max-width:56px; overflow:hidden;
                     text-overflow:ellipsis; white-space:nowrap; }
    .bbvd-seat i   { font-style:normal; font-family:ui-monospace,Consolas,monospace;
                     font-size:7px; letter-spacing:.9px; text-transform:uppercase; color:#6e7681; }
    .bbvd-seat.is-auto .bb-av { box-shadow:0 0 0 1px rgba(63,185,80,.45); }

    .bbvd-draws    { display:flex; flex-direction:column; gap:4px;
                     padding-top:8px; border-top:1px dashed rgba(255,255,255,.07); }
    .bbvd-draw     { display:flex; align-items:center; gap:7px; font-size:11px; }
    .bbvd-who      { font-weight:600; color:#e6edf3; min-width:72px; }
    .bbvd-chip     { font-family:ui-monospace,Consolas,monospace; font-size:7.5px; font-weight:700;
                     letter-spacing:1px; padding:2px 7px; border-radius:10px;
                     background:rgba(255,255,255,.05); color:#8b949e;
                     border:1px solid rgba(255,255,255,.08); }
    /* The chip that turns luck into a decision. */
    .bbvd-chip.is-choice { background:rgba(227,179,65,.14); color:#e3b341;
                     border-color:rgba(227,179,65,.4); }
    .bbvd-arrow    { color:#4d545c; font-size:9.5px; }
    .bbvd-got      { display:inline-flex; align-items:center; gap:5px; margin-left:auto; }
    .bbvd-got b    { font-size:11px; color:#c9d1d9; }

    /* ── The veto draw stage ──
       Six seats. Three fill by right and three come out of a bag, a chip at a
       time, with a choice chip meaning somebody says a name out loud in front
       of the house and lives with it. */
    .bbvs-stage    { position:sticky; top:46px; z-index:6; margin:0 0 18px; padding:14px;
                     border-radius:12px; border:1px solid rgba(63,185,80,.22);
                     background:linear-gradient(180deg, rgba(16,21,28,.98), rgba(10,13,18,.99));
                     box-shadow:0 14px 40px rgba(0,0,0,.5); backdrop-filter:blur(8px); }
    .bbvs-seats    { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(78px, 1fr));
                     margin-bottom:12px; }
    .bbvs-seat     { display:flex; flex-direction:column; align-items:center; gap:4px;
                     padding:9px 5px; border-radius:8px;
                     background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); }
    .bbvs-seat b   { font-size:11px; color:#e6edf3; max-width:74px; overflow:hidden;
                     text-overflow:ellipsis; white-space:nowrap; }
    .bbvs-seat i   { font-style:normal; font-family:ui-monospace,Consolas,monospace;
                     font-size:7px; letter-spacing:1.1px; text-transform:uppercase; color:#5b6472; }
    .bbvs-seat.is-in    { border-color:rgba(63,185,80,.4); background:rgba(63,185,80,.07);
                          animation:bbvs-in .45s ease-out both; }
    .bbvs-seat.is-auto  { border-color:rgba(88,166,255,.35); background:rgba(88,166,255,.06); }
    @keyframes bbvs-in { from { opacity:0; transform:translateY(8px) scale(.96); }
                         to   { opacity:1; transform:none; } }
    .bbvs-empty    { font-family:var(--font-display); font-size:30px; line-height:1.4; color:#232c37; }

    .bbvs-bag      { display:flex; align-items:center; gap:8px; justify-content:center;
                     padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
    .bbvs-bag-l,
    .bbvs-bag-c    { font-family:ui-monospace,Consolas,monospace; font-size:8px;
                     letter-spacing:1.5px; color:#5b6472; }
    .bbvs-chip     { width:20px; height:20px; color:#39424e; transition:color .25s ease; }
    .bbvs-chip svg { width:100%; height:100%; }
    .bbvs-chip.is-out { color:#3fb950; filter:drop-shadow(0 0 7px rgba(63,185,80,.6)); }

    @media (prefers-reduced-motion: reduce) { .bbvs-seat.is-in { animation:none; } }

    /* Legend for the standing icons — an icon nobody can name is decoration. */
    .bbw-key        { display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
                      margin:8px 0 12px; font-size:9.5px; letter-spacing:.6px; color:#8b949e; }
    .bbw-key span   { display:inline-flex; align-items:center; gap:4px; }

    @media (prefers-reduced-motion: reduce) {
      .bbf-rec::before, .bbf-eye-pupil { animation:none; }
      .bbf-spot { animation:none; }
    }

    /* ── VP: per-SETTING skin (applied to #vp-screen-content as .rp-set-<x>) ──
       Retints the reader's gold accent + lays a faint venue motif behind each
       .rp-page screen. Scoped to .rp-page so twist-challenge shells (own themes)
       are untouched. Motifs are low-opacity CSS textures; hero art is inline SVG. */
    .rp-set-bb-house      { --set-accent:#c9343c; }
    .rp-set-hosted-camp   { --set-accent:#f0c040; }
    .rp-set-survival-island { --set-accent:#46c7b4; }
    .rp-set-carnival      { --set-accent:#ff5a7a; }
    .rp-set-film-lot      { --set-accent:#cdd2df; }
    .rp-set-world-tour    { --set-accent:#57a6e8; }
    /* retint the reader accent to the setting accent */
    [class*="rp-set-"] .rp-page { --accent-gold: var(--set-accent, #f0c040); }
    /* motif layer + keep content above it */
    [class*="rp-set-"] .rp-page { position: relative; }
    /* The motif sits BEHIND the content on its own, at a negative z-index.
       This used to be done by forcing `position: relative; z-index: 1` onto
       every direct child of .rp-page — which works for layering and quietly
       overrides any position a screen sets on one of those children. Every
       sticky header and every pinned control in the player was being reset to
       `relative` by it, in both shows, because the rule is more specific than
       the screen's own. A negative-z pseudo-element paints above the page's
       background and below its content without positioning anything. */
    [class*="rp-set-"] .rp-page::before {
      content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
      opacity:.5; mix-blend-mode:screen; background-size:cover; }
    @media (prefers-reduced-motion: reduce) { [class*="rp-set-"] .rp-page::before { animation:none; } }
    /* 🏠 the house — camera grid and the red glow of a live feed */
    .rp-set-bb-house .rp-page::before {
      opacity:.09;
      background:
        repeating-linear-gradient(0deg, rgba(201,52,60,.20) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, rgba(201,52,60,.14) 0 1px, transparent 1px 46px),
        radial-gradient(ellipse at 50% -10%, rgba(201,52,60,.30), transparent 55%); }
    /* 🏝️ survival island — teal wave bands */
    .rp-set-survival-island .rp-page::before {
      opacity:.10;
      background:
        repeating-linear-gradient(115deg, transparent 0 34px, rgba(70,199,180,.35) 34px 35px),
        radial-gradient(ellipse at 50% 120%, rgba(70,199,180,.18), transparent 60%); }
    /* 🎪 carnival — tent stripes + string lights */
    .rp-set-carnival .rp-page::before {
      opacity:.10;
      background:
        repeating-linear-gradient(60deg, rgba(255,90,122,.30) 0 22px, transparent 22px 44px),
        radial-gradient(circle at 12px 8px, rgba(255,207,64,.55) 2px, transparent 3px);
      background-size: auto, 60px 60px; }
    /* 🎬 film lot — sprocket rails + spotlight */
    .rp-set-film-lot .rp-page::before {
      opacity:.12;
      background:
        repeating-linear-gradient(to bottom, rgba(205,210,223,.30) 0 10px, transparent 10px 26px),
        radial-gradient(ellipse at 50% -10%, rgba(230,235,245,.20), transparent 55%);
      background-size: 14px 26px, auto;
      background-position: left top, center; }
    /* ✈️ world tour — dotted flight path + clouds */
    .rp-set-world-tour .rp-page::before {
      opacity:.10;
      background:
        repeating-linear-gradient(90deg, rgba(87,166,232,.5) 0 6px, transparent 6px 26px),
        radial-gradient(ellipse at 80% 15%, rgba(120,180,240,.16), transparent 45%),
        radial-gradient(ellipse at 20% 70%, rgba(120,180,240,.12), transparent 45%);
      background-size: 26px 2px, auto, auto;
      background-position: 0 30%, 0 0, 0 0; }
    /* 🏕️ hosted camp — faint pine chevrons (keeps default gold) */
    .rp-set-hosted-camp .rp-page::before {
      opacity:.07;
      background: repeating-linear-gradient(135deg, rgba(240,192,64,.25) 0 2px, transparent 2px 20px); }

    /* ── Colour forms of the weekly tokens ──────────────────────────────
       The stylesheet mostly wants the RGB triplet, because it derives washes
       from it. The screen BUILDERS paint inline — `style="color:…"` — and an
       inline style can only take a finished colour, so each triplet needs a
       colour twin.

       Declared on `.rp-page`, NOT on `:root`, and that is the whole point. A
       custom property's value is computed where it is DECLARED: put
       `--bbx-danger: rgb(var(--bbx-danger-rgb))` on `:root` and the inner var
       resolves against `:root` immediately, baking in the default before a
       theme on `#vp-screen-content` ever gets a say. The theme would retint
       every stylesheet rule and leave every inline colour on the old palette.
       Declared here, below where the theme class sits, they resolve in the
       theme's context and follow it — including into a mood. */
    .rp-page {
      --bbx-danger: rgb(var(--bbx-danger-rgb));
      --bbx-note:   rgb(var(--bbx-note-rgb));
      --bbx-key:    rgb(var(--bbx-key-rgb));
      --bbx-good:   rgb(var(--bbx-good-rgb));
      --bbx-info:   rgb(var(--bbx-info-rgb));
      --bbx-dim:    rgb(var(--bbx-dim-rgb)); }

    /* ── VP: per-SEASON theme skin (applied to #vp-screen-content as .rp-theme-<x>) ──
       Stacked ON TOP of the venue skin above rather than replacing it: a themed
       season is still in one of the four houses, so the venue keeps its ::before
       motif and the theme paints its own ::after layer over it. Declared after
       the venue block on purpose — the two accent rules have identical
       specificity, so source order is what lets the season's palette win.
       Scoped to .rp-page for the same reason the venue skin is: a twist screen
       that brought its own visual identity must not have a season palette
       painted over it.

       ADDING A THEME: append an `.rp-theme-<id>` palette line and an
       `.rp-theme-<id> .rp-page::after` motif anywhere in this section. Both
       the shared retint and the reduced-motion override below hold wherever
       you put it — the override is deliberately `!important` so that appending
       at the END of the section (the natural place, and after the @media
       block) cannot leave your motif animating for a reader who asked for no
       motion. Order decides the accent; it must not decide the accessibility
       rule.

       That guarantee covers `.rp-page::after` and nothing else, because that is
       the only selector the override names. A theme that animates anything
       ELSE — a pseudo-element on a child, a keyframed border, a moving
       background on `.rp-page` itself — owns its own
       `@media (prefers-reduced-motion: reduce)` block. Put the motif on
       `::after` and it is handled for you; go outside it and you are on your
       own. */
    .rp-theme-summer-of-temptation { --theme-accent:#c6a05c; --theme-glow:#e0a848; }
    .rp-theme-summer-of-temptation.is-mood-hostile { --theme-accent:#ff2d40; --theme-glow:#ff6b78; }
    /* retint the reader accent to the season accent, and own a stacking context */
    [class*="rp-theme-"] .rp-page {
      --accent-gold: var(--theme-accent, #f0c040);
      position: relative; }
    [class*="rp-theme-"] .rp-page::after {
      content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background-size:cover; }
    /* 🍒 summer of temptation — a red offer bleeding in from the corners */
    .rp-theme-summer-of-temptation .rp-page::after {
      opacity:.16;
      background:
        radial-gradient(58% 34% at 50% 104%, rgba(224,168,72,.34), transparent 66%),
        radial-gradient(40% 26% at 8% -4%, rgba(198,160,92,.18), transparent 70%);
      animation: rpThemeTemptPulse 9s ease-in-out infinite; }
    .rp-theme-summer-of-temptation .rp-page h1,
    .rp-theme-summer-of-temptation .rp-page h2 { letter-spacing:.04em; }
    @keyframes rpThemeTemptPulse { 0%,100% { opacity:.16; } 50% { opacity:.23; } }

    /* ── The Den, at rest ────────────────────────────────────────────────
       The whole week — nominations, veto meeting, eviction, competitions,
       overview — retinted by overriding the `--bbx-*` block in :root. No
       builder changes; the screens already draw themselves in these tokens.

       Red is deliberately NOT the resting state. On the show the lights turn
       red when an offer goes live, so a season that is red for twelve weeks
       has spent its only signal on wallpaper. The Den sits in mahogany, brass
       and lamplight, and saves red for the night it escalates. */
    .rp-theme-summer-of-temptation {
      --bbx-danger-rgb:  158,27,40;    /* deep crimson — the block          */
      --bbx-note-rgb:    216,185,106;  /* a reason spoken, in candlelight   */
      --bbx-key-rgb:     198,160,92;   /* brass                             */
      --bbx-good-rgb:    122,138,92;   /* olive, not the default green      */
      --bbx-info-rgb:    150,132,172;  /* muted amethyst                    */
      --bbx-dim-rgb:     160,141,124;  /* warm grey, never blue             */
      --bbx-stage-rgb:   44,29,21;     --bbx-stage2-rgb:  24,16,12;
      --bbx-screen-rgb:  48,32,23;     --bbx-screen2-rgb: 20,13,10;
      --bbx-card-rgb:    46,30,22;     --bbx-card2-rgb:   26,17,13;
      --bbx-ink:         #f0e6d8;
      --bbx-ink-quiet:   #f6ead2;
      --bbx-faint:       #7d5f42;
      --bbx-glyph:       #5c4030; }

    /* ── The Den, with the lights up ─────────────────────────────────────
       The same room, escalated. Only the tokens the escalation should touch
       are re-set: the joinery and the type stay, so it reads as one place
       that has turned rather than a second theme. Driven by `is-mood-hostile`
       on the reader root, off the mood the arc already flips in week 6. */
    .rp-theme-summer-of-temptation.is-mood-hostile {
      --bbx-danger-rgb:  255,45,64;
      --bbx-note-rgb:    255,154,114;
      --bbx-key-rgb:     232,185,74;
      --bbx-dim-rgb:     201,138,134;
      --bbx-stage-rgb:   74,8,18;      --bbx-stage2-rgb:  30,4,8;
      --bbx-screen-rgb:  80,10,20;     --bbx-screen2-rgb: 24,3,6;
      --bbx-card-rgb:    74,8,18;      --bbx-card2-rgb:   30,4,8;
      --bbx-ink:         #ffe8e6;
      --bbx-faint:       #8c4a49;
      --bbx-glyph:       #6b1220; }
    /* The room light itself, and the colour draining back INTO the portraits
       rather than out of them — the house looks lit by the twist. */
    .rp-theme-summer-of-temptation.is-mood-hostile .rp-page::after {
      opacity:.30;
      background:
        radial-gradient(60% 40% at 50% -8%, rgba(255,45,64,.42), transparent 66%),
        radial-gradient(60% 40% at 50% 108%, rgba(255,45,64,.34), transparent 66%); }
    .rp-theme-summer-of-temptation.is-mood-hostile .rp-page .bb-av img {
      filter: saturate(1.3) contrast(1.05); }
    /* ── The Machine Summer, while CORA is still helping ────────────────
       The Den is mahogany and lamplight; this is the opposite room. Cold,
       flat, lit from a screen rather than a lamp — nobody is being invited
       anywhere here, they are being processed. */
    .rp-theme-machine-summer {
      --theme-accent:#3ad6c4; --theme-glow:#7ef0e2;
      --bbx-danger-rgb:  232,64,72;     /* an alert, not a passion            */
      --bbx-note-rgb:    58,214,196;    /* every annotation is the machine    */
      --bbx-key-rgb:     126,240,226;   /* keys read as status lights         */
      --bbx-good-rgb:    92,214,140;
      --bbx-info-rgb:    96,170,255;
      --bbx-dim-rgb:     122,146,158;   /* cool grey, never warm              */
      --bbx-stage-rgb:   14,26,32;      --bbx-stage2-rgb:  6,12,16;
      --bbx-screen-rgb:  16,30,36;      --bbx-screen2-rgb: 5,10,14;
      --bbx-card-rgb:    15,28,34;      --bbx-card2-rgb:   7,14,18;
      --bbx-ink:         #dfe9ee;
      --bbx-ink-quiet:   #cfeee8;
      --bbx-faint:       #3c5560;
      --bbx-glyph:       #1d3a42; }
    .rp-theme-machine-summer .rp-page::after {
      opacity:.13;
      background:
        linear-gradient(180deg, rgba(58,214,196,.16), transparent 22%),
        repeating-linear-gradient(180deg, rgba(126,240,226,.05) 0 1px, transparent 1px 3px);
      animation: rpThemeCoraScan 7s linear infinite; }
    @keyframes rpThemeCoraScan { 0% { background-position:0 0, 0 0; }
      100% { background-position:0 0, 0 96px; } }

    /* ── The Machine Summer, once CORA stops helping ────────────────────
       The same room with the friendliness switched off: the teal goes to a
       hard alert red and the scanline gets faster and heavier. */
    .rp-theme-machine-summer.is-mood-hostile {
      --theme-accent:#ff3b30; --theme-glow:#ff7a6e;
      --bbx-danger-rgb:  255,59,48;
      --bbx-note-rgb:    255,122,110;
      --bbx-key-rgb:     255,176,64;
      --bbx-dim-rgb:     168,132,132;
      --bbx-stage-rgb:   34,10,12;      --bbx-stage2-rgb:  12,4,5;
      --bbx-screen-rgb:  38,11,13;      --bbx-screen2-rgb: 10,3,4;
      --bbx-card-rgb:    34,10,12;      --bbx-card2-rgb:   13,4,6;
      --bbx-ink:         #ffe4e0;
      --bbx-faint:       #6b3a38;
      --bbx-glyph:       #4a1416; }
    .rp-theme-machine-summer.is-mood-hostile .rp-page::after {
      opacity:.22;
      background:
        linear-gradient(180deg, rgba(255,59,48,.24), transparent 26%),
        repeating-linear-gradient(180deg, rgba(255,122,110,.07) 0 1px, transparent 1px 3px);
      animation: rpThemeCoraScan 2.6s linear infinite; }

    /* ── A Summer of Mystery, front of house ────────────────────────────
       Hotel Mystere, which the wiki calls a haunted hotel — so the room is a
       GRAND HOTEL, not a haunted house: deep green walls, brass, lamplight,
       and gold lettering with too much tracking. The identity is the SURFACE
       here, which is what keeps it clear of the other two — the Den is
       mahogany brown, CORA is a blue-black screen, and nothing else in this
       game is green. */
    .rp-theme-summer-of-mystery {
      --theme-accent:#4fbf8b; --theme-glow:#8fe3bb;
      --bbx-danger-rgb:  158,42,58;     /* oxblood, the hotel carpet          */
      --bbx-note-rgb:    217,180,92;    /* a note left at the desk, in brass  */
      --bbx-key-rgb:     217,180,92;    /* room keys ARE the nomination keys  */
      --bbx-good-rgb:    79,191,139;    /* the green the walls are            */
      --bbx-info-rgb:    132,168,196;
      --bbx-dim-rgb:     122,138,126;   /* green-grey, never neutral          */
      --bbx-stage-rgb:   18,42,34;      --bbx-stage2-rgb:  8,20,16;
      --bbx-screen-rgb:  20,46,37;      --bbx-screen2-rgb: 7,18,15;
      --bbx-card-rgb:    19,44,35;      --bbx-card2-rgb:   10,24,19;
      --bbx-ink:         #e8f0e8;
      --bbx-ink-quiet:   #f2e6cc;
      --bbx-faint:       #48705e;
      --bbx-glyph:       #1d3b30; }
    /* The wallpaper, and the seam of a passage nobody has found running down
       the right-hand edge of every screen. */
    .rp-theme-summer-of-mystery .rp-page::after {
      opacity:.17;
      background:
        radial-gradient(48% 26% at 50% -6%, rgba(143,227,187,.26), transparent 66%),
        radial-gradient(26% 40% at 100% 52%, rgba(217,180,92,.20), transparent 72%),
        repeating-linear-gradient(90deg, rgba(217,180,92,.05) 0 1px, transparent 1px 34px);
      animation: rpThemeMystDrift 13s ease-in-out infinite; }
    .rp-theme-summer-of-mystery .rp-page h1,
    .rp-theme-summer-of-mystery .rp-page h2 {
      letter-spacing:.09em; font-family:"Bodoni MT",Didot,Georgia,serif; }
    @keyframes rpThemeMystDrift { 0%,100% { opacity:.17; } 50% { opacity:.23; } }

    /* ── A Summer of Mystery, the Month of Mayhem ───────────────────────
       The turn is a DRAIN, not a flare. The green and the brass go out of the
       building and what is left is bone, candle and cold stone — the hotel
       with the hospitality withdrawn and the author standing in it. The other
       two themes both escalate into red; this one escalates into an empty
       room, which is the only reason a third theme needed a third answer. */
    .rp-theme-summer-of-mystery.is-mood-hostile {
      --theme-accent:#e8dcc0; --theme-glow:#fff4dc;
      --bbx-danger-rgb:  150,32,44;
      --bbx-note-rgb:    232,220,192;
      --bbx-key-rgb:     226,206,158;   /* the keys are voodoo dolls now      */
      --bbx-good-rgb:    132,140,120;
      --bbx-info-rgb:    166,166,176;
      --bbx-dim-rgb:     130,126,118;
      --bbx-stage-rgb:   22,20,20;      --bbx-stage2-rgb:  9,8,8;
      --bbx-screen-rgb:  24,22,21;      --bbx-screen2-rgb: 8,7,7;
      --bbx-card-rgb:    23,21,20;      --bbx-card2-rgb:   11,10,10;
      --bbx-ink:         #f2ecdc;
      --bbx-ink-quiet:   #f7f0dc;
      --bbx-faint:       #59544a;
      --bbx-glyph:       #2b2823; }
    .rp-theme-summer-of-mystery.is-mood-hostile .rp-page::after {
      opacity:.22;
      background:
        radial-gradient(44% 24% at 50% -8%, rgba(255,244,220,.24), transparent 62%),
        radial-gradient(84% 62% at 50% 110%, rgba(150,32,44,.22), transparent 70%),
        repeating-linear-gradient(90deg, rgba(232,220,192,.045) 0 1px, transparent 1px 34px);
      animation: rpThemeMystDrift 6s ease-in-out infinite; }

    /* ── High Roller's ──────────────────────────────────────────────────
       A card room after hours, lit from the table up: brass on black
       lacquer. NOT felt green — Mystery owns green, and two themes sharing
       a surface means a glance at the reader cannot tell you which season
       you are in. Gold is also the honest colour, because this season is
       about the money rather than the game the money buys into. */
    .rp-theme-high-rollers {
      --theme-accent:#c9a227; --theme-glow:#f0d585;
      --bbx-danger-rgb:  168,38,44;     /* the red on the layout              */
      --bbx-note-rgb:    201,162,39;    /* everything written down is brass   */
      --bbx-key-rgb:     240,213,133;   /* chips, and the keys are chips too  */
      --bbx-good-rgb:    212,175,55;    /* winning here is gold, never green  */
      --bbx-info-rgb:    170,158,132;
      --bbx-dim-rgb:     124,113,92;    /* warm grey — no cold tones anywhere */
      --bbx-stage-rgb:   26,19,13;      --bbx-stage2-rgb:  11,7,8;
      --bbx-screen-rgb:  28,21,14;      --bbx-screen2-rgb: 10,7,7;
      --bbx-card-rgb:    27,20,14;      --bbx-card2-rgb:   13,9,8;
      --bbx-ink:         #f2e6c8;
      --bbx-ink-quiet:   #f7eed6;
      --bbx-faint:       #5c5040;
      --bbx-glyph:       #2a211a; }
    .rp-theme-high-rollers .rp-page::after {
      opacity:.16;
      background:
        radial-gradient(46% 28% at 50% -8%, rgba(240,213,133,.24), transparent 66%),
        radial-gradient(70% 54% at 50% 108%, rgba(168,38,44,.14), transparent 72%),
        repeating-linear-gradient(90deg, rgba(201,162,39,.05) 0 1px, transparent 1px 28px);
      animation: rpThemeRollDrift 11s ease-in-out infinite; }
    .rp-theme-high-rollers .rp-page h1,
    .rp-theme-high-rollers .rp-page h2 {
      letter-spacing:.13em; text-transform:uppercase;
      font-family:"Copperplate Gothic Bold",Copperplate,"Cinzel",Georgia,serif; }
    @keyframes rpThemeRollDrift { 0%,100% { opacity:.16; } 50% { opacity:.22; } }

    /* ── High Roller's, once the comps stop ─────────────────────────────
       The turn is not anger, it is ACCOUNTING — so the reader does not move
       to the front of the room in a worse mood, it moves to a DIFFERENT ROOM:
       the count room behind the floor, where the money is actually weighed.
       Steel tables, no lamps, hard blue-white fluorescent overhead, and every
       warm tone in the building left on the other side of the door.

       This is the whole visual argument of the theme, and it is the reason it
       could exist beside three others: the Den flares red, CORA flares red,
       and Summer of Mystery drains to bone. NOTHING on the shelf escalates
       COLD. A reviewer holding the two High Roller's blocks side by side
       should see the temperature flip without reading a single token name —
       every surface goes from red-over-blue to blue-over-red. */
    .rp-theme-high-rollers.is-mood-hostile {
      --theme-accent:#8fb4d0; --theme-glow:#dff0ff;   /* the tube, not the lamp */
      --bbx-danger-rgb:  212,74,86;     /* an alarm on a wall, not a felt red */
      --bbx-note-rgb:    176,200,216;   /* the ledger is printed, not written */
      --bbx-key-rgb:     214,230,240;   /* chips are counted now, not played  */
      --bbx-good-rgb:    96,178,196;    /* even winning reads as a total       */
      --bbx-info-rgb:    150,178,200;
      --bbx-dim-rgb:     132,146,158;   /* cold grey — the warm grey is gone   */
      --bbx-stage-rgb:   14,20,26;      --bbx-stage2-rgb:  6,9,12;
      --bbx-screen-rgb:  16,22,28;      --bbx-screen2-rgb: 6,9,12;
      --bbx-card-rgb:    15,21,27;      --bbx-card2-rgb:   8,11,14;
      --bbx-ink:         #e6f0f6;
      --bbx-ink-quiet:   #f2f8fc;
      --bbx-faint:       #3e4c56;
      --bbx-glyph:       #16202a; }
    /* Overhead tubes rather than table lamps: the glow comes from the CEILING
       in flat bands, the floor is unlit, and the brass pinstripe is now the
       gap between two ceiling panels. */
    .rp-theme-high-rollers.is-mood-hostile .rp-page::after {
      opacity:.26;
      background:
        linear-gradient(180deg, rgba(223,240,255,.30), transparent 20%),
        radial-gradient(78% 40% at 50% -6%, rgba(143,180,208,.26), transparent 66%),
        repeating-linear-gradient(90deg, rgba(223,240,255,.06) 0 1px, transparent 1px 28px);
      animation: rpThemeRollCount 4.5s ease-in-out infinite; }
    /* A fluorescent does not breathe like a lamp, it holds and ticks. */
    @keyframes rpThemeRollCount {
      0%,100% { opacity:.26; } 47% { opacity:.29; } 49% { opacity:.16; } 51% { opacity:.30; } }
    /* And the people are lit by it too — the warmth comes out of the faces at
       the same moment it comes out of the room. */
    .rp-theme-high-rollers.is-mood-hostile .rp-page .bb-av img {
      filter: saturate(.5) contrast(1.1) brightness(.96); }

    /* ── Summer Camp ────────────────────────────────────────────────────
       Pine, canvas and late sun. The warmest neutral register on the shelf,
       deliberately: this is the only theme whose ordinary state is genuinely
       pleasant, and the hostile one only works because of it. */
    .rp-theme-summer-camp {
      --theme-accent:#fcd34d; --theme-glow:#fde68a;
      --bbx-danger-rgb:  185,28,28;     /* the red pin on the noticeboard     */
      --bbx-note-rgb:    212,175,77;    /* everything is hand-lettered        */
      --bbx-key-rgb:     253,230,138;   /* late sun through the pines         */
      --bbx-good-rgb:    132,169,90;    /* the one green on the shelf, and it
                                           is the trees rather than a tick    */
      --bbx-info-rgb:    170,158,132;
      --bbx-dim-rgb:     122,110,84;
      --bbx-stage-rgb:   24,20,12;      --bbx-stage2-rgb:  12,10,6;
      --bbx-screen-rgb:  26,22,13;      --bbx-screen2-rgb: 11,9,6;
      --bbx-card-rgb:    25,21,13;      --bbx-card2-rgb:   13,11,7;
      --bbx-ink:         #f4ead2;
      --bbx-ink-quiet:   #fbf3e0;
      --bbx-faint:       #5a5140;
      --bbx-glyph:       #241c0e; }
    .rp-theme-summer-camp .rp-page::after {
      opacity:.15;
      background:
        radial-gradient(48% 30% at 50% -8%, rgba(253,230,138,.26), transparent 66%),
        radial-gradient(72% 56% at 50% 108%, rgba(63,95,58,.16), transparent 74%);
      animation: rpThemeCampSun 13s ease-in-out infinite; }
    .rp-theme-summer-camp .rp-page h1,
    .rp-theme-summer-camp .rp-page h2 {
      letter-spacing:.1em; text-transform:uppercase;
      font-family:"Cabin Sketch","Chalkduster","Bradley Hand",Georgia,serif; }
    /* Sun through moving branches: slow, uneven, never quite still. */
    @keyframes rpThemeCampSun { 0%,100% { opacity:.15; } 38% { opacity:.20; } 64% { opacity:.13; } }

    /* ── Summer Camp, once the announcements stop ───────────────────────
       THE ONLY REGISTER TURN ON THE SHELF THAT GETS QUIETER. The Den flares
       red, CORA flares red, Summer of Mystery drains to bone and High Roller's
       goes fluorescent — all four escalate INTO something. This one escalates
       into absence: the same camp, the same buildings, with the staff removed
       and the sun off it.

       So there is no new hue and no alarm colour. The accent goes from sun to
       moonlight, the greens go blue, and the ambient animation stops moving
       almost entirely, because the thing that was moving was somebody running
       the place. */
    .rp-theme-summer-camp.is-mood-hostile {
      --theme-accent:#9fb6c4; --theme-glow:#c9d6de;   /* moonlight, not sun */
      --bbx-danger-rgb:  168,64,64;     /* the pin is still there, unlit      */
      --bbx-note-rgb:    150,170,182;   /* the board is blank and cold        */
      --bbx-key-rgb:     201,214,222;
      --bbx-good-rgb:    108,132,124;   /* the pines, without the light on    */
      --bbx-info-rgb:    140,152,160;
      --bbx-dim-rgb:     86,98,106;
      --bbx-stage-rgb:   10,16,22;      --bbx-stage2-rgb:  5,9,13;
      --bbx-screen-rgb:  11,18,24;      --bbx-screen2-rgb: 5,9,12;
      --bbx-card-rgb:    11,17,23;      --bbx-card2-rgb:   6,10,14;
      --bbx-ink:         #dde7ee;
      --bbx-ink-quiet:   #eef4f8;
      --bbx-faint:       #45535d;
      --bbx-glyph:       #0e1519; }
    .rp-theme-summer-camp.is-mood-hostile .rp-page::after {
      opacity:.19;
      background:
        radial-gradient(40% 26% at 14% -6%, rgba(201,214,222,.20), transparent 68%),
        radial-gradient(84% 62% at 50% 112%, rgba(10,16,22,.44), transparent 70%);
      animation: rpThemeCampStill 17s ease-in-out infinite; }
    /* Barely anything. What was moving before was a person. */
    @keyframes rpThemeCampStill { 0%,100% { opacity:.19; } 50% { opacity:.21; } }
    /* And the faces lose the summer with the room. */
    .rp-theme-summer-camp.is-mood-hostile .rp-page .bb-av img {
      filter: saturate(.55) contrast(1.06) brightness(.93); }

    /* ── Summer School ────────────────────────────────────────────────────
       A corridor noticeboard under fluorescent light. Deliberately the
       COLDEST neutral on the shelf — every other theme's ordinary register is
       warm or at least alive, and this one is a filing system, which should
       feel like one from week one rather than only after it turns. */
    /* ── Secret Story: a house of locked doors, lit from one screen ─────────
       Night-blue and a single gold. The Voice is everywhere and never seen, so
       the page is dark and the one warm thing on it is the light under a door. */
    .rp-theme-secret-story {
      --theme-accent:#e0b84a; --theme-glow:#f2d27a;
      --bbx-danger-rgb:  196,64,72;
      --bbx-note-rgb:    224,184,74;
      --bbx-key-rgb:     242,210,122;
      --bbx-good-rgb:    96,200,150;
      --bbx-info-rgb:    150,160,200;
      --bbx-dim-rgb:     88,94,124;
      --bbx-stage-rgb:   10,12,26;      --bbx-stage2-rgb:  5,6,16;
      --bbx-screen-rgb:  12,14,30;      --bbx-screen2-rgb: 6,7,18;
      --bbx-card-rgb:    11,13,28;      --bbx-card2-rgb:   6,7,17;
      --bbx-ink:         #eef0f8;
      --bbx-ink-quiet:   #f6f7fc;
      --bbx-faint:       #4c5170;
      --bbx-glyph:       #0a0c1a; }
    .rp-theme-secret-story .rp-page h1,
    .rp-theme-secret-story .rp-page h2 { letter-spacing:.12em; font-family:"Cinzel","Trajan Pro",Georgia,serif; }
    .rp-theme-secret-story.is-mood-hostile { --theme-accent:#f0c860; --bbx-note-rgb: 240,200,96; --bbx-faint:#5a5f80; }

    .rp-theme-summer-school {
      --theme-accent:#7dd3fc; --theme-glow:#bae6fd;
      --bbx-danger-rgb:  190,68,74;     /* a red pen on a laminated sheet     */
      --bbx-note-rgb:    125,211,252;   /* everything here is typed, not written */
      --bbx-key-rgb:     186,230,253;
      --bbx-good-rgb:    74,222,128;    /* the one green: a clique that is safe */
      --bbx-info-rgb:    148,163,184;
      --bbx-dim-rgb:     92,105,120;
      --bbx-stage-rgb:   14,20,28;      --bbx-stage2-rgb:  7,11,16;
      --bbx-screen-rgb:  16,22,30;      --bbx-screen2-rgb: 8,12,17;
      --bbx-card-rgb:    15,21,29;      --bbx-card2-rgb:   8,12,18;
      --bbx-ink:         #e6f2fb;
      --bbx-ink-quiet:   #f2f9ff;
      --bbx-faint:       #4a5666;
      --bbx-glyph:       #0e1620; }
    .rp-theme-summer-school .rp-page::after {
      opacity:.13;
      background:
        radial-gradient(52% 26% at 50% -6%, rgba(186,230,253,.20), transparent 64%),
        repeating-linear-gradient(0deg, rgba(125,211,252,.05) 0 1px, transparent 1px 3px);
      animation: rpThemeCliqueTube 6s ease-in-out infinite; }
    .rp-theme-summer-school .rp-page h1,
    .rp-theme-summer-school .rp-page h2 {
      letter-spacing:.16em; text-transform:uppercase;
      font-family:"Trade Gothic Bold Condensed","Oswald","Haettenschweiler",Impact,sans-serif; }
    /* A tube does not breathe. It holds, and every so often it ticks. */
    @keyframes rpThemeCliqueTube {
      0%,100% { opacity:.13; } 48% { opacity:.15; } 50% { opacity:.09; } 52% { opacity:.15; } }

    /* ── Summer School, once the headings stop applying ───────────────────
       THE ONLY TURN ON THE SHELF THAT IS A SYSTEM FAILING RATHER THAN A MOOD
       DARKENING. The Den flares red, CORA flares red, Summer of Mystery drains
       to bone, High Roller's goes fluorescent and Summer Camp goes silent —
       all five are a temperature or a volume.

       This one keeps its palette almost exactly and breaks its GRID. The
       column rules that held everything in place go crooked and fade, the
       laminate loses its gloss, and the ordered scanline gives way to a
       misprint. Nothing here is angrier than it was. It has simply stopped
       working, which from a filing system is the worst available outcome. */
    .rp-theme-summer-school.is-mood-hostile {
      --theme-accent:#9fb0c4; --theme-glow:#cbd5e1;   /* the light, minus the confidence */
      --bbx-danger-rgb:  176,74,80;
      --bbx-note-rgb:    159,176,196;   /* the ink has gone grey                */
      --bbx-key-rgb:     203,213,225;
      --bbx-good-rgb:    108,134,120;   /* even the safe green has lost its case */
      --bbx-info-rgb:    138,150,164;
      --bbx-dim-rgb:     84,94,106;
      --bbx-stage-rgb:   13,17,23;      --bbx-stage2-rgb:  6,9,13;
      --bbx-screen-rgb:  14,19,25;      --bbx-screen2-rgb: 7,10,14;
      --bbx-card-rgb:    14,18,24;      --bbx-card2-rgb:   7,10,15;
      --bbx-ink:         #dbe4ee;
      --bbx-ink-quiet:   #eef4fa;
      --bbx-faint:       #48525f;
      --bbx-glyph:       #0d1117; }
    .rp-theme-summer-school.is-mood-hostile .rp-page::after {
      opacity:.17;
      background:
        radial-gradient(46% 24% at 50% -6%, rgba(203,213,225,.12), transparent 66%),
        repeating-linear-gradient(1.5deg, rgba(159,176,196,.05) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(-1.5deg, rgba(159,176,196,.04) 0 1px, transparent 1px 11px);
      animation: rpThemeCliqueMisprint 9s ease-in-out infinite; }
    /* Two rules at slightly wrong angles, drifting apart. A page that will not
       line up however long you look at it. */
    @keyframes rpThemeCliqueMisprint {
      0%,100% { opacity:.17; background-position:0 0, 0 0, 0 0; }
      50%     { opacity:.20; background-position:0 0, 3px 0, -3px 0; } }
    /* And the faces lose the laminate with the rest of the filing. */
    .rp-theme-summer-school.is-mood-hostile .rp-page .bb-av img {
      filter: saturate(.6) contrast(1.04) brightness(.95); }

    /* Holds for every theme, present and future, regardless of where in this
       section its block was appended — see the note at the top. */
    @media (prefers-reduced-motion: reduce) {
      [class*="rp-theme-"] .rp-page::after { animation:none !important; } }

    /* ── VP: Component classes ── */
    .vp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
    .vp-card.fire  { border-color: var(--accent-fire); }
    .vp-card.ice   { border-color: var(--accent-ice); }
    .vp-card.gold  { border-color: var(--accent-gold); }
    .vp-section-header { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 0 6px 10px; margin: 16px 0 8px; border-left: 3px solid var(--accent-fire); color: var(--muted); }
    .vp-section-header.ice  { border-color: var(--accent-ice); }
    .vp-section-header.gold { border-color: var(--accent-gold); }

    /* ── VP: Tribal stump ── */
    .vp-stump-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
    .vp-stump { position: relative; width: 72px; height: 20px; border-radius: 6px;
      background: radial-gradient(ellipse at 50% 30%, #8b6914, #5c3d0a);
      box-shadow: 0 2px 16px rgba(232,135,58,0.25); }
    .vp-stump::before { content:''; position:absolute; inset:0; border-radius:6px;
      background: linear-gradient(to right, rgba(61,37,5,0.7), transparent 20%, transparent 80%, rgba(61,37,5,0.7));
      pointer-events:none; }
    .vp-stump-wrap img { margin-bottom: -10px; }

    /* ── VP: Torch snuff ── */
    /* Uses animation (not transition) so it fires when element is inserted into DOM via innerHTML */
    @keyframes torchSnuff {
      from { filter: brightness(1) grayscale(0); }
      to   { filter: brightness(0.15) grayscale(1); }
    }
    .torch-snuffed { position:relative; display:inline-block; }
    .torch-snuffed img { animation: torchSnuff 1.2s ease-in 1.5s both; }
    .torch-snuff-canvas { position:absolute; top:-80px; left:50%; transform:translateX(-50%); pointer-events:none; }

    /* ── Slasher Night ── */
    .slasher-portrait-glow { border-radius:50%; box-shadow:0 0 20px rgba(218,54,51,0.4), 0 0 40px rgba(218,54,51,0.15); }
    .slasher-caught-portrait { opacity:0.4; filter:grayscale(0.7); border:2px solid rgba(218,54,51,0.4); border-radius:50%; }
    .slasher-score-pos { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.5px; padding:2px 6px; border-radius:4px; background:rgba(63,185,80,0.12); color:#3fb950; }
    .slasher-score-neg { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.5px; padding:2px 6px; border-radius:4px; background:rgba(218,54,51,0.12); color:#f85149; }
    .slasher-event-card { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:#0d1117; border:1px solid #21262d; border-radius:8px; margin-bottom:6px; }
    .slasher-event-text { font-size:12px; color:#c9d1d9; line-height:1.6; flex:1; }
    .slasher-atmosphere { font-size:12px; color:#484f58; font-style:italic; text-align:center; padding:12px 0; letter-spacing:0.3px; }
    .slasher-round-header { font-family:var(--font-display); font-size:14px; letter-spacing:1px; color:#e6edf3; padding:8px 0; border-bottom:1px solid #21262d; margin-bottom:10px; }
    .slasher-showdown-vs { font-family:var(--font-display); font-size:36px; color:#da3633; text-shadow:0 0 20px rgba(218,54,51,0.5); }
    .slasher-leaderboard-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid #161b22; }
    .slasher-leaderboard-bar { height:6px; border-radius:3px; transition:width 0.8s ease-out; }
    @keyframes slasherPulse { 0%,100% { box-shadow:0 0 15px rgba(218,54,51,0.3); } 50% { box-shadow:0 0 30px rgba(218,54,51,0.6); } }
    .slasher-pulse { animation: slasherPulse 2s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .slasher-pulse { animation: none; box-shadow:0 0 20px rgba(218,54,51,0.4); } }

    /* ═══ VHS TAPE SHELL — Slasher Night Overdrive ═══ */
    .vhs-shell { position:relative; overflow:hidden; background:#0a0a0a; border-radius:10px; border:1px solid #1a1a1a; }
    .vhs-shell::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:5;
      background:repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px); }
    .vhs-shell[data-act="2"]::before { opacity:0.05; }
    .vhs-shell[data-act="3"]::before { opacity:0.08; }

    /* Tracking lines — animated distortion bands */
    @keyframes vhsTracking { 0% { transform:translateY(-100%); } 100% { transform:translateY(100vh); } }
    .vhs-tracking { position:absolute; left:0; right:0; height:4px; z-index:6; pointer-events:none;
      background:linear-gradient(180deg, transparent, rgba(255,255,255,0.07), transparent); animation:vhsTracking 8s linear infinite; }
    .vhs-shell[data-act="2"] .vhs-tracking { animation-duration:5s; height:6px; }
    .vhs-shell[data-act="3"] .vhs-tracking { animation-duration:3s; height:8px; background:linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent); }

    /* Film grain overlay */
    @keyframes vhsGrain { 0% { transform:translate(0,0); } 10% { transform:translate(-1%,-1%); } 20% { transform:translate(1%,1%); }
      30% { transform:translate(-1%,0); } 40% { transform:translate(0,1%); } 50% { transform:translate(1%,-1%); }
      60% { transform:translate(-1%,1%); } 70% { transform:translate(0,-1%); } 80% { transform:translate(1%,0); }
      90% { transform:translate(-1%,-1%); } 100% { transform:translate(0,0); } }
    .vhs-grain { position:absolute; inset:-10%; z-index:4; pointer-events:none; opacity:0.04;
      background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
      animation:vhsGrain 0.5s steps(5) infinite; }
    .vhs-shell[data-act="2"] .vhs-grain { opacity:0.07; }
    .vhs-shell[data-act="3"] .vhs-grain { opacity:0.12; }

    /* Timecode + tape counter */
    .vhs-timecode { position:absolute; top:10px; right:14px; z-index:10; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,0.6); letter-spacing:1px; }
    .vhs-timecode .rec-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#da3633; margin-right:4px; vertical-align:middle; }
    @keyframes recBlink { 0%,100% { opacity:1; } 50% { opacity:0.2; } }
    .vhs-timecode .rec-dot { animation:recBlink 1.5s ease-in-out infinite; }
    .vhs-tape-counter { position:absolute; bottom:10px; left:14px; z-index:10; font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,0.4); letter-spacing:1px; }

    /* Color grading per act */
    .vhs-shell[data-act="1"] .vhs-content { filter:saturate(0.92) sepia(0.05); }
    .vhs-shell[data-act="2"] .vhs-content { filter:saturate(0.8) sepia(0.12) brightness(0.95); }
    .vhs-shell[data-act="3"] .vhs-content { filter:saturate(0.6) sepia(0.2) brightness(0.9) contrast(1.05); }

    /* SIGNAL LOST portrait effect */
    @keyframes signalLostFlicker { 0% { opacity:1; filter:none; } 15% { opacity:0.3; filter:grayscale(1); }
      30% { opacity:0.8; filter:none; } 45% { opacity:0.1; filter:grayscale(1) brightness(2); }
      60% { opacity:0.6; filter:none; } 75% { opacity:0.2; filter:grayscale(1); } 100% { opacity:0.3; filter:grayscale(1); } }
    .vhs-signal-lost { position:relative; }
    .vhs-signal-lost img { filter:grayscale(1) brightness(0.5) !important; opacity:0.4; }
    .vhs-signal-lost::after { content:'SIGNAL LOST'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
      font-family:var(--font-mono); font-size:8px; font-weight:700; color:#da3633; letter-spacing:1px;
      background:repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,0.3) 1px, rgba(0,0,0,0.3) 2px); }
    .vhs-catching { animation:signalLostFlicker 0.8s steps(1) forwards; }

    /* POV viewfinder */
    .vhs-pov-frame { position:relative; }
    .vhs-pov-frame::before { content:''; position:absolute; inset:-3px; border:2px solid rgba(218,54,51,0.5);
      border-radius:50%; clip-path:polygon(0 0,30% 0,30% 3%,0 3%,0 0, 70% 0,100% 0,100% 3%,70% 3%,70% 0,
        100% 0,100% 30%,97% 30%,97% 0, 100% 70%,100% 100%,97% 100%,97% 70%,
        0 100%,0 70%,3% 70%,3% 100%, 0 30%,0 0,3% 0,3% 30%); }
    .vhs-pov-rec { position:absolute; top:-12px; right:-4px; font-family:var(--font-mono); font-size:7px; color:#da3633; letter-spacing:0.5px; }

    /* Proximity static on portraits */
    .vhs-proximity-near img { filter:brightness(0.85); box-shadow:0 0 6px rgba(255,255,255,0.1); }
    .vhs-proximity-closing img { filter:brightness(0.7) saturate(0.5); box-shadow:0 0 12px rgba(218,54,51,0.3); }
    @keyframes proximityPulse { 0%,100% { box-shadow:0 0 8px rgba(218,54,51,0.2); } 50% { box-shadow:0 0 18px rgba(218,54,51,0.5); } }
    .vhs-proximity-closing { animation:proximityPulse 1.5s ease-in-out infinite; }

    /* Jumpscare overlays */
    @keyframes jumpscareBlackout { 0% { opacity:0; } 100% { opacity:1; } }
    @keyframes jumpscareSlasher { 0% { transform:scale(0.5); opacity:0; } 50% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); opacity:0.8; } }
    @keyframes jumpscareFlicker { 0% { opacity:1; } 20% { opacity:0; } 40% { opacity:1; } 60% { opacity:0; } 80% { opacity:1; } 100% { opacity:0; } }
    .vhs-jumpscare-overlay { position:fixed; inset:0; z-index:1000; background:#000; display:none; align-items:center; justify-content:center; }
    .vhs-jumpscare-overlay.active { display:flex; }
    .vhs-jumpscare-face { width:200px; height:200px; background:radial-gradient(circle, #1a0000 60%, #000 100%);
      border-radius:50%; position:relative; animation:jumpscareSlasher 0.5s ease-out; }
    .vhs-jumpscare-face::before, .vhs-jumpscare-face::after { content:''; position:absolute; width:12px; height:12px;
      background:#da3633; border-radius:50%; top:40%; box-shadow:0 0 20px #da3633, 0 0 40px rgba(218,54,51,0.5); }
    .vhs-jumpscare-face::before { left:32%; }
    .vhs-jumpscare-face::after { right:32%; }

    /* Body count sidebar */
    .vhs-body-count { font-family:var(--font-mono); font-size:11px; color:#da3633; letter-spacing:1px; padding:8px 12px; background:rgba(218,54,51,0.06); border:1px solid rgba(218,54,51,0.2); border-radius:6px; }
    .vhs-body-count-entry { display:flex; align-items:center; gap:8px; padding:3px 0; opacity:0.6; }
    .vhs-body-count-x { color:#da3633; font-weight:800; font-size:14px; }

    /* Environment OSD (on-screen display) */
    .vhs-osd { font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,0.7); letter-spacing:0.5px;
      padding:6px 12px; background:rgba(0,0,0,0.5); text-align:center; margin:8px 0; }

    /* Chris director commentary */
    .vhs-chris-line { font-size:12px; color:#f0c040; font-style:italic; text-align:center; padding:10px 16px; margin:8px 0;
      background:rgba(240,192,64,0.05); border-left:3px solid rgba(240,192,64,0.3); border-radius:0 6px 6px 0; }

    /* Act card */
    .vhs-act-card { text-align:center; padding:40px 20px; }
    .vhs-act-card h2 { font-family:var(--font-display); font-size:42px; color:#da3633; letter-spacing:4px; text-shadow:0 0 30px rgba(218,54,51,0.4); margin:0 0 8px; }
    .vhs-act-card p { font-size:13px; color:#8b949e; font-style:italic; margin:0; }

    /* Credits roll */
    .vhs-credits { text-align:center; font-family:var(--font-mono); }
    .vhs-credits-starring { font-size:11px; color:#8b949e; letter-spacing:2px; text-transform:uppercase; margin:16px 0 6px; }
    .vhs-credits-name { font-size:16px; color:#e6edf3; font-weight:700; margin:4px 0; }
    .vhs-credits-role { font-size:11px; color:#f0c040; letter-spacing:1px; }
    .vhs-credits-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid #161b22; font-size:11px; color:#8b949e; }
    .vhs-credits-dots { flex:1; border-bottom:1px dotted #21262d; margin:0 8px; }

    /* Mute toggle */
    .vhs-mute-btn { position:absolute; top:10px; left:14px; z-index:10; background:none; border:1px solid rgba(255,255,255,0.2);
      border-radius:4px; padding:2px 6px; font-size:14px; cursor:pointer; color:rgba(255,255,255,0.5); }
    .vhs-mute-btn:hover { color:rgba(255,255,255,0.8); border-color:rgba(255,255,255,0.4); }

    @media (prefers-reduced-motion: reduce) {
      .vhs-tracking, .vhs-grain { animation:none !important; }
      .vhs-catching { animation:none !important; }
      .vhs-proximity-closing { animation:none !important; }
      .vhs-timecode .rec-dot { animation:none !important; }
    }

    /* Horror beat interstitials */
    .slasher-beat-card {
      text-align:center; padding:16px 24px; margin:8px 0;
      font-style:italic; font-size:13px; color:rgba(218,54,51,0.7);
      background:rgba(0,0,0,0.4); border-left:2px solid rgba(218,54,51,0.3);
      font-family:var(--font-mono); letter-spacing:0.5px; line-height:1.6;
    }

    /* Scary catch card */
    .slasher-catch-card {
      background: linear-gradient(135deg, rgba(139,0,0,0.3), rgba(218,54,51,0.15)) !important;
      border: 1px solid rgba(218,54,51,0.6) !important;
      animation: catchPulse 2s ease-in-out infinite;
      position: relative;
    }
    .slasher-catch-card::after {
      content: 'SIGNAL LOST';
      position:absolute; top:4px; right:8px;
      font-family:var(--font-mono); font-size:8px; letter-spacing:2px;
      color:rgba(218,54,51,0.5); text-transform:uppercase;
    }
    @keyframes catchPulse {
      0%, 100% { border-color: rgba(218,54,51,0.6); }
      50% { border-color: rgba(218,54,51,0.2); }
    }
    @media (prefers-reduced-motion: reduce) { .slasher-catch-card { animation:none !important; } }

    /* Next button horror style */
    .slasher-next-btn {
      display:block; width:100%; margin:12px 0; padding:14px;
      font-family:var(--font-mono); font-size:13px; letter-spacing:2px;
      color:#da3633; background:rgba(218,54,51,0.06);
      border:1px solid rgba(218,54,51,0.3); border-radius:6px;
      cursor:pointer; text-align:center; transition:all 0.2s;
    }
    .slasher-next-btn:hover {
      background:rgba(218,54,51,0.12); border-color:rgba(218,54,51,0.5);
      text-shadow:0 0 8px rgba(218,54,51,0.5);
    }

    /* ── VP: Animations ── */
    @keyframes torchFlicker {
      0%,100% { opacity: 0.10; }
      50%      { opacity: 0.18; }
    }
    @keyframes voteFlash {
      0%   { box-shadow: 0 0 0 0 var(--accent-fire); }
      100% { box-shadow: 0 0 0 16px transparent; }
    }
    @keyframes goldPulse {
      0%   { box-shadow: 0 0 0 0 var(--accent-gold); }
      100% { box-shadow: 0 0 0 20px transparent; }
    }
    @keyframes staggerIn {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-32px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes bannerUnfurl {
      from { transform: scaleX(0); opacity: 0; }
      to   { transform: scaleX(1); opacity: 1; }
    }
    @keyframes scrollDrop {
      from { transform: scaleY(0); transform-origin: top center; opacity: 0; }
      to   { transform: scaleY(1); transform-origin: top center; opacity: 1; }
    }
    @keyframes bellPulse {
      0%, 100% { transform: scale(1); }
      25% { transform: scale(1.15) rotate(-3deg); }
      50% { transform: scale(1.1) rotate(3deg); }
      75% { transform: scale(1.05) rotate(-1deg); }
    }
    @keyframes paintSplat {
      0% { transform: scale(0) rotate(0deg); opacity: 1; }
      50% { transform: scale(1.5) rotate(15deg); opacity: 0.8; }
      100% { transform: scale(1) rotate(5deg); opacity: 0.6; }
    }
    @keyframes paintDrip {
      0% { height: 0; opacity: 0.8; }
      100% { height: 20px; opacity: 0.3; }
    }
    @keyframes dodgeSlide {
      0% { transform: translateX(0); }
      30% { transform: translateX(-15px); }
      60% { transform: translateX(5px); }
      100% { transform: translateX(0); }
    }
    @keyframes targetPulse {
      0%, 100% { box-shadow: 0 0 0 rgba(255,0,0,0); }
      50% { box-shadow: 0 0 15px rgba(255,0,0,0.3); }
    }
    @keyframes flamePulse {
      0%, 100% { text-shadow: 0 0 10px rgba(255,100,0,0.3); }
      50% { text-shadow: 0 0 20px rgba(255,100,0,0.6), 0 0 40px rgba(255,50,0,0.2); }
    }
    @keyframes trustGlow {
      0%, 100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
      50% { box-shadow: 0 0 20px rgba(56,189,248,0.4); }
    }
    @keyframes distrustCrack {
      0% { opacity: 0; transform: scaleY(0); }
      50% { opacity: 1; transform: scaleY(1.2); }
      100% { opacity: 0.8; transform: scaleY(1); }
    }
    @keyframes ropeDrop {
      0% { transform: translateY(-30px); opacity: 0; }
      60% { transform: translateY(5px); opacity: 1; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes ropeSnap {
      0% { transform: translateY(0); }
      20% { transform: translateY(-10px); }
      100% { transform: translateY(80px); opacity: 0; }
    }
    @keyframes climbUp {
      0% { transform: translateY(20px); opacity: 0.5; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes poisonPulse {
      0%, 100% { filter: hue-rotate(0deg); }
      50% { filter: hue-rotate(80deg) brightness(0.8); }
    }
    @keyframes blindfoldReveal {
      0% { clip-path: inset(0 0 0 100%); }
      100% { clip-path: inset(0 0 0 0); }
    }
    @keyframes jellyZap {
      0%, 100% { opacity: 0.3; }
      10%, 30%, 50% { opacity: 1; text-shadow: 0 0 8px #38bdf8; }
      20%, 40% { opacity: 0.5; }
    }
    @keyframes tobogganShake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px) rotate(-1deg); }
      75% { transform: translateX(4px) rotate(1deg); }
    }
    @keyframes trustBuild {
      0% { width: 0; }
      100% { width: var(--trust-pct); }
    }
    @keyframes secretGlow2 {
      0%, 100% { box-shadow: 0 0 0 rgba(250,204,21,0); border-color: rgba(250,204,21,0.2); }
      50% { box-shadow: 0 0 20px rgba(250,204,21,0.15); border-color: rgba(250,204,21,0.5); }
    }
    @keyframes steamRise {
      0% { opacity: 0.6; transform: translateY(0) scaleX(1); }
      100% { opacity: 0; transform: translateY(-30px) scaleX(1.5); }
    }
    @keyframes scoreReveal {
      0% { transform: scale(0.5); opacity: 0; }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes plateSlide {
      0% { transform: translateX(-30px); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }

    /* ── Say Uncle: Dungeon of Misfortune Overdrive ── */
    @keyframes suWheelSpin {
      0%   { transform: rotate(0deg); }
      60%  { transform: rotate(1080deg); }
      80%  { transform: rotate(1170deg); }
      90%  { transform: rotate(1190deg); }
      100% { transform: rotate(1200deg); }
    }
    @keyframes suTorchFlicker {
      0%, 100% { opacity: 0.12; transform: scale(1) translateY(0); }
      20%      { opacity: 0.18; transform: scale(1.02) translateY(-1px); }
      40%      { opacity: 0.10; transform: scale(0.98) translateY(1px); }
      60%      { opacity: 0.20; transform: scale(1.03) translateY(-2px); }
      80%      { opacity: 0.14; transform: scale(0.99) translateY(0); }
    }
    @keyframes suTorchGlow {
      0%, 100% { box-shadow: 0 0 30px rgba(232,160,53,0.05), 0 0 60px rgba(232,160,53,0.02); }
      50%      { box-shadow: 0 0 40px rgba(232,160,53,0.10), 0 0 80px rgba(232,160,53,0.04); }
    }
    @keyframes suCardSlam {
      0%   { transform: translateY(-20px) scale(1.05); opacity: 0; }
      60%  { transform: translateY(3px) scale(0.98); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes suCardShake {
      0%, 100% { transform: translateX(0); }
      15%  { transform: translateX(-6px) rotate(-0.5deg); }
      30%  { transform: translateX(5px) rotate(0.4deg); }
      45%  { transform: translateX(-4px) rotate(-0.3deg); }
      60%  { transform: translateX(3px) rotate(0.2deg); }
      80%  { transform: translateX(-1px); }
    }
    @keyframes suGoldBurst {
      0%   { box-shadow: 0 0 0 0 rgba(232,160,53,0.5); }
      50%  { box-shadow: 0 0 20px 4px rgba(232,160,53,0.3); }
      100% { box-shadow: 0 0 0 0 rgba(232,160,53,0); }
    }
    @keyframes suRedFlash {
      0%   { box-shadow: 0 0 0 0 rgba(218,54,51,0.6); background: rgba(218,54,51,0.08); }
      30%  { box-shadow: 0 0 15px 3px rgba(218,54,51,0.4); background: rgba(218,54,51,0.12); }
      100% { box-shadow: 0 0 0 0 rgba(218,54,51,0); background: rgba(218,54,51,0.04); }
    }
    @keyframes suPhaseWipe {
      0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
      100% { clip-path: inset(0 0 0 0); opacity: 1; }
    }
    @keyframes suPillorySway {
      0%, 100% { transform: rotate(0deg); }
      25%  { transform: rotate(1.5deg); }
      75%  { transform: rotate(-1.5deg); }
    }
    @keyframes suCategoryPulse {
      0%, 100% { border-color: var(--su-cat-color); box-shadow: 0 0 0 rgba(var(--su-cat-rgb), 0); }
      50%      { box-shadow: 0 0 12px rgba(var(--su-cat-rgb), 0.2); }
    }
    @keyframes suEmberFloat {
      0%   { opacity: 0.8; transform: translateY(0) translateX(0); }
      50%  { opacity: 0.5; transform: translateY(-20px) translateX(5px); }
      100% { opacity: 0; transform: translateY(-40px) translateX(-3px); }
    }
    .su-dungeon {
      position: relative; overflow: hidden;
      background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
      animation: suTorchGlow 4s ease-in-out infinite;
    }
    .su-dungeon::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(232,160,53,0.08) 0%, transparent 70%);
      animation: suTorchFlicker 3s ease-in-out infinite;
    }
    .su-dungeon > * { position: relative; z-index: 1; }
    .su-wheel-spin svg { animation: suWheelSpin 2s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
    .su-card-slam { animation: suCardSlam 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    .su-card-fail { animation: suCardSlam 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both, suCardShake 0.5s ease-in-out 0.4s both, suRedFlash 0.8s ease-out 0.3s both; }
    .su-card-dominant { animation: suCardSlam 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both, suGoldBurst 1s ease-out 0.3s both; }
    .su-card-backfire { animation: suCardSlam 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both, suRedFlash 0.8s ease-out 0.3s both; }
    .su-phase-wipe { animation: suPhaseWipe 0.6s ease-out both; }
    .su-pillory-sway { animation: suPillorySway 3s ease-in-out infinite; }
    .su-ember {
      position: absolute; width: 3px; height: 3px; border-radius: 50%;
      background: #e8a035; pointer-events: none;
      animation: suEmberFloat 2.5s ease-out infinite;
    }

    /* ── Brunch of Disgustingness Overdrive ── */
    @keyframes brTraySlide {
      0%   { transform: translateX(-50px) rotate(-1deg); opacity: 0; }
      70%  { transform: translateX(4px) rotate(0.3deg); opacity: 1; }
      100% { transform: translateX(0) rotate(0deg); opacity: 1; }
    }
    @keyframes brRefuseStamp {
      0%   { transform: scale(2.5) rotate(-20deg); opacity: 0; }
      55%  { transform: scale(0.85) rotate(3deg); opacity: 1; }
      75%  { transform: scale(1.05) rotate(-1deg); opacity: 1; }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes brVomitRipple {
      0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.7), 0 0 0 0 rgba(74,222,128,0.4); }
      40%  { box-shadow: 0 0 0 10px rgba(74,222,128,0.35), 0 0 0 4px rgba(74,222,128,0.6); }
      70%  { box-shadow: 0 0 0 22px rgba(74,222,128,0.12), 0 0 0 12px rgba(74,222,128,0.2); }
      100% { box-shadow: 0 0 0 36px rgba(74,222,128,0), 0 0 0 24px rgba(74,222,128,0); }
    }
    @keyframes brShotFill {
      0%   { height: 0; }
      100% { height: 100%; }
    }
    @keyframes brSlimeDrip {
      0%   { height: 0; opacity: 0.9; }
      100% { height: 36px; opacity: 0.2; }
    }
    @keyframes brGagShake {
      0%, 100% { transform: translateX(0) rotate(0deg); }
      15% { transform: translateX(-6px) rotate(-2deg); }
      30% { transform: translateX(6px) rotate(1.5deg); }
      50% { transform: translateX(-4px) rotate(-1deg); }
      70% { transform: translateX(3px) rotate(0.5deg); }
      85% { transform: translateX(-2px); }
    }
    @keyframes brStinkFloat {
      0%, 100% { opacity: 0.3; transform: translateY(0) rotate(0deg); }
      50%      { opacity: 0.6; transform: translateY(-16px) rotate(8deg); }
    }
    @keyframes brSplatBurst {
      0%   { transform: scale(0) rotate(-10deg); opacity: 0.9; }
      45%  { transform: scale(1.4) rotate(3deg); opacity: 0.7; }
      100% { transform: scale(1) rotate(0deg); opacity: 0.35; }
    }
    @keyframes brPortraitSick {
      0%   { filter: brightness(1) saturate(1); }
      50%  { filter: brightness(0.85) saturate(1.4) hue-rotate(40deg); }
      100% { filter: brightness(0.75) saturate(0.4) hue-rotate(80deg); }
    }
    @keyframes brScoreFlip {
      0%   { transform: rotateX(-90deg) scale(0.8); opacity: 0; }
      60%  { transform: rotateX(8deg) scale(1.05); opacity: 1; }
      100% { transform: rotateX(0deg) scale(1); opacity: 1; }
    }
    @keyframes brVsGlow {
      0%, 100% { text-shadow: 0 0 8px rgba(74,222,128,0.4), 0 0 2px rgba(74,222,128,0.8); }
      50%       { text-shadow: 0 0 24px rgba(74,222,128,0.9), 0 0 48px rgba(74,222,128,0.4), 0 0 80px rgba(74,222,128,0.2); }
    }
    @keyframes brTapeFlicker {
      0%, 100% { opacity: 1; }
      33%       { opacity: 0.6; }
      66%       { opacity: 0.85; }
    }
    @keyframes brDominantPulse {
      0%, 100% { box-shadow: 0 0 6px rgba(45,212,191,0.4), inset 0 0 6px rgba(45,212,191,0.1); }
      50%       { box-shadow: 0 0 18px rgba(45,212,191,0.8), inset 0 0 12px rgba(45,212,191,0.2); }
    }
    @keyframes brScoreFlash {
      0%   { opacity: 1; transform: scale(1); }
      30%  { opacity: 1; transform: scale(1.12); filter: brightness(1.5); }
      60%  { opacity: 0.9; transform: scale(1.04); }
      100% { opacity: 1; transform: scale(1); filter: brightness(1); }
    }
    @keyframes brTitleGlow {
      0%, 100% { text-shadow: 0 0 10px rgba(74,222,128,0.5), 0 0 30px rgba(74,222,128,0.2); }
      50%       { text-shadow: 0 0 20px rgba(74,222,128,1), 0 0 50px rgba(74,222,128,0.5), 0 0 80px rgba(74,222,128,0.2); }
    }
    .br-canteen {
      position: relative; overflow: hidden;
      background: radial-gradient(ellipse 90% 60% at 50% 20%, rgba(74,222,128,0.10) 0%, rgba(26,33,24,0.0) 65%), linear-gradient(180deg, #1a2118 0%, #141810 100%);
    }
    .br-canteen::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse 75% 50% at 50% 5%, rgba(74,222,128,0.08) 0%, transparent 65%),
                  radial-gradient(ellipse 40% 25% at 20% 80%, rgba(74,222,128,0.04) 0%, transparent 55%),
                  radial-gradient(ellipse 40% 25% at 80% 85%, rgba(74,222,128,0.03) 0%, transparent 55%);
    }
    .br-canteen::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(74,222,128,0.008) 3px, rgba(74,222,128,0.008) 4px);
    }
    .br-canteen > * { position: relative; z-index: 1; }
    .br-card-slam { animation: suCardSlam 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    .br-tray-slide { animation: brTraySlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .br-gag-shake { animation: brGagShake 0.55s ease-in-out both; }
    .br-vomit-ripple { animation: brVomitRipple 1.1s ease-out both; }
    .br-refuse-stamp { animation: brRefuseStamp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    .br-dominant-glow { animation: brDominantPulse 2s ease-in-out infinite; border-radius: 4px; }
    .br-score-flash { animation: brScoreFlash 0.6s ease-out both; }
    .br-splat {
      position: relative; display: inline-block;
    }
    .br-splat::before {
      content: '';
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
      width: 140%; height: 140%;
      background: radial-gradient(ellipse, rgba(74,222,128,0.35) 0%, rgba(74,222,128,0.1) 45%, transparent 70%);
      border-radius: 40% 60% 55% 45% / 45% 55% 60% 40%;
      animation: brSplatBurst 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
      pointer-events: none; z-index: -1;
    }
    .br-stink-line {
      position: absolute; width: 2px; height: 20px; pointer-events: none;
      background: linear-gradient(to top, rgba(74,222,128,0.4), transparent);
      animation: brStinkFloat 2.2s ease-in-out infinite;
    }
    .br-tray {
      background: linear-gradient(135deg, #242b22, #1c2219, #202820);
      border: 1px solid rgba(74,222,128,0.18);
      border-radius: 10px;
      box-shadow: inset 0 1px 0 rgba(74,222,128,0.06), 0 2px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(74,222,128,0.04);
      padding: 0;
      margin-bottom: 14px;
      overflow: hidden;
    }
    .br-tray-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(74,222,128,0.14);
      background: rgba(74,222,128,0.04);
    }
    .br-tray-body {
      display: flex; min-height: 120px;
    }
    .br-tray-side {
      flex: 1; padding: 10px;
    }
    .br-tray-center {
      flex: 1.2; padding: 12px;
      border-left: 1px dashed rgba(74,222,128,0.2);
      border-right: 1px dashed rgba(74,222,128,0.2);
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      text-align: center;
      background: rgba(74,222,128,0.02);
    }
    .br-tray-footer {
      padding: 8px 14px;
      border-top: 1px solid rgba(74,222,128,0.12);
      text-align: center;
      background: rgba(74,222,128,0.025);
    }
    .br-player-result {
      display: flex; align-items: flex-start; gap: 6px;
      margin-bottom: 8px; padding-bottom: 8px;
      border-bottom: 1px solid rgba(74,222,128,0.08);
    }
    .br-player-result:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .br-result-badge {
      display: inline-block; font-size: 9px; font-weight: 700;
      letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px;
      margin-bottom: 3px;
    }
    .br-confessional {
      display: flex; gap: 12px; align-items: center;
      padding: 14px; margin-bottom: 10px; border-radius: 10px;
      background: rgba(26,33,24,0.85);
      border: 1px solid rgba(74,222,128,0.18);
    }
    .br-tape-line {
      border-top: 2px dashed #f85149;
      margin: 12px 0;
      position: relative;
      text-align: center;
    }
    .br-tape-line::after {
      content: 'THE LINE';
      position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
      font-size: 8px; font-weight: 700; letter-spacing: 2px; color: #f85149;
      background: #1a2118; padding: 0 8px;
    }

    /* ── Awake-A-Thon Overdrive ── */
    @keyframes aatStarSpin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }
    @keyframes aatFireFlicker {
      0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
      20%      { transform: scaleY(1.08) scaleX(0.96); opacity: 1; }
      40%      { transform: scaleY(0.92) scaleX(1.05); opacity: 0.78; }
      60%      { transform: scaleY(1.06) scaleX(0.97); opacity: 0.95; }
      80%      { transform: scaleY(0.95) scaleX(1.03); opacity: 0.83; }
    }
    @keyframes aatGlowPulse {
      0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
      50%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
    }
    @keyframes aatZzz {
      0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }
      15%  { opacity: 0.85; }
      100% { opacity: 0; transform: translateY(-50px) translateX(16px) scale(1.3); }
    }
    @keyframes aatDimSeat {
      from { opacity: 1; filter: brightness(1); }
      to   { opacity: 0.25; filter: brightness(0.3) grayscale(0.8); }
    }
    @keyframes aatSunrise {
      0%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
      60% { opacity: 0.85; }
      100%{ transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }
    @keyframes aatPhaseShift {
      0%   { opacity: 0; transform: scaleX(0.85); }
      100% { opacity: 1; transform: scaleX(1); }
    }
    @keyframes aatEmberRise {
      0%   { opacity: 0.7; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-45px) scale(0.15); }
    }
    .aat-wrap { position: relative; overflow: clip; }
    .aat-starfield {
      position: absolute; top: 50%; left: 50%;
      width: 2px; height: 2px; border-radius: 50%;
      pointer-events: none; z-index: 0;
      animation: aatStarSpin 240s linear infinite;
    }
    .aat-content { position: relative; z-index: 1; }
    .aat-fire { position: relative; width: 64px; height: 44px; margin: 0 auto; transition: opacity 0.8s ease; }
    .aat-fire-core {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 32px; height: 26px;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      animation: aatFireFlicker 1.8s ease-in-out infinite;
      filter: blur(1.5px);
    }
    .aat-fire-glow {
      position: absolute; bottom: -12px; left: 50%;
      width: 110px; height: 55px; border-radius: 50%;
      animation: aatGlowPulse 3.5s ease-in-out infinite;
      pointer-events: none;
    }
    .aat-embers { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); pointer-events: none; }
    .aat-ember {
      position: absolute; width: 3px; height: 3px; border-radius: 50%;
      background: #f59e0b; animation: aatEmberRise 2.5s ease-out infinite;
    }
    .aat-hour-display {
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
      color: #484f58; text-align: center; padding: 10px 0 6px;
      transition: color 0.6s ease;
    }
    .aat-seat-zzz {
      position: absolute; top: -6px; right: -6px; font-size: 13px;
      pointer-events: none; animation: aatZzz 2.2s ease-out both;
      z-index: 2;
    }
    .aat-dropout-card {
      padding: 10px 14px; margin-bottom: 4px; border-radius: 8px;
      border: 1px solid rgba(139,148,158,0.06);
      background: rgba(13,17,23,0.5);
      animation: scrollDrop 0.35s var(--ease-broadcast) both;
      backdrop-filter: blur(4px);
    }
    .aat-dropout-portrait { position: relative; flex-shrink: 0; }
    .aat-dropout-portrait.asleep { animation: aatDimSeat 0.8s ease-out 0.4s both; }
    .aat-sunrise-burst {
      position: absolute; top: 50%; left: 50%;
      width: 280px; height: 280px; border-radius: 50%;
      background: radial-gradient(circle, rgba(251,191,36,0.35), rgba(245,158,11,0.15) 40%, transparent 70%);
      animation: aatSunrise 1.6s var(--ease-broadcast) 0.3s both;
      pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .aat-starfield { animation: none; }
      .aat-fire-core { animation: none; opacity: 0.85; }
      .aat-fire-glow { animation: none; opacity: 0.7; }
      .aat-ember { animation: none; display: none; }
      .aat-dropout-portrait.asleep { animation: none; opacity: 0.25; filter: brightness(0.3) grayscale(0.8); }
      .aat-seat-zzz { animation: none; opacity: 0.6; transform: translateY(-20px); }
      .aat-sunrise-burst { animation: none; transform: translate(-50%,-50%) scale(1); opacity: 1; }
      .aat-dropout-card { animation: none; }
      .aat-phase-marker { animation: none; opacity: 1; transform: scaleX(1); }
    }

    /* ── Phobia Factor Polish ── */
    @keyframes pfRevealIn {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pfResultFlash {
      0%   { opacity: 0; transform: scale(0.7); }
      50%  { transform: scale(1.15); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes pfOverturnShake {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-6px); }
      30% { transform: translateX(5px); }
      45% { transform: translateX(-4px); }
      60% { transform: translateX(3px); }
      75% { transform: translateX(-2px); }
    }
    @keyframes pfBarFill {
      from { width: 0; }
      to   { width: var(--pf-pct); }
    }
    @keyframes pfClutchReveal {
      0%   { opacity: 0; transform: scale(0.5); letter-spacing: 8px; }
      60%  { transform: scale(1.1); letter-spacing: 3px; }
      100% { opacity: 1; transform: scale(1); letter-spacing: 2px; }
    }
    .pf-reveal-item { animation: pfRevealIn 0.35s var(--ease-broadcast) both; }
    .pf-result-badge {
      display: inline-block; font-size: 10px; font-weight: 800;
      letter-spacing: 1px; padding: 2px 8px; border-radius: 3px;
    }
    .pf-result-badge.pass { color: #3fb950; background: rgba(63,185,80,0.12); }
    .pf-result-badge.fail { color: #da3633; background: rgba(218,54,51,0.12); }
    .pf-result-badge.revealed { animation: pfResultFlash 0.4s var(--ease-broadcast) both; }
    .pf-fear-badge {
      font-size: 9px; font-weight: 700; letter-spacing: 1px;
      padding: 2px 7px; border-radius: 3px; display: inline-block;
    }
    .pf-clutch-result { animation: pfClutchReveal 0.8s var(--ease-broadcast) both; }
    .pf-overturned {
      animation: pfOverturnShake 0.6s ease-out 0.4s both;
      display: inline-block;
    }
    .pf-bar-track {
      height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06);
      margin-top: 8px; overflow: hidden;
    }
    .pf-bar-fill {
      height: 100%; border-radius: 3px;
      animation: pfBarFill 0.8s var(--ease-broadcast) both;
    }
    @media (prefers-reduced-motion: reduce) {
      .pf-reveal-item { animation: none; }
      .pf-result-badge.revealed { animation: none; }
      .pf-clutch-result { animation: none; opacity: 1; transform: scale(1); }
      .pf-overturned { animation: none; }
      .pf-bar-fill { animation: none; width: var(--pf-pct); }
    }

    /* ── Dodgebrawl Overdrive (Broadcast Court) ── */
    @keyframes dbRoundBumper {
      0%   { opacity: 0; transform: scale(1.8); letter-spacing: 12px; }
      40%  { opacity: 1; transform: scale(1.05); letter-spacing: 3px; }
      100% { opacity: 1; transform: scale(1); letter-spacing: 2px; }
    }
    @keyframes dbElimSlide {
      from { opacity: 0; transform: translateX(-20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes dbScoreFlash {
      0%   { text-shadow: 0 0 0 transparent; }
      50%  { text-shadow: 0 0 16px currentColor; }
      100% { text-shadow: 0 0 4px currentColor; }
    }
    @keyframes dbElimOut {
      from { opacity: 1; filter: brightness(1) grayscale(0); }
      to   { opacity: 0.25; filter: brightness(0.4) grayscale(0.8); }
    }
    @keyframes dbWinFlood {
      from { opacity: 0; transform: scale(0.9); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes dbDotFill {
      from { transform: scale(0); }
      to   { transform: scale(1); }
    }
    .db-wrap {
      position: relative;
      background:
        linear-gradient(to bottom, rgba(15,10,6,0.92), rgba(15,10,6,0.85)),
        repeating-linear-gradient(90deg, rgba(160,120,60,0.06) 0px, rgba(160,120,60,0.06) 1px, transparent 1px, transparent 80px),
        linear-gradient(180deg, #1a1208 0%, #0f0a06 100%);
    }
    .db-scoreboard {
      display: flex; justify-content: center; align-items: center; gap: 0;
      padding: 10px 16px; margin-bottom: 16px;
      border-radius: 6px; border: 1px solid rgba(224,96,48,0.15);
      background: linear-gradient(180deg, rgba(10,8,4,0.95), rgba(15,12,6,0.9));
      box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    .db-score-side {
      display: flex; align-items: center; gap: 10px; flex: 1;
    }
    .db-score-side.right { flex-direction: row-reverse; text-align: right; }
    .db-score-num {
      font-family: var(--font-display); font-size: 28px; line-height: 1;
      min-width: 32px; text-align: center;
    }
    .db-score-dots { display: flex; gap: 4px; }
    .db-score-dot {
      width: 10px; height: 10px; border-radius: 50%;
      border: 1.5px solid currentColor; opacity: 0.3;
    }
    .db-score-dot.filled { opacity: 1; background: currentColor; animation: dbDotFill 0.3s var(--ease-broadcast) both; }
    .db-score-vs {
      font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
      color: #484f58; padding: 0 12px; flex-shrink: 0;
    }
    .db-court {
      display: flex; gap: 8px; align-items: stretch;
      padding: 10px; margin-bottom: 10px; border-radius: 8px;
      background: rgba(160,120,60,0.03);
      border: 1px solid rgba(160,120,60,0.08);
      position: sticky; top: 46px; z-index: 3;
      backdrop-filter: blur(8px);
      background: rgba(15,10,6,0.88);
    }
    .db-court-side { flex: 1; min-width: 0; }
    .db-court-divider {
      width: 2px; flex-shrink: 0; align-self: stretch;
      background: linear-gradient(180deg, transparent, rgba(224,96,48,0.3), transparent);
    }
    .db-court-roster { display: flex; flex-wrap: wrap; gap: 4px; }
    .db-court-player { text-align: center; transition: opacity 0.4s, filter 0.4s; }
    .db-court-player.out { animation: dbElimOut 0.5s ease-out both; }
    .db-court-player.sitout { opacity: 0.25; }
    .db-court-player.refused { opacity: 0.35; }
    .db-elim-card {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      padding: 8px 12px; margin-bottom: 5px; border-radius: 6px;
      animation: dbElimSlide 0.3s var(--ease-broadcast) both;
    }
    .db-elim-action {
      display: flex; flex-direction: column; align-items: center; gap: 1px;
      font-weight: 800; letter-spacing: 2px; font-size: 11px;
      min-width: 60px; text-align: center;
    }
    .db-alive-bar {
      display: flex; justify-content: center; gap: 8px; padding: 3px 8px;
      font-size: 8px; font-weight: 700; letter-spacing: 1px;
      color: #484f58; border-radius: 3px; background: rgba(0,0,0,0.3);
    }
    .db-round-bumper {
      font-family: var(--font-display); text-align: center; padding: 14px 0;
      margin-bottom: 10px; animation: dbRoundBumper 0.6s var(--ease-broadcast) both;
    }
    .db-round-winner {
      text-align: center; padding: 10px; margin: 8px 0; border-radius: 8px;
    }
    .db-highlight {
      margin-bottom: 5px; padding: 7px 10px; border-radius: 6px; position: relative;
    }
    .db-highlight-replay {
      position: absolute; top: 5px; right: 8px;
      font-size: 7px; font-weight: 800; letter-spacing: 1.5px;
      opacity: 0.4; color: inherit;
    }
    .db-championship {
      padding: 24px 16px; margin-top: 12px; border-radius: 12px;
      text-align: center; position: relative; overflow: hidden;
      animation: dbWinFlood 0.8s var(--ease-broadcast) both;
    }
    @media (prefers-reduced-motion: reduce) {
      .db-round-bumper { animation: none; opacity: 1; transform: scale(1); }
      .db-elim-card { animation: none; }
      .db-score-dot.filled { animation: none; }
      .db-court-player.out { animation: none; opacity: 0.25; filter: brightness(0.4) grayscale(0.8); }
      .db-championship { animation: none; opacity: 1; transform: scale(1); }
    }

    /* ── Monster Cash — Emergency Broadcast / Surveillance ── */
    .mc-shell { position:relative; background:#0a0a0a; border:2px solid #2d2d2d; border-radius:8px; overflow:hidden; min-height:400px; }
    .mc-monster-silhouette { position:absolute; top:0; right:0; bottom:22px; left:0; z-index:0; pointer-events:none; overflow:hidden; }
    .mc-kaiju { position:absolute; bottom:0; right:10px; width:120px; height:160px; opacity:0.06; transition:opacity 0.8s, width 0.8s, height 0.8s; }
    .mc-monster-silhouette.threat-3 .mc-kaiju { opacity:0.1; width:160px; height:200px; }
    .mc-monster-silhouette.threat-4 .mc-kaiju { opacity:0.18; width:200px; height:250px; }
    .mc-monster-silhouette.threat-5 .mc-kaiju { opacity:0.3; width:260px; height:320px; }
    .mc-kaiju svg { width:100%; height:100%; }
    .mc-film-grain { position:absolute; top:0; left:0; right:0; bottom:0; opacity:0.03; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events:none; z-index:4; }
    .mc-ticker { position:absolute; bottom:0; left:0; right:0; background:rgba(200,0,0,0.85); color:#fff; font-size:11px; font-family:'Courier New',monospace; padding:3px 0; z-index:2; overflow:hidden; white-space:nowrap; }
    .mc-ticker-text { display:inline-block; animation:mcTickerScroll 20s linear infinite; }
    @keyframes mcTickerScroll { 0% { transform:translateX(100%); } 100% { transform:translateX(-100%); } }
    .mc-rubble-pile { position:absolute; bottom:25px; right:10px; display:flex; flex-wrap:wrap; gap:2px; max-width:80px; z-index:2; }
    .mc-rubble-portrait { width:24px; height:24px; border-radius:50%; border:1px solid #555; opacity:0.6; filter:grayscale(1); position:relative; }
    .mc-rubble-portrait::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,0,0,0.3); border-radius:50%; }
    .mc-title-card { text-align:center; padding:40px 20px; position:relative; z-index:3; }
    .mc-film-title { font-size:32px; font-weight:900; color:#e8e8e8; text-transform:uppercase; letter-spacing:4px; text-shadow:0 0 30px rgba(255,60,60,0.6), 0 0 60px rgba(255,30,30,0.2), 3px 3px 0 #333; font-family:'Impact','Arial Black',sans-serif; line-height:1.2; }
    .mc-now-playing { font-size:11px; color:#888; letter-spacing:4px; text-transform:uppercase; margin-bottom:8px; }
    .mc-cam-label { font-size:13px; color:#ff3333; font-family:'Courier New',monospace; letter-spacing:2px; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .mc-cam-dot { width:8px; height:8px; border-radius:50%; background:#f00; animation:mcCamBlink 1.5s infinite; }
    @keyframes mcCamBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }
    .mc-threat-bar { display:flex; align-items:center; gap:6px; margin:8px 0; }
    .mc-threat-label { font-size:10px; color:#aaa; text-transform:uppercase; letter-spacing:1px; min-width:70px; }
    .mc-threat-fill { height:6px; border-radius:3px; transition:width 0.5s, background 0.5s; }
    .mc-threat-1 { width:20%; background:#4caf50; }
    .mc-threat-2 { width:40%; background:#ff9800; }
    .mc-threat-3 { width:60%; background:#ff5722; }
    .mc-threat-4 { width:80%; background:#f44336; }
    .mc-threat-5 { width:100%; background:#b71c1c; box-shadow:0 0 8px rgba(183,28,28,0.5); }
    .mc-location-header { font-size:12px; color:#ff9800; text-transform:uppercase; letter-spacing:2px; border-bottom:1px solid rgba(255,152,0,0.2); padding-bottom:4px; margin:12px 0 8px; }
    .mc-prowl-text { font-size:14px; color:#999; font-style:italic; padding:8px 12px; margin:8px 0; border-left:3px solid rgba(255,60,60,0.3); background:rgba(255,60,60,0.03); border-radius:0 4px 4px 0; line-height:1.6; }
    .mc-env-text { font-size:14px; color:#888; padding:6px 12px; margin:6px 0; border-left:2px solid rgba(255,152,0,0.3); line-height:1.5; }
    .mc-event-card { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; margin:6px 0; border-radius:8px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
    .mc-event-card.mc-heroic { border-color:rgba(76,175,80,0.2); background:rgba(76,175,80,0.04); }
    .mc-event-card.mc-sabotage { border-color:rgba(244,67,54,0.2); background:rgba(244,67,54,0.04); }
    .mc-event-card.mc-comedy { border-color:rgba(255,193,7,0.2); background:rgba(255,193,7,0.04); }
    .mc-event-card.mc-showmance { border-color:rgba(233,30,99,0.2); background:rgba(233,30,99,0.04); }
    .mc-event-portraits { display:flex; gap:6px; flex-shrink:0; align-items:center; }
    .mc-event-multi { padding:14px 16px; }
    .mc-event-multi .mc-event-portraits { flex-direction:column; gap:4px; }
    .mc-event-narrative { flex:1; font-size:14px; color:#ccc; line-height:1.6; }
    .mc-event-pts { font-size:13px; font-weight:700; padding:3px 8px; border-radius:4px; font-family:'Courier New',monospace; white-space:nowrap; }
    .mc-pts-pos { color:#4caf50; background:rgba(76,175,80,0.12); }
    .mc-pts-neg { color:#f44336; background:rgba(244,67,54,0.12); }
    .mc-capture-card { border:2px solid rgba(244,67,54,0.4); background:rgba(244,67,54,0.08); padding:16px; border-radius:10px; margin:12px 0; position:relative; overflow:hidden; }
    .mc-capture-card::after { content:''; position:absolute; top:-10px; right:10px; width:60px; height:120%; opacity:0.08; background:repeating-linear-gradient(135deg, transparent 0px, transparent 8px, #f44336 8px, #f44336 10px, transparent 10px, transparent 20px); pointer-events:none; }
    .mc-capture-beat { font-size:14px; color:#ccc; line-height:1.6; margin:5px 0; padding-left:14px; border-left:2px solid rgba(244,67,54,0.3); }
    .mc-captured-label { font-size:15px; font-weight:900; color:#f44336; letter-spacing:3px; text-transform:uppercase; text-align:center; margin-bottom:8px; }
    .mc-survivors-count { font-size:15px; color:#ff9800; font-weight:700; text-align:center; margin:10px 0; }
    .mc-chris-line { font-size:13px; color:#888; font-style:italic; padding:6px 10px; border-left:2px solid #555; margin:8px 0; line-height:1.5; }
    .mc-rescue-card { border:2px solid rgba(76,175,80,0.3); background:rgba(76,175,80,0.05); padding:14px; border-radius:10px; margin:10px 0; }
    .mc-rescue-beat { font-size:14px; color:#ccc; line-height:1.6; margin:4px 0; }
    .mc-last-chance { border:2px solid rgba(255,152,0,0.3); background:rgba(255,152,0,0.05); padding:12px 14px; border-radius:8px; margin:10px 0; font-size:14px; color:#ccc; line-height:1.6; }
    @keyframes mcShakeLight { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-2px); } 75% { transform:translateX(2px); } }
    @keyframes mcShakeMedium { 0%,100% { transform:translateX(0); } 20% { transform:translate(-4px,-2px); } 40% { transform:translate(3px,1px); } 60% { transform:translate(-3px,2px); } 80% { transform:translate(4px,-1px); } }
    @keyframes mcShakeHeavy { 0%,100% { transform:translate(0); } 10% { transform:translate(-6px,-3px); } 20% { transform:translate(5px,2px); } 30% { transform:translate(-4px,4px); } 40% { transform:translate(6px,-2px); } 50% { transform:translate(-5px,3px); } 60% { transform:translate(4px,-4px); } 70% { transform:translate(-3px,5px); } 80% { transform:translate(6px,-1px); } 90% { transform:translate(-2px,3px); } }
    .mc-capture-comedy { animation:mcShakeLight 0.4s ease-out; }
    .mc-capture-tense { animation:mcShakeMedium 0.5s ease-out; }
    .mc-capture-terror { animation:mcShakeHeavy 0.6s ease-out; }
    @keyframes mcCrack { 0% { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); } 100% { clip-path:polygon(0 0, 48% 0, 50% 45%, 52% 0, 100% 0, 100% 100%, 55% 100%, 50% 55%, 45% 100%, 0 100%); } }
    .mc-portrait-cracked { animation:mcCrack 0.3s ease-out forwards; }
    @keyframes mcShatter { 0% { transform:scale(1); opacity:1; filter:brightness(1); } 30% { transform:scale(1.1); filter:brightness(2); } 100% { transform:scale(0.8); opacity:0; filter:brightness(0.3); } }
    .mc-portrait-shatter { animation:mcShatter 0.8s ease-out forwards; }
    .mc-emergency-flash { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,0,0,0.08); pointer-events:none; z-index:3; animation:mcEmergencyPulse 2s ease-in-out infinite; }
    @keyframes mcEmergencyPulse { 0%,100% { opacity:0; } 50% { opacity:1; } }
    .mc-screen-crack { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:5; opacity:0; transition:opacity 0.3s; }
    .mc-screen-crack.active { opacity:1; }
    .mc-vhs-distortion { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:5; opacity:0; background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.01) 3px, rgba(255,255,255,0.01) 4px); }
    .mc-vhs-distortion.active { opacity:1; animation:mcVhsFlicker 3s infinite; }
    @keyframes mcVhsFlicker { 0%,94%,100%{opacity:0.3} 95%{opacity:0.6} 97%{opacity:0.2} }
    .mc-clapperboard { text-align:center; padding:14px; background:#1a1a1a; border:2px solid #333; margin:10px 0; border-radius:4px; font-family:'Courier New',monospace; font-size:13px; color:#aaa; letter-spacing:2px; text-transform:uppercase; }
    @keyframes mcScanIn { 0% { opacity:0; transform:translateY(12px); } 100% { opacity:1; transform:translateY(0); } }
    .mc-scan-in { animation: mcScanIn 0.35s ease-out both; }
    @keyframes mcCaptureFlash { 0% { box-shadow:0 0 0 0 rgba(244,67,54,0.6); } 50% { box-shadow:0 0 20px 4px rgba(244,67,54,0.4); } 100% { box-shadow:0 0 0 0 rgba(244,67,54,0); } }
    .mc-capture-flash { animation: mcCaptureFlash 0.6s ease-out; }
    .mc-controls-sticky { position:sticky; bottom:0; z-index:10; padding:12px 0 8px; background:linear-gradient(transparent, #0a0a0a 30%); text-align:center; }

    /* ── Monster Cash: Kaiju Destruction Overdrive ── */
    .mc-skyline { position:absolute; bottom:22px; left:0; right:0; height:80px; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; padding:0 2px; pointer-events:none; overflow:hidden; }
    .mc-building { background:#151515; border:1px solid #252525; border-bottom:none; position:relative; transition:transform 1.2s cubic-bezier(.36,.07,.19,.97), opacity 0.8s; transform-origin:bottom center; flex-shrink:0; }
    .mc-building.destroyed { transform:rotate(var(--fall-dir, 8deg)) translateY(10px); opacity:0.35; }
    .mc-building.destroyed::after { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:12px; height:12px; background:radial-gradient(circle, #ff6600 0%, #ff3300 50%, transparent 70%); border-radius:50%; animation:mcFireFlicker 0.8s infinite alternate; }
    @keyframes mcFireFlicker { 0% { opacity:0.6; transform:translateX(-50%) scale(1); } 100% { opacity:1; transform:translateX(-50%) scale(1.4); } }
    .mc-building:nth-child(odd).destroyed { --fall-dir:-11deg; }
    .mc-building:nth-child(even).destroyed { --fall-dir:9deg; }
    .mc-building:nth-child(3n).destroyed { --fall-dir:-5deg; }
    .mc-building:nth-child(5n).destroyed { --fall-dir:14deg; }
    .mc-skyline-kaiju { flex-shrink:0; opacity:0.7; position:relative; bottom:0; }

    .mc-defcon { display:flex; align-items:center; gap:8px; margin:8px 0; padding:6px 10px; background:rgba(255,0,0,0.04); border:1px solid rgba(255,0,0,0.12); border-radius:4px; }
    .mc-defcon-label { font-size:11px; font-weight:900; font-family:'Courier New',monospace; letter-spacing:2px; text-transform:uppercase; min-width:90px; }
    .mc-defcon-1 .mc-defcon-label { color:#b71c1c; animation:mcDefconPulse 0.8s infinite; }
    .mc-defcon-2 .mc-defcon-label { color:#f44336; animation:mcDefconPulse 1.2s infinite; }
    .mc-defcon-3 .mc-defcon-label { color:#ff5722; }
    .mc-defcon-4 .mc-defcon-label { color:#ff9800; }
    .mc-defcon-5 .mc-defcon-label { color:#4caf50; }
    .mc-defcon-pips { display:flex; gap:3px; flex:1; }
    .mc-defcon-pip { height:8px; flex:1; border-radius:2px; background:rgba(255,255,255,0.06); transition:background 0.5s, box-shadow 0.5s; }
    .mc-defcon-1 .mc-defcon-pip { background:#b71c1c; box-shadow:0 0 6px rgba(183,28,28,0.5); }
    .mc-defcon-2 .mc-defcon-pip:nth-child(-n+4) { background:#f44336; box-shadow:0 0 4px rgba(244,67,54,0.3); }
    .mc-defcon-3 .mc-defcon-pip:nth-child(-n+3) { background:#ff5722; }
    .mc-defcon-4 .mc-defcon-pip:nth-child(-n+2) { background:#ff9800; }
    .mc-defcon-5 .mc-defcon-pip:nth-child(1) { background:#4caf50; }
    @keyframes mcDefconPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

    .mc-seismograph { height:28px; margin:6px 0; position:relative; overflow:hidden; border:1px solid rgba(76,175,80,0.12); border-radius:3px; background:rgba(0,0,0,0.3); }
    .mc-seismo-line { position:absolute; top:0; left:0; width:200%; height:100%; animation:mcSeismoScroll 4s linear infinite; }
    .mc-seismo-spike .mc-seismo-line { animation-duration:1.5s; }
    .mc-seismo-spike { border-color:rgba(244,67,54,0.4); }
    @keyframes mcSeismoScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

    .mc-shockwave { position:relative; overflow:visible; }
    .mc-shockwave::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; border:2px solid rgba(244,67,54,0.5); transform:translate(-50%,-50%); animation:mcShockwaveRipple 0.8s ease-out forwards; pointer-events:none; z-index:10; }
    @keyframes mcShockwaveRipple { 0% { width:0; height:0; opacity:1; } 100% { width:250px; height:250px; opacity:0; } }

    .mc-ebs-bar { background:repeating-linear-gradient(90deg, #c00 0 8%, #ff0 8% 16%, #0a0 16% 24%, #06f 24% 32%, #c00 32% 40%, #ff0 40% 48%, #0a0 48% 56%, #06f 56% 64%, #c00 64% 72%, #ff0 72% 80%, #0a0 80% 88%, #06f 88% 100%); height:5px; border-radius:2px; }
    .mc-ebs-header { font-size:10px; font-weight:900; font-family:'Courier New',monospace; color:#ff3333; letter-spacing:3px; text-align:center; padding:6px; border:1px solid rgba(255,51,51,0.25); background:rgba(255,0,0,0.06); margin:4px 0 8px; animation:mcEbsPulse 3s infinite; }
    @keyframes mcEbsPulse { 0%,90%,100% { opacity:1; } 93% { opacity:0.2; } 96% { opacity:1; } }

    .mc-siren { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2; }
    .mc-siren-low { animation:mcSirenSlow 3s infinite; }
    .mc-siren-high { animation:mcSirenFast 1.2s infinite; }
    @keyframes mcSirenSlow { 0%,100% { box-shadow:inset 0 0 40px rgba(255,0,0,0.06); } 50% { box-shadow:inset 0 0 40px rgba(0,30,255,0.04); } }
    @keyframes mcSirenFast { 0%,100% { box-shadow:inset 0 0 50px rgba(255,0,0,0.1); } 50% { box-shadow:inset 0 0 50px rgba(0,30,255,0.07); } }

    .mc-damage-counter { font-size:10px; font-family:'Courier New',monospace; color:#ff5722; letter-spacing:1px; text-align:center; margin:4px 0; font-weight:700; }

    .mc-news-chyron { position:absolute; bottom:0; left:0; right:0; z-index:2; }
    .mc-chyron-bar { background:linear-gradient(90deg, #6b0000 0%, #b00 30%, #b00 70%, #6b0000 100%); padding:3px 0; display:flex; align-items:center; overflow:hidden; }
    .mc-chyron-label { display:inline-block; background:#fff; color:#b00; font-size:9px; font-weight:900; padding:2px 8px; margin:0 8px; letter-spacing:1px; flex-shrink:0; }
    .mc-chyron-text { color:#fff; font-size:11px; font-family:'Courier New',monospace; white-space:nowrap; animation:mcTickerScroll 22s linear infinite; }

    .mc-threat-escalation { text-align:center; padding:16px; background:rgba(255,0,0,0.06); border:2px solid rgba(255,0,0,0.25); margin:12px 0; border-radius:4px; position:relative; overflow:hidden; }
    .mc-threat-escalation::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255,0,0,0.03) 10px, rgba(255,0,0,0.03) 12px); pointer-events:none; }
    .mc-threat-escalation-label { font-size:14px; font-weight:900; font-family:'Courier New',monospace; color:#f44336; letter-spacing:3px; animation:mcDefconPulse 1s infinite; }

    @media (prefers-reduced-motion: reduce) {
      .mc-building.destroyed { transition:opacity 0.3s; transform:none; }
      .mc-building.destroyed::after { animation:none; }
      .mc-seismo-line { animation:none; }
      .mc-siren, .mc-siren-low, .mc-siren-high { animation:none; }
      .mc-shockwave::before { animation:none; display:none; }
      .mc-ebs-header { animation:none; }
      .mc-defcon-1 .mc-defcon-label, .mc-defcon-2 .mc-defcon-label { animation:none; }
      .mc-chyron-text { animation:none; }
    }

    /* ── Lucky Hunt Overdrive (Dark Pirate Treasure Map) ── */
    @keyframes lhSlideIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
    @keyframes lhKeyGlow { 0%,100% { box-shadow:0 0 8px rgba(63,185,80,0.15); } 50% { box-shadow:0 0 20px rgba(63,185,80,0.4); } }
    @keyframes lhShake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-3px) rotate(-0.5deg); } 40% { transform:translateX(3px) rotate(0.5deg); } 60% { transform:translateX(-2px); } 80% { transform:translateX(2px); } }
    @keyframes lhSealPulse { 0%,100% { box-shadow:0 0 12px rgba(212,168,83,0.3); } 50% { box-shadow:0 0 30px rgba(212,168,83,0.6); } }
    @keyframes lhChestOpen { from { transform:scaleY(0.8) scaleX(0.95); opacity:0.5; } to { transform:scaleY(1) scaleX(1); opacity:1; } }
    @keyframes lhStealFlash { 0% { background-position:200% center; } 100% { background-position:-200% center; } }

    .lh-map {
      position: relative;
      background:
        repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(212,168,83,0.02) 80px, rgba(212,168,83,0.02) 81px),
        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(212,168,83,0.015) 80px, rgba(212,168,83,0.015) 81px),
        linear-gradient(180deg, #0d1117 0%, #131820 30%, #0d1117 60%, #0a0d12 100%);
      color: #c9d1d9;
    }
    .lh-map::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse at 20% 15%, rgba(212,168,83,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 85%, rgba(212,168,83,0.03) 0%, transparent 50%);
      z-index: 0;
    }
    .lh-map > * { position: relative; z-index: 1; }
    .lh-title {
      font-family: var(--font-display); font-size: 32px; letter-spacing: 4px;
      text-align: center; color: #d4a853;
      text-shadow: 0 0 20px rgba(212,168,83,0.3), 0 2px 4px rgba(0,0,0,0.5);
      margin-bottom: 2px;
    }
    .lh-subtitle {
      text-align: center; font-size: 11px; color: #8b6d47;
      letter-spacing: 1px; margin-bottom: 16px; font-style: italic;
    }
    .lh-rope {
      border: none; height: 3px; margin: 18px 0;
      background: repeating-linear-gradient(90deg, #5a3d25 0px, #7a5a3a 3px, #3d2b1a 6px, #5a3d25 9px);
      border-radius: 2px; opacity: 0.5;
    }
    .lh-compass {
      text-align: center; font-size: 9px; letter-spacing: 4px;
      color: #5a3d25; margin: 6px 0;
    }
    .lh-section-title {
      font-family: var(--font-display); font-size: 16px; letter-spacing: 2px;
      color: #d4a853; text-align: center; margin: 8px 0 12px;
      text-shadow: 0 0 12px rgba(212,168,83,0.2);
    }

    /* ── Hunt trail: the main quest line ── */
    .lh-trail {
      padding: 8px 12px; margin-bottom: 5px; border-radius: 6px;
      border-left: 3px solid var(--pin-color, #30363d);
      background: rgba(22,27,34,0.6);
      animation: lhSlideIn 0.3s ease both;
    }
    .lh-trail-text { font-size: 12px; color: #8b949e; line-height: 1.5; }
    .lh-trail-name { font-size: 11px; font-weight: 700; color: #c9d1d9; margin-bottom: 2px; }
    .lh-trail-loc { font-size: 9px; color: #6e7681; letter-spacing: 0.5px; font-style: italic; }

    /* ── Key found: triumphant stamp ── */
    .lh-keyfound {
      padding: 10px 14px; margin-bottom: 6px; border-radius: 6px;
      border: 2px solid rgba(63,185,80,0.35);
      background: linear-gradient(135deg, rgba(63,185,80,0.1) 0%, rgba(20,40,15,0.4) 100%);
      position: relative; animation: lhSlideIn 0.3s ease both, lhKeyGlow 2s ease-in-out infinite;
    }
    .lh-keyfound::after {
      content: '🗝️'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      font-size: 22px; opacity: 0.25;
    }

    /* ── INTERRUPTION CARDS: hunt events that break the flow ── */
    .lh-interrupt {
      padding: 14px 16px; margin: 10px -4px; border-radius: 8px;
      position: relative; overflow: hidden;
      animation: lhSlideIn 0.35s ease both;
    }
    .lh-interrupt::before {
      content: ''; position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
      background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px);
    }
    .lh-interrupt-label {
      font-size: 9px; font-weight: 800; letter-spacing: 2px;
      padding: 2px 8px; border-radius: 3px; display: inline-block; margin-bottom: 6px;
    }
    .lh-interrupt-text { font-size: 13px; line-height: 1.6; }
    .lh-interrupt-portraits { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

    /* Sabotage: sinister purple, shakes on entry */
    .lh-interrupt.sabotage {
      background: linear-gradient(135deg, rgba(88,28,135,0.2) 0%, rgba(30,15,40,0.6) 100%);
      border: 1px solid rgba(139,92,246,0.25);
      animation: lhSlideIn 0.3s ease both, lhShake 0.4s ease 0.3s;
    }
    .lh-interrupt.sabotage .lh-interrupt-label { background: #5b21b6; color: #e9d5ff; }
    .lh-interrupt.sabotage .lh-interrupt-text { color: #c4b5fd; }

    /* Steal: dramatic gold/red flash */
    .lh-interrupt.steal {
      background: linear-gradient(135deg, rgba(180,100,20,0.2) 0%, rgba(120,30,20,0.15) 50%, rgba(30,15,10,0.6) 100%);
      border: 2px solid rgba(240,165,0,0.4);
      box-shadow: 0 0 16px rgba(240,165,0,0.1);
      animation: lhSlideIn 0.3s ease both;
    }
    .lh-interrupt.steal::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(90deg, transparent 30%, rgba(240,165,0,0.08) 50%, transparent 70%);
      background-size: 200% 100%;
      animation: lhStealFlash 1.5s ease 0.3s;
    }
    .lh-interrupt.steal .lh-interrupt-label { background: #b45309; color: #fef3c7; }
    .lh-interrupt.steal .lh-interrupt-text { color: #fde68a; }

    /* Help: warm green glow */
    .lh-interrupt.help {
      background: linear-gradient(135deg, rgba(34,100,34,0.15) 0%, rgba(15,30,15,0.5) 100%);
      border: 1px solid rgba(63,185,80,0.2);
    }
    .lh-interrupt.help .lh-interrupt-label { background: #166534; color: #bbf7d0; }
    .lh-interrupt.help .lh-interrupt-text { color: #86efac; }

    /* Discovery: mysterious blue */
    .lh-interrupt.discovery {
      background: linear-gradient(135deg, rgba(30,58,138,0.2) 0%, rgba(15,20,40,0.5) 100%);
      border: 1px solid rgba(88,166,255,0.2);
    }
    .lh-interrupt.discovery .lh-interrupt-label { background: #1e3a8a; color: #bfdbfe; }
    .lh-interrupt.discovery .lh-interrupt-text { color: #93c5fd; }

    /* Intel trade: conspiratorial dark */
    .lh-interrupt.intel {
      background: rgba(20,25,40,0.5);
      border: 1px solid rgba(88,166,255,0.12);
    }
    .lh-interrupt.intel .lh-interrupt-label { background: #1e40af; color: #93c5fd; }
    .lh-interrupt.intel .lh-interrupt-text { color: #94a3b8; }

    /* Panic: red shake */
    .lh-interrupt.panic {
      background: rgba(50,15,15,0.5);
      border: 1px solid rgba(248,81,73,0.2);
      animation: lhSlideIn 0.3s ease both, lhShake 0.5s ease 0.2s;
    }
    .lh-interrupt.panic .lh-interrupt-label { background: #991b1b; color: #fecaca; }
    .lh-interrupt.panic .lh-interrupt-text { color: #fca5a5; }

    /* Scheme: dark red drama */
    .lh-interrupt.scheme {
      background: linear-gradient(135deg, rgba(120,20,20,0.2) 0%, rgba(40,10,10,0.6) 100%);
      border: 2px solid rgba(218,54,51,0.3);
      box-shadow: 0 0 12px rgba(218,54,51,0.08);
    }
    .lh-interrupt.scheme .lh-interrupt-label { background: #991b1b; color: #fecaca; }
    .lh-interrupt.scheme .lh-interrupt-text { color: #fca5a5; }

    /* Showoff: golden sparkle */
    .lh-interrupt.showoff {
      background: linear-gradient(135deg, rgba(180,140,30,0.15) 0%, rgba(40,30,10,0.5) 100%);
      border: 1px solid rgba(227,179,65,0.3);
    }
    .lh-interrupt.showoff .lh-interrupt-label { background: #92400e; color: #fef3c7; }
    .lh-interrupt.showoff .lh-interrupt-text { color: #fde68a; }

    /* ── Chest reveal ── */
    .lh-chest-reveal {
      padding: 14px; margin: 8px 0; border-radius: 10px; text-align: center;
      background: linear-gradient(180deg, rgba(22,27,34,0.9) 0%, rgba(13,17,23,0.9) 100%);
      border: 2px solid #30363d;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      animation: lhChestOpen 0.4s ease both;
    }
    .lh-chest-reveal.immunity {
      border-color: #d4a853;
      box-shadow: 0 0 24px rgba(212,168,83,0.2), 0 4px 12px rgba(0,0,0,0.4);
    }
    .lh-chest-reveal.trap {
      border-color: #f85149;
      box-shadow: 0 0 16px rgba(248,81,73,0.15), 0 4px 12px rgba(0,0,0,0.4);
    }
    .lh-chest-item { font-size: 12px; color: #8b949e; margin-top: 6px; line-height: 1.5; }
    .lh-chest-reveal.immunity .lh-chest-item { color: #d4a853; font-weight: 700; }

    /* ── Dud key ── */
    .lh-dud {
      padding: 12px 14px; margin: 6px 0; border-radius: 8px;
      background: rgba(248,81,73,0.06);
      border: 1px solid rgba(248,81,73,0.2);
      animation: lhSlideIn 0.3s ease both;
    }
    .lh-dud-text { font-size: 13px; color: #fca5a5; line-height: 1.6; }

    /* ── Last chance: urgent ── */
    .lh-lastchance {
      padding: 10px 14px; margin: 6px 0; border-radius: 6px;
      background: rgba(60,40,10,0.4);
      border: 1px solid rgba(240,165,0,0.25);
      border-left: 4px solid #f0a500;
      animation: lhSlideIn 0.3s ease both;
    }

    /* ── Wax seal ── */
    .lh-seal {
      display: block; width: 56px; height: 56px; border-radius: 50%;
      background: radial-gradient(circle, #e3b341 0%, #c49520 50%, #8b6d18 100%);
      box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(0,0,0,0.3);
      line-height: 56px; text-align: center; font-size: 24px;
      margin: 12px auto;
      animation: lhSealPulse 2.5s ease-in-out infinite;
    }

    /* ── Immunity final ── */
    .lh-immunity-final {
      padding: 24px; margin-top: 16px; border-radius: 12px; text-align: center;
      background: linear-gradient(135deg, rgba(22,27,34,0.95) 0%, rgba(13,17,23,0.95) 100%);
      border: 3px solid #d4a853;
      box-shadow: 0 0 40px rgba(212,168,83,0.15);
    }

    /* ── Host commentary (subtle) ── */
    .lh-host {
      padding: 6px 10px; margin-bottom: 4px;
      font-size: 11px; font-style: italic; color: #6b5234;
      border-left: 2px solid #3d2b1a;
      animation: lhSlideIn 0.2s ease both;
    }

    /* ── Live Hunt Tracker (sticky sidebar) ── */
    .lh-tracker {
      position: sticky; top: 0; z-index: 4;
      padding: 8px 10px; margin-bottom: 12px;
      background: rgba(13,17,23,0.92); backdrop-filter: blur(6px);
      border: 1px solid rgba(212,168,83,0.15); border-radius: 8px;
      display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    }
    .lh-tracker-player {
      display: flex; align-items: center; gap: 3px;
      padding: 2px 6px; border-radius: 4px; font-size: 9px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(22,27,34,0.6);
    }
    .lh-tracker-player.found { border-color: rgba(63,185,80,0.3); background: rgba(63,185,80,0.06); }
    .lh-tracker-player.failed { border-color: rgba(248,81,73,0.25); background: rgba(248,81,73,0.04); opacity: 0.6; }
    .lh-tracker-player.hunting { border-color: rgba(212,168,83,0.2); }
    .lh-tracker-player.frozen { border-color: rgba(248,81,73,0.3); background: rgba(248,81,73,0.06); }
    .lh-tracker-player.sabotaged { border-color: rgba(139,92,246,0.3); }
    .lh-tracker-player.helped { border-color: rgba(63,185,80,0.3); }
    .lh-tracker-mods {
      display: flex; gap: 2px; font-size: 7px;
    }
    .lh-tracker-mod {
      padding: 0 3px; border-radius: 2px; font-weight: 800; letter-spacing: 0.5px;
    }

    @media (prefers-reduced-motion: reduce) {
      .lh-trail, .lh-keyfound, .lh-interrupt, .lh-chest-reveal, .lh-dud, .lh-lastchance, .lh-host { animation: none; }
      .lh-interrupt.sabotage, .lh-interrupt.panic { animation: none; }
      .lh-keyfound { box-shadow: 0 0 8px rgba(63,185,80,0.15); }
      .lh-seal { animation: none; }
      .lh-interrupt.steal::after { animation: none; }
    }

    /* ── Cliff Dive Overdrive (Vertigo + Confessional) ── */
    @keyframes cdFallIn {
      0%   { opacity: 1; transform: translateY(0); }
      70%  { opacity: 1; transform: translateY(60px); }
      100% { opacity: 0.7; transform: translateY(60px) scale(0.92); }
    }
    @keyframes cdSplash {
      0%   { opacity: 0; transform: scale(0.3); }
      50%  { opacity: 1; transform: scale(1.3); }
      100% { opacity: 0; transform: scale(1.8); }
    }
    @keyframes cdChickenSlide {
      0%   { opacity: 1; transform: translateX(0); }
      100% { opacity: 0.6; transform: translateX(-24px); }
    }
    @keyframes cdStandoutGlow {
      0%, 100% { box-shadow: 0 0 12px rgba(240,165,0,0.2); }
      50%      { box-shadow: 0 0 28px rgba(240,165,0,0.5); }
    }
    @keyframes cdPhaseIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes cdBarFill {
      from { width: 0; }
      to   { width: var(--cd-pct); }
    }
    .cd-wrap {
      position: relative;
      background:
        linear-gradient(180deg,
          #1a140e 0%,
          #2d1f14 8%,
          #3d2a18 14%,
          #4a3520 18%,
          #3a2c1a 22%,
          #1a2030 30%,
          #0c1a2e 45%,
          #081428 60%,
          #060e1e 100%
        );
    }
    .cd-cliff-edge {
      text-align: center; padding: 6px 0; margin-bottom: 8px;
      border-bottom: 3px solid #4a3520;
      font-size: 7px; font-weight: 800; letter-spacing: 3px; color: #4a3520;
    }
    .cd-tracker {
      display: flex; justify-content: center; gap: 14px;
      padding: 8px 14px; margin-bottom: 14px; border-radius: 6px;
      background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06);
    }
    .cd-tracker-tribe { text-align: center; }
    .cd-confessional {
      padding: 14px 16px; margin-bottom: 6px; border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(0,0,0,0.3); backdrop-filter: blur(4px);
    }
    .cd-confessional.jumped {
      border-left: 3px solid #3fb950;
      animation: scrollDrop 0.35s var(--ease-broadcast) both;
    }
    .cd-confessional.chickened {
      border-left: 3px solid #f85149;
      animation: cdChickenSlide 0.4s ease-out both;
    }
    .cd-confessional.standout {
      border: 2px solid #f0a500;
      background: linear-gradient(135deg, rgba(240,165,0,0.1), rgba(240,165,0,0.02));
      animation: cdStandoutGlow 2.5s ease-in-out infinite, scrollDrop 0.35s var(--ease-broadcast) both;
    }
    .cd-jump-badge {
      font-size: 9px; font-weight: 800; letter-spacing: 1px;
      padding: 2px 7px; border-radius: 3px; display: inline-block;
    }
    .cd-jump-badge.pass { color: #3fb950; background: rgba(63,185,80,0.12); }
    .cd-jump-badge.fail { color: #f85149; background: rgba(248,81,73,0.12); }
    .cd-phase-card {
      animation: cdPhaseIn 0.4s var(--ease-broadcast) both;
    }
    .cd-bar-track {
      height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .cd-bar-fill {
      height: 100%; border-radius: 4px;
      animation: cdBarFill 0.6s var(--ease-broadcast) both;
    }
    .cd-shame-wall {
      text-align: center; padding: 16px; margin-top: 14px;
      border-radius: 10px; border: 1px solid rgba(248,81,73,0.15);
      background: rgba(248,81,73,0.04);
    }
    .cd-final-winner {
      padding: 20px 16px; margin-top: 14px; border-radius: 12px;
      text-align: center; position: relative; overflow: hidden;
    }
    @media (prefers-reduced-motion: reduce) {
      .cd-confessional.jumped { animation: none; }
      .cd-confessional.chickened { animation: none; opacity: 0.6; transform: translateX(-24px); }
      .cd-confessional.standout { animation: none; }
      .cd-phase-card { animation: none; }
      .cd-bar-fill { animation: none; width: var(--cd-pct); }
    }

    /* ── X-Treme Torture Overdrive ── */
    @keyframes xtSlideIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes xtScoreReveal {
      0%   { opacity: 0; transform: scale(0.5); }
      60%  { opacity: 1; transform: scale(1.15); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes xtInjuryFlash {
      0%   { background: transparent; }
      40%  { background: rgba(239,68,68,0.15); }
      100% { background: transparent; }
    }
    @keyframes xtFlagCollect {
      0%   { transform: scale(0); }
      60%  { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    @keyframes xtSaboBackfire {
      0%   { transform: translateX(0); }
      20%  { transform: translateX(-6px); }
      50%  { transform: translateX(5px); }
      75%  { transform: translateX(-3px); }
      100% { transform: translateX(0); }
    }
    @keyframes xtEventBanner {
      from { opacity: 0; transform: scaleX(0.7); }
      to   { opacity: 1; transform: scaleX(1); }
    }
    .xt-wrap {
      position: relative;
      background: linear-gradient(180deg, #0c1a2e 0%, #081428 40%, #060e1e 100%);
    }
    .xt-scoreboard {
      position: sticky; top: 46px; z-index: 3;
      display: flex; flex-direction: row; align-items: center; justify-content: center;
      gap: 24px;
      padding: 8px 16px;
      background: rgba(6,14,30,0.88); backdrop-filter: blur(8px);
      border-bottom: 2px solid #ef4444;
    }
    .xt-score-tribe {
      display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .xt-score-num {
      font-family: var(--font-display); font-size: 24px; font-weight: 800;
      color: #f97316;
    }
    .xt-event-banner {
      text-align: center; padding: 14px; margin: 12px 0;
      font-family: var(--font-display); font-size: 15px; font-weight: 800;
      letter-spacing: 2px; text-transform: uppercase;
      animation: xtEventBanner 0.4s var(--ease-broadcast) both;
    }
    .xt-spotlight {
      text-align: center; padding: 12px; margin-bottom: 8px;
    }
    .xt-confessional {
      padding: 12px 14px; margin-bottom: 5px; border-radius: 8px;
      background: rgba(0,0,0,0.3); backdrop-filter: blur(4px);
      border-left: 3px solid #ef4444;
      animation: xtSlideIn 0.35s var(--ease-broadcast) both;
    }
    .xt-injury-overlay {
      padding: 10px; border-radius: 8px;
      border: 1px solid rgba(239,68,68,0.2);
      animation: xtInjuryFlash 0.6s var(--ease-broadcast) both;
    }
    .xt-flag-track {
      display: flex; gap: 4px; justify-content: center; margin: 8px 0;
    }
    .xt-flag-slot {
      width: 28px; height: 28px; border-radius: 4px;
      border: 1.5px solid rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
    }
    .xt-flag-slot.collected {
      border-color: #3fb950; background: rgba(63,185,80,0.15); color: #3fb950;
      animation: xtFlagCollect 0.3s var(--ease-broadcast) both;
    }
    .xt-flag-slot.missed {
      border-color: #f85149; opacity: 0.4; color: #f85149;
    }
    .xt-sabo-backfire {
      animation: xtSaboBackfire 0.5s ease-out both;
    }
    .xt-result-card {
      padding: 12px; margin-bottom: 6px; border-radius: 8px;
      animation: xtSlideIn 0.4s var(--ease-broadcast) both;
    }
    .xt-championship {
      padding: 20px 16px; margin-top: 12px; border-radius: 12px;
      text-align: center;
      animation: xtScoreReveal 0.6s var(--ease-broadcast) both;
    }
    @media (prefers-reduced-motion: reduce) {
      .xt-confessional { animation: none; }
      .xt-event-banner { animation: none; opacity: 1; }
      .xt-flag-slot.collected { animation: none; }
      .xt-sabo-backfire { animation: none; }
      .xt-result-card { animation: none; }
      .xt-championship { animation: none; opacity: 1; transform: scale(1); }
      .xt-injury-overlay { animation: none; }
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* App-shell: the window itself must NEVER scroll — every surface scrolls in
       its own panel. Without this the header/viewport math can overflow by a few
       pixels, and Firefox draws a useless near-empty ROOT scrollbar right next to
       the panel's real one (the "double scrollbar"). */
    html, body { overflow: hidden; height: 100%; }
    body { background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; font-size: 14px; }

    /* ── HEADER ── */
    .sim-header { background: linear-gradient(180deg, var(--surface), var(--surface2)); border-bottom: 2px solid var(--accent); padding: 10px 22px; display: flex; align-items: center; gap: 24px; position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 14px rgba(0,0,0,0.25); } /* above #season-episode-rail (24) so the Season menu isn't clipped by the sticky episode strip */
    /* ── Broadcast channel ID cluster ── */
    .bcast-id { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
    .bcast-onair { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--broadcast-red); padding: 3px 8px; border: 1px solid var(--broadcast-red); border-radius: 4px; }
    .bcast-onair .bcast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--broadcast-red); box-shadow: 0 0 8px var(--broadcast-red); animation: bcastPulse 1.6s ease-in-out infinite; }
    .bcast-onair.off { color: var(--muted); border-color: var(--border); }
    .bcast-onair.off .bcast-dot { background: var(--muted); box-shadow: none; animation: none; }
    @keyframes bcastPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
    .bcast-logo { display: inline-flex; align-items: center; gap: 7px; }
    .bcast-logo img { height: 28px; vertical-align: middle; }
    /* The Blindside mark: the way back to the network (opens in a new tab). */
    .bcast-home { gap: 9px; text-decoration: none; color: var(--text); border-radius: 8px; padding: 2px 6px 2px 2px; transition: background .2s; }
    .bcast-home:hover, .bcast-home:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); }
    .bcast-home .bs-mark { width: 30px; height: 30px; flex: none; }
    .bcast-home .bcast-net { white-space: nowrap; }
    .bcast-chan { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; color: var(--accent); }
    .bcast-chan b { color: var(--text); margin-left: 1px; }
    .bcast-net { font-family: var(--font-display); font-size: 16px; letter-spacing: 1.5px; color: var(--text); }
    .bcast-now { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
    .bcast-season { font-size: 13px; font-style: italic; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
    .bcast-episode { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); }
    .bcast-clock { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-right: 4px; }
    .sim-tabs { display: flex; gap: 10px; margin-left: auto; align-items:center; }
    .journey-nav-group { display:flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--border); background:color-mix(in srgb,var(--surface2) 88%,transparent); }
    .journey-nav-label { padding:0 6px; color:var(--muted); font:800 8px var(--font-body); letter-spacing:1px; text-transform:uppercase; }
    .sim-header.season-live .journey-create .journey-nav-label { display:none; }
    .sim-header.season-live .journey-create { opacity:.7; }
    .tab-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }
    .tab-btn:hover { color: var(--text); border-color: var(--accent); }
    .tab-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
    .tab-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .season-menu { position:relative; }
    .season-menu > summary { min-height:34px; display:flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; cursor:pointer; list-style:none; }
    .season-menu > summary::-webkit-details-marker { display:none; }
    .season-menu > summary::after { content:'▾'; color:var(--accent); }
    .season-menu[open] > summary, .season-menu > summary:hover { color:var(--text); border-color:var(--accent); }
    .season-menu-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:80; width:210px; padding:8px; display:grid; gap:5px; border:1px solid var(--border); background:var(--surface); box-shadow:0 18px 45px rgba(0,0,0,.42); }
    .season-menu-panel button { min-height:36px; padding:0 10px; border:1px solid transparent; background:var(--surface2); color:var(--text); text-align:left; font:700 10px var(--font-body); cursor:pointer; }
    .season-menu-panel button:hover { border-color:var(--accent); }
    .season-menu-panel button.danger { color:#f87171; }

    /* ── Cloud backup (js/cloud-backup.js) ── the dot says whether saves are
       reaching the cloud: green on, amber uploading, grey off, red failing. */
    .cloud-backup-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
    .cloud-backup-dot[data-state="ok"] { background:var(--accent); }
    .cloud-backup-dot[data-state="syncing"] { background:var(--accent-gold); animation:cb-pulse 1.2s ease-in-out infinite; }
    .cloud-backup-dot[data-state="error"] { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.25); }
    @keyframes cb-pulse { 50% { opacity:.35; } }
    @media (prefers-reduced-motion: reduce) { .cloud-backup-dot[data-state="syncing"] { animation:none; } }
    dialog.cloud-backup { margin:auto; width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 760px); padding:18px 20px; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:0 24px 60px rgba(0,0,0,.5); font:400 13px/1.5 var(--font-body); }
    dialog.cloud-backup::backdrop { background:rgba(4,8,14,.6); }
    .cloud-backup h2 { margin:0; font:400 22px var(--font-display); letter-spacing:.5px; }
    .cloud-backup h3 { margin:18px 0 6px; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
    .cloud-backup .cb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
    .cloud-backup .cb-x { background:none; border:0; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 8px; }
    .cloud-backup .cb-x:hover { color:var(--text); }
    .cloud-backup .cb-note { display:block; margin:4px 0; color:var(--muted); font-size:12px; }
    .cloud-backup .cb-error { color:#ef4444; }
    .cloud-backup .cb-status { margin:10px 0; padding:8px 10px; border-left:3px solid var(--muted); background:var(--surface2); }
    .cloud-backup .cb-status[data-state="ok"] { border-color:var(--accent); }
    .cloud-backup .cb-status[data-state="syncing"] { border-color:var(--accent-gold); }
    .cloud-backup .cb-status[data-state="error"], .cloud-backup .cb-status[data-state="off"] { border-color:#ef4444; }
    .cloud-backup .cb-pw label { display:block; margin:8px 0 4px; font-size:12px; color:var(--muted); }
    .cloud-backup .cb-row { display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap; }
    .cloud-backup .cb-row input, .cloud-backup .cb-row select { flex:1; min-width:0; }
    .cloud-backup .cb-list { display:grid; gap:2px; max-height:260px; overflow:auto; }
    .cloud-backup .cb-item { display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--surface2); cursor:pointer; }
    .cloud-backup .cb-item > span:first-of-type { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cloud-backup .cb-meta { color:var(--muted); font-size:11px; white-space:nowrap; }
    .season-menu-panel hr { width:100%; border:0; border-top:1px solid var(--border); }
    .bcast-context { display:inline-flex; align-items:center; gap:7px; }
    .bcast-phase { color:var(--muted); font:800 9px var(--font-body); letter-spacing:.7px; text-transform:uppercase; }
    .bcast-progress { width:52px; height:3px; overflow:hidden; background:var(--border); }
    .bcast-progress span { display:block; height:100%; background:var(--accent); }
    @media (prefers-reduced-motion: reduce) { .bcast-onair .bcast-dot { animation: none; } }
    .audio-ctrl { display:flex; align-items:center; gap:6px; margin-left:auto; padding-left:12px; }
    .audio-btn { background:none; border:none; font-size:16px; cursor:pointer; color:var(--text); line-height:1; }
    .audio-ctrl input[type=range] { width:80px; accent-color:var(--accent); }
    .audio-music-btn { position:relative; font-size:14px; }
    .audio-music-btn.off { opacity:0.4; }
    .audio-music-btn.off::after { content:''; position:absolute; left:50%; top:50%; width:20px; height:2px;
      background:var(--accent-fire,#e8873a); transform:translate(-50%,-50%) rotate(-45deg); border-radius:2px; }
    .audio-toast { pointer-events:none; position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--surface2);
      border:1px solid var(--border); color:var(--text); padding:10px 16px; border-radius:8px; font-size:13px;
      box-shadow:0 6px 24px rgba(0,0,0,.4); z-index:9999; opacity:0; transition:opacity .4s; }
    .audio-toast.show { opacity:1; }
    @media (max-width:1180px) {
      .sim-header { gap:10px; padding:8px 12px; flex-wrap:wrap; }
      .bcast-net, .bcast-clock, .audio-ctrl input[type=range] { display:none; }
      .sim-tabs { order:3; width:100%; margin-left:0; overflow-x:auto; padding-top:3px; }
      .journey-nav-group { flex:0 0 auto; }
      .season-menu { margin-left:auto; }
    }
    @media (max-width:680px) {
      .bcast-onair, .bcast-chan, .journey-nav-label { display:none; }
      .bcast-id { min-width:0; gap:7px; }
      .bcast-now { min-width:0; padding-left:7px; }
      .bcast-season { max-width:120px; font-size:11px; }
      .bcast-progress { width:32px; }
      .tab-btn { min-height:40px; padding:6px 10px; }
      .audio-ctrl { margin-left:0; padding-left:0; }
      .sim-body { height:calc(100vh - 108px); }
    }

    /* ── TAB LAYOUT ── */
    .sim-body { display: flex; height: calc(100vh - 49px); overflow: hidden; }
    .tab-content { display: none; width: 100%; height: 100%; }
    .tab-content.active { display: flex; }

    /* ══ FRANCHISE TAB ══════════════════════════════════════════════ */
    #tab-franchise.active { display: block; overflow: hidden; padding-right: 12px; background: var(--bg); }
    .fr-wrap { width: 100%; height: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 28px 60px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; box-sizing: border-box; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #526477 #10161e; }
    .fr-wrap::-webkit-scrollbar { width: 11px; }
    .fr-wrap::-webkit-scrollbar-track { background: #10161e; border-left: 1px solid #202b37; }
    .fr-wrap::-webkit-scrollbar-thumb { min-height: 54px; border: 2px solid #10161e; border-radius: 7px; background: #526477; }
    .fr-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    /* header */
    .fr-header { margin-bottom: 8px; }
    .fr-header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .fr-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 1px; margin: 0; color: var(--text); display: flex; align-items: center; gap: 12px; }
    .fr-crown { width: 34px; height: 23px; filter: drop-shadow(0 2px 6px rgba(240,192,64,.35)); }
    .fr-franchise-actions { display: flex; gap: 8px; align-items: center; }
    .fr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
    .fr-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s, background .2s; }
    .fr-pill:hover { color: var(--text); border-color: var(--accent); }
    .fr-pill.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent), 0 0 16px -4px var(--accent); }
    .fr-pill-count { font-size: 11px; font-weight: 700; background: var(--surface2); color: var(--muted); border-radius: 999px; padding: 1px 8px; }
    .fr-pill.active .fr-pill-count { background: var(--accent); color: #06110b; }
    .fr-subtext { font-size: 12px; color: var(--muted); letter-spacing: .3px; }
    /* buttons */
    .fr-btn { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 13px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
    .fr-btn:hover { border-color: var(--accent); color: var(--accent); }
    .fr-btn-icon { padding: 7px 9px; }
    .fr-btn-sm { font-size: 11px; padding: 5px 9px; }
    .fr-btn-danger:hover { border-color: var(--accent-fire); color: var(--accent-fire); }
    /* timeline grid */
    .fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 4px; }
    .fr-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; transition: transform .22s var(--ease-broadcast), box-shadow .22s, border-color .22s; }
    .fr-card:hover { transform: translateY(-4px); border-color: var(--accent-gold); box-shadow: 0 12px 30px -12px rgba(240,192,64,.4), 0 0 0 1px rgba(240,192,64,.25); }
    .fr-card.fr-excluded { opacity: .45; }
    .fr-card.fr-excluded .fr-portrait img, .fr-card.fr-excluded .fr-medallion { filter: grayscale(1); }
    .fr-card-head { display: flex; align-items: center; justify-content: space-between; }
    .fr-snum { font-family: var(--font-display); font-size: 30px; line-height: .9; color: var(--accent-gold); letter-spacing: .5px; }
    .fr-src { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
    .fr-src-live { color: #06110b; background: var(--accent); }
    .fr-src-manual { color: #1a1405; background: var(--accent-gold); }
    .fr-src-import { color: var(--muted); background: var(--surface2); border: 1px solid var(--border); }
    .fr-card-name { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
    .fr-winner { display: flex; align-items: center; gap: 12px; }
    .fr-winner-portrait { position: relative; display: inline-block; }
    .fr-winner-portrait .fr-crown { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 26px; height: 18px; z-index: 2; }
    .fr-portrait { display: inline-flex; }
    .fr-portrait img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--surface2); }
    .fr-portrait-fb { width: 40px; height: 40px; align-items: center; justify-content: center; }
    .fr-portrait-lg img, .fr-portrait-lg .fr-portrait-fb { width: 54px; height: 54px; }
    .fr-portrait-lg img { border: 2px solid var(--accent-gold); box-shadow: 0 0 14px -4px var(--accent-gold); }
    .fr-medallion { width: 100%; height: 100%; }
    .fr-winner-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .fr-winner-label { font-size: 9px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
    .fr-winner-name { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--accent-gold); }
    .fr-runnerup { font-size: 11px; color: var(--muted); }
    .fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .fr-chip { font-size: 10px; font-weight: 600; color: var(--muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
    .fr-card-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
    .fr-incl { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); cursor: pointer; }
    .fr-incl input { accent-color: var(--accent); cursor: pointer; }
    .fr-card-controls .fr-btn-sm { margin-left: auto; }
    .fr-card-controls .fr-btn-sm + .fr-btn-sm { margin-left: 0; }
    /* details flyout */
    .fr-details { margin-top: 4px; padding: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 7px; }
    .fr-det-note { font-size: 10px; font-style: italic; color: var(--muted); }
    .fr-det-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .fr-det-row .fr-portrait img, .fr-det-row .fr-portrait-fb { width: 26px; height: 26px; }
    .fr-det-place { font-family: var(--font-display); font-size: 15px; color: var(--accent-gold); min-width: 20px; text-align: center; flex-shrink: 0; }
    .fr-det-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .fr-det-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fr-det-facts { display: flex; flex-wrap: wrap; gap: 4px; }
    .fr-fact { font-size: 9px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .fr-fact-bad { color: var(--accent-fire); border-color: var(--accent-fire); }
    .fr-det-more { font-size: 11px; color: var(--muted); font-style: italic; text-align: center; }
    /* dropzone */
    .fr-drop { border: 2px dashed var(--border); border-radius: 14px; padding: 26px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: var(--surface); }
    .fr-drop:hover, .fr-drop.fr-drop-over { border-color: var(--accent); background: var(--accent-dim); }
    .fr-drop-icon { font-size: 26px; color: var(--accent); }
    .fr-drop-title { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--text); margin-top: 4px; }
    .fr-drop-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
    .fr-drop-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
    .fr-log { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
    .fr-log-row { font-size: 12px; font-family: var(--font-mono); padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border); }
    .fr-log-ok { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }
    .fr-log-err { color: var(--accent-fire); background: rgba(232,135,58,.1); border-color: var(--accent-fire); }
    /* pulse footer */
    .fr-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 4px; }
    .fr-tile { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
    .fr-tile-portrait .fr-portrait img, .fr-tile-portrait .fr-portrait-fb { width: 42px; height: 42px; border-color: var(--accent-gold); }
    .fr-tile-value { font-family: var(--font-display); font-size: 22px; color: var(--text); line-height: 1; }
    .fr-tile-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
    /* empty state */
    .fr-empty { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
    .fr-empty-trophy { width: 84px; height: auto; opacity: .8; filter: drop-shadow(0 4px 12px rgba(240,192,64,.25)); }
    .fr-empty-text { font-size: 14px; color: var(--muted); max-width: 420px; line-height: 1.5; }
    @media (prefers-reduced-motion: reduce) {
      .fr-card, .fr-pill, .fr-btn, .fr-drop { transition: none; }
      .fr-card:hover { transform: none; }
    }

    /* ── SHARED PANEL STYLES ── */
    .form-panel, .setup-left, .run-sidebar {
      width: 280px; min-width: 280px;
      background: var(--surface); border-right: 1px solid var(--border);
      overflow-y: auto; padding: 16px 14px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .form-group { display: flex; flex-direction: column; gap: 5px; }
    .form-label { font-size: 11px; color: var(--muted); font-weight: 600; }
    .form-label .hint { font-weight: 400; color: #475569; }
    .form-input, .form-select { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; color: var(--text); font-size: 13px; width: 100%; outline: none; transition: border-color 0.15s; }
    .form-input:focus, .form-select:focus { border-color: var(--accent); }
    .form-select option { background: var(--bg); }

    /* ── STAT SLIDERS ── */
    /* ── STAT TABS ──
       Two sets of sliders sharing one space. Only drawn on a show that HAS a
       second set (CONFIG_SCOPE scopes `sec-dr-craft-tabs` to drag-race), so
       the other three shows see the panel exactly as before. */
    .stat-tabs { display:flex; gap:2px; margin:0 0 10px; border-bottom:1px solid var(--border, #1a2130); }
    .stat-tab { appearance:none; background:none; border:0; border-bottom:2px solid transparent;
      padding:7px 12px; font:700 11px var(--font-body, inherit); letter-spacing:.04em;
      color:var(--muted, #7c8999); cursor:pointer; transition:color .12s, border-color .12s; }
    .stat-tab:hover { color:var(--text, #f0f6fc); }
    .stat-tab.active { color:var(--text, #f0f6fc); border-bottom-color:var(--accent, #f0c040); }
    .stat-tab:focus-visible { outline:2px solid #58a6ff; outline-offset:-2px; }
    /* The tab strip hides the duplicate heading: the tab already says which
       set you are looking at. */
    .stat-tabs:not([hidden]) ~ .form-group > #stat-core-label { display:none; }
    .stat-tabs:not([hidden]) ~ #sec-dr-craft > .form-label { display:none; }
    /* `hidden` has to win. The UA rule for [hidden] is the weakest there is,
       and .form-group sets display — so without this the tab switch would set
       the attribute and nothing would move. */
    #sec-stats-core[hidden], #sec-dr-craft[hidden] { display:none !important; }

    .stat-sliders { display: flex; flex-direction: column; gap: 9px; }
    .slider-row { display: flex; align-items: center; gap: 8px; }
    .slider-name { font-size: 11px; width: 66px; flex-shrink: 0; font-weight: 600; }
    input[type="range"].stat-slider { flex: 1; -webkit-appearance: none; height: 4px; border-radius: 2px; outline: none; cursor: pointer; }
    input[type="range"].stat-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.6); }
    .slider-val { width: 20px; text-align: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

    /* ── BUTTONS ── */
    .btn { padding: 8px 14px; border-radius: 6px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .btn-primary { background: var(--accent); color: #0f172a; width: 100%; }
    .btn-primary:hover { filter: brightness(1.1); }
    .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
    .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
    .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
    .btn-danger { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
    .btn-danger:hover { background: rgba(239,68,68,0.2); }
    .btn-sm { padding: 4px 10px; font-size: 11px; }
    .btn-row { display: flex; gap: 6px; }
    .btn-row .btn { flex: 1; }
    .divider { height: 1px; background: var(--border); flex-shrink: 0; }

    /* ── CAST PANEL ── */
    .cast-panel { flex: 1; overflow-y: auto; padding: 18px 20px; }
    .cast-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .cast-title { font-size: 14px; font-weight: 600; }
    .cast-meta { font-size: 12px; color: var(--muted); }
    .cast-meta strong { color: var(--accent); }
    .cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

    /* ── PLAYER CARD ── */
    .player-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; position: relative; transition: border-color 0.15s; }
    .player-card:hover { border-color: #475569; }
    .player-card.editing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
    .card-tribe-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; }
    .card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .card-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface2); border: 2px solid var(--border); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--muted); position: relative; }
    .card-avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .card-info { flex: 1; min-width: 0; }
    .card-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
    .tribe-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
    .archetype-tag { font-size: 10px; color: var(--muted); }
    .overall-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
    .overall-label-sm { font-size: 9px; color: var(--muted); width: 30px; }
    .bar-bg { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
    .bar-fill { height: 100%; border-radius: 2px; }
    .overall-val { font-size: 10px; color: var(--muted); width: 22px; text-align: right; }
    .stat-bars { display: flex; flex-direction: column; gap: 3px; margin-bottom: 7px; }
    .sbar-row { display: flex; align-items: center; gap: 5px; }
    .sbar-key { font-size: 9px; width: 12px; color: var(--muted); text-align: right; flex-shrink: 0; }
    .sbar-val { font-size: 9px; width: 12px; text-align: right; color: var(--muted); flex-shrink: 0; }
    .threat-row { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; }
    .threat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .threat-text { font-size: 10px; color: var(--muted); }
    .card-actions { display: flex; gap: 5px; padding-top: 9px; border-top: 1px solid var(--border); }
    .card-actions .btn { flex: 1; padding: 5px 8px; font-size: 11px; }
    .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); }
    .empty-icon { font-size: 36px; margin-bottom: 10px; }
    .empty-state p { font-size: 13px; margin-top: 6px; }
    .archetype-desc { font-size: 10px; color: #475569; margin-top: 2px; }

    /* ── TOGGLE ── */
    .toggle-row { display: flex; align-items: center; gap: 10px; }
    .toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-track { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 20px; transition: 0.2s; }
    .toggle-track::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; }
    .toggle input:checked + .toggle-track { background: var(--accent); }
    .toggle input:checked + .toggle-track::before { transform: translateX(16px); }
    .toggle-label { font-size: 12px; color: var(--muted); }

    /* ── ADVANTAGES ── */
    .adv-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
    .adv-row:last-child { border-bottom: none; }
    .adv-check { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
    .adv-label { flex: 1; font-size: 12px; color: var(--text); }
    .adv-count { width: 44px; padding: 4px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 12px; text-align: center; outline: none; }
    .adv-count:focus { border-color: var(--accent); }
    .adv-count:disabled { opacity: 0.3; }

    /* ── SETUP RIGHT ── */
    .setup-right { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
    .setup-header { display: flex; align-items: center; justify-content: space-between; }
    .setup-header h2 { font-size: 14px; font-weight: 600; }
    .setup-header-actions { display: flex; gap: 6px; }
    .rel-form-box { background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
    .rel-form-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
    .rel-player-row { display: flex; gap: 8px; align-items: center; }
    .rel-player-row .form-select { flex: 1; }
    .rel-vs { font-size: 11px; color: var(--muted); flex-shrink: 0; }
    .type-seg { display: flex; gap: 4px; flex-wrap: wrap; }
    .type-btn { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .type-btn.active { color: #0f172a; border-color: transparent; }
    .rel-list { display: flex; flex-direction: column; gap: 8px; }
    .rel-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; }
    .rel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
    .rel-card:hover { border-color: #475569; }

    /* The drag family tree, derived from the rows above. */
    .rel-families { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    .rel-fam { background: var(--surface); border: 1px solid var(--border);
      border-left: 3px solid #e879f9; border-radius: 10px; padding: 10px 14px; }
    .rel-fam-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .rel-fam-head strong { font-size: 13px; }
    .rel-fam-tag { font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
      color: #e879f9; margin-left: auto; }
    .rel-fam-row { display: flex; align-items: center; gap: 8px; font-size: 12px;
      padding: 3px 0 3px 14px; }
    .rel-fam-row em { margin-left: auto; font-style: normal; font-size: 11px;
      color: var(--muted); }
    .rel-players { flex: 1; min-width: 0; }
    .rel-names { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
    .rel-arrow { font-size: 10px; color: var(--muted); }
    .rel-note { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
    .rel-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
    .rel-actions { display: flex; gap: 4px; flex-shrink: 0; }

    /* ── RUN EPISODE TAB ── */
    .run-main { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
    /* Force a CLASSIC visible scrollbar on every scrolling tab surface (same
       treatment as .fr-wrap): Firefox/Windows 11 default to auto-hiding overlay
       scrollbars, which reads as "this page can't scroll". */
    .run-main, .run-sidebar, #tab-setup, #tab-cast { scrollbar-width: auto; scrollbar-color: #526477 #10161e; scrollbar-gutter: stable; }
    .run-main::-webkit-scrollbar, .run-sidebar::-webkit-scrollbar, #tab-setup::-webkit-scrollbar, #tab-cast::-webkit-scrollbar { width: 11px; }
    .run-main::-webkit-scrollbar-track, .run-sidebar::-webkit-scrollbar-track, #tab-setup::-webkit-scrollbar-track, #tab-cast::-webkit-scrollbar-track { background: #10161e; border-left: 1px solid #202b37; }
    .run-main::-webkit-scrollbar-thumb, .run-sidebar::-webkit-scrollbar-thumb, #tab-setup::-webkit-scrollbar-thumb, #tab-cast::-webkit-scrollbar-thumb { min-height: 54px; border: 2px solid #10161e; border-radius: 7px; background: #526477; }
    .run-main::-webkit-scrollbar-thumb:hover, .run-sidebar::-webkit-scrollbar-thumb:hover, #tab-setup::-webkit-scrollbar-thumb:hover, #tab-cast::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* Game state sidebar */
    .gs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .gs-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; text-align: center; }
    .gs-stat label { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
    .gs-stat strong { font-size: 16px; font-weight: 700; }
    .gs-tribe { margin-bottom: 8px; }
    .gs-tribe-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
    .gs-tribe-members { font-size: 11px; color: var(--muted); line-height: 1.6; }
    .gs-section { margin-top: 2px; }
    .gs-section > label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); display: block; margin-bottom: 4px; }
    .gs-alliance { padding: 5px 0; border-bottom: 1px solid var(--border); }
    .gs-alliance:last-child { border-bottom: none; }
    .gs-alliance-label { font-size: 10px; font-weight: 700; color: var(--accent); }
    .gs-alliance-members { font-size: 11px; color: var(--text); display: block; }
    .gs-alliance-target { font-size: 10px; color: #ef4444; display: block; }
    .gs-ri-list { font-size: 12px; color: #f97316; }
    .gs-elim-list { font-size: 11px; color: var(--muted); line-height: 1.6; }

    /* Episode result */
    .ep-result { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
    .ep-result-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
    .ep-result-num { font-size: 20px; font-weight: 700; }
    .ep-result-phase { font-size: 12px; color: var(--muted); }
    .ep-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
    .ep-fact { background: var(--bg); border-radius: 6px; padding: 8px 10px; }
    .ep-fact label { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
    .ep-fact span { font-size: 13px; font-weight: 600; }
    .ep-vote-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .ep-vote-chip { font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }
    .ep-vote-chip.top { border-color: #ef4444; color: #ef4444; }

    /* Output section */
    .output-section { display: flex; flex-direction: column; gap: 8px; }
    .output-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .output-title { font-size: 13px; font-weight: 600; flex: 1; }
    .output-note { font-size: 11px; color: var(--muted); }
    .output-textarea { width: 100%; min-height: 280px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px; color: var(--text); font-size: 12px; font-family: var(--font-mono); line-height: 1.6; resize: vertical; outline: none; }
    .output-textarea:focus { border-color: var(--accent); }

    /* Episode history */
    .ep-history-wrap { display: flex; flex-direction: column; gap: 8px; }
    .ep-history-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
    .ep-history-grid { display: flex; flex-wrap: wrap; gap: 6px; }
    .ep-hist-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: all 0.15s; min-width: 110px; }
    .ep-hist-card:hover { border-color: #475569; }
    .ep-hist-card.active { border-color: var(--accent); background: var(--accent-dim); }
    .ep-hist-ep { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; }
    .ep-hist-replay { background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 0; line-height: 1; margin-left: auto; opacity: 0.5; }
    .ep-hist-replay:hover { color: var(--accent); opacity: 1; }
    .ep-hist-elim { font-size: 12px; font-weight: 700; margin-top: 2px; }
    .ep-hist-tag { font-size: 9px; padding: 1px 5px; border-radius: 4px; display: inline-block; margin-top: 3px; }

    /* Run empty */
    .run-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; text-align: center; color: var(--muted); padding: 60px 40px; gap: 10px; }
    .run-empty-state .empty-icon { font-size: 40px; }
    .run-empty-state p { font-size: 13px; max-width: 360px; line-height: 1.6; }

    /* ── SEASON HUB ── */
    #season-hub { width: 100%; }
    #season-episode-rail { position: sticky; top: -18px; z-index: 24; margin: -18px -20px 0; padding: 0 20px; background: rgba(8,12,17,.96); backdrop-filter: blur(14px); }
    .hub-episode-rail { min-height: 66px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid #293342; }
    .hub-rail-title { min-width: 86px; display: flex; flex-direction: column; gap: 2px; }
    .hub-rail-title span { color: #dce4ec; font-size: 9px; font-weight: 900; letter-spacing: 1.25px; text-transform: uppercase; }
    .hub-rail-title small, .hub-rail-position { color: #5f6f82; font-size: 8px; white-space: nowrap; }
    .hub-rail-track { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 8px 2px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #344152 transparent; }
    .hub-rail-episode { position: relative; flex: 0 0 auto; min-width: 58px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 8px; border: 1px solid #283443; border-radius: 5px; background: #101720; color: #738398; cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
    .hub-rail-episode:hover { border-color: #56677c; color: #d5dee7; background: #151e29; }
    .hub-rail-episode.active { border-color: color-mix(in srgb, var(--hub-accent) 70%, #536174); background: color-mix(in srgb, var(--hub-accent) 8%, #111923); color: #f0f4f8; }
    .hub-rail-episode.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -9px; height: 2px; background: var(--hub-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--hub-accent) 55%, transparent); }
    .hub-rail-episode:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; }
    .hub-rail-num { font: 800 8px var(--font-mono); letter-spacing: .35px; white-space: nowrap; }
    .hub-rail-face, .hub-rail-locked, .hub-rail-empty { position: relative; width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #46566a; border-radius: 50%; background: #1b2633; color: #8191a4; font-size: 9px; font-weight: 800; }
    .hub-rail-face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55); }
    .hub-rail-face > span { display: none; position: absolute; inset: 0; place-items: center; }
    .hub-rail-locked { border-style: dashed; }
    .hub-rail-faces { display: inline-flex; align-items: center; padding-left: 5px; }
    .hub-rail-faces .hub-rail-face { margin-left: -5px; box-shadow: 0 0 0 2px #101720; }
    .hub-rail-episode.active .hub-rail-faces .hub-rail-face { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hub-accent) 8%, #111923); }
    .hub-rail-faces > b { margin-left: 4px; color: #9cabbc; font: 800 8px var(--font-mono); }
    .season-controls { width: 100%; }
    .season-controls > summary { position: relative; list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 12px 38px 12px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
    .season-controls > summary::-webkit-details-marker { display: none; }
    .season-controls > summary::after { content: '+'; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--muted); line-height: 1; }
    .season-controls[open] > summary::after { content: '−'; }
    .season-controls > summary span { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text); }
    .season-controls > summary small { font-size: 10px; color: var(--muted); }
    .season-controls-body { padding: 12px 3px 0; }
    .season-controls-note, .season-controls-label { font-size: 10px; color: var(--muted); line-height: 1.45; }
    .season-controls-label { margin-bottom: 6px; font-weight: 700; letter-spacing: .65px; text-transform: uppercase; }
    .season-action-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    .season-action-stack > .btn { width: 100%; min-height: 34px; margin: 0; }
    .season-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
    .season-quick-grid > .btn { width: 100%; min-width: 0; min-height: 32px; margin: 0; }
    .episode-review { display: flex; flex-direction: column; gap: 16px; }

    .hub-shell, .hub-welcome { position: relative; overflow: hidden; border: 1px solid #293342; border-radius: 14px; background: linear-gradient(145deg, #111923 0%, #0d1219 58%, #101720 100%); box-shadow: 0 18px 55px rgba(0,0,0,.22); }
    .hub-shell::before, .hub-welcome::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--hub-accent); box-shadow: 0 0 28px color-mix(in srgb, var(--hub-accent) 55%, transparent); }
    .hub-shell::after, .hub-welcome::after { content: ''; position: absolute; width: 360px; height: 360px; top: -240px; right: -100px; border: 1px solid color-mix(in srgb, var(--hub-accent) 22%, transparent); border-radius: 50%; box-shadow: 0 0 0 55px color-mix(in srgb, var(--hub-accent) 4%, transparent), 0 0 0 110px color-mix(in srgb, var(--hub-accent) 3%, transparent); pointer-events: none; }
    .hub-welcome { min-height: 330px; padding: 58px clamp(28px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
    .hub-welcome h1 { margin: 7px 0 10px; max-width: 720px; font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 52px); font-weight: 500; letter-spacing: .3px; line-height: 1.02; color: #f1f5f9; }
    .hub-welcome p { max-width: 620px; margin: 0 0 25px; color: #8f9dad; font-size: 13px; line-height: 1.7; }
    .hub-kicker { color: var(--hub-accent); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
    .hub-primary { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; padding: 0 19px; border: 1px solid color-mix(in srgb, var(--hub-accent) 70%, #fff); border-radius: 7px; background: var(--hub-accent); color: #091016; font: 800 11px var(--font-body); letter-spacing: .45px; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 24px color-mix(in srgb, var(--hub-accent) 18%, transparent); transition: transform .16s, filter .16s; }
    .hub-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
    .hub-primary:focus-visible, .hub-watch:focus-visible { outline: 2px solid white; outline-offset: 3px; }
    .hub-primary span { font-size: 17px; font-weight: 400; }
    .hub-secondary-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px; padding:0 28px 16px; }
    .hub-secondary-actions button { min-height:34px; padding:0 11px; border:1px solid #2b3745; background:#111923; color:#8392a4; font:800 9px var(--font-body); letter-spacing:.45px; text-transform:uppercase; cursor:pointer; }
    .hub-secondary-actions button:hover:not(:disabled) { border-color:var(--hub-accent); color:#e4ebf2; }
    .hub-secondary-actions button:disabled { opacity:.3; cursor:not-allowed; }
    /* The season hub's own spoiler-free switch. It sits beside the primary
       action because that is the pair of decisions being made at that moment:
       play the next one, and whether this screen is allowed to tell you what
       happened. The config checkbox still exists and stays in sync. */
    .hub-headline-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
    .hub-sf { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 13px 0 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; background: rgba(255,255,255,.02); color: #8997a8; font: 600 10px var(--font-body); letter-spacing: .4px; text-transform: uppercase; cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
    .hub-sf:hover { border-color: rgba(255,255,255,.22); color: #c8d2de; }
    .hub-sf-track { position: relative; flex: none; width: 30px; height: 17px; border-radius: 99px; background: rgba(255,255,255,.13); transition: background .18s; }
    .hub-sf-knob { position: absolute; top: 2.5px; left: 2.5px; width: 12px; height: 12px; border-radius: 50%; background: #7d8898; transition: transform .18s, background .18s; }
    .hub-sf-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
    .hub-sf-label small { font-size: 9px; font-weight: 500; letter-spacing: .2px; text-transform: none; color: #6f7b8b; }
    .hub-sf.is-on { border-color: color-mix(in srgb, var(--hub-accent) 55%, transparent); background: color-mix(in srgb, var(--hub-accent) 9%, transparent); color: #e6edf3; }
    .hub-sf.is-on .hub-sf-track { background: color-mix(in srgb, var(--hub-accent) 62%, transparent); }
    .hub-sf.is-on .hub-sf-knob { transform: translateX(13px); background: #f2f5f8; }
    .hub-sf.is-on .hub-sf-label small { color: color-mix(in srgb, var(--hub-accent) 78%, #fff); }
    @media (prefers-reduced-motion: reduce) { .hub-sf, .hub-sf-track, .hub-sf-knob { transition: none; } }
    .hub-headline { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 28px 20px; }
    .hub-headline h1 { margin: 5px 0 4px; color: #f2f5f8; font-family: var(--font-display); font-size: clamp(27px, 3.4vw, 42px); font-weight: 500; line-height: 1; }
    .hub-headline p { margin: 0; color: #8997a8; font-size: 12px; }
    .hub-state-badge { display: inline-flex; margin-top: 8px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--hub-accent) 38%, #334155); color: #aebbc9; background: color-mix(in srgb, var(--hub-accent) 5%, #111923); font-size: 8px; font-weight: 800; letter-spacing: .75px; text-transform: uppercase; }
    .hub-progress { height: 3px; background: #202936; }
    .hub-progress span { display: block; height: 100%; background: var(--hub-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--hub-accent) 50%, transparent); transition: width .4s ease; }
    .hub-progress-hidden span { opacity: .22; background: repeating-linear-gradient(90deg, #526173 0 8px, transparent 8px 14px); box-shadow: none; }
    .hub-last-night { display: grid; grid-template-columns: auto auto minmax(150px,1fr) auto auto; align-items: center; gap: 14px; margin: 18px 24px 0; padding: 13px 15px; border: 1px solid #2b3542; border-left: 3px solid #e05252; background: rgba(5,9,14,.48); }
    .hub-last-label { color: #e66b6b; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
    .hub-last-person { display: flex; gap: 5px; }
    .hub-last-copy { display: flex; flex-direction: column; min-width: 0; }
    .hub-last-copy strong { color: #e6edf3; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hub-last-copy span { color: #718094; font-size: 10px; margin-top: 3px; }
    .hub-last-votes { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
    .hub-last-votes span { padding: 3px 6px; border: 1px solid #2b3542; border-radius: 4px; color: #8696aa; font-size: 9px; }
    .hub-last-votes b { color: #e8edf3; }
    .hub-last-votes em { color: #778697; font-size: 10px; }
    .hub-watch { border: 1px solid #3a4656; border-radius: 6px; background: #18212c; color: #dce4ec; padding: 7px 10px; font: 800 9px var(--font-body); letter-spacing: .7px; text-transform: uppercase; cursor: pointer; }
    .hub-watch:hover { border-color: var(--hub-accent); color: var(--hub-accent); }
    .hub-premiere-note { margin: 18px 24px 0; padding: 14px 16px; display: flex; gap: 14px; align-items: baseline; border-left: 3px solid var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 6%, #0b1118); }
    .hub-premiere-note strong { color: #e7edf4; font-size: 12px; white-space: nowrap; }
    .hub-premiere-note span { color: #7e8c9d; font-size: 11px; line-height: 1.5; }
    .hub-aftermath { margin: 20px 24px 0; border: 1px solid #2b3542; background: #0c1219; }
    .hub-aftermath-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 15px 17px; border-bottom: 1px solid #27313d; background: #111923; }
    .hub-aftermath-head > div:first-child { display: flex; flex-direction: column; gap: 3px; }
    .hub-aftermath-head span { color: #627286; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
    .hub-aftermath-head strong { color: #e4eaf0; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
    .hub-vote-shape { max-width: 52%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
    .hub-vote-shape small { color: #617185; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
    .hub-vote-shape b { color: #cbd5df; font: 700 9px var(--font-mono); text-align: right; }
    .hub-aftermath-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hub-aftermath-card { min-height: 104px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 9px; padding: 14px 16px; border-right: 1px solid #25303c; border-bottom: 1px solid #25303c; }
    .hub-aftermath-card:nth-child(even) { border-right: 0; }
    .hub-aftermath-index { color: #4f6073; font: 700 8px var(--font-mono); padding-top: 2px; }
    .hub-aftermath-card label { display: block; margin-bottom: 7px; color: var(--hub-accent); font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
    .hub-aftermath-card p { margin: 0; max-width: 70ch; color: #aebac7; font-size: 10px; line-height: 1.55; }
    .hub-aftermath-card small { display: block; margin-top: 7px; color: #65768a; font-size: 8px; line-height: 1.45; }
    .hub-aftermath-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
    .hub-aftermath-card li { position: relative; padding-left: 10px; color: #92a0b0; font-size: 9px; line-height: 1.5; }
    .hub-aftermath-card li::before { content: ''; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; background: #58697c; }
    .hub-aftermath-card li.advantage::before { background: #d4aa4e; }
    .hub-aftermath-card li.fallout::before { background: #d05c65; }
    .hub-aftermath-card li.lesson::before { background: #5ba98e; }
    .hub-aftermath footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; }
    .hub-aftermath footer span { color: #516174; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
    .hub-aftermath footer button { border: 0; background: transparent; color: #91a1b3; font-size: 9px; font-weight: 700; cursor: pointer; }
    .hub-aftermath footer button:hover { color: var(--hub-accent); }
    .hub-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,31%); border-top: 1px solid #252e3a; margin-top: 20px; }
    .hub-main-column, .hub-briefing { padding: 20px 24px 24px; }
    .hub-briefing { border-left: 1px solid #252e3a; background: rgba(5,9,14,.28); }
    .hub-section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
    .hub-section-title span { color: #dce4ec; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
    .hub-section-title small { color: #596a7e; font-size: 9px; }
    .hub-tribes { display: flex; flex-direction: column; gap: 17px; }
    .hub-tribe header { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
    .hub-tribe-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
    .hub-tribe header strong { color: #b9c4d0; font-size: 10px; letter-spacing: .5px; }
    .hub-tribe header small { margin-left: auto; color: #566679; font-size: 9px; }
    .hub-cast-row { display: flex; flex-wrap: wrap; gap: 9px; }
    .hub-player { width: 48px; min-width: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
    .hub-player-face { position: relative; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 2px solid #354152; border-radius: 50%; background: #1a2430; color: #8090a3; font-size: 13px; font-weight: 800; }
    .hub-player-face img { width: 100%; height: 100%; object-fit: cover; }
    .hub-player-face > span { display: none; position: absolute; inset: 0; place-items: center; }
    .hub-player-name { width: 100%; color: #8e9cad; font-size: 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hub-player.eliminated .hub-player-face { border-color: #7e3e44; filter: grayscale(.8); }
    .hub-player.eliminated .hub-player-name { color: #b7656b; }
    .hub-no-boot { color: #78889a; font-size: 10px; }
    .hub-spoiler-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 2px dashed #526173; border-radius: 50%; color: #7d8da0; font-size: 17px; font-weight: 800; }
    .hub-spoiler-lock { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 15px; border: 1px dashed #334052; background: rgba(5,9,14,.28); }
    .hub-spoiler-lock > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1b2633; color: #718298; font-size: 13px; }
    .hub-spoiler-lock div { display: flex; flex-direction: column; gap: 3px; }
    .hub-spoiler-lock strong { color: #b9c4d0; font-size: 11px; }
    .hub-spoiler-lock small { color: #68788b; font-size: 9px; line-height: 1.5; }
    .hub-next-card { padding: 12px 13px; border: 1px solid #2b3542; background: #101720; }
    .hub-next-card label { display: block; margin-bottom: 4px; color: var(--hub-accent); font-size: 8px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }
    .hub-next-card strong { color: #dfe6ed; font-size: 11px; line-height: 1.4; text-transform: capitalize; }
    .hub-story-list { margin-top: 13px; display: flex; flex-direction: column; }
    .hub-story-list > div { display: grid; grid-template-columns: 25px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid #242d38; }
    .hub-story-list b { color: color-mix(in srgb, var(--hub-accent) 70%, #657487); font: 700 9px var(--font-mono); }
    .hub-story-list span { color: #8493a5; font-size: 10px; line-height: 1.5; }

    @media (max-width: 900px) {
      #tab-run { flex-direction: column; overflow-y: auto; }
      #tab-run .run-sidebar { width: 100%; flex: 0 0 auto; max-height: none; overflow: visible; padding: 10px 14px 0; border-right: 0; background: transparent; }
      .run-main { overflow: visible; padding: 14px; }
      #season-episode-rail { top: 0; margin: -14px -14px 0; padding: 0 14px; }
      .hub-grid { grid-template-columns: 1fr; }
      .hub-briefing { border-left: 0; border-top: 1px solid #252e3a; }
    }
    @media (max-width: 620px) {
      .hub-episode-rail { grid-template-columns: minmax(0,1fr) auto; min-height: 60px; gap: 8px; }
      .hub-rail-title { display: none; }
      .hub-rail-position { padding-left: 3px; }
      .hub-rail-episode { min-width: 52px; padding: 5px 6px; }
      .hub-headline { align-items: stretch; flex-direction: column; padding: 22px 20px 17px; }
      .hub-primary { width: 100%; }
      .hub-headline-right { flex-direction: column; align-items: stretch; width: 100%; }
      .hub-sf { justify-content: flex-start; }
      .hub-secondary-actions { padding:0 20px 14px; }
      .hub-secondary-actions button { min-height:40px; flex:1 1 auto; }
      .hub-last-night { grid-template-columns: auto auto 1fr auto; margin: 14px 16px 0; }
      .hub-last-votes { display: none; }
      .hub-grid { margin-top: 15px; }
      .hub-main-column, .hub-briefing { padding: 18px 16px; }
      .hub-welcome { min-height: 300px; padding: 36px 25px; }
      .hub-premiere-note { margin: 14px 16px 0; align-items: flex-start; flex-direction: column; gap: 4px; }
      .hub-aftermath { margin: 14px 16px 0; }
      .hub-aftermath-head { align-items: flex-start; flex-direction: column; gap: 9px; }
      .hub-vote-shape { max-width: 100%; align-items: flex-start; }
      .hub-vote-shape b { text-align: left; }
      .hub-aftermath-grid { grid-template-columns: 1fr; }
      .hub-aftermath-card { border-right: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hub-primary, .hub-progress span { transition: none; }
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ── TWIST SCHEDULER ── */
    .twist-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
    .twist-row:last-child { border-bottom: none; }
    .twist-ep-input { width: 52px; padding: 5px 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 12px; text-align: center; outline: none; }
    .twist-ep-input:focus { border-color: var(--accent); }
    .twist-type-select { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 5px 7px; color: var(--text); font-size: 12px; outline: none; }
    .twist-type-select:focus { border-color: var(--accent); }
    .twist-list-empty { text-align: center; padding: 18px; color: var(--muted); font-size: 12px; }

    /* ── RESULTS TAB ── */
    #tab-results { padding-right: 12px; background: var(--bg); }
    .results-main { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #526477 #10161e; }
    .results-main::-webkit-scrollbar { width: 11px; }
    .results-main::-webkit-scrollbar-track { background: #10161e; border-left: 1px solid #202b37; }
    .results-main::-webkit-scrollbar-thumb { min-height: 54px; border: 2px solid #10161e; border-radius: 7px; background: #526477; }
    .results-main::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    .results-winner-card { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04)); border: 1px solid var(--accent); border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; }
    .results-crown { font-size: 36px; }
    .results-winner-name { font-size: 24px; font-weight: 700; color: var(--accent); }
    .results-jury-tally { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .results-jury-chip { font-size: 12px; padding: 3px 10px; border-radius: 8px; font-weight: 600; background: var(--surface2); color: var(--text); }
    .placement-table { display: flex; flex-direction: column; gap: 4px; }
    .placement-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; }
    .placement-rank { width: 32px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; flex-shrink: 0; }
    .placement-name { flex: 1; font-size: 13px; font-weight: 600; }
    .placement-ep-label { font-size: 11px; color: var(--muted); flex-shrink: 0; }
    .placement-badge { font-size: 10px; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
    .jury-breakdown { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
    .jury-breakdown-header { background: var(--surface2); display: flex; gap: 12px; padding: 8px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
    .jury-breakdown-row { display: flex; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; }
    .jb-juror { flex: 1; }
    .jb-voted { font-weight: 600; color: var(--accent); }
    .results-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; text-align: center; color: var(--muted); gap: 12px; padding: 60px 40px; }
    .results-empty .empty-icon { font-size: 40px; }
    .results-empty p { font-size: 13px; max-width: 360px; line-height: 1.6; }

    /* ── LIVE SEASON OVERVIEW ── */
    .overview-shell { display: flex; flex-direction: column; gap: 18px; max-width: 1220px; width: 100%; margin: 0 auto; }
    .overview-hero { min-height: 158px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 30px; border: 1px solid #2b3542; border-left: 4px solid var(--accent); background: linear-gradient(135deg,#111923,#0c1218); }
    .overview-eyebrow { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
    .overview-hero h1 { margin: 6px 0 5px; color: #eef3f7; font-family: var(--font-display); font-size: clamp(32px,4vw,48px); font-weight: 500; line-height: 1; }
    .overview-hero p { margin: 0; color: #78889a; font-size: 11px; }
    .overview-truth-legend { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #293442; background: #0d131a; }
    .overview-truth-legend > div { padding: 11px 14px; border-right: 1px solid #293442; }
    .overview-truth-legend > div:last-child { border-right: 0; }
    .overview-truth-legend b { display: block; color: #cbd5df; font-size: 9px; letter-spacing: .9px; text-transform: uppercase; }
    .overview-truth-legend span { display: block; margin-top: 2px; color: #5e6f82; font-size: 9px; }
    .overview-section { border: 1px solid #293442; background: #0d131a; }
    .overview-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 17px; border-bottom: 1px solid #27313d; background: #111923; }
    .overview-section > header > div { display: flex; flex-direction: column; gap: 2px; }
    .overview-section > header span { color: #5e7084; font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
    .overview-section > header h2 { margin: 0; color: #e0e7ee; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
    .overview-section > header small { color: #65768a; font-size: 9px; }
    .overview-active-cast { display: flex; flex-wrap: wrap; gap: 13px; padding: 17px; }
    .overview-active-cast > div { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .overview-active-cast > div > span:last-child { width: 100%; overflow: hidden; color: #8998a9; font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .overview-face { position: relative; width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 2px solid #3a4859; border-radius: 50%; background: #1a2430; color: #8796a8; font-size: 11px; font-weight: 800; }
    .overview-face img { width: 100%; height: 100%; object-fit: cover; }
    .overview-face > span { display: none; position: absolute; inset: 0; place-items: center; }
    .overview-leaders { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #293442; background: #0c1219; }
    .overview-leaders article { min-height: 82px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 14px; border-right: 1px solid #293442; }
    .overview-leaders article:last-child { border-right: 0; }
    .overview-leaders label { grid-column: 1/-1; color: #637488; font-size: 8px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
    .overview-leaders strong, .overview-ranking li strong { display: block; color: #d7dfe7; font-size: 11px; }
    .overview-leaders article div span, .overview-ranking li div span { display: block; margin-top: 2px; color: #68798c; font-size: 8px; }
    .overview-columns { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr); gap: 18px; align-items: start; }
    .overview-disclaimer { margin: 0; padding: 10px 16px; border-bottom: 1px solid #222c37; color: #647589; font-size: 9px; line-height: 1.55; }
    .overview-ranking ol { list-style: none; margin: 0; padding: 0; }
    .overview-ranking li { display: grid; grid-template-columns: 22px auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid #222c37; }
    .overview-ranking li:last-child { border-bottom: 0; }
    .overview-ranking li > b { color: #53667a; font: 800 9px var(--font-mono); text-align: center; }
    .overview-ranking li .overview-face, .overview-timeline .overview-face, .overview-table .overview-face, .overview-alliance .overview-face { width: 28px; height: 28px; border-width: 1px; }
    .overview-ranking li em { color: #637387; font: 700 8px var(--font-mono); font-style: normal; }
    .overview-ranking li em.up { color: #58a889; }
    .overview-ranking li em.down { color: #c65a65; }
    .overview-alliance-list { display: flex; flex-direction: column; }
    .overview-alliance { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 11px 14px; border-bottom: 1px solid #222c37; }
    .overview-alliance:last-child { border-bottom: 0; }
    .overview-alliance > div:first-child { display: flex; flex-direction: column; gap: 2px; }
    .overview-alliance strong { color: #ccd6df; font-size: 10px; }
    .overview-alliance small { color: #5d6e82; font-size: 8px; }
    .overview-alliance > span { color: #67a78f; font-size: 8px; font-weight: 800; text-transform: uppercase; }
    .overview-alliance.inactive { opacity: .52; }
    .overview-alliance.inactive > span { color: #a85c64; }
    .overview-alliance-faces { grid-column: 1/-1; display: flex; padding-left: 5px; }
    .overview-alliance-faces .overview-face { margin-left: -5px; box-shadow: 0 0 0 2px #0d131a; }
    .overview-none { padding: 20px; color: #657589; font-size: 10px; text-align: center; }
    .overview-history-grid { grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); }
    .overview-tribe-history { display: flex; flex-direction: column; }
    .overview-tribe-era { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 13px 15px; border-bottom: 1px solid #222c37; }
    .overview-tribe-era:last-child { border-bottom: 0; }
    .overview-tribe-era > b { padding-top: 3px; color: var(--accent); font: 800 8px var(--font-mono); }
    .overview-tribe-era > div { display: flex; flex-wrap: wrap; gap: 10px; }
    .overview-tribe-era section { min-width: 150px; flex: 1 1 180px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px 8px; padding: 9px 10px; border: 1px solid #273442; background: #101720; }
    .overview-tribe-era section strong { color: #cad5df; font-size: 10px; }
    .overview-tribe-era section > span { display: flex; padding-left: 4px; }
    .overview-tribe-era section .overview-face { width: 25px; height: 25px; margin-left: -4px; border-width: 1px; box-shadow: 0 0 0 2px #101720; }
    .overview-tribe-era section small { grid-column: 1/-1; overflow: hidden; color: #5e6f82; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .overview-status-list { display: flex; flex-direction: column; }
    .overview-status-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #222c37; }
    .overview-status-row:last-child { border-bottom: 0; }
    .overview-status-row .overview-face { width: 30px; height: 30px; border-width: 1px; }
    .overview-status-row strong, .overview-relationship-row strong { display: block; color: #cbd5df; font-size: 10px; }
    .overview-status-row span, .overview-relationship-row span { display: block; margin-top: 2px; color: #627387; font-size: 8px; line-height: 1.4; }
    .overview-status-row em { min-width: 25px; padding: 3px 5px; border: 1px solid #314152; color: #8697a8; font: 800 8px var(--font-mono); font-style: normal; text-align: center; }
    .overview-movement-grid { grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); }
    .overview-thread-list { list-style: none; margin: 0; padding: 0; }
    .overview-thread-list li { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 10px; padding: 12px 15px; border-bottom: 1px solid #222c37; color: #9ba9b7; font-size: 9px; line-height: 1.55; }
    .overview-thread-list li:last-child { border-bottom: 0; }
    .overview-thread-list li > b { color: #53677c; font: 800 8px var(--font-mono); }
    .overview-relationship-list { display: flex; flex-direction: column; }
    .overview-relationship-row { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #222c37; }
    .overview-relationship-row:last-child { border-bottom: 0; }
    .overview-pair { display: flex; padding-left: 7px; }
    .overview-pair .overview-face { width: 29px; height: 29px; margin-left: -7px; border-width: 1px; box-shadow: 0 0 0 2px #0d131a; }
    .overview-relationship-row em { color: #66788c; font: 800 8px var(--font-mono); font-style: normal; white-space: nowrap; }
    .overview-relationship-row.gain em { color: #58a889; }
    .overview-relationship-row.loss em { color: #c65a65; }
    /* Overview readability: reserve micro type for metadata, not content. */
    .overview-eyebrow { font-size: 10px; }
    .overview-hero p { font-size: 13px; line-height: 1.5; }
    .overview-truth-legend b { font-size: 10px; }
    .overview-truth-legend span { margin-top: 4px; font-size: 11px; line-height: 1.45; }
    .overview-section > header span { font-size: 9px; }
    .overview-section > header h2 { font-size: 21px; }
    .overview-section > header small { font-size: 11px; }
    .overview-active-cast > div > span:last-child { font-size: 10px; }
    .overview-leaders label { font-size: 10px; }
    .overview-leaders strong, .overview-ranking li strong { font-size: 13px; }
    .overview-leaders article div span, .overview-ranking li div span { margin-top: 3px; font-size: 11px; line-height: 1.4; }
    .overview-disclaimer { font-size: 11px; line-height: 1.6; }
    .overview-ranking li > b, .overview-ranking li em { font-size: 10px; }
    .overview-alliance strong { font-size: 12px; }
    .overview-alliance small { font-size: 10px; line-height: 1.45; }
    .overview-alliance > span { font-size: 10px; }
    .overview-none { font-size: 11px; line-height: 1.5; }
    .overview-tribe-era > b { font-size: 10px; }
    .overview-tribe-era section strong { font-size: 12px; }
    .overview-tribe-era section small { font-size: 10px; }
    .overview-status-row strong, .overview-relationship-row strong { font-size: 12px; }
    .overview-status-row span, .overview-relationship-row span { font-size: 11px; line-height: 1.5; }
    .overview-status-row em, .overview-relationship-row em { font-size: 10px; }
    .overview-thread-list li { font-size: 12px; line-height: 1.6; }
    .overview-thread-list li > b { font-size: 10px; }
    .overview-timeline button > b { font-size: 10px; }
    .overview-timeline button > strong { font-size: 12px; }
    .overview-timeline button > small { font-size: 10px; line-height: 1.45; }
    .overview-table-head { font-size: 10px; }
    .overview-table-row { font-size: 11px; }
    .overview-table-row b { font-size: 12px; }
    .overview-table-row i { font-size: 10px; }
    .overview-timeline { display: flex; gap: 8px; padding: 15px; overflow-x: auto; }
    .overview-timeline button { min-width: 126px; min-height: 116px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px; border: 1px solid #2b3745; background: #101720; color: inherit; cursor: pointer; text-align: left; }
    .overview-timeline button:hover { border-color: var(--accent); }
    .overview-timeline button > b { color: var(--accent); font: 800 8px var(--font-mono); }
    .overview-timeline button > strong { max-width: 104px; overflow: hidden; color: #ccd6df; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .overview-timeline button > small { color: #5e6f82; font-size: 8px; line-height: 1.35; }
    .overview-timeline-faces { display: flex; padding-left: 4px; min-height: 28px; }
    .overview-timeline-faces .overview-face { margin-left: -4px; box-shadow: 0 0 0 2px #101720; }
    .overview-timeline-faces i { color: #556679; font-style: normal; }
    .overview-table { overflow-x: auto; }
    .overview-table-head, .overview-table-row { min-width: 670px; display: grid; grid-template-columns: minmax(190px,1.7fr) repeat(5,minmax(70px,.65fr)); align-items: center; }
    .overview-table-head { padding: 8px 13px; border-bottom: 1px solid #27313d; color: #5c6d80; font-size: 8px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
    .overview-table-row { padding: 7px 13px; border-bottom: 1px solid #222c37; color: #8998a9; font-size: 9px; }
    .overview-table-row:last-child { border-bottom: 0; }
    .overview-table-row > span:first-child { display: flex; align-items: center; gap: 8px; }
    .overview-table-row b { color: #cbd5df; font-size: 10px; }
    .overview-table-row i { margin-left: auto; color: #5d6e82; font-size: 8px; font-style: normal; }
    .overview-table-row.eliminated { opacity: .55; }
    .overview-spoiler { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; border: 1px dashed #334052; background: #0d131a; text-align: center; }
    .overview-spoiler > span { display: grid; place-items: center; width: 52px; height: 52px; border: 2px dashed #526173; border-radius: 50%; color: #7d8da0; font-size: 20px; font-weight: 800; }
    .overview-spoiler h2 { margin: 4px 0 0; color: #dbe3eb; font-family: var(--font-display); font-weight: 500; }
    .overview-spoiler p { max-width: 520px; margin: 0 0 8px; color: #718196; font-size: 11px; line-height: 1.6; }
    @media (max-width: 900px) {
      .overview-columns, .overview-history-grid, .overview-movement-grid { grid-template-columns: 1fr; }
      .overview-leaders { grid-template-columns: repeat(2,1fr); }
      .overview-leaders article:nth-child(2) { border-right: 0; }
      .overview-leaders article:nth-child(-n+2) { border-bottom: 1px solid #293442; }
    }
    @media (max-width: 620px) {
      .overview-hero { align-items: stretch; flex-direction: column; min-height: 0; padding: 22px 18px; }
      .overview-truth-legend { grid-template-columns: 1fr; }
      .overview-truth-legend > div { border-right: 0; border-bottom: 1px solid #293442; }
      .overview-truth-legend > div:last-child { border-bottom: 0; }
      .overview-leaders { grid-template-columns: 1fr; }
      .overview-leaders article { border-right: 0; border-bottom: 1px solid #293442; }
      .overview-leaders article:nth-child(-n+2) { border-bottom: 1px solid #293442; }
    }

    /* ── COMPLETED-SEASON RETROSPECTIVE ── */
    .retro-shell { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1220px; margin: 0 auto; }
    .retro-hero { position: relative; min-height: 210px; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: end; gap: 20px; overflow: hidden; padding: 30px; border: 1px solid #4a4025; border-bottom: 4px solid #d7ad45; background: linear-gradient(120deg,#181711 0%,#121821 56%,#0b1117 100%); }
    .retro-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(105deg,transparent 0 78px,rgba(215,173,69,.035) 79px 80px); }
    .retro-crown { position: relative; z-index: 1; color: #d7ad45; font-size: 44px; line-height: 1; }
    .overview-face.retro-winner-face { position: relative; z-index: 1; width: 92px; height: 92px; border: 4px solid #d7ad45; box-shadow: 0 0 0 7px rgba(215,173,69,.09); }
    .retro-hero > div:nth-of-type(2) { position: relative; z-index: 1; }
    .retro-hero span { color: #c8a953; font-size: 10px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; }
    .retro-hero h1 { margin: 6px 0 5px; color: #f4ead0; font-family: var(--font-display); font-size: clamp(40px,5vw,66px); font-weight: 500; line-height: .95; }
    .retro-hero p { margin: 0; color: #a49c87; font-size: 13px; line-height: 1.5; }
    .retro-hero .hub-primary { position: relative; z-index: 1; }
    .retro-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px; border: 1px solid #2c3642; background: #0d131a; }
    .retro-actions button, .retro-next button { min-height: 40px; padding: 0 15px; border: 1px solid #354252; background: #131b24; color: #aebac6; font-size: 11px; font-weight: 800; cursor: pointer; }
    .retro-actions button:hover, .retro-next button:hover { border-color: #d7ad45; color: #f0d990; }
    .retro-actions button.done { border-color: #3d755f; color: #74b99d; }
    .retro-finalists { border: 1px solid #3e3827; background: #0e1319; }
    .retro-finalists > header { padding: 20px 22px; border-bottom: 1px solid #34301f; background: #151711; }
    .retro-finalists > header span { color: #c8a953; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
    .retro-finalists > header h2, .retro-next h2 { margin: 3px 0 2px; color: #e9e2d2; font-family: var(--font-display); font-size: 24px; font-weight: 500; }
    .retro-finalists > header p { margin: 0; color: #766f60; font-size: 11px; }
    .retro-finalist { display: grid; grid-template-columns: 60px auto minmax(0,1fr); align-items: start; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #252d35; }
    .retro-finalist:last-child { border-bottom: 0; }
    .retro-finalist.winner { background: linear-gradient(90deg,rgba(215,173,69,.09),transparent 65%); }
    .retro-finalist-rank { padding-top: 10px; color: #718092; font: 900 10px var(--font-mono); text-align: center; }
    .retro-finalist.winner .retro-finalist-rank { color: #d7ad45; }
    .overview-face.retro-big-face { width: 58px; height: 58px; border-width: 3px; }
    .retro-finalist.winner .retro-big-face { border-color: #d7ad45; }
    .retro-finalist-main h3 { margin: 0; color: #e3e9ef; font-family: var(--font-display); font-size: 23px; font-weight: 500; }
    .retro-finalist-main > p { margin: 2px 0 12px; color: #7e8d9d; font-size: 11px; }
    .retro-path-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .retro-path-columns section { padding: 10px 12px; border-left: 2px solid #3a5265; background: #101821; }
    .retro-path-columns section:last-child { border-left-color: #754951; }
    .retro-path-columns b { display: block; margin-bottom: 5px; color: #8fa2b4; font-size: 9px; letter-spacing: .7px; text-transform: uppercase; }
    .retro-path-columns span { display: block; margin-top: 3px; color: #aab5c0; font-size: 11px; line-height: 1.45; }
    .retro-two-column { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.8fr); gap: 20px; align-items: start; }
    .retro-jury, .retro-outcomes, .retro-relationships { display: flex; flex-direction: column; }
    .retro-jury-row { display: grid; grid-template-columns: auto minmax(80px,1fr) auto auto minmax(80px,1fr); align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #222c37; }
    .retro-jury-row:last-child { border-bottom: 0; }
    .retro-jury-row .overview-face { width: 31px; height: 31px; border-width: 1px; }
    .retro-jury-row strong, .retro-jury-row b { color: #cdd6df; font-size: 11px; }
    .retro-jury-row > span { color: #66778a; font-size: 10px; }
    .retro-jury-row small { grid-column: 2/-1; color: #718196; font-size: 10px; line-height: 1.45; }
    .retro-outcome-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 12px 14px; border-bottom: 1px solid #222c37; }
    .retro-outcome-row:last-child { border-bottom: 0; }
    .retro-outcome-row strong { display: block; color: #d2dbe3; font-size: 12px; }
    .retro-outcome-row span { display: block; margin-top: 2px; color: #66778a; font-size: 10px; }
    .retro-outcome-row > b { color: #b59a56; font-size: 10px; }
    .retro-outcome-row > div:last-child { grid-column: 1/-1; display: flex; padding-left: 5px; }
    .retro-outcome-row .overview-face { width: 27px; height: 27px; margin-left: -5px; border-width: 1px; box-shadow: 0 0 0 2px #0d131a; }
    .retro-relationships { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .retro-relationship { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px 15px; border-right: 1px solid #222c37; border-bottom: 1px solid #222c37; }
    .retro-relationship:nth-child(even) { border-right: 0; }
    .retro-relationship > div { display: flex; padding-left: 7px; }
    .retro-relationship .overview-face { width: 30px; height: 30px; margin-left: -7px; border-width: 1px; box-shadow: 0 0 0 2px #0d131a; }
    .retro-relationship strong { display: block; color: #ccd6df; font-size: 11px; }
    .retro-relationship span { display: block; margin-top: 2px; color: #68798b; font-size: 10px; line-height: 1.4; }
    .retro-relationship > b { color: #77889a; font: 900 10px var(--font-mono); }
    .retro-relationship.gain > b { color: #65ae90; }
    .retro-relationship.loss > b { color: #cb6670; }
    .retro-timeline { display: flex; gap: 8px; overflow-x: auto; padding: 15px; scrollbar-width: thin; }
    .retro-timeline button { min-width: 150px; min-height: 125px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px; border: 1px solid #2c3845; background: #101720; color: inherit; cursor: pointer; text-align: left; }
    .retro-timeline button:hover { border-color: #d7ad45; }
    .retro-timeline button > b { color: #d7ad45; font: 900 10px var(--font-mono); }
    .retro-timeline button > span { min-height: 29px; display: flex; padding-left: 5px; }
    .retro-timeline .overview-face { width: 29px; height: 29px; margin-left: -5px; border-width: 1px; box-shadow: 0 0 0 2px #101720; }
    .retro-timeline button > strong { max-width: 128px; overflow: hidden; color: #d1dae3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .retro-timeline button > small { color: #65778a; font-size: 10px; line-height: 1.4; }
    .retro-placement-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .retro-placement { display: grid; grid-template-columns: 45px auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 14px; border-right: 1px solid #222c37; border-bottom: 1px solid #222c37; }
    .retro-placement:nth-child(even) { border-right: 0; }
    .retro-placement > b { color: #607286; font: 900 10px var(--font-mono); text-align: center; }
    .retro-placement .overview-face { width: 31px; height: 31px; border-width: 1px; }
    .retro-placement > strong { color: #cbd5df; font-size: 11px; }
    .retro-placement > span { color: #65778a; font-size: 10px; }
    .retro-placement.winner { background: rgba(215,173,69,.07); }
    .retro-placement.winner > b, .retro-placement.winner > strong { color: #dec271; }
    .retro-next { display: grid; grid-template-columns: minmax(220px,1fr) repeat(4,auto); align-items: center; gap: 8px; padding: 20px; border: 1px solid #3c3828; border-top: 4px solid #d7ad45; background: #13150f; }
    .retro-next > div > span { color: #b69a55; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
    @media (max-width: 900px) {
      .retro-hero { grid-template-columns: auto auto minmax(0,1fr); }
      .retro-hero .hub-primary { grid-column: 1/-1; justify-self: start; }
      .retro-two-column { grid-template-columns: 1fr; }
      .retro-next { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .retro-next > div { grid-column: 1/-1; }
    }
    @media (max-width: 620px) {
      .retro-hero { grid-template-columns: auto minmax(0,1fr); padding: 22px 18px; }
      .retro-crown { display: none; }
      .overview-face.retro-winner-face { width: 72px; height: 72px; }
      .retro-finalist { grid-template-columns: auto minmax(0,1fr); }
      .retro-finalist-rank { display: none; }
      .retro-path-columns, .retro-relationships, .retro-placement-list { grid-template-columns: 1fr; }
      .retro-relationship, .retro-placement { border-right: 0; }
      .retro-jury-row { grid-template-columns: auto minmax(0,1fr) auto auto minmax(0,1fr); }
      .retro-next { grid-template-columns: 1fr; }
      .retro-actions button, .retro-next button { width: 100%; }
    }

    /* ══ VISUAL PLAYER — REBUILT ══ */
    @keyframes vpPageIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
    #visual-player { position:fixed; inset:0; z-index:200; background:#090d12; display:flex; font-family:var(--font-body); }
    /* `backwards`, not `both`.
       `both` keeps the last keyframe applied forever, and the last keyframe of
       vpPageIn is a transform. A transformed ancestor becomes the containing
       block for every position:fixed descendant, so pinned controls anchor to
       the page box instead of the viewport and scroll away with it — and it
       disturbs position:sticky in the same subtree. The final keyframe here is
       translateY(0)/opacity:1, which is identical to the element's resting
       style, so dropping the forwards fill changes nothing visually and gives
       fixed and sticky back to every screen in the player. */
    .rp-page { animation: vpPageIn 0.28s cubic-bezier(0.22,1,0.36,1) backwards; }
    /* ── Sidebar ── */
    .rp-sidebar { width:172px; flex-shrink:0; border-right:1px solid #1a2130; overflow-y:auto; padding:20px 0 40px; display:flex; flex-direction:column; background:#07090d; position:relative; z-index:5; }
    .rp-sidebar-ep { display:flex; justify-content:space-between; gap:8px; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#607083; padding:0 16px 16px; font-family:var(--font-body); }
    .rp-sidebar-ep b { color:#303b49; font-family:var(--font-mono); }
    .rp-sidebar-phase { display:flex; align-items:center; gap:7px; margin:11px 14px 4px; color:#8998aa; font-size:8px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; }
    .rp-sidebar-phase span { color:var(--accent); font-size:8px; }
    .rp-sidebar-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; border-left:3px solid transparent; padding:7px 14px 7px 16px; font-size:11px; font-weight:500; color:#607d8e; cursor:pointer; transition:color 0.12s, background 0.12s, border-color 0.12s; line-height:1.3; font-family:var(--font-body); }
    .rp-sidebar-dot { width:5px; height:5px; border-radius:50%; flex:0 0 auto; background:#202b38; }
    /* A screen's own icon, drawn rather than typed: it takes the item's
       colour, so it lights with the row it belongs to. */
    .rp-scr-icon { width:15px; height:15px; flex:0 0 auto; fill:none;
      stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
      stroke-linejoin:round; opacity:.7; transition:opacity .15s, transform .15s; }
    .rp-sidebar-item:hover .rp-scr-icon { opacity:1; }
    .rp-sidebar-item.active .rp-scr-icon { opacity:1; transform:scale(1.12); }
    .rp-sidebar-item.done .rp-scr-icon { opacity:.45; }
    .rp-sidebar-item:hover { color:#c9d1d9; background:rgba(255,255,255,0.03); }
    .rp-sidebar-item.active { color:#f0f6fc; border-left-color:var(--accent); background:rgba(16,185,129,0.06); font-weight:700; }
    .rp-sidebar-item.active .rp-sidebar-dot { background:var(--accent); box-shadow:0 0 0 3px rgba(16,185,129,.10); }
    .rp-sidebar-item.done { color:#232d3a; }
    /* ── Main content pane ── */
    .rp-main { flex:1; overflow-y:auto; display:flex; flex-direction:column; min-width:0; }
    /* ── Top nav bar ── */
    .rp-nav { position:sticky; top:0; z-index:50; background:rgba(7,9,13,0.96); backdrop-filter:blur(16px); border-bottom:1px solid #151e28; display:flex; align-items:center; padding:0 20px; height:46px; gap:10px; }
    .rp-nav-ep { color:#7c8999; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
    .rp-nav-phase { color:var(--accent); }
    .rp-nav-divider { margin:0 7px; color:#2c3744; }
    .vp-mode-switch { display:flex; align-items:center; padding:2px; border:1px solid #1c2733; background:#0b1016; }
    .vp-mode-btn { min-height:34px; padding:0 10px; border:0; background:transparent; color:#536274; font:800 8px var(--font-body); letter-spacing:.8px; text-transform:uppercase; cursor:pointer; }
    .vp-mode-btn:hover { color:#c9d1d9; }
    .vp-mode-btn.active { background:#1b2733; color:#f0f6fc; box-shadow:inset 0 -2px var(--accent); }
    .vp-mode-btn:focus-visible, .rp-sidebar-item:focus-visible, .rp-btn:focus-visible { outline:2px solid #58a6ff; outline-offset:2px; }
    .vp-stage-cue { max-width:760px; margin:22px auto -25px; padding:0 28px; display:flex; align-items:center; gap:8px; color:#344355; font:900 8px var(--font-body); letter-spacing:2.5px; text-transform:uppercase; }
    .vp-stage-cue span { color:var(--accent); }
    /* ── A BROADCAST SCREEN IS NOT AN ARTICLE ──
       The widths below are for a single column of reading text. A drag screen
       is a two-column layout — cards beside a live rail — so 760px left the
       rail 292 of it and squeezed the prose into a 178px ribbon inside a
       1440px window. Measured, not guessed: window 1440, page 760, card 358,
       paragraph 178. Higher specificity than the mode rules on purpose, since
       those are the thing being overridden. */
    #visual-player[data-view-mode] .rp-page[class*="dr-phase-"] { max-width:1180px; }
    #visual-player[data-view-mode="quick"] .rp-page { max-width:860px; }
    #visual-player[data-view-mode="deep"] .rp-page { max-width:980px; }
    /* ── Nav buttons ── */
    .rp-btn { padding:6px 14px; border-radius:5px; border:1px solid #1e2a38; background:rgba(255,255,255,0.04); color:#6e8096; font-size:11px; font-weight:700; cursor:pointer; transition:all 0.15s; letter-spacing:0.8px; text-transform:uppercase; font-family:var(--font-body); }
    .rp-btn:hover:not(:disabled) { border-color:#4a5f75; color:#e6edf3; background:rgba(255,255,255,0.07); }
    .rp-btn:disabled { opacity:0.2; cursor:not-allowed; }
    .rp-btn.close { border-color:rgba(218,54,51,0.3); color:#f85149; }
    .rp-btn.close:hover { background:rgba(218,54,51,0.08); border-color:rgba(218,54,51,0.6); }
    /* ── Page wrapper ── */
    .rp-page { max-width:760px; margin:0 auto; padding:40px 28px 100px; }
    /* ── VP Atmospheric Particles ── */
    #vp-particle-canvas { position:absolute; top:46px; left:172px; right:0; bottom:0; pointer-events:none; z-index:3; mix-blend-mode:screen; }
    @media (prefers-reduced-motion: reduce) { #vp-particle-canvas { display:none; } }
    @media (prefers-reduced-motion: reduce) {
      .rp-page, .tv-tally-row, .tv-vote-card, .rp-twist-title { animation:none !important; transition:none !important; }
    }
    @media (max-width:760px) {
      #visual-player { flex-direction:column; }
      .rp-sidebar { width:100%; height:auto; min-height:52px; padding:0 10px; border-right:0; border-bottom:1px solid #1a2130; flex-direction:row; align-items:center; overflow-x:auto; overflow-y:hidden; }
      .rp-sidebar-ep { position:sticky; left:0; z-index:2; min-width:max-content; padding:0 12px; background:#07090d; }
      .rp-sidebar-phase { min-width:max-content; margin:0 6px 0 12px; }
      .rp-sidebar-item { width:auto; min-width:max-content; padding:12px 9px; border-left:0; border-bottom:2px solid transparent; }
      .rp-sidebar-item.active { border-left-color:transparent; border-bottom-color:var(--accent); }
      .rp-nav { padding:0 8px; gap:5px; height:auto; min-height:48px; flex-wrap:wrap; }
      .rp-nav-ep { order:5; width:100%; padding:4px 4px 7px; }
      .vp-mode-switch { margin-left:auto; }
      .vp-mode-btn { min-height:40px; padding:0 8px; }
      #vp-particle-canvas { left:0; top:100px; }
      .vp-stage-cue { margin-top:16px; padding:0 18px; }
      .rp-page { padding:32px 18px 90px; }
    }
    /* ── Section header ── */
    .rp-eyebrow { font-size:10px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase; color:#4e6478; margin-bottom:10px; font-family:var(--font-body); }
    .rp-title { font-size:40px; font-weight:400; color:#e8f0f8; font-family:var(--font-display); letter-spacing:2px; line-height:1.05; margin-bottom:8px; }
    .rp-subtitle { font-size:13px; color:#4e6478; margin-bottom:32px; }
    /* ── Tribe header ── */
    .rp-tribe { margin-bottom:40px; }
    .rp-tribe-head { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid currentColor; display:flex; align-items:baseline; gap:10px; font-family:var(--font-body); }
    .rp-tribe-count { font-size:10px; font-weight:500; opacity:0.4; letter-spacing:0; text-transform:none; margin-left:auto; }
    /* ── Portrait grid ── */
    .rp-portrait-row { display:flex; flex-wrap:wrap; gap:14px; }
    .rp-portrait { text-align:center; width:72px; flex-shrink:0; }
    .rp-portrait.lg { width:90px; }
    .rp-portrait.xl { width:120px; }
    .rp-portrait-img { width:72px; height:72px; border-radius:8px; background:#161b22; border:2px solid #21262d; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#30363d; margin:0 auto; }
    .rp-portrait.lg  .rp-portrait-img { width:90px;  height:90px;  font-size:28px; }
    .rp-portrait.xl  .rp-portrait-img { width:120px; height:120px; font-size:36px; }
    .rp-portrait.pb-xs { width:36px; }
    .rp-portrait.pb-sm { width:48px; }
    .rp-portrait.pb-xs .rp-portrait-img { width:36px;  height:36px;  border-radius:5px; font-size:12px; border-width:1px; }
    .rp-portrait.pb-sm .rp-portrait-img { width:48px;  height:48px;  border-radius:6px; font-size:16px; }
    .rp-portrait.pb-xs .rp-portrait-name { font-size:8px; margin-top:3px; }
    .rp-portrait.pb-sm .rp-portrait-name { font-size:9px; margin-top:4px; }
    .rp-portrait-img img { width:100%; height:100%; object-fit:cover; border-radius:6px; }
    .rp-portrait.immune .rp-portrait-img { border-color:#3fb950; }
    .rp-portrait.sitd   .rp-portrait-img { border-color:#d29922; }
    .rp-portrait.elim   .rp-portrait-img { border-color:#da3633; filter:grayscale(0.4); }
    .rp-portrait-name { font-size:10px; font-weight:700; color:#8b949e; margin-top:7px; line-height:1.2; }
    .rp-portrait-badge { font-size:9px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:#484f58; margin-top:2px; }
    .rp-portrait.immune .rp-portrait-badge { color:#3fb950; }
    .rp-portrait.sitd   .rp-portrait-badge { color:#d29922; }
    /* ── Relationship pair ── */
    .rp-rel { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid #161b22; }
    .rp-rel:last-child { border-bottom:none; }
    .rp-rel-duo { display:flex; flex-shrink:0; }
    .rp-rel-duo .rp-portrait-img { margin-left:0; }
    .rp-rel-duo .rp-portrait-img:last-child { margin-left:-14px; border-color:#0d1117; }
    .rp-rel-body { flex:1; }
    .rp-rel-text { font-size:13px; color:#6e7681; line-height:1.65; }
    .rp-rel-delta { display:inline-block; font-size:10px; font-weight:800; padding:2px 8px; border-radius:4px; margin-top:6px; }
    .rp-rel-delta.pos { background:rgba(63,185,80,0.1);  color:#3fb950; }
    .rp-rel-delta.neg { background:rgba(218,54,51,0.08); color:#f85149; }
    /* ── Challenge result ── */
    .rp-chal-result { display:inline-block; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-top:12px; padding:7px 14px; border-radius:6px; }
    /* ── Challenge type badge ── */
    .rp-chal-type { display:inline-block; font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:4px; margin-bottom:18px; }
    .rp-chal-type.physical  { background:rgba(239,68,68,0.12);   color:#f87171; }
    .rp-chal-type.endurance { background:rgba(245,158,11,0.12);  color:#fbbf24; }
    .rp-chal-type.balance   { background:rgba(14,165,233,0.12);  color:#38bdf8; }
    .rp-chal-type.puzzle    { background:rgba(139,92,246,0.12);  color:#a78bfa; }
    .rp-chal-type.social    { background:rgba(236,72,153,0.12);  color:#f472b6; }
    .rp-chal-type.mixed     { background:rgba(16,185,129,0.12);  color:#34d399; }
    /* ── Challenge tribe block ── */
    .rp-chal-tribe { margin-bottom:28px; border-left:3px solid transparent; padding-left:14px; }
    .rp-chal-tribe.chal-win  { border-left-color:#3fb950; }
    .rp-chal-tribe.chal-lose { border-left-color:#f85149; opacity:0.75; }
    .rp-chal-result.win  { background:rgba(63,185,80,0.08);  color:#3fb950; }
    .rp-chal-result.lose { background:rgba(218,54,51,0.07);  color:#f85149; }
    .rp-chal-result.safe { background:rgba(56,139,253,0.07); color:#388bfd; }
    /* ── Tribal note ── */
    .rp-note { background:#161b22; border:1px solid #21262d; border-radius:8px; padding:12px 18px; font-size:13px; color:#484f58; font-style:italic; margin-bottom:20px; }
    /* ── Twist screen (BrantSteele-style centered narrative) ── */
    .rp-twist-page { text-align:center; }
    .rp-twist-title { font-size:28px; font-weight:400; letter-spacing:5px; text-transform:uppercase; color:#d4a82a; font-family:var(--font-display); margin-bottom:36px; text-shadow:0 0 20px #f0c040,0 0 8px rgba(240,192,64,0.5); animation:scrollDrop 0.4s var(--ease-broadcast) both; }
    .rp-scene { margin-bottom:28px; }
    .rp-scene-text { font-size:14px; color:#8b949e; line-height:1.7; max-width:580px; margin:0 auto 16px; }
    .rp-scene-text.outcome { color:#c9d1d9; font-weight:600; }
    .rp-scene-badge { display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:5px 12px; border-radius:5px; margin-top:6px; }
    .rp-scene-badge.win  { background:rgba(63,185,80,0.12);  color:#3fb950; }
    .rp-scene-badge.bad  { background:rgba(218,54,51,0.10);  color:#f85149; }
    .rp-twist-divider { border:none; border-top:1px solid #21262d; margin:32px auto; width:60%; }
    /* ── Camp Life per-tribe screen ── */
    .rp-camp-toggle-section { margin-bottom:28px; }
    .rp-camp-toggle-btn { width:100%; background:none; border:none; border-bottom:2px solid; padding:8px 0; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; cursor:pointer; font-family:var(--font-body); display:flex; justify-content:space-between; align-items:center; transition:opacity 0.15s; }
    .rp-camp-toggle-btn:hover { opacity:0.75; }
    .rp-camp-toggle-body { padding:12px 0 4px; }
    .rp-brant-entry { text-align:center; padding:16px 0 10px; }
    .rp-brant-entry + .rp-brant-entry { border-top:1px solid #111820; }
    .rp-brant-portraits { display:flex; justify-content:center; gap:10px; margin-bottom:14px; }
    .rp-brant-text { font-size:14px; color:#7a8ea0; line-height:1.78; max-width:520px; margin:0 auto; padding:0 8px; }
    .rp-brant-badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:3px 9px; border-radius:3px; margin-top:8px; font-family:var(--font-body); }
    .rp-brant-badge.gold { background:rgba(227,179,65,0.10); color:#d4a82a; border:1px solid rgba(227,179,65,0.2); }
    .rp-brant-badge.green { background:rgba(63,185,80,0.10); color:#3fb950; border:1px solid rgba(63,185,80,0.2); }
    .rp-brant-badge.red { background:rgba(248,81,73,0.08); color:#f85149; border:1px solid rgba(248,81,73,0.2); }
    .rp-scene .rp-portrait-row { justify-content:center; }
    /* tribe block inside twist screen */
    .rp-twist-tribe { margin:0 auto 20px; max-width:580px; }
    .rp-twist-tribe-head { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid currentColor; }
    /* ── Vote moment ── */
    .rp-vote-moment { display:flex; align-items:flex-start; gap:20px; padding:22px 0; border-bottom:1px solid #0f161e; }
    .rp-vote-moment:last-of-type { border-bottom:none; }
    .rp-vote-name { font-size:14px; font-weight:700; color:#c9d1d9; margin-bottom:5px; font-family:var(--font-body); }
    .rp-vote-target { color:#f85149; }
    .rp-vote-text { font-size:13px; color:#5a6e80; line-height:1.65; }
    /* ── Tally ── */
    .rp-tally { background:#0c1218; border:1px solid #151e28; border-radius:12px; overflow:hidden; margin:28px 0; }
    .rp-tally-row { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid #0a0f15; }
    .rp-tally-row:last-child { border-bottom:none; }
    .rp-tally-row.elim { background:rgba(218,54,51,0.05); }
    .rp-tally-name { flex:1; font-size:14px; font-weight:600; color:#c9d1d9; font-family:var(--font-body); }
    .rp-tally-bar-bg { width:80px; height:3px; background:#1a2430; border-radius:2px; overflow:hidden; flex-shrink:0; }
    .rp-tally-bar { height:100%; border-radius:2px; }
    .rp-tally-num { font-size:26px; font-weight:400; min-width:28px; text-align:right; color:#2a3a4a; font-family:var(--font-display); letter-spacing:1px; }
    .rp-tally-row.elim .rp-tally-num { color:#f85149; }
    /* ── Elimination spotlight ── */
    .rp-elim { text-align:center; padding:56px 28px 52px; background:radial-gradient(ellipse at 50% 0%,rgba(218,54,51,0.10) 0%,rgba(218,54,51,0.03) 50%,transparent 75%); border:1px solid rgba(218,54,51,0.15); border-radius:18px; margin-top:32px; position:relative; overflow:hidden; }
    .rp-elim::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(218,54,51,0.04) 0%,transparent 70%); pointer-events:none; }
    .rp-elim-eyebrow { font-size:10px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:#c0392b; margin-bottom:24px; font-family:var(--font-body); }
    .rp-elim-name { font-size:52px; font-weight:400; color:#f0f6fc; font-family:var(--font-display); margin:20px 0 6px; letter-spacing:3px; line-height:1; }
    .rp-elim-arch { font-size:10px; color:#4e6478; text-transform:uppercase; letter-spacing:2.5px; margin-bottom:20px; font-family:var(--font-body); }
    .rp-elim-quote { font-size:14px; color:#5a6e80; font-style:italic; line-height:1.75; max-width:440px; margin:0 auto 20px; }
    .rp-elim-place { font-size:10px; font-weight:600; letter-spacing:3px; color:#263040; text-transform:uppercase; font-family:var(--font-body); }
    /* ── Cold Open ── */
    .rp-co-eyebrow { font-size:10px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:#4e6478; margin-bottom:20px; font-family:var(--font-body); }
    .rp-co-epnum { font-size:80px; font-weight:400; color:#e8f0f8; font-family:var(--font-display); letter-spacing:3px; line-height:0.9; margin-bottom:14px; }
    .rp-co-phase { font-size:11px; color:#4e6478; letter-spacing:2px; text-transform:uppercase; font-family:var(--font-body); }
    .rp-co-divider { height:1px; background:linear-gradient(90deg,transparent,#1e2d3d 30%,#1e2d3d 70%,transparent); margin:36px 0 32px; }
    .rp-co-elim-head { font-size:10px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase; color:#2a3a4a; margin-bottom:20px; font-family:var(--font-body); }
    /* ── Button in run panel ── */
    .vp-play-btn { background:rgba(56,139,253,0.09); color:#58a6ff; border:1px solid rgba(56,139,253,0.25); border-radius:6px; padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; letter-spacing:0.5px; transition:all 0.15s; }
    .vp-play-btn:hover { background:rgba(56,139,253,0.18); border-color:rgba(56,139,253,0.45); }
    /* ── Voting Plans screen ── */
    .rp-vp-subtitle { font-size:13px; color:#484f58; font-style:italic; margin-bottom:24px; text-align:center; }
    .rp-vp-immunity-row { display:flex; align-items:center; gap:12px; background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:10px 16px; margin-bottom:20px; }
    .rp-vp-immunity-label { font-size:12px; color:#388bfd; font-weight:700; }
    .rp-vp-section-label { font-size:11px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#484f58; margin:24px 0 12px; border-bottom:1px solid #21262d; padding-bottom:8px; font-family:var(--font-body); }
    .rp-vp-plans-row { display:flex; flex-direction:column; gap:12px; }
    .rp-vp-plan { background:#0d1117; border:1px solid #21262d; border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
    .rp-vp-plan-header { display:flex; align-items:center; gap:8px; }
    .rp-vp-plan-label { font-size:16px; font-weight:800; color:#e6edf3; flex:1; font-family:var(--font-display); letter-spacing:0.5px; }
    .rp-vp-plan-votes { font-size:11px; font-weight:700; color:#484f58; }
    .rp-vp-conf { font-size:12px; font-weight:800; }
    .rp-vp-spear-row { display:flex; align-items:center; gap:10px; }
    .rp-vp-spear-info { flex:1; min-width:0; }
    .rp-vp-spear-name { font-size:14px; font-weight:800; color:#e6edf3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rp-vp-spear-role { font-size:10px; color:#484f58; font-weight:700; letter-spacing:0.5px; margin-top:2px; }
    .rp-vp-arrow { text-align:center; font-size:16px; color:#30363d; line-height:1; }
    .rp-vp-target-row { display:flex; align-items:center; gap:10px; background:#161b22; border-radius:8px; padding:8px 10px; }
    .rp-vp-target-info { flex:1; min-width:0; }
    .rp-vp-target-name { font-size:15px; font-weight:800; color:#e6edf3; }
    .rp-vp-target-cat { font-size:10px; font-weight:700; letter-spacing:0.5px; margin-top:1px; }
    .rp-vp-target-votes { font-size:10px; color:#484f58; margin-top:3px; }
    .rp-vp-plan-reason { font-size:11px; color:#484f58; font-style:italic; line-height:1.5; border-top:1px solid #21262d; padding-top:8px; margin-top:2px; }
    .rp-vp-supporting { border-top:1px solid #21262d; padding-top:8px; }
    .rp-vp-supporting-label { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#30363d; display:block; margin-bottom:6px; }
    .rp-vp-blindside { background:rgba(227,179,65,0.06); border:1px solid rgba(227,179,65,0.18); border-radius:8px; padding:12px 14px; margin-top:8px; display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
    .rp-vp-blindside-badge { font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#e3b341; white-space:nowrap; padding-top:1px; }
    .rp-vp-blindside-text { font-size:12px; color:#8b949e; line-height:1.5; flex:1; }
    .rp-vp-swings { display:flex; flex-direction:column; gap:8px; }
    .rp-vp-swing { background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:14px 16px; }
    .rp-vp-swing .rp-portrait-name { display:none; }
    .rp-vp-swing-info { flex:1; }
    .rp-vp-swing-name { font-size:13px; font-weight:800; color:#c9d1d9; margin-bottom:4px; }
    .rp-vp-conflicted { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#e3b341; margin-left:8px; vertical-align:middle; }
    .rp-vp-swing-detail { font-size:12px; color:#484f58; line-height:1.5; }
    .rp-vp-idol-warn { background:rgba(227,179,65,0.06); border:1px solid rgba(227,179,65,0.18); border-radius:8px; padding:12px 14px; margin-top:4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:#8b949e; }
    .rp-vp-idol-badge { font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#e3b341; white-space:nowrap; }
    .rp-vp-confs { display:flex; flex-direction:column; gap:10px; }
    .rp-vp-conf-entry { display:flex; align-items:flex-start; gap:12px; }
    .rp-vp-conf-body { flex:1; }
    .rp-vp-conf-name { font-size:12px; font-weight:800; color:#c9d1d9; margin-bottom:4px; }
    .rp-vp-conf-role { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#388bfd; margin-left:6px; vertical-align:middle; }
    .rp-vp-conf-role.swing { color:#e3b341; }
    .rp-vp-conf-text { font-size:13px; color:#6e7681; font-style:italic; line-height:1.65; }
    .rp-vp-plan-type { font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; border-radius:4px; padding:2px 6px; flex-shrink:0; }
    .rp-vp-members-label { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#30363d; border-top:1px solid #21262d; padding-top:8px; margin-top:2px; }
    .rp-vp-section-mini { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#484f58; border-top:1px solid #21262d; padding-top:8px; margin-top:6px; }
    .rp-vp-members { display:flex; flex-wrap:wrap; gap:8px; }
    .rp-vp-member-row { display:flex; align-items:center; gap:6px; padding:4px 10px;background:rgba(255,255,255,0.02);border-radius:6px; }
    .rp-vp-member-info { flex:1; min-width:0; }
    .rp-vp-member-name { font-size:13px; font-weight:700; color:#e6edf3; }
    .rp-vp-spear-badge { font-size:9px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:#e3b341; margin-left:5px; vertical-align:middle; }
    .rp-vp-member-reason { font-size:11px; color:#484f58; font-style:italic; line-height:1.4; margin-top:1px; white-space:normal; word-break:break-word; }
    .rp-vp-plan .rp-portrait-name { display:none; }
    .rp-vp-final-row { display:flex; gap:12px; }
    .rp-vp-final-card { flex:1; background:#161b22; border:1px solid #30363d; border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
    .rp-vp-final-label { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
    .rp-vp-final-name { font-size:18px; font-weight:900; color:#e6edf3; letter-spacing:-0.3px; }
    .rp-vp-final-cat { font-size:10px; font-weight:700; letter-spacing:0.5px; }
    .rp-vp-final-votes { font-size:11px; color:#484f58; }
    .rp-vp-reputations { margin:-6px 0 14px; padding:10px 12px; background:rgba(168,85,247,.04); border:1px solid rgba(168,85,247,.16); border-radius:8px; }
    .rp-vp-rep-note { font-size:10px; color:#8b949e; line-height:1.45; margin-bottom:5px; }
    .rp-vp-stability-card { display:flex; gap:9px; align-items:flex-start; padding:10px; background:rgba(139,148,158,0.04); border:1px solid rgba(139,148,158,0.12); border-radius:8px; min-width:0; }
    .rp-vp-stability-copy { min-width:0; flex:1; }
    .rp-vp-stability-summary { font-size:11px; color:#c9d1d9; line-height:1.45; margin-top:3px; }
    .rp-vp-details { margin-top:6px; border-top:1px solid rgba(139,148,158,0.12); padding-top:5px; }
    .rp-vp-details summary { min-height:28px; display:flex; align-items:center; gap:8px; color:#6e7681; font-size:10px; font-weight:700; cursor:pointer; list-style:none; user-select:none; }
    .rp-vp-details summary::-webkit-details-marker { display:none; }
    .rp-vp-details summary::before { content:'›'; color:#8b949e; font-size:15px; line-height:1; transition:transform .15s ease; }
    .rp-vp-details[open] summary::before { transform:rotate(90deg); }
    .rp-vp-details summary:focus-visible { outline:2px solid #388bfd; outline-offset:3px; border-radius:3px; }
    .rp-vp-detail-body { padding:3px 0 5px 15px; color:#8b949e; font-size:10px; line-height:1.55; }
    .rp-vp-detail-note { color:#6e7681; font-style:italic; margin-top:3px; }
    .rp-vp-rep-detail { margin-top:2px; }
    .rp-vp-rep-detail summary { justify-content:flex-start; color:#c9d1d9; }
    .rp-vp-rep-detail summary span { color:#c084fc; font-weight:600; margin-left:auto; text-align:right; }
    @media (max-width:600px) {
      .rp-vp-stability-card { padding:9px 8px; }
      .rp-vp-stability-summary { font-size:10.5px; }
      .rp-vp-details summary { min-height:36px; }
      .rp-vp-rep-detail summary { align-items:flex-start; padding:5px 0; }
    }
    /* ── Tribal Council screen ── */
    .tc-danger-board { display:flex; gap:10px; margin-bottom:24px; }
    .tc-danger-card { flex:1; border:1px solid #151e28; border-radius:14px; padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; background:#080d12; }
    .tc-danger-rank { font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; font-family:var(--font-body); }
    .tc-danger-name { font-size:16px; font-weight:400; color:#e8f0f8; margin-top:4px; font-family:var(--font-display); letter-spacing:1.5px; }
    .tc-danger-reason { font-size:11px; color:#4a6070; font-style:italic; line-height:1.45; margin-top:4px; }
    .tc-danger-votes { font-size:11px; font-weight:600; margin-top:3px; font-family:var(--font-body); }
    .tc-adv-teaser { background:#080d12; border:1px solid rgba(227,179,65,0.18); border-radius:10px; padding:14px 16px; margin-bottom:20px; display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
    .tc-adv-badge { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#d4a82a; white-space:nowrap; padding-top:2px; flex-shrink:0; font-family:var(--font-body); }
    .tc-adv-text { font-size:13px; color:#7a8ea0; flex:1; line-height:1.58; }
    .tc-qa-section { display:flex; flex-direction:column; gap:20px; margin-bottom:20px; }
    .tc-qa-exchange { border-left:2px solid #151e28; padding-left:16px; }
    .tc-qa-q { font-size:12px; color:#4e6478; font-style:italic; line-height:1.6; margin-bottom:8px; }
    .tc-qa-player { display:flex; align-items:flex-start; gap:10px; margin-bottom:6px; }
    .tc-qa-answer { font-size:14px; color:#c0ccd8; font-style:italic; line-height:1.7; flex:1; }
    .tc-qa-consequence { font-size:11px; padding:6px 10px; border-radius:6px; font-style:normal; margin-top:6px; line-height:1.5; }
    .tc-continue { text-align:center; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#1a2530; margin-top:28px; padding-top:22px; border-top:1px solid #111820; font-family:var(--font-body); }
    /* ── Interactive Votes screen ── */
    .tv-wrap { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; }
    .tv-reveal-panel { flex:3; display:flex; flex-direction:column; gap:8px; min-width:0; }
    .tv-tally-panel { flex:2; background:#0a0e14; border:1px solid #1a1f28; border-radius:14px; padding:16px 18px; position:sticky; top:8px; }
    .tv-tally-header { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#e3b341; margin-bottom:14px; }
    .tv-tally-row { padding:8px 10px; border-bottom:1px solid #111820; border-radius:8px; transition:background 0.3s,box-shadow 0.3s,opacity 0.4s,transform 0.4s; transform:translateX(-20px); opacity:0; }
    .tv-tally-row.tv-tally-visible { transform:translateX(0); opacity:1; }
    .tv-tally-row:last-child { border-bottom:none; }
    .tv-tally-row-top { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
    .tv-tally-pname { font-size:13px; font-weight:700; color:#8b949e; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tv-tally-row-top .rp-portrait { width:28px; height:28px; flex-shrink:0; }
    .tv-tally-row-top .rp-portrait .rp-portrait-img,
    .tv-tally-row-top .rp-portrait .rp-portrait-img img { width:28px; height:28px; border-radius:4px; }
    .tv-tally-row-top .rp-portrait .rp-portrait-name { display:none; }
    .tv-tally-row-bar { display:flex; align-items:center; gap:8px; }
    .tv-tally-bar-bg { flex:1; height:12px; background:#161b22; border-radius:6px; overflow:hidden; flex-shrink:0; }
    .tv-tally-bar { height:100%; border-radius:6px; background:#30363d; transition:width 0.4s cubic-bezier(0.34,1.56,0.64,1); }
    .tv-tally-row.tv-tally-leading .tv-tally-bar { background:#da3633; }
    .tv-tally-row.tv-tally-leading { background:rgba(218,54,51,0.06); box-shadow:0 0 0 1px rgba(218,54,51,0.2); }
    .tv-tally-count { font-size:22px; font-weight:800; min-width:24px; text-align:right; color:#30363d; transition:color 0.3s,transform 0.15s; }
    .tv-tally-row.tv-tally-leading .tv-tally-count { color:#f85149; }
    .tv-tally-count.tv-count-bounce { animation:tvCountBounce 0.3s ease-out; }
    @keyframes tvCountBounce { 0% { transform:scale(1); } 40% { transform:scale(1.3); } 100% { transform:scale(1); } }
    .tv-tally-torch { width:12px; height:20px; position:relative; flex-shrink:0; }
    .tv-tally-torch-flame { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:#1a1f28; box-shadow:none; transition:width 0.4s,height 0.4s,background 0.4s,box-shadow 0.4s; }
    .tv-tally-torch-flame.tv-flame-low { width:8px; height:10px; background:#c45a1a; box-shadow:0 0 4px #c45a1a,0 0 8px rgba(232,135,58,0.4); animation:torchFlicker 3.5s ease-in-out infinite; }
    .tv-tally-torch-flame.tv-flame-high { width:10px; height:16px; background:#e8873a; box-shadow:0 0 6px #e8873a,0 0 12px rgba(240,192,64,0.5),0 0 20px rgba(196,90,26,0.3); animation:torchFlicker 2s ease-in-out infinite; }
    .tv-tally-torch-flame.tv-flame-max { width:12px; height:18px; background:#f0c040; box-shadow:0 0 8px #f0c040,0 0 16px rgba(232,135,58,0.6),0 0 24px rgba(240,192,64,0.4); animation:torchFlicker 1.2s ease-in-out infinite; }
    .tv-tally-torch-flame.tv-flame-out { width:6px; height:6px; background:#1a1f28; box-shadow:none; animation:none; transition:all 0.5s; }
    .tv-tally-row.tv-tally-tied { animation:tvTiedPulse 2s ease-in-out infinite; }
    @keyframes tvTiedPulse { 0%,100% { box-shadow:0 0 0 1px rgba(218,54,51,0.3); } 50% { box-shadow:0 0 0 1px rgba(210,153,34,0.4); } }
    .tv-tally-tied-badge { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#d29922; text-align:center; padding:4px 0; }
    .tv-spotlight-dim { opacity:0.7; transition:opacity 0.2s; }
    .tv-spotlight-active { position:relative; z-index:2; border-color:rgba(200,220,255,0.3) !important; box-shadow:0 0 12px rgba(200,220,255,0.08); transition:border-color 0.2s,box-shadow 0.2s; }
    .tv-vote-fly { position:fixed; font-size:14px; font-weight:700; color:#f85149; opacity:0.6; pointer-events:none; z-index:100; filter:blur(0px); transition:none; }
    .tv-threshold-banner { background:rgba(248,81,73,0.08); border:1px solid rgba(248,81,73,0.25); border-radius:8px; padding:6px 14px; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#f85149; text-align:center; animation:tvBannerIn 0.3s ease-out; }
    @keyframes tvBannerIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
    .tv-majority-flash { position:fixed; inset:0; background:rgba(248,81,73,0.12); pointer-events:none; z-index:200; animation:tvFlashOut 0.15s ease-out forwards; }
    @keyframes tvFlashOut { to { opacity:0; } }
    .tv-tally-row.tv-tally-eliminated { opacity:0.3; filter:grayscale(0.8); transition:opacity 0.5s,filter 0.5s; }
    .tv-vote-card { background:#080c11; border:1px solid #111820; border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:12px; position:relative; opacity:0.5; transition:opacity 0.35s,border-color 0.35s; }
    .tv-vote-card.tv-revealed { opacity:1; border-color:#1a2430; }
    .tv-vote-card.tv-latest { border-color:rgba(56,139,253,0.35); background:rgba(56,139,253,0.04); }
    .tv-vote-card:not(.tv-revealed)::after { content:'?'; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-size:28px; color:#1a2430; letter-spacing:2px; }
    @keyframes tvFlip { 0% { transform:rotateY(0deg); } 50% { transform:rotateY(90deg); } 100% { transform:rotateY(0deg); } }
    .tv-vote-card.tv-flipping { animation:tvFlip 0.5s var(--ease-broadcast); }
    .tv-vote-voter-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
    .tv-vote-voter { font-size:11px; font-weight:700; color:#6e8096; text-align:center; white-space:nowrap; font-family:var(--font-body); }
    .tv-vote-arrow { color:#1e2d3d; font-size:16px; flex-shrink:0; font-weight:300; opacity:0; transition:opacity 0.25s 0.1s; }
    .tv-vote-right { flex:1; min-width:0; opacity:0; transition:opacity 0.25s 0.1s; }
    .tv-vote-card.tv-revealed .tv-vote-arrow,
    .tv-vote-card.tv-revealed .tv-vote-right { opacity:1; }
    .tv-vote-target { font-size:17px; font-weight:400; color:#f85149; font-family:var(--font-display); letter-spacing:1.5px; }
    .tv-vote-reason { font-size:11px; color:#384a5c; font-style:italic; line-height:1.45; margin-top:4px; white-space:normal; word-break:break-word; }
    .tv-reveal-btn { display:block; width:100%; margin:10px 0 18px; padding:14px; background:rgba(56,139,253,0.06); border:1px solid rgba(56,139,253,0.18); border-radius:10px; font-size:12px; font-weight:700; color:#388bfd; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; text-align:center; transition:all 0.15s; font-family:var(--font-body); }
    .tv-reveal-btn:hover { background:rgba(56,139,253,0.12); border-color:rgba(56,139,253,0.38); }
    .tv-final-tally { background:#0d1117; border:1px solid #21262d; border-radius:12px; padding:16px; margin-bottom:20px; }
    .tv-ft-header { font-size:9px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:#30363d; margin-bottom:14px; }
    .tv-ft-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #161b22; }
    .tv-ft-row:last-child { border-bottom:none; }
    .tv-ft-row.tv-ft-elim { background:rgba(218,54,51,0.03); border-radius:6px; padding:9px 8px; }
    .tv-ft-name { flex:1; font-size:14px; font-weight:700; color:#c9d1d9; }
    .tv-ft-bar-bg { width:100px; height:5px; background:#21262d; border-radius:3px; overflow:hidden; flex-shrink:0; }
    .tv-ft-bar { height:100%; border-radius:3px; }
    .tv-ft-num { font-size:22px; font-weight:800; min-width:28px; text-align:right; color:#484f58; }
    .tv-ft-row.tv-ft-elim .tv-ft-num { color:#f85149; }
    .tv-tribal-events { background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:14px 16px; margin-bottom:20px; }
    .tv-tribal-events-header { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#30363d; margin-bottom:10px; }
    .tv-tribal-event-item { font-size:13px; color:#6e7681; line-height:1.6; padding:5px 0; border-bottom:1px solid #161b22; }
    .tv-tribal-event-item:last-child { border-bottom:none; }
    .tv-advantage-play { display:flex; align-items:flex-start; gap:12px; background:#0d1117; border:1px solid #21262d; border-radius:12px; padding:14px 16px; margin-bottom:14px; }
    .tv-advantage-play-left { flex-shrink:0; }
    .tv-advantage-play-body { flex:1; min-width:0; }
    .tv-advantage-play-badge { display:inline-block; font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; border:1px solid; border-radius:4px; padding:2px 8px; margin-bottom:6px; }
    .tv-advantage-play-title { font-size:14px; font-weight:700; color:#c9d1d9; margin-bottom:4px; }
    .tv-advantage-play-desc { font-size:12px; color:#6e7681; line-height:1.5; }
    .tv-advantage-play-result { font-size:11px; font-weight:700; color:#484f58; margin-top:5px; letter-spacing:0.5px; }
    .tc-crashout { background:rgba(218,54,51,0.05); border:1px solid rgba(218,54,51,0.18); border-radius:12px; padding:20px 18px; margin-top:20px; }
    .tc-crashout-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
    .tc-crashout-badge { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#f85149; background:rgba(218,54,51,0.1); border-radius:4px; padding:3px 8px; flex-shrink:0; }
    .tc-crashout-title { font-size:13px; font-weight:800; color:#e6edf3; }
    .tc-crashout-reveal { display:flex; flex-direction:column; gap:10px; }
    .tc-crashout-item { background:#0d1117; border-radius:8px; padding:12px 14px; border-left:2px solid rgba(218,54,51,0.3); }
    .tc-crashout-quote { font-size:14px; color:#c9d1d9; font-style:italic; line-height:1.65; margin-bottom:6px; }
    .tc-crashout-consequence { font-size:11px; font-weight:700; color:#da3633; letter-spacing:0.5px; }

    /* ── SETUP REDESIGN ── */
    #tab-setup { flex-direction: column; }
    .setup-subnav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; gap: 0; flex-shrink: 0; }
    .setup-subnav-btn { padding: 10px 18px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .setup-subnav-btn:hover { color: var(--text); }
    .setup-subnav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
    .setup-panel { flex: 1; overflow: hidden; display: none; }
    .setup-panel.active-panel { display: flex; }
    .setup-two-col { display: flex; width: 100%; height: 100%; overflow: hidden; }
    .setup-col-left { width: 340px; min-width: 340px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
    .setup-col-right { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
    .setup-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #f59e0b; margin-top: 4px; }
    .setup-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .game-mode-seg { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
    .gm-btn { flex: 1; padding: 8px 0; border: none; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .gm-btn.active { background: var(--accent-dim); color: var(--accent); }
    .accordion { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
    .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 600; transition: background 0.15s; }
    .accordion-header:hover { background: rgba(255,255,255,0.03); }
    .accordion-chevron { font-size: 10px; color: var(--muted); transition: transform 0.2s; }
    .accordion-body { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
    .acc-check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text); }
    .acc-check-row input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
    .acc-desc { font-size: 11px; color: var(--muted); line-height: 1.55; }
    .slider-control { display: flex; flex-direction: column; gap: 6px; }
    .slider-control label { font-size: 12px; font-weight: 600; color: var(--text); }
    .setup-slider { width: 100%; -webkit-appearance: none; height: 4px; border-radius: 2px; background: var(--border); outline: none; cursor: pointer; accent-color: var(--accent); }
    .setup-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
    .slider-block { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
    .slider-block-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
    .slider-block-note { font-size: 10px; color: var(--muted); }
    .cast-size-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
    .cast-size-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
    .setup-rels-content { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; max-width: 800px; margin: 0 auto; width: 100%; }

    /* ── EPISODE FORMAT DESIGNER ── */
    .fd-layout { display: flex; width: 100%; height: 100%; overflow: hidden; }
    /* The designer stacks: show switch on top, then the timeline + catalogue. */
    #setup-panel-format.active-panel { flex-direction: column; }
    #setup-panel-format .fd-layout { flex: 1; min-height: 0; height: auto; }
    /* ── House Options ──
       These panels were a stack of full-size paragraphs under every control,
       which reads as a document rather than a form and so gets skipped. The
       explanation is demoted below the thing it explains: smaller, dimmer,
       tighter, and short enough to take in without deciding to read it. */
    /* Label and hint were both ~11px in --muted, so the hint under one control
       read as the label of the next one. Three clearly different levels now:
       a bright bold label, the control, then dim italic prose underneath it,
       with the gap between GROUPS bigger than the gap inside one. */
    #bb-options-body .form-label {
                      font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
                      color: var(--text); display: block; margin-bottom: 5px; }
    #bb-options-body .form-group { margin-bottom: 20px; }
    .hint-tight     { font-size: 10px; line-height: 1.5; margin-top: 5px;
                      font-style: italic; color: var(--muted); opacity: .62;
                      max-width: 34em; }
    /* ── The numbers ──
       Who holds a majority of tonight's votes. The most important fact in a
       house and no screen said it. */
    .bbn            { border:1px solid rgba(201,52,60,.28); border-radius:8px;
                      margin-bottom:16px; overflow:hidden;
                      background:linear-gradient(180deg, rgba(201,52,60,.08), transparent); }
    .bbn-h          { display:flex; align-items:center; gap:8px; padding:7px 11px;
                      border-bottom:1px solid rgba(201,52,60,.2);
                      font-family:ui-monospace,Consolas,monospace; font-size:9px;
                      letter-spacing:1.8px; color:#f85149; font-weight:800; }
    .bbn-maj        { margin-left:auto; letter-spacing:1px; color:#8b949e; font-weight:400; }
    .bbn-row        { display:flex; align-items:center; gap:9px; padding:6px 11px;
                      border-bottom:1px solid rgba(255,255,255,.04); }
    .bbn-row:last-child { border-bottom:0; }
    .bbn-row.is-control { background:linear-gradient(90deg, rgba(240,165,0,.14), transparent 70%); }
    .bbn-name       { font-size:11.5px; color:#d29922; min-width:104px; flex-shrink:0; }
    .bbn-faces      { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
    .bbn-count      { font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#c9d1d9; }
    .bbn-count i    { font-style:normal; font-size:9px; color:#6e7681; }
    .bbn-tag        { font-family:ui-monospace,Consolas,monospace; font-size:7.5px;
                      letter-spacing:1.2px; color:#f0a500; flex-shrink:0; }
    .bbn-none       { padding:8px 11px; font-size:11px; color:#6e7681; line-height:1.5; }
    /* How the plans changed — the house's version of the Total Drama panel. */
    .bbp            { border:1px solid rgba(99,102,241,.22); border-radius:8px;
                      background:rgba(99,102,241,.05); padding:10px 12px; margin-bottom:16px; }
    .bbp-h          { font-family:ui-monospace,Consolas,monospace; font-size:9px;
                      font-weight:800; letter-spacing:1.6px; color:#818cf8; margin-bottom:8px; }
    .bbp-bloc       { font-size:11.5px; color:#c9d1d9; line-height:1.5; padding:5px 0;
                      border-bottom:1px solid rgba(255,255,255,.05); }
    .bbp-row        { display:flex; align-items:center; gap:9px; padding:5px 0;
                      border-bottom:1px solid rgba(255,255,255,.04); }
    .bbp-row:last-child { border-bottom:0; }
    .bbp-face       { display:flex; flex-shrink:0; }
    .bbp-txt        { font-size:11.5px; color:#c9d1d9; line-height:1.45; }
    .bbp-row.is-bad   .bbp-txt strong:first-child { color:#f85149; }
    .bbp-row.is-good  .bbp-txt strong:first-child { color:#3fb950; }
    .bbp-row.is-bloc  .bbp-txt strong:first-child { color:#58a6ff; }
    .bbp-row.is-wagon .bbp-txt strong:first-child { color:#f0a500; }

    /* ── VP: the competition board ──
       The competition fires twice a week and was the thinnest screen in the
       player. Everything worth watching was already in the data and never
       drawn, so the board IS the screen: it fills from the bottom up as the
       reveal runs, and the bars make a walkover and a photo finish look
       different instead of reading as the same sentence. */
    .bbc-plate      { text-align:center; margin-bottom:14px; padding:10px 12px; border-radius:6px;
                      background:linear-gradient(180deg, color-mix(in srgb, var(--bbc-accent) 14%, transparent), transparent);
                      border-top:2px solid var(--bbc-accent); }
    .bbc-cat        { font-family:ui-monospace,Consolas,monospace; font-size:9px; letter-spacing:2px;
                      color:var(--bbc-accent); }
    .bbc-title      { font-family:var(--font-display); font-size:17px; letter-spacing:.5px;
                      color:#f0f6fc; margin-top:3px; }

    .bbc-board      { border:1px solid var(--border); border-radius:8px; overflow:hidden;
                      margin-bottom:18px; background:rgba(13,17,23,.55); }
    .bbc-head       { display:flex; gap:8px; padding:6px 11px;
                      border-bottom:1px solid var(--border); background:rgba(255,255,255,.02);
                      font-family:ui-monospace,Consolas,monospace; font-size:9px;
                      letter-spacing:1.4px; text-transform:uppercase; color:#6e7681; }
    .bbc-head-sp    { margin-left:auto; color:#f0a500; }

    .bbc-row        { display:grid; grid-template-columns:22px auto 1fr 3fr auto;
                      gap:9px; align-items:center; padding:5px 11px;
                      border-bottom:1px solid rgba(255,255,255,.04);
                      transition:opacity .25s ease, background .25s ease; }
    .bbc-row:last-child { border-bottom:0; }
    .bbc-row.is-hidden  { opacity:.16; }
    .bbc-row.is-win     { background:linear-gradient(90deg, rgba(240,165,0,.16), transparent 70%); }
    .bbc-pos        { font-family:ui-monospace,Consolas,monospace; font-size:11px; color:#6e7681;
                      text-align:right; }
    .bbc-row.is-win .bbc-pos { color:#f0a500; font-weight:800; }
    .bbc-face       { display:flex; flex-shrink:0; }
    .bbc-name       { font-size:12px; color:#c9d1d9; overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; }
    .bbc-row.is-win .bbc-name { color:#f0f6fc; font-weight:700; }
    .bbc-bar        { height:5px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
    .bbc-bar i      { display:block; height:100%; border-radius:3px; transition:width .35s ease; }
    .bbc-threw      { min-width:38px; text-align:right; font-family:ui-monospace,Consolas,monospace;
                      font-size:7.5px; letter-spacing:1px; color:#8b949e; }

    .bbc-sat        { display:flex; gap:8px; align-items:baseline; padding:7px 11px;
                      border-top:1px solid var(--border); background:rgba(255,255,255,.015);
                      font-size:10.5px; color:#6e7681; }
    .bbc-sat-k      { flex-shrink:0; font-family:ui-monospace,Consolas,monospace; font-size:8.5px;
                      letter-spacing:1.2px; text-transform:uppercase; color:#4d545c; }

    @media (prefers-reduced-motion: reduce) {
      .bbc-row, .bbc-bar i { transition:none; }
    }

    /* ── House season shape ──
       The chain a house season runs on. Same read as the Total Drama blueprint
       line: each link is a fact, and a link that cannot happen goes red with
       the reason on hover and spelled out underneath. */
    .bbst          { margin: 4px 0 14px; }
    .bbst-title    { font-size: 9px; font-weight: 800; letter-spacing: 1.4px;
                     text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
    .bbst-chain    { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .bbst-seg      { position: relative; padding: 4px 9px; border-radius: 4px;
                     font-size: 11px; line-height: 1.3; white-space: nowrap;
                     color: var(--text); background: rgba(99,102,241,.10);
                     border: 1px solid rgba(99,102,241,.28); }
    /* the arrow between links */
    .bbst-seg + .bbst-seg::before {
                     content: '→'; position: absolute; left: -13px; top: 50%;
                     transform: translateY(-50%); font-size: 10px;
                     color: var(--muted); opacity: .6; }
    .bbst-seg.bad  { color: #fca5a5; background: rgba(248,81,73,.12);
                     border-color: rgba(248,81,73,.45); }
    .bbst-why      { margin-top: 6px; font-size: 10.5px; line-height: 1.45;
                     color: #fca5a5; }

    /* A rule the format fixes, stated once — not offered as a choice. */
    .bbopt-fixed    { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
                      padding: 7px 10px; border-radius: 5px;
                      border-left: 2px solid var(--accent, #6366f1);
                      background: rgba(99,102,241,.08);
                      font-size: 11px; line-height: 1.45; color: var(--muted); }
    .bbopt-fixed-k  { flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
                      text-transform: uppercase; color: var(--accent, #6366f1); }

    .fd-format-toggle { display: flex; gap: 8px; padding: 10px 14px; flex-shrink: 0;
                        border-bottom: 1px solid var(--border); background: var(--surface); }
    .fd-show-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
                   padding: 7px 14px; border-radius: 6px; cursor: pointer; text-align: left;
                   border: 1px solid var(--border); background: var(--bg);
                   color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
    .fd-show-btn:hover  { border-color: var(--accent); color: var(--text); }
    .fd-show-btn.active { border-color: var(--accent); background: rgba(99,102,241,.14); color: var(--text); }
    .fd-show-name { font-size: 12.5px; font-weight: 800; letter-spacing: .3px; }
    .fd-show-sub  { font-size: 9.5px; letter-spacing: .4px; opacity: .75; }
    .fd-show-warn { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase;
                    color: #f0a500; margin-top: 2px; }
    .fd-timeline-panel { width: 220px; min-width: 220px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
    .fd-catalog-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .fd-timeline-header, .fd-catalog-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
    .fd-header-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); flex: 1; }
    .fd-selected-count { font-size: 11px; font-weight: 700; background: var(--accent-dim); color: var(--accent); padding: 2px 8px; border-radius: 10px; }
    .fd-timeline { flex: 1; overflow-y: auto; padding: 8px; }
    .fd-episode { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; margin-bottom: 4px; cursor: pointer; transition: all 0.15s; user-select: none; }
    .fd-episode:hover { border-color: #475569; }
    .fd-episode.selected { border-color: var(--accent); background: var(--accent-dim); }
    .fd-ep-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
    .fd-ep-num { font-size: 12px; font-weight: 700; }
    .fd-ep-phase { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(249,115,22,0.15); color: #fb923c; text-transform: uppercase; letter-spacing: 0.5px; }
    .fd-ep-phase.merge { background: rgba(16,185,129,0.15); color: var(--accent); }
    .fd-ep-info { font-size: 10px; color: var(--muted); }
    .fd-ep-twist { font-size: 10px; color: #a78bfa; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
    .fd-ep-twist-x { margin-left: auto; font-size: 10px; background: none; border: none; color: #475569; cursor: pointer; padding: 0 2px; line-height: 1; }
    .fd-ep-twist-x:hover { color: #ef4444; }
    .fd-search { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; color: var(--text); font-size: 12px; outline: none; }
    .fd-search:focus { border-color: var(--accent); }
    .fd-filters { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
    .fd-filter-btn { padding: 3px 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .fd-filter-btn:hover { border-color: #475569; color: var(--text); }
    .fd-filter-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
    .fd-twist-instructions { font-size: 11px; color: var(--muted); padding: 7px 14px; background: #0f172a; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .fd-catalog { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
    .twist-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; display: flex; gap: 10px; align-items: flex-start; transition: border-color 0.15s; }
    .twist-card:hover { border-color: #475569; }
    .twist-card-emoji { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
    .twist-card-body { flex: 1; min-width: 0; }
    .twist-card-namerow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
    .twist-card-name { font-size: 12px; font-weight: 700; color: var(--text); }
    .twist-phase { font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
    .twist-phase.pre { background: rgba(249,115,22,0.15); color: #fb923c; }
    .twist-phase.merge { background: rgba(16,185,129,0.15); color: #10b981; }
    .twist-phase.any { background: rgba(148,163,184,0.1); color: #94a3b8; }
    .twist-card-desc { font-size: 11px; color: var(--muted); line-height: 1.45; margin-bottom: 3px; }
    .twist-sim-tag { font-size: 10px; color: #6366f1; font-weight: 600; }
    .twist-add-btn { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: #10b981; width: 26px; height: 26px; border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-top: 1px; line-height: 1; }
    .twist-add-btn:hover { background: rgba(16,185,129,0.2); border-color: #10b981; }
    .twist-add-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .twist-card.assignable { cursor: pointer; }
    .twist-card.assignable:hover { border-color: var(--accent); background: var(--accent-dim); }
    /* The consequence of the jury slider, read back beside it. */
    .jury-note { color: var(--muted); font-weight: 400; font-size: 11px; }
    .jury-note.bad { color: #f85149; }
    .fd-ep-marker { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(148,163,184,0.1); color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
    .fd-ep-marker.merge { background: rgba(16,185,129,0.15); color: #10b981; }
    /* The house has no merge; the week the jury opens is its structural turn. */
    .fd-ep-marker.jury { background: rgba(168,85,247,0.16); color: #c084fc; }
    .fd-ep-marker.finale { background: rgba(245,158,11,0.15); color: #f59e0b; }
    .fd-episode.finale { border-color: rgba(245,158,11,0.3); }
    .fd-ep-twists { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
    .fd-ep-twist-tag { font-size: 10px; background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.25); border-radius: 4px; padding: 1px 5px; cursor: pointer; transition: all 0.1s; }
    .fd-ep-twist-tag:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }
    .twist-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
    .twist-card-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .twist-card.phase-blocked { opacity: 0.4; cursor: not-allowed; }
    .twist-card.phase-blocked:hover { border-color: var(--border); background: var(--surface); }
    .fd-ep-phase-label { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: var(--muted); margin-left: 3px; text-transform: uppercase; }
    .fd-episode.ri-ep { border-color: rgba(245,158,11,0.2); background: rgba(245,158,11,0.03); }
    @keyframes confetti-fall {
      0% { transform: translateY(-10px) rotate(0deg) scale(1); opacity: 1; }
      50% { opacity: 1; }
      100% { transform: translateY(200px) rotate(720deg) scale(0.5); opacity: 0; }
    }
    @keyframes confetti-burst {
      0% { transform: scale(0) rotate(0deg); opacity: 0; }
      20% { transform: scale(1.2) rotate(90deg); opacity: 1; }
      100% { transform: scale(0.6) translateY(180px) rotate(540deg); opacity: 0; }
    }
    .confetti-container { position: relative; pointer-events: none; }
    .confetti-piece {
      position: absolute; top: 0; width: 8px; height: 8px; border-radius: 2px;
      animation: confetti-burst ease-out forwards;
    }
    /* ── Aftermath Show Studio Theme ── */
    .tod-studio { background: linear-gradient(180deg, #1a1035 0%, #0c0a1a 40%, #0d0b1e 100%); }
    .aftermath-title { font-family: var(--font-display); color: #f59e0b; text-shadow: 0 0 20px rgba(99,102,241,0.6), 0 0 40px rgba(245,158,11,0.3); letter-spacing: 3px; }
    .aftermath-card { border: 1px solid rgba(245,158,11,0.2); background: rgba(99,102,241,0.04); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
    .aftermath-card-gold { border: 1px solid rgba(245,158,11,0.35); background: rgba(245,158,11,0.04); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
    .aftermath-filmstrip { border-left: 4px solid #f59e0b; border-right: 4px solid #f59e0b; background: rgba(0,0,0,0.3); padding: 12px 16px; border-radius: 6px; margin-bottom: 10px; }
    .aftermath-crowd-wild { color: #10b981; font-weight: 700; font-size: 12px; }
    .aftermath-crowd-warm { color: #8b949e; font-size: 12px; }
    .aftermath-crowd-boos { color: #ef4444; font-weight: 700; font-size: 12px; }
    .aftermath-anvil { color: #ef4444; font-size: 28px; font-weight: 800; letter-spacing: 3px; animation: dropIn 0.3s ease-out; }
    .aftermath-truth { color: #10b981; font-size: 20px; font-weight: 800; letter-spacing: 2px; }
    .aftermath-live { display: inline-block; background: #ef4444; color: white; font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 3px; letter-spacing: 1.5px; vertical-align: middle; }
    .aftermath-classified::after { content: 'CLASSIFIED'; position: absolute; top: 8px; right: 8px; background: rgba(239,68,68,0.9); color: white; padding: 2px 8px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: 2px; transform: rotate(5deg); }
    .aftermath-q { cursor: pointer; padding: 10px 14px; border: 1px solid rgba(245,158,11,0.15); border-radius: 8px; margin-bottom: 6px; transition: all 0.3s; }
    .aftermath-q:hover { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.03); }
    .aftermath-gallery { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: rgba(99,102,241,0.03); border: 1px solid rgba(99,102,241,0.1); border-radius: 8px; }
    .aftermath-reaction { font-size: 10px; color: #8b949e; font-style: italic; padding: 4px 8px; animation: fadeIn 0.4s; }
    .aftermath-award { border: 2px solid rgba(245,158,11,0.4); background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(99,102,241,0.04) 100%); border-radius: 12px; padding: 16px; margin-bottom: 12px; text-align: center; }
    @keyframes dropIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    @keyframes slideInLeft { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

    /* ── TV RATINGS ──
       The trajectory is an SVG line, not a row of divs: it is a curve with a
       shape, and the shape is why it is drawn week by week instead of
       printed as one number. Tier colours run cold-to-warm so a season's
       standing is legible before the label is read. */
    .overview-ratings header > div > span { color: var(--sg-strategy); }
    .ov-rt-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 10px; }
    .ov-rt-tier { flex: 1 1 220px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); }
    .ov-rt-tier label, .ov-rt-now label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #8b949e; }
    .ov-rt-tier strong { font-size: 26px; line-height: 1.05; letter-spacing: 0.02em; }
    .ov-rt-tier em { font-style: normal; font-size: 12px; color: #8b949e; font-variant-numeric: tabular-nums; }
    .ov-rt-tier.tier-dogwater { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.07); }
    .ov-rt-tier.tier-dogwater strong { color: #f87171; }
    .ov-rt-tier.tier-bad { border-color: rgba(249,115,22,0.4); background: rgba(249,115,22,0.06); }
    .ov-rt-tier.tier-bad strong { color: #fb923c; }
    .ov-rt-tier.tier-okay strong { color: #d4b483; }
    .ov-rt-tier.tier-average strong { color: #9aa4b2; }
    .ov-rt-tier.tier-good { border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.05); }
    .ov-rt-tier.tier-good strong { color: #7dd3fc; }
    .ov-rt-tier.tier-great { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.06); }
    .ov-rt-tier.tier-great strong { color: #6ee7b7; }
    .ov-rt-tier.tier-iconic { border-color: rgba(245,158,11,0.55); background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(99,102,241,0.06)); }
    .ov-rt-tier.tier-iconic strong { color: #fbbf24; text-shadow: 0 0 18px rgba(245,158,11,0.35); }
    .ov-rt-now { flex: 0 1 150px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); }
    .ov-rt-now strong { font-size: 22px; font-variant-numeric: tabular-nums; }
    .ov-rt-now span { font-size: 11px; color: #8b949e; font-variant-numeric: tabular-nums; }
    .ov-rt-now span.up { color: #6ee7b7; }
    .ov-rt-now span.down { color: #f87171; }
    .ov-rt-curve { display: block; width: 100%; height: auto; max-height: 150px; margin-bottom: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
    .ov-rt-band { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.55; }
    .ov-rt-twist { stroke: rgba(245,158,11,0.45); stroke-width: 1; stroke-dasharray: 2 4; }
    .ov-rt-area { fill: rgba(99,102,241,0.14); stroke: none; }
    .ov-rt-line { fill: none; stroke: #818cf8; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
    .ov-rt-dot { fill: #c7d2fe; stroke: #4c1d95; stroke-width: 1; }
    .ov-rt-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
    .ov-rt-demo { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
    .ov-rt-demo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .ov-rt-demo-top strong { font-size: 12px; }
    .ov-rt-demo-top em { font-style: normal; font-size: 15px; font-variant-numeric: tabular-nums; color: #c9d1d9; }
    /* The number is a LEVEL and stays neutral; only the CHANGE is coloured.
       Colouring the value by its delta printed a 92 in red because that
       audience had slipped a point, which reads as "92 is a bad score". */
    .ov-rt-demo-top em i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: #6e7681; font-variant-numeric: tabular-nums; }
    .ov-rt-demo-top em i.up { color: #6ee7b7; }
    .ov-rt-demo-top em i.down { color: #f87171; }
    .ov-rt-demo-bar { height: 4px; border-radius: 3px; background: rgba(139,148,158,0.18); overflow: hidden; }
    .ov-rt-demo-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #818cf8); }
    .ov-rt-demo-note { font-size: 10.5px; line-height: 1.35; color: #8b949e; font-style: italic; }
    .ov-rt-demo-note.good { color: #86c8a8; }
    .ov-rt-demo-note.bad { color: #d09090; }

    /* The episode-by-episode read. Folded away by default because it is long
       and dense on purpose — a whole season, every audience, every night. */
    .ov-rt-detail { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); }
    .ov-rt-detail > summary { cursor: pointer; padding: 8px 12px; font-size: 11px; letter-spacing: .06em; color: #8b949e; user-select: none; }
    .ov-rt-detail > summary:hover { color: #c9d1d9; }
    .ov-rt-detail[open] > summary { border-bottom: 1px solid var(--border); }
    .ov-rt-scroll { overflow-x: auto; }
    .ov-rt-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .ov-rt-table th, .ov-rt-table td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(139,148,158,.10); }
    .ov-rt-table thead th { position: sticky; top: 0; background: var(--surface2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6e7681; white-space: nowrap; }
    .ov-rt-table tbody th { white-space: nowrap; font-weight: 700; color: #c9d1d9; }
    .ov-rt-table tbody th b { font-variant-numeric: tabular-nums; }
    .ov-rt-tw { display: block; font-style: normal; font-size: 8px; letter-spacing: .1em; color: #fbbf24; }
    .ov-rt-overall b { font-size: 14px; font-variant-numeric: tabular-nums; color: #e6edf3; }
    .ov-rt-overall i, .ov-rt-cell i { display: block; font-style: normal; font-size: 9px; color: #6e7681; font-variant-numeric: tabular-nums; }
    .ov-rt-overall i.up, .ov-rt-cell.up i { color: #6ee7b7; }
    .ov-rt-overall i.down, .ov-rt-cell.down i { color: #f87171; }
    .ov-rt-cell { min-width: 150px; }
    .ov-rt-cell b { font-size: 12px; font-variant-numeric: tabular-nums; color: #c9d1d9; }
    .ov-rt-cell span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; color: #8b949e; font-style: italic; }
    @media(max-width:700px){ .ov-rt-cell { min-width: 120px; } }

    /* ── SEASON PULSE: one row per player, one chip per section ── */
    .rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .rank-row { display: grid; grid-template-columns: 26px auto 1fr auto; align-items: center; gap: 10px;
      padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
    .rank-pos { font-size: 13px; font-variant-numeric: tabular-nums; color: #8b949e; text-align: center; }
    .rank-main { min-width: 0; }
    .rank-main > strong { display: block; font-size: 12.5px; margin-bottom: 4px; }
    .rank-sections { display: flex; flex-wrap: wrap; gap: 4px; }
    .rank-sec { display: flex; align-items: baseline; gap: 5px; padding: 2px 7px; border-radius: 6px;
      background: rgba(139,148,158,.10); border: 1px solid rgba(139,148,158,.16); }
    .rank-sec i { font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #8b949e; }
    .rank-sec b { font-size: 11px; font-variant-numeric: tabular-nums; color: #c9d1d9; }
    .rank-sec em { font-style: normal; font-size: 10px; color: #6e7681; }
    .rank-sec.pos { background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.26); }
    .rank-sec.pos b { color: #a5b4fc; }
    .rank-sec.neg { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.22); }
    .rank-sec.neg b { color: #fca5a5; }
    .rank-score { text-align: right; }
    .rank-score b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; color: #e6edf3; }
    .rank-score em { font-style: normal; font-size: 10px; color: #6e7681; font-variant-numeric: tabular-nums; }
    .rank-score em.up { color: #6ee7b7; }
    .rank-score em.down { color: #f87171; }
    @media(max-width:640px){ .rank-row { grid-template-columns: 22px auto 1fr; } .rank-score { grid-column: 1 / -1; text-align: left; } }

    /* ── AUDIENCE PULSE (edit layer, roadmap #6) ── */
    .overview-audience header > div > span { color: var(--sg-strategy); }
    .overview-edit-list { display: flex; flex-direction: column; gap: 6px; }
    .overview-edit-row { display: grid; grid-template-columns: auto minmax(120px, 1.4fr) auto minmax(70px, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
    .overview-edit-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .overview-edit-info strong { font-size: 12px; }
    .overview-edit-arc { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .overview-edit-chip { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: transparent; white-space: nowrap; }
    .overview-edit-chip.edit-winner { color: var(--sg-safe); border-color: color-mix(in srgb, var(--sg-safe) 55%, transparent); background: color-mix(in srgb, var(--sg-safe) 12%, transparent); }
    .overview-edit-chip.edit-decoy { color: var(--accent-gold); border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent); background: color-mix(in srgb, var(--accent-gold) 12%, transparent); }
    .overview-edit-chip.edit-villain { color: var(--sg-danger); border-color: color-mix(in srgb, var(--sg-danger) 55%, transparent); background: color-mix(in srgb, var(--sg-danger) 12%, transparent); }
    .overview-edit-chip.edit-growth { color: var(--sg-trust); border-color: color-mix(in srgb, var(--sg-trust) 55%, transparent); background: color-mix(in srgb, var(--sg-trust) 12%, transparent); }
    .overview-edit-chip.edit-comic { color: var(--accent-fire); border-color: color-mix(in srgb, var(--accent-fire) 55%, transparent); background: color-mix(in srgb, var(--accent-fire) 12%, transparent); }
    .overview-edit-chip.edit-mastermind { color: var(--sg-strategy); border-color: color-mix(in srgb, var(--sg-strategy) 55%, transparent); background: color-mix(in srgb, var(--sg-strategy) 12%, transparent); }
    .overview-edit-chip.edit-romance { color: #f27daa; border-color: color-mix(in srgb, #f27daa 55%, transparent); background: color-mix(in srgb, #f27daa 12%, transparent); }
    .overview-edit-chip.edit-underdog { color: var(--accent-ice); border-color: color-mix(in srgb, var(--accent-ice) 55%, transparent); background: color-mix(in srgb, var(--accent-ice) 12%, transparent); }
    .overview-edit-chip.edit-invisible { color: var(--sg-ghost); border-style: dashed; }
    .overview-edit-share { height: 5px; border-radius: 3px; background: var(--bg); overflow: hidden; }
    .overview-edit-share-fill { height: 100%; border-radius: 3px; background: var(--sg-strategy); }
    .overview-edit-row > em { font-size: 10px; font-style: normal; color: var(--muted); white-space: nowrap; }
    .overview-edit-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
    .overview-edit-quote { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; background: var(--surface2); border: 1px dashed var(--border); border-radius: 10px; }
    .overview-edit-quote p { font-size: 12px; line-height: 1.55; font-style: italic; color: var(--text); margin: 0; }
    .overview-edit-quote cite { display: block; margin-top: 5px; font-size: 10px; font-style: normal; color: var(--muted); }
    .overview-edit-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 12px; }
    .overview-edit-award { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
    .overview-edit-award label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
    .overview-edit-award strong { font-size: 12px; }
    .hub-aftermath-card li.edit { color: var(--sg-strategy); }
    @media (max-width: 720px) { .overview-edit-row { grid-template-columns: auto 1fr auto; } .overview-edit-share, .overview-edit-row > em { display: none; } }

/* ── Portrait picker ───────────────────────────────────────────────────
   The old control was a checkbox and a hint line: tick Returning and you MIGHT
   get a second face. This shows every portrait registered for the season's
   show, plus the profile default, and lets the season pick one. */
.portrait-picker{display:flex;flex-wrap:wrap;gap:8px}
.portrait-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;cursor:pointer;font-size:10px;line-height:1.25;text-align:center;color:var(--muted)}
.portrait-opt input{position:absolute;opacity:0;width:0;height:0}
.portrait-opt-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--surface2);border:2px solid var(--border)}
.portrait-opt-thumb img{width:100%;height:100%;object-fit:cover}
/* Selection is a ring AND a check AND a weight change - never colour alone. */
.portrait-opt.is-selected .portrait-opt-thumb{border-color:#a78bfa;box-shadow:0 0 0 2px #a78bfa}
.portrait-opt.is-selected .portrait-opt-label{font-weight:700;color:var(--text)}
.portrait-opt-check{position:absolute;right:2px;bottom:2px;width:16px;height:16px;border-radius:50%;background:#a78bfa;color:#fff;font-size:11px;line-height:16px}
.portrait-opt input:focus-visible + .portrait-opt-thumb{outline:2px solid #a78bfa;outline-offset:2px}
.portrait-opt.is-missing{opacity:.45;cursor:not-allowed}
.portrait-opt.is-missing em{display:block;font-style:normal;color:#f87171}
.portrait-picker-note,.portrait-picker-empty{font-size:11px;color:var(--muted);margin-bottom:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){.portrait-opt,.portrait-opt-thumb{transition:none}}

/* A portrait held over from another show: shown so it can be changed, and
   named so it is obvious why it is there. */
.portrait-opt-off{display:block;font-style:normal;font-size:9px;letter-spacing:.3px;color:#e5843e}

/* ── Perfect Match: the Villa view (js/pm-cast-ui.js, Cast → Villa) ──
   One page: a summary, the season as a strip of episodes, four option cards
   and a card per islander. Colours are the villa's pink over the site's own
   surface tokens, so both themes follow; role and episode families carry a
   hue each, used at low alpha on backgrounds and full on edges and numbers. */
.pm-studio{--pm:#e0467c;--pm-soft:rgba(224,70,124,.12);--r-starter:#10b981;--r-bombshell:#f59e0b;--r-casa:#8b5cf6;
  --k-vote:#ef4444;--k-end:#ec4899;display:flex;flex-direction:column;gap:16px;margin:4px 0 24px}
.pm-studio-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;border:1px solid var(--border);
  background:linear-gradient(120deg,rgba(224,70,124,.16),rgba(245,158,11,.08) 55%,rgba(139,92,246,.10))}
.pm-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pm);font-weight:700}
.pm-studio-title{margin:2px 0 0;font-family:var(--font-display,inherit);font-size:30px;line-height:1.05;letter-spacing:.02em}
.pm-studio-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.pm-chip{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.pm-chip b{color:var(--text);font-size:14px;margin-right:2px}
.pm-chip.r-starter b{color:var(--r-starter)}.pm-chip.r-bombshell b{color:var(--r-bombshell)}.pm-chip.r-casa b{color:var(--r-casa)}
.pm-status{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.pm-status.ok{background:rgba(16,185,129,.14);color:#10b981}
.pm-status.bad{background:var(--pm-soft);color:var(--pm);white-space:normal;max-width:420px}

.pm-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pm-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pm-card-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text)}
.pm-card-sub{font-size:12px;color:var(--muted)}
.pm-hint{font-size:12px;line-height:1.45;color:var(--muted)}
.pm-studio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
/* Wide screens. Cast → Villa: who arrives when, beside the voices. Setup →
   Villa options: the length, the final, and where the dumpings are booked. */
@media (min-width:1100px){
  #sec-pm-cast .pm-studio-grid{grid-template-columns:2fr 1fr}
  .pm-season-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pm-studio-season{margin:0 0 8px}

/* the season strip */
.pm-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.pm-ep{position:relative;border-radius:10px;padding:8px 8px 7px;min-height:58px;display:flex;flex-direction:column;gap:2px;
  background:var(--surface2);border:1px solid var(--border);border-top:3px solid var(--muted)}
.pm-ep-num{font-size:11px;color:var(--muted);font-family:var(--font-mono,monospace)}
.pm-ep-name{font-size:12px;font-weight:600;line-height:1.2}
.pm-ep-fmt{font-size:10.5px;color:var(--muted);line-height:1.2}
.pm-ep-in{position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;
  background:rgba(245,158,11,.18);color:var(--r-bombshell)}
.pm-ep.k-couple{border-top-color:var(--pm)}.pm-ep.k-bomb{border-top-color:var(--r-bombshell)}
.pm-ep.k-vote{border-top-color:var(--k-vote)}.pm-ep.k-casa{border-top-color:var(--r-casa)}
.pm-ep.k-end{border-top-color:var(--k-end);background:linear-gradient(180deg,rgba(236,72,153,.10),var(--surface2))}
.pm-ep.aired{opacity:.55}.pm-ep.aired .pm-ep-num::after{content:' · aired'}
.pm-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--muted)}
.pm-legend span{display:inline-flex;align-items:center;gap:6px}
.pm-dot{width:9px;height:9px;border-radius:3px;display:inline-block;background:var(--muted)}
.pm-dot.k-couple{background:var(--pm)}.pm-dot.k-bomb{background:var(--r-bombshell)}.pm-dot.k-vote{background:var(--k-vote)}
.pm-dot.k-casa{background:var(--r-casa)}.pm-dot.k-end{background:var(--k-end)}

/* option cards */
.pm-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pm-count{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;background:var(--surface2);border:1px solid var(--border)}
.pm-count-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pm-count:nth-child(1) .pm-count-k{color:var(--r-starter)}.pm-count:nth-child(2) .pm-count-k{color:var(--r-bombshell)}.pm-count:nth-child(3) .pm-count-k{color:var(--r-casa)}
.pm-count-note{font-size:11px;color:var(--muted)}
.pm-count-note .pm-auto{color:var(--pm);font-weight:600}
.pm-count-in{width:100%;box-sizing:border-box;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;
  padding:6px 8px;font-size:18px;font-weight:700;font-family:inherit}
.pm-count-in::placeholder{font-size:12px;font-weight:500;color:var(--muted)}
.pm-count-in:focus,.pm-select:focus{outline:none;border-color:var(--pm);box-shadow:0 0 0 3px var(--pm-soft)}
.pm-count-wide{max-width:180px}
.pm-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.pm-field-k{font-size:11px;color:var(--muted);font-weight:600}
.pm-field-known{grid-column:1/-1}.pm-known-list{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.pm-known{font-size:12px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,#14b8a6 16%,transparent);border:1px solid color-mix(in srgb,#14b8a6 40%,transparent)}
.pm-known-none{background:none;border-style:dashed;color:var(--muted)}
.pm-known-go{background:none;border:0;padding:0;color:var(--pm);font-size:11px;cursor:pointer;text-align:left;text-decoration:underline}
.pm-select{width:100%;box-sizing:border-box;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;
  padding:6px 8px;font-size:12.5px;font-family:inherit;min-width:0}
.pm-pick{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--k-vote)}
.pm-pick + .pm-pick{margin-top:8px}.pm-pick.aired{border-left-color:var(--muted)}
.pm-pick-head{display:flex;align-items:center;gap:8px}
.pm-ep-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(239,68,68,.14);color:var(--k-vote);font-family:var(--font-mono,monospace)}
.pm-pick-name{font-size:12.5px;font-weight:600}
.pm-toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding-top:8px;border-top:1px solid var(--border)}
.pm-toggle input{position:absolute;opacity:0;pointer-events:none}
.pm-toggle-ui{flex:none;width:34px;height:20px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);position:relative;transition:background .15s}
.pm-toggle-ui::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.pm-toggle input:checked + .pm-toggle-ui{background:var(--pm-soft);border-color:var(--pm)}
.pm-toggle input:checked + .pm-toggle-ui::after{transform:translateX(14px);background:var(--pm)}
.pm-toggle input:focus-visible + .pm-toggle-ui{box-shadow:0 0 0 3px var(--pm-soft)}
.pm-toggle > span:last-child{display:flex;flex-direction:column;gap:2px}

/* the islanders */
.pm-isls{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pm-isl{background:var(--surface2);border:1px solid var(--border);border-left:4px solid var(--muted);border-radius:12px;padding:12px;
  display:flex;flex-direction:column;gap:10px;min-width:0}
.pm-isl.r-starter{border-left-color:var(--r-starter)}.pm-isl.r-bombshell{border-left-color:var(--r-bombshell)}.pm-isl.r-casa{border-left-color:var(--r-casa)}
.pm-isl-top{display:flex;align-items:center;gap:10px}
.pm-isl-face{position:relative;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--pm-soft);display:grid;place-items:center;
  font-weight:700;color:var(--pm)}
.pm-isl-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pm-isl-name{font-weight:700;font-size:14.5px}
.pm-isl-meta{font-size:11.5px;color:var(--muted);text-transform:capitalize}
.pm-isl-set{color:var(--pm);text-transform:none}
.pm-segs{display:grid;grid-template-columns:.8fr 1fr 1.15fr 1.1fr;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.pm-seg{background:transparent;border:0;border-right:1px solid var(--border);color:var(--muted);padding:6px 4px;font-size:11.5px;cursor:pointer;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-seg:last-child{border-right:0}
.pm-seg:hover{color:var(--text)}
.pm-seg.on{background:var(--pm-soft);color:var(--pm);font-weight:700}
.pm-seg[data-val="starter"].on{background:rgba(16,185,129,.14);color:var(--r-starter)}
.pm-seg[data-val="bombshell"].on{background:rgba(245,158,11,.16);color:var(--r-bombshell)}
.pm-seg[data-val="casa"].on{background:rgba(139,92,246,.16);color:var(--r-casa)}
/* On Auto, the role it comes to is marked, not pressed. */
.pm-seg.auto{box-shadow:inset 0 -2px 0 currentColor}
.pm-seg[data-val="starter"].auto{color:var(--r-starter)}.pm-seg[data-val="bombshell"].auto{color:var(--r-bombshell)}.pm-seg[data-val="casa"].auto{color:var(--r-casa)}
.pm-isl-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pm-isl-fields .pm-select{padding:6px 4px;font-size:12px}
.pm-isl-more summary{cursor:pointer;font-size:12px;color:var(--muted)}
.pm-isl-more summary:hover{color:var(--text)}
.pm-isl-grid{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.pm-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px}
.pm-cs-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pm-sec-head{display:flex;align-items:center;gap:6px}
.pm-roll{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:6px;
  padding:2px 5px;font-size:11px;line-height:1;cursor:pointer;font-family:inherit}
.pm-roll:hover{color:var(--pm);border-color:var(--pm)}
.pm-roll:active svg{transform:rotate(90deg)}
.pm-roll svg{transition:transform .15s}
.pm-clear{padding:2px 6px}
.pm-roll-all-row{justify-content:flex-end}
.pm-roll-all{padding:4px 9px;font-weight:600}
.pm-cs-chip{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);cursor:pointer;user-select:none;color:var(--muted);background:var(--surface)}
.pm-cs-chip:hover{color:var(--text)}
.pm-cs-chip input{display:none}
.pm-cs-chip.on{background:var(--pm-soft);border-color:var(--pm);color:var(--pm)}
@media (max-width:640px){
  .pm-studio-head{padding:14px 16px}.pm-studio-title{font-size:24px}
  .pm-counts,.pm-isl-fields{grid-template-columns:1fr}
  .pm-isls{grid-template-columns:1fr}
  .pm-studio-summary{justify-content:flex-start}
}

/* ── The Circle, until Plan 5's stages (js/vp-ci/screens.js) ──
   A readout: messages as the screen shows them, lines said aloud, stage
   directions. Colors from the page's tokens, so both themes work. */
.ci-page .rp-title { margin-bottom: 14px; }
.ci-block { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 25%, transparent); }
.ci-block:last-child { border-bottom: 0; }
.ci-say { margin: 4px 0; line-height: 1.5; }
.ci-msg { margin: 4px 0 4px 22px; padding: 6px 12px; border-radius: 14px 14px 14px 4px; display: inline-block; max-width: 85%;
  background: color-mix(in srgb, #3fd8ff 16%, transparent); border: 1px solid color-mix(in srgb, #3fd8ff 40%, transparent); line-height: 1.45; }
.ci-msg + .ci-msg { display: block; width: fit-content; }
.ci-stage { margin: 4px 0; font-style: italic; color: var(--muted, #888); }

/* ── The Challenge, until the stepped viewer (js/vp-ch/screens.js) ──
   A readout: lines said aloud, confessionals, stage directions, TJ.
   Colors from the page's tokens, so both themes work. */
.ch-page .rp-title { margin-bottom: 12px; }
.ch-place { font-size: .7em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #888); margin-left: 8px; }
.ch-block { line-height: 1.5; }
.ch-say, .ch-conf { margin: 5px 0; }
.ch-say.ch-host b { color: #ff6a1a; }
.ch-conf { padding-left: 12px; border-left: 3px solid color-mix(in srgb, #ff6a1a 45%, transparent); }
.ch-tag { font-size: .72em; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #888); margin-right: 4px; }
.ch-stage { margin: 5px 0; font-style: italic; color: var(--muted, #888); }
.ch-life { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--muted, #888) 25%, transparent); }
.ch-life:last-child { border-bottom: 0; }
.ch-life-head { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #ff6a1a; margin-bottom: 4px; }

/* ── THE CIRCLE: Profile Plan + Catfish Pool (js/ci-cast-ui.js) ──────────
   Mockup v3 (approved 2026-09-30). The show's own screen palette, dark in
   both themes like the screens in the apartments. Light motion, off for
   anyone who asks for less. */
#sec-ci-cast{--ci-cy:#3fd8ff;--ci-bl:#2f7bff;--ci-vi:#8b5cff;--ci-pk:#ff4fb4;--ci-navy:#0a0f2e;--ci-card:rgba(20,24,52,.78);--ci-mut:#8f96c8;
  font-family:Montserrat,system-ui,sans-serif;color:#fff;margin-top:6px}
#sec-ci-cast *{box-sizing:border-box}
#sec-ci-cast button{font-family:inherit}
.ci-panel{background:radial-gradient(120% 140% at 0% 0%,rgba(47,123,255,.16),transparent 55%),var(--ci-navy);border:1px solid rgba(63,216,255,.18);border-radius:18px;padding:18px;margin-bottom:22px;position:relative;overflow:hidden}
.ci-panel:before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;border:26px solid rgba(63,216,255,.06);animation:ciDrift 14s ease-in-out infinite;pointer-events:none}
.ci-phead{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;position:relative}
.ci-ring{width:26px;height:26px;border-radius:50%;border:4px solid var(--ci-cy);animation:ciBreathe 3.2s ease-in-out infinite}
.ci-ring-pk{border-color:var(--ci-pk);--ci-glow:255,79,180}
.ci-ptitle{font-weight:800;font-size:15px;letter-spacing:.14em}
.ci-pcount{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ci-mut);flex-wrap:wrap}
.ci-btn{background:rgba(63,216,255,.1);border:1px solid rgba(63,216,255,.35);color:#dff7ff;font-weight:600;font-size:11.5px;padding:7px 11px;border-radius:999px;cursor:pointer}
.ci-btn:hover{background:rgba(63,216,255,.2)}.ci-btn-pk{border-color:rgba(255,79,180,.45);background:rgba(255,79,180,.1);color:#ffe0f1}
.ci-rows{display:grid;gap:10px}
.ci-row{display:grid;grid-template-columns:250px minmax(0,1fr) 290px;gap:14px;align-items:stretch;background:var(--ci-card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px;transition:transform .18s,border-color .18s,box-shadow .18s}
.ci-row:hover,.ci-pc:hover{transform:translateY(-2px);border-color:rgba(63,216,255,.28);box-shadow:0 10px 30px -14px rgba(63,216,255,.45)}
.ci-who{display:flex;gap:10px;align-items:center}
.ci-av{width:52px;height:52px;border-radius:50%;border:3px solid var(--ring,var(--ci-cy));flex:none;position:relative;overflow:hidden;display:grid;place-items:center;background:#1b1f45;font-weight:800}
.ci-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ci-nm{font-weight:700;font-size:14px}.ci-meta{font-size:11px;color:var(--ci-mut);margin-top:2px}
.ci-seg{display:inline-flex;flex-wrap:wrap;background:rgba(0,0,0,.35);border-radius:999px;padding:3px;gap:2px;margin-top:4px}
.ci-seg button{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:999px;color:var(--ci-mut);cursor:pointer;background:none;border:0;white-space:nowrap;transition:background .15s,color .15s}
.ci-seg button.on{background:var(--ci-cy);color:#04121a;animation:ciPop .22s ease}
.ci-k{font-size:9.5px;letter-spacing:.14em;color:var(--ci-mut);font-weight:700;text-transform:uppercase}
.ci-k em{font-style:normal;color:var(--ci-cy);margin-left:6px;letter-spacing:.1em}
.ci-mid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;align-content:start}
.ci-fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.ci-pair{display:flex;gap:6px;align-items:center;min-width:0}.ci-wrap{flex-wrap:wrap}
.ci-in{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font:500 12px Montserrat,system-ui,sans-serif;padding:6px 8px;min-width:0;flex:1}
.ci-in option,.ci-in optgroup{background:#141836;color:#fff}
.ci-age{max-width:64px;flex:none}
.ci-wide{grid-column:span 2}
.ci-draw{border-radius:12px;padding:10px;background:linear-gradient(160deg,rgba(47,123,255,.22),rgba(139,92,255,.14));border:1px solid rgba(139,92,255,.35);display:flex;gap:10px;animation:ciFlip .6s .2s ease both}
.ci-draw .ci-av{width:44px;height:44px}
.ci-self{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
.ci-wait{background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.14);flex-direction:column;justify-content:center;text-align:center;animation:none}
.ci-dk{font-size:9.5px;letter-spacing:.14em;font-weight:800;color:var(--ci-pk);text-transform:uppercase}
.ci-self .ci-dk{color:var(--ci-cy)}.ci-wait .ci-dk{color:var(--ci-mut)}
.ci-dn{font-weight:800;font-size:13.5px;margin-top:2px}.ci-dm{font-size:11px;color:#cfd3f2}
.ci-why{font-size:11px;color:#b9bee6;margin-top:5px;line-height:1.45;font-style:italic}
.ci-pin{font-size:9px;letter-spacing:.1em;color:#04121a;background:var(--ci-cy);padding:2px 6px;border-radius:999px;margin-left:4px}
.ci-pool{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.ci-pc{background:var(--ci-card);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:14px 12px 12px;display:flex;flex-direction:column;gap:7px;position:relative;transition:transform .18s,border-color .18s,box-shadow .18s}
.ci-tag{position:absolute;top:10px;right:10px;font-size:9px;font-weight:800;letter-spacing:.1em;padding:3px 7px;border-radius:999px}
.ci-tag.taken{background:var(--ci-pk);color:#fff}.ci-tag.stock{background:rgba(255,255,255,.08);color:var(--ci-mut)}.ci-tag.wait{display:none}
.ci-slot{width:96px;height:96px;border-radius:50%;margin:0 auto;border:2px dashed rgba(139,92,255,.6);display:grid;place-items:center;text-align:center;font-size:10px;font-weight:600;color:#cbb8ff;background:rgba(139,92,255,.08) center/cover no-repeat;cursor:pointer;line-height:1.3;padding:8px;position:relative}
.ci-slot:not(.has):before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:rgba(139,92,255,.7);animation:ciSpin 3s linear infinite}
.ci-slot.has{border:3px solid var(--ci-vi);box-shadow:0 0 0 5px rgba(139,92,255,.12)}
.ci-handle{text-align:center;font-weight:800;font-size:15px}.ci-hm{text-align:center;font-size:11px;color:var(--ci-mut)}
.ci-bio{font-size:11.5px;color:#d7daf4;line-height:1.45}
.ci-chips{display:flex;gap:4px;flex-wrap:wrap}
.ci-chip{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#cfd3f2;background:none;cursor:pointer;transition:background .15s,border-color .15s}
.ci-chip.on{border-color:var(--ci-pk);color:#fff;background:rgba(255,79,180,.18);animation:ciPop .22s ease}
.ci-tells{font-size:10.5px;color:#aeb3dc}.ci-tells b{color:#fff;font-weight:600}
.ci-acts{display:flex;gap:6px;margin-top:auto;padding-top:4px}
.ci-acts button{flex:1;font-size:10.5px;font-weight:600;padding:5px 0;border-radius:8px;background:rgba(255,255,255,.05);color:#cfd3f2;border:0;cursor:pointer}
.ci-acts button:hover{background:rgba(63,216,255,.14)}
.ci-add{border:2px dashed rgba(63,216,255,.35);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ci-cy);font-weight:700;font-size:13px;min-height:240px;cursor:pointer;background:none}
.ci-plus{width:54px;height:54px;border-radius:50%;border:3px solid var(--ci-cy);display:grid;place-items:center;font-size:28px}
.ci-small{font-size:10.5px;color:var(--ci-mut);line-height:1.4;font-weight:500}
.ci-editor{grid-column:span 2;background:linear-gradient(160deg,rgba(47,123,255,.14),rgba(139,92,255,.1)),var(--ci-card);border:1px solid rgba(139,92,255,.45);border-radius:16px;padding:14px;display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;animation:ciRise .35s ease both}
.ci-ed-left{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.ci-editor .ci-slot{width:110px;height:110px}
.ci-eg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;min-width:0}
.ci-full{grid-column:span 2}
.ci-types{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.3);border-radius:10px;padding:7px 9px;flex-wrap:wrap}
.ci-reg{font-size:10px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:999px;background:var(--ci-cy);color:#04121a;flex:none}
.ci-bubble{font-size:11.5px;background:#2a2f63;border-radius:12px 12px 12px 3px;padding:6px 9px;color:#eef;flex:1;min-width:180px;animation:ciPop .25s ease}
textarea.ci-bio{resize:vertical;width:100%}
.ci-prompt{font-size:10.5px;background:rgba(0,0,0,.3);border-radius:8px;padding:7px 9px;color:#dfe2ff;line-height:1.45;display:flex;gap:8px;justify-content:space-between;margin-top:6px}
.ci-link{background:none;border:0;color:var(--ci-cy);font-weight:700;font-size:10px;cursor:pointer;padding:0;letter-spacing:.06em;text-transform:uppercase}
/* Only the first few rise in: a row held invisible until its animation runs
   must never be one below the fold. */
.ci-rows .ci-row:nth-child(-n+5),.ci-pool .ci-pc:nth-child(-n+4){animation:ciRise .45s ease backwards}
.ci-rows .ci-row:nth-child(2){animation-delay:.05s}.ci-rows .ci-row:nth-child(3){animation-delay:.1s}.ci-rows .ci-row:nth-child(4){animation-delay:.15s}.ci-rows .ci-row:nth-child(5){animation-delay:.2s}
@keyframes ciBreathe{0%,100%{box-shadow:0 0 10px rgba(var(--ci-glow,63,216,255),.45)}50%{box-shadow:0 0 22px rgba(var(--ci-glow,63,216,255),.9)}}
@keyframes ciRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ciFlip{from{opacity:0;transform:perspective(600px) rotateY(-70deg)}to{opacity:1;transform:none}}
@keyframes ciSpin{to{transform:rotate(360deg)}}
@keyframes ciPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ciDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,14px)}}
@media (prefers-reduced-motion:reduce){#sec-ci-cast *,#sec-ci-cast *:before{animation:none!important;transition:none!important}}
@media (max-width:1100px){.ci-row{grid-template-columns:1fr}.ci-pool{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ci-pool{grid-template-columns:1fr}.ci-editor{grid-column:span 1;grid-template-columns:1fr}.ci-eg,.ci-mid{grid-template-columns:1fr}.ci-full{grid-column:span 1}}

/* ── THE CIRCLE: the three tabs, and the Photos tab (js/ci-photos-ui.js) ──
   Mockup v3 (approved 2026-09-30): the show's ring logo, "Circle, …"
   commands, the pink ALERT!, the profile card; a tab switcher, one person at
   a time, rings that fill, slots that power on, a console that types. */
.ci-sub{position:relative;display:inline-flex;gap:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:4px;margin-bottom:14px}
.ci-sub button{position:relative;z-index:1;width:132px;background:none;border:0;color:var(--ci-mut);font:700 12px Montserrat,system-ui,sans-serif;padding:8px 0;cursor:pointer;transition:color .2s}
.ci-sub button.on{color:#04121a}
.ci-sub-ind{position:absolute;top:4px;bottom:4px;left:4px;width:132px;border-radius:9px;background:linear-gradient(135deg,var(--ci-cy),var(--ci-bl));box-shadow:0 0 18px rgba(63,216,255,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ci-sub-ind.pool{transform:translateX(132px)}.ci-sub-ind.photos{transform:translateX(264px)}
.ci-photos:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(63,216,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(63,216,255,.05) 1px,transparent 1px);background-size:28px 28px;animation:ciGrid 18s linear infinite;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
@keyframes ciGrid{to{background-position:28px 28px}}
.ci-photos>*{position:relative;z-index:1}
.ci-ph-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ci-ph-logo{width:58px;height:58px;position:relative;flex:none}
.ci-ph-logo svg{position:absolute;inset:0;animation:ciSpin 16s linear infinite}
.ci-ph-logo:after{content:"";position:absolute;inset:10px;border-radius:50%;box-shadow:0 0 30px rgba(255,79,180,.45),inset 0 0 18px rgba(63,216,255,.4)}
.ci-ph-show{font-size:10px;font-weight:800;letter-spacing:.34em;color:var(--ci-pk)}
.ci-ph-title{font-size:18px;font-weight:800;letter-spacing:.16em}
.ci-ph-meter{position:relative;width:54px;height:54px;margin-left:14px}
.ci-ph-meter svg{transform:rotate(-90deg)}
.ci-ph-meter circle:last-child{transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.ci-ph-pct{position:absolute;inset:0;display:grid;place-items:center;font:600 11px 'Space Mono',monospace}
.ci-ph-stat{font-size:12px;color:var(--ci-mut);line-height:1.4}
.ci-ph-cloud{font-size:10.5px;color:var(--ci-cy);margin-top:3px}.ci-ph-count{color:#fff;font-weight:700}
.ci-ph-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ci-ph-alert{display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 12px;margin-bottom:12px;background:linear-gradient(90deg,rgba(255,79,180,.22),rgba(139,92,255,.12));border:1px solid rgba(255,79,180,.5);animation:ciAlertIn .6s cubic-bezier(.2,.8,.2,1) both,ciAlertGlow 2.4s ease-in-out 1s infinite}
.ci-ph-alert b{font-weight:800;font-size:12px;letter-spacing:.2em;color:#fff;background:var(--ci-pk);padding:3px 9px;border-radius:6px;box-shadow:0 0 16px rgba(255,79,180,.7)}
.ci-ph-alert span{font-size:12px;color:#ffe0f1}
@keyframes ciAlertIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ciAlertGlow{50%{box-shadow:0 0 24px rgba(255,79,180,.35)}}
.ci-ph-drop{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:14px;font-size:11.5px;color:#cfd3f2;cursor:pointer;
  background:linear-gradient(90deg,var(--ci-cy) 50%,transparent 0) repeat-x top/14px 1px,linear-gradient(90deg,var(--ci-cy) 50%,transparent 0) repeat-x bottom/14px 1px,
  linear-gradient(0deg,var(--ci-cy) 50%,transparent 0) repeat-y left/1px 14px,linear-gradient(0deg,var(--ci-cy) 50%,transparent 0) repeat-y right/1px 14px,rgba(63,216,255,.04);animation:ciAnts 1.2s linear infinite}
@keyframes ciAnts{to{background-position:14px 0,-14px 100%,0 -14px,100% 14px,0 0}}
.ci-ph-drop code{font-family:'Space Mono',monospace;background:rgba(0,0,0,.4);padding:1px 6px;border-radius:5px;color:#fff;font-size:10.5px}
.ci-ph-tray{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;flex-wrap:wrap}
.ci-ph-tr{width:44px;height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.15);background:#12163a center/cover;cursor:pointer}
.ci-ph-tr.on{border-color:var(--ci-pk);box-shadow:0 0 14px rgba(255,79,180,.6)}
.ci-ph-tabs{position:relative;display:inline-flex;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:4px;margin-bottom:12px}
.ci-ph-tabs button{position:relative;z-index:1;width:120px;background:none;border:0;color:var(--ci-mut);font:700 12px Montserrat,system-ui,sans-serif;padding:8px 0;cursor:pointer;transition:color .2s}
.ci-ph-tabs button span{font-family:'Space Mono',monospace;font-size:10px;opacity:.7;margin-left:6px}
.ci-ph-tabs button.on{color:#04121a}
.ci-ph-ind{position:absolute;top:4px;bottom:4px;left:4px;width:120px;border-radius:9px;background:linear-gradient(135deg,var(--ci-cy),var(--ci-bl));box-shadow:0 0 18px rgba(63,216,255,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ci-ph-ind.players{transform:translateX(120px)}
.ci-ph-rail{display:flex;gap:14px;overflow-x:auto;padding:6px 4px 14px;scrollbar-width:thin}
.ci-ph-who{flex:none;width:74px;text-align:center;cursor:pointer;opacity:.6;background:none;border:0;color:#fff;font-family:inherit;transition:opacity .2s,transform .2s}
.ci-ph-who:hover{opacity:.9;transform:translateY(-2px)}.ci-ph-who.on{opacity:1}
.ci-ph-ring{position:relative;width:66px;height:66px;margin:0 auto}
.ci-ph-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ci-ph-ring circle:last-child{transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.ci-ph-face{position:absolute;inset:7px;border-radius:50%;background:#1b1f45 center/cover;display:grid;place-items:center;font-weight:800}
.ci-ph-who.on .ci-ph-face{box-shadow:0 0 0 2px var(--ci-cy),0 0 22px rgba(63,216,255,.6)}
.ci-ph-wn{font-size:11px;font-weight:700;margin-top:6px}.ci-ph-wc{font:600 9.5px 'Space Mono',monospace;color:var(--ci-mut)}
.ci-ph-stage{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;animation:ciStage .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ciStage{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.ci-ph-card{align-self:start;border-radius:18px;padding:18px 16px;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(63,216,255,.3);
  background:radial-gradient(120% 80% at 50% 0%,rgba(47,123,255,.35),transparent 60%),linear-gradient(180deg,#141a4a,#0b0f30)}
.ci-ph-pic{width:190px;height:190px;border-radius:50%;margin:6px auto 12px;background:#1b1f45 center/cover;border:5px solid var(--ci-pk);box-shadow:0 0 0 6px rgba(255,255,255,.04),0 0 40px rgba(255,79,180,.35);display:grid;place-items:center;font-size:56px;font-weight:800}
.ci-ph-pic.cy{border-color:var(--ci-cy);box-shadow:0 0 0 6px rgba(255,255,255,.04),0 0 40px rgba(63,216,255,.35)}
.ci-ph-nm{font-size:20px;font-weight:800}.ci-ph-mt{font-size:11.5px;color:#cfd3f2;margin-top:3px}
.ci-ph-pill{position:absolute;left:12px;top:12px;font-weight:700;font-size:9.5px;letter-spacing:.14em;background:rgba(5,6,15,.6);color:var(--ci-cy);padding:4px 8px;border-radius:999px;border:1px solid rgba(63,216,255,.35)}
.ci-ph-cst{display:inline-block;margin-top:10px;font-size:10.5px;background:rgba(255,255,255,.08);border-radius:999px;padding:4px 10px}
.ci-ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,158px));gap:10px;align-content:start}
.ci-ph-slot{aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden;cursor:pointer;background:#0f1333 center/cover;border:1px solid rgba(255,255,255,.1);color:#fff;font-family:inherit;padding:0;
  animation:ciBoot .5s cubic-bezier(.2,.8,.2,1) backwards;transition:transform .15s,border-color .15s,box-shadow .15s}
@keyframes ciBoot{0%{opacity:0;transform:scale(.9);filter:brightness(2) blur(4px)}60%{opacity:1;filter:brightness(1.3) blur(0)}100%{transform:none;filter:none}}
.ci-ph-slot:hover{transform:translateY(-3px);border-color:rgba(63,216,255,.6);box-shadow:0 10px 26px -12px rgba(63,216,255,.7)}
.ci-ph-slot.sel{border-color:var(--ci-cy);box-shadow:0 0 0 2px var(--ci-cy),0 0 26px rgba(63,216,255,.5)}
.ci-ph-slot.fb{filter:grayscale(.7) brightness(.55)}
.ci-ph-slot.empty:before{content:"";position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(transparent,rgba(63,216,255,.14),transparent);animation:ciScan 2.8s linear infinite}
@keyframes ciScan{to{top:100%}}
.ci-ph-slot.empty:after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:rgba(63,216,255,.45);font-weight:300}
.ci-ph-lb{position:absolute;left:6px;right:6px;bottom:6px;font-size:10px;font-weight:700;background:rgba(5,6,15,.78);border-radius:7px;padding:4px 6px;z-index:1;text-align:left}
.ci-ph-st{position:absolute;top:6px;right:6px;z-index:1;font:700 8.5px 'Space Mono',monospace;padding:2px 6px;border-radius:999px;background:rgba(0,0,0,.6);color:var(--ci-mut)}
.ci-ph-slot.mine .ci-ph-st{background:var(--ci-vi);color:#fff}
.ci-ph-console{grid-column:1/-1;margin-top:4px;border-radius:14px;border:1px solid rgba(63,216,255,.25);background:rgba(3,6,20,.75);padding:12px 14px;font-family:'Space Mono',monospace}
.ci-ph-h{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--ci-mut);letter-spacing:.1em;margin-bottom:6px}
.ci-ph-h i{width:7px;height:7px;border-radius:50%;background:#35e0a1;box-shadow:0 0 8px #35e0a1}
.ci-ph-cmd{font-size:13px;margin-bottom:6px}.ci-ph-cmd em{font-style:normal;color:var(--ci-pk)}
.ci-ph-when{font-family:Montserrat,system-ui,sans-serif;font-size:11.5px;color:#cfd3f2;margin-bottom:8px}
.ci-ph-txt{font-size:12px;line-height:1.6;color:#bfe9ff;min-height:38px}
.ci-ph-txt:after{content:"\258D";color:var(--ci-cy);animation:ciBlink 1s steps(1) infinite;margin-left:2px}
@keyframes ciBlink{50%{opacity:0}}
.ci-ph-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
@media (max-width:900px){.ci-ph-stage{grid-template-columns:1fr}.ci-ph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ci-sub button,.ci-sub-ind{width:100px}.ci-sub-ind.pool{transform:translateX(100px)}.ci-sub-ind.photos{transform:translateX(200px)}}

/* ── The Profile Plan, one player at a time (js/ci-cast-ui.js planPanel) ── */
.ci-plan-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ci-plan-bar .ci-ph-tabs{margin-bottom:0}
.ci-tabs3 .ci-ph-ind.starter{transform:translateX(120px)}.ci-tabs3 .ci-ph-ind.newcomer{transform:translateX(240px)}
.ci-badge{display:inline-block;margin-top:3px;font:700 9px 'Space Mono',monospace;letter-spacing:.04em;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--ci-mut);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-badge.pin{background:rgba(63,216,255,.16);color:var(--ci-cy)}
.ci-badge.cat{background:rgba(255,79,180,.22);color:#ff9bd6}
/* When they arrive: a chip under each face, click to flip Day 1 / Newcomer */
.ci-arrive{display:inline-block;margin-top:4px;font:800 9px 'Space Mono',monospace;letter-spacing:.06em;padding:3px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .15s}
.ci-arrive.starter{background:rgba(63,216,255,.18);color:#7fe6ff;border-color:rgba(63,216,255,.4)}
.ci-arrive.newcomer{background:rgba(255,190,70,.18);color:#ffd27a;border-color:rgba(255,190,70,.45)}
.ci-arrive.set{box-shadow:0 0 0 1px currentColor inset}
.ci-arrive:hover{transform:translateY(-1px);box-shadow:0 0 10px currentColor}
.ci-role-k{margin:6px 0 3px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:10px;color:var(--ci-cy)}
.ci-badge.edit{background:rgba(139,92,255,.25);color:#cbb8ff}
.ci-badge.self{background:rgba(63,216,136,.18);color:#7ff0bd}
.ci-ph-ring.ci-ring-cat .ci-ph-face{box-shadow:0 0 0 3px var(--ci-pk),0 0 18px rgba(255,79,180,.6)}
.ci-ph-ring.ci-ring-edit .ci-ph-face{box-shadow:0 0 0 3px var(--ci-vi)}
.ci-ph-ring.ci-ring-self .ci-ph-face{box-shadow:0 0 0 3px #3fd88f}
.ci-ph-ring.ci-ring-pin .ci-ph-face{box-shadow:0 0 0 2px rgba(63,216,255,.7)}
.ci-ph-who.on .ci-ph-ring .ci-ph-face{box-shadow:0 0 0 3px var(--ci-cy),0 0 22px rgba(63,216,255,.7)}
.ci-one .ci-row{animation:ciStage .45s cubic-bezier(.2,.8,.2,1)}
.ci-one .ci-row .ci-av{width:72px;height:72px}
.ci-grp{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ci-pk);margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}
.ci-grp:first-child{margin-top:0;padding-top:0;border-top:0}
.ci-grp em{font-style:normal;color:var(--ci-mut);letter-spacing:.06em;text-transform:none;font-weight:600;margin-left:6px}
.ci-ov{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12px}
.ci-ov th{text-align:left;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ci-mut);font-weight:700;padding:0 10px}
.ci-ov td{background:var(--ci-card);padding:8px 10px;vertical-align:middle}
.ci-ov td:first-child{border-radius:10px 0 0 10px;display:flex;align-items:center;gap:8px}
.ci-ov td:last-child{border-radius:0 10px 10px 0}
.ci-ov td .ci-av{width:32px;height:32px;font-size:12px}
.ci-ov td i{color:var(--ci-mut);font-style:normal;font-size:10.5px}
.ci-ov tr{cursor:pointer;transition:transform .15s}
.ci-ov tbody tr:hover{transform:translateX(3px)}
.ci-ov tbody tr:hover td{background:rgba(47,123,255,.22)}

/* ── The shows' cast panels, hidden before the first paint ──────────────
   #sec-pm-cast (the villa) and #sec-ci-cast (the Circle) are plain HTML in
   the Cast tab. The rules that hid them (CONFIG_SCOPE, and the Casting
   Room's own CSS) arrive with the JavaScript, a moment after the first
   paint, so every reload flashed the villa panel (user, 2026-09-30). Here,
   before anything paints, they are hidden; each is shown only in its own
   Casting Room view, or when the room is switched off (the legacy panel). */
#sec-pm-cast, #sec-ci-cast { display: none; }
#cast-room[data-view="villa"] #sec-pm-cast, #tab-cast.cast-room-off #sec-pm-cast { display: flex; }
#cast-room[data-view="circle"] #sec-ci-cast, #tab-cast.cast-room-off #sec-ci-cast { display: block; }

/* The Ridonculous Race's team, set on its lane in the Casting Room's Pairs view (cast-room.js _raceTeamPanel) */
.cr-race-team { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 6px 8px 2px; }
.cr-race-team .cr-rt { width: 100%; font-size: 11.5px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border, #2a3354);
  background: var(--surface2, #141b31); color: var(--text, #e8ecf6); }
.cr-race-team .cr-rt:focus { outline: 1px solid #f2b705; }
.cr-race-team .cr-rt-sub { font-size: 10px; color: var(--muted, #8b95b3); margin-top: 2px; }
.cr-race-team .cr-rt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cr-race-team .cr-rt-lines { display: flex; flex-direction: column; gap: 5px; }
.cr-race-team .cr-rt-lines > summary { font-size: 11px; color: #f2b705; cursor: pointer; }
.cr-race-team .cr-rt-lines[open] { gap: 5px; }