/* Cade v8 BROADCAST layer (2026-10-06): the "Broadcast Arena" look the client team picked for the main platform and the
   tournament platform, built on the v8 kit (same tokens, torn panels, SHOUT, the skycam). Additive: nothing here restyles a
   v8 class on its own; every part is a b- name (or a kit class under a b- parent).
   Load AFTER /ds/ds.css, /lib/v8/v8.css and /lib/v8/skycam.css:  <body class="v8 b9"> ... <link rel="stylesheet" href="/lib/v8/broadcast.css">
   Behaviour + markup builders: /lib/v8/broadcast.js (window.V8B). Usage: /lib/v8/README.md, "The broadcast layer".
   Shapes: --clip-panel, --clip-chip, --clip-field, the kit tab polygon, the sign polygon (.stage-sign, their banner, here
   --clip-sign), --burst, the CTA plates, the ribbon, their scoreboard plate + label banner (skycam art). Rings, dots and
   timeline nodes are data marks (a clock, a list), not decoration. Nothing under 11px. No em dash. */

.b9{--clip-sign:polygon(1.55% 93.68%,1.36% 72.46%,0 53.14%,3.07% 37.63%,0 20.72%,1.55% 5.33%,47.79% 5.33%,46.7% 0,67.48% 5.33%,98.69% 5.33%,97.96% 26.4%,100% 55.09%,97.89% 70.05%,98.69% 93.68%,53.73% 93.68%,55.01% 100%);
  --clip-ribbon:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,10% 50%);
  --clip-hex:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  --b-sec:56px;--b-in:32px;--b-row:#1E1C1A;--b-rule:#2E2B28;--b-line2:#34312D}

/* ═════ section rhythm: 56 between sections, 32 inside (phone 56 / 32 too: the v8 phone rhythm) ═════ */
.b-sec{padding-top:var(--b-sec)}
.b-main{padding-top:104px}
.b-cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:28px;align-items:start}
.b-cols.even{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.b-stack{display:flex;flex-direction:column;gap:28px;min-width:0}

/* ═════ THE HEADER (V8B.header): the kit .nav shell, the four product doors, balance (or credits) + avatar menu ═════ */
.bnav{background:var(--bg)}
.bnav .nav-links{margin:0 auto}
.bnav .nav-in{gap:24px}
.b-acct{display:flex;align-items:center;gap:14px;flex:none}
.b-bal{display:inline-flex;align-items:center;gap:0;height:48px;padding:0 0 0 16px;background:var(--bg1);border:2px solid var(--line);box-shadow:var(--sh-3);color:var(--paper);font-family:var(--data);font-weight:800;font-size:var(--fs-input);font-variant-numeric:tabular-nums;white-space:nowrap}
.b-bal>span{padding-right:14px}
.b-add{display:grid;place-items:center;align-self:stretch;width:44px;margin:-2px -2px -2px 0;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);font-family:var(--data);font-weight:800;font-size:24px;line-height:1;transition:transform var(--t-key) var(--e-std)}
@media (hover:hover){.b-add:hover{transform:translate(-2px,-2px)}}
.b-bal.cr{background:var(--yellow);border-color:var(--ink);color:var(--ink);padding:0 16px}
.b-bal.cr>span{padding:0}
.b-bal.cr small{font-size:var(--fs-key);margin-left:6px;letter-spacing:.08em}
.b-me{position:relative}
.b-me-b{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0;background:none;border:0;color:var(--paper)}
.b-me-b img{width:48px;height:48px;object-fit:cover;clip-path:var(--clip-hex);background:var(--orange)}
.b-me-b svg{width:16px;height:16px;transition:transform var(--t-key) var(--e-std)}
.b-me-b[aria-expanded=true] svg{transform:rotate(180deg)}
.b-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:220px;margin:0;padding:8px 0;list-style:none;background:var(--bg1);border:2px solid var(--ink);box-shadow:var(--sh-5)}
.b-menu[hidden]{display:none}
.b-menu li+li{border-top:2px solid var(--bg3)}
.b-menu a,.b-menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 18px;background:none;border:0;text-align:left;font-family:var(--call);font-size:var(--fs-call);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.b-menu small{display:block;padding:10px 18px 6px;font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (hover:hover){.b-menu a:hover,.b-menu button:hover{color:var(--yellow);background:var(--bg3)}}
.bnav .nav-drop .b-soon,.bnav .nav-links .b-soon{opacity:.55}

/* ═════ heads: the page head, the section head (the orange dot), the panel head ═════ */
.b-page{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:22px 28px;padding-bottom:22px;border-bottom:2px solid var(--b-rule)}
.b-page-h{margin:0;font-size:clamp(44px,4.6vw,68px);color:var(--paper);white-space:nowrap}
.b-page .tabs{justify-self:end;flex-wrap:nowrap}
.b-page-p{margin:10px 0 0;font-family:var(--read);font-size:var(--fs-lede);color:var(--muted)}
.b-page-rule{align-self:stretch;width:2px;background:var(--line)}
.b-hd{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-bottom:24px}
.b-hd-h{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(36px,3.6vw,52px);line-height:.9;color:var(--orange)}
.b-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(255,168,0,.18)}
.b-hd-p{margin:0;font-family:var(--read);font-size:var(--fs-read-s);color:var(--paper)}
.b-hd-r{margin-left:auto;display:flex;align-items:center;gap:18px}
.b-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin-bottom:20px}
.b-ph-h{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(30px,2.6vw,40px);line-height:.92;color:var(--paper)}
.b-ph-h small{display:block;margin-top:6px;font-size:.66em;color:var(--muted)}
.b-ph .more{flex:none;font-size:var(--fs-call-s);min-height:40px;white-space:nowrap}

/* ═════ tabs: the kit tab polygon, yellow when chosen (.b-yel), small (.b-sm), the sport strip (.b-strip, links) ═════ */
.tabs.b-yel .tab[aria-selected=true] span,.tabs.b-yel .tab[aria-pressed=true] span,.b-strip .tab[aria-current=page] span{background:var(--yellow);color:var(--ink)}
.b-strip .tab[aria-current=page] span{background:var(--orange)}
.tabs.b-sm .tab span{height:48px;padding:0 22px 0 24px;font-size:20px}
.tabs.b-sm{gap:8px}
.b-strip{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:8px}
.b-strip .tab{display:block}
.b-strip .tab span{padding:0 14px 0 16px;height:52px}
.b-strip .tab small{font-family:var(--data);font-style:normal;font-weight:700;font-size:var(--fs-floor);letter-spacing:.08em;color:var(--muted)}
.b-strip .tab[aria-disabled=true]{cursor:default}
.b-strip .tab[aria-disabled=true] span{color:#8E897E}
.b-dur{display:flex;align-items:center;gap:14px}
.b-dur-k{font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ═════ the switch (autoplay, auto-join): a plain track + knob, role=switch ═════ */
.b-sw{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;background:none;border:0;color:var(--paper);font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.12em;text-transform:uppercase}
.b-sw i{position:relative;display:block;width:56px;height:28px;background:var(--bg5);border:2px solid var(--ink);box-shadow:var(--sh-2);transition:background-color var(--t-key)}
.b-sw i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:var(--paper);transition:transform var(--t-key) var(--e-std)}
.b-sw[aria-checked=true] i{background:var(--yellow)}
.b-sw[aria-checked=true] i::after{transform:translateX(28px);background:var(--ink)}

/* ═════ the LOCKS IN ring: a clock (track + the time left), the label and the time inside ═════ */
.b-ring{--rs:104px;position:relative;flex:none;display:grid;place-items:center;align-content:center;gap:2px;width:var(--rs);height:var(--rs);border-radius:50%;background:var(--bg1);box-shadow:var(--sh-4);text-align:center}
.b-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.b-ring circle{fill:none;stroke-width:8}
.b-ring .t{stroke:var(--bg5)}
.b-ring .v{stroke:var(--orange);stroke-dasharray:calc(var(--k,1) * 100) 100;transition:stroke-dasharray .9s linear}
.b-ring[data-late] .v{stroke:var(--yellow)}
.b-ring small{position:relative;font-family:var(--data);font-weight:700;font-size:var(--fs-floor);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.b-ring b{position:relative;font-family:var(--data);font-weight:800;font-size:calc(var(--rs) * .25);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}

/* ═════ the scorebug: their scoreboard plate (skycam art), the team boxes, the score, the clock tab ═════ */
.b-bug{--bw:250px;--bu:calc(var(--bw) / 720);--bf:max(18px,calc(var(--bu) * 92));--bt:calc(var(--bu) * 64 - var(--bf) / 2);--bq:calc(var(--bt) + var(--bf) * .89 + max(4px,calc(var(--bu) * 12)));--bqh:max(20px,calc(var(--bu) * 50));position:relative;flex:none;display:flex;align-items:flex-start;justify-content:center;width:var(--bw);height:calc(var(--bq) + var(--bqh));color:var(--ink)}
/* the digits' box top --bt keeps them on the plate's middle; the time chip --bq sits under their baseline (.89 of the size at
   line-height 1) with a small gap, at every size, so it never cuts the digits (phone fix 2026-10-07) */
.b-bug>svg{position:absolute;inset:0;width:100%;height:calc(var(--bu) * 128);filter:drop-shadow(2px 2px 0 #000)}
.b-bug-t{position:absolute;top:calc(var(--bu) * 22);width:calc(var(--bu) * 132);height:calc(var(--bu) * 74);filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
.b-bug-t.a{left:calc(var(--bu) * 50)}.b-bug-t.b{right:calc(var(--bu) * 40)}
.b-bug-t i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;clip-path:polygon(7.4% 0,100% 0,92.6% 100%,0 100%);color:#fff;font-family:var(--shout);font-style:italic;font-weight:800;font-size:max(13px,calc(var(--bu) * 50));text-transform:uppercase;line-height:1}
.b-bug-s{position:relative;margin-top:var(--bt);font-family:var(--shout);font-style:italic;font-weight:800;font-size:var(--bf);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.b-bug-q{position:absolute;left:50%;top:var(--bq);transform:translateX(-50%);display:flex;align-items:center;height:var(--bqh);padding:0 10px;background:#0D0B08;color:var(--paper);font-family:var(--data);font-weight:700;font-size:max(11px,calc(var(--bu) * 30));letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* ═════ chips: the category chip (--clip-chip; label always, colour second), the round length, the status chip ═════ */
.b-chip{display:inline-flex;align-items:center;margin:0;height:30px;padding:0 18px 0 14px;background:var(--orange);color:var(--ink);font-family:var(--shout);font-style:italic;font-weight:800;font-size:19px;text-transform:uppercase;line-height:1;white-space:nowrap;clip-path:var(--clip-chip);filter:drop-shadow(var(--sh-2))}
.b-chip[data-cat=sports]{background:var(--orange)}
.b-chip[data-cat=memecoins]{background:var(--violet);color:var(--ink)}
.b-chip[data-cat=stocks]{background:var(--yellow)}
.b-chip[data-cat=live]{background:var(--orange)}
.b-chip[data-cat=quiet]{background:var(--bg5);color:var(--paper)}
/* the title chips (a tournament's daily titles) in the badge colours, the night + final chips */
.b-chip[data-cat=sharp]{background:var(--orange)}
.b-chip[data-cat=comeback]{background:var(--violet);color:#fff}
.b-chip[data-cat=streak]{background:var(--yellow)}
.b-chip[data-cat=night]{background:var(--violet);color:var(--ink)}
.b-chip[data-cat=final]{background:var(--yellow);color:var(--ink)}
.b-len{margin:0;padding:5px 9px 4px;background:var(--bg5);color:var(--muted);font-family:var(--data);font-weight:800;font-size:var(--fs-tick);letter-spacing:.06em;line-height:1}
.b-st{display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:32px;padding:0 12px;background:var(--bg5);color:var(--paper);font-family:var(--shout);font-style:italic;font-weight:800;font-size:18px;text-transform:uppercase;line-height:1;box-shadow:var(--sh-2);clip-path:var(--clip-chip)}
.b-st[data-st=won]{background:var(--yes);color:var(--ink)}
.b-st[data-st=live]{background:var(--yellow);color:var(--ink)}
.b-st[data-st=pending]{background:#57534C;color:var(--paper)}
.b-st[data-st=lost],.b-st[data-st=void]{background:var(--bg4);color:var(--muted)}
.b-side{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:30px;padding:0 10px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:18px;text-transform:uppercase;line-height:1;box-shadow:var(--sh-2);background:var(--yes);color:var(--ink)}
.b-side[data-side=no],.b-side[data-side=lower]{background:var(--no);color:#fff}
.delta.b-sm{padding:5px 9px 4px;font-size:var(--fs-key);box-shadow:var(--sh-2)}

/* ═════ the money: the pot, the estimate plates ═════ */
.b-pot{display:flex;align-items:baseline;gap:10px;margin:0}
.b-pot b{font-family:var(--data);font-weight:800;font-size:28px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-pot small{font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.b-pot.big{flex-direction:column;align-items:flex-start;gap:8px}
.b-pot.big b{font-size:clamp(28px,2.5vw,36px)}
.b-pot.big small{order:-1;font-family:var(--call);font-size:var(--fs-call-l);color:var(--muted)}
.b-est{display:flex;flex-direction:column;min-width:0;filter:drop-shadow(var(--sh-4))}
.b-est-h{margin:0;padding:10px 12px 8px;background:var(--yes);color:var(--ink);font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;text-transform:uppercase;line-height:1;text-align:center}
.b-est-b{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 14px;background:var(--bg1);border:2px solid var(--yes);border-top:0}
.b-est-b b{font-family:var(--data);font-weight:800;font-size:clamp(30px,2.8vw,40px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-est-b small{font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.b-est[data-side=no] .b-est-h{background:var(--no);color:#fff}
.b-est[data-side=no] .b-est-b{border-color:var(--no)}
.b-est b.bump{animation:bBump var(--t-depth) var(--e-out)}
@keyframes bBump{0%{color:var(--yellow);transform:scale(1.08)}100%{transform:none}}

/* ═════ the stat race bar: the kit .duel-bar.slash with its two labels (PASSING 37 ▲ | 15 RUSHING) ═════ */
.b-race{position:relative}
.b-race .duel-bar.slash{height:44px}
.b-race-l{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;line-height:1;pointer-events:none}
.b-race-l span:first-child{color:var(--ink)}
.b-race-l span:last-child{color:#fff;-webkit-text-stroke:1.5px #000;paint-order:stroke fill}
.b-race-l em{font-style:normal;font-size:.62em;vertical-align:.18em}

/* ═════ THE ON AIR CARD (V8B.air): a sports card (art strip + scorebug) or a price card (price, delta, mini chart), the ring,
   the question, the pot, the two side plates with their multipliers ═════ */
.b-air{position:relative;min-width:0;filter:drop-shadow(var(--sh-6));transition:transform var(--t-key) var(--e-std),filter var(--t-key) var(--e-std)}
@media (hover:hover){.b-air:hover{transform:translate(-2px,-2px);filter:drop-shadow(var(--sh-9))}}
.b-air:has(.b-air-a:focus-visible){outline:3px solid var(--orange);outline-offset:4px}
.b-air-a{color:inherit}
.b-air-a:focus-visible{outline:none}
.b-air-a::after{content:"";position:absolute;inset:0;z-index:1}
.b-air-f{position:relative;height:100%;clip-path:var(--clip-panel);background:var(--bg2);padding:22px 24px 26px 22px;display:flex;flex-direction:column}
.b-air-q{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.1vw,30px);line-height:.95;color:var(--paper)}
@media (hover:hover){.b-air:hover .b-air-q{color:var(--yellow)}}
.b-air-sides{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* the side plates: their own face wherever a .b-air-sides pair sits (an ON AIR card, a game card, a next round panel) */
.b-air-sides .mside{height:56px;font-size:22px;justify-content:center}
.b-air-sides .mside em{font-family:var(--shout);font-style:italic;font-size:22px;font-weight:800}
.b-air-sides .mside[aria-pressed=true]{transform:translate(3px,3px)}
/* sports: the art strip with the chip, the scorebug and the ring over it */
.b-air[data-kind=sports] .b-air-f{padding:0 0 24px}
.b-air-art{position:relative;height:178px;margin:12px 12px 0;overflow:hidden;clip-path:var(--clip-field);background:var(--ink)}
.b-air-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--obj,50% 30%)}
.b-air-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.35),rgba(11,11,11,0) 45%)}
.b-air-art .b-chip{position:absolute;left:12px;top:16px;z-index:2}
.b-air-art .b-bug{position:absolute;left:160px;top:10px;z-index:2}
.b-air[data-kind=sports] .b-ring{position:absolute;right:24px;top:52px;z-index:3}
.b-air-sb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"q s" "p s";align-items:center;gap:14px 20px;padding:20px 24px 0 26px}
.b-air-sb .b-air-q{grid-area:q}.b-air-sb .b-pot{grid-area:p}.b-air-sb .b-air-sides{grid-area:s}
/* price: chip + round length, the instrument + price + delta, the chart beside the ring, the question, the pot, the sides */
.b-air-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.b-air-px{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:14px 0 0}
.b-air-tk{display:flex;align-items:center;gap:10px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;text-transform:uppercase;line-height:1;color:var(--paper)}
.b-air-tk span{display:block;width:40px;height:40px}
.b-air-tk svg{width:100%;height:100%;display:block}
.b-air-px>b{font-family:var(--data);font-weight:800;font-size:22px;color:var(--paper);font-variant-numeric:tabular-nums}
.b-air-px .delta{margin-left:auto}
.b-air-ch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin:14px 0 6px}
.b-spark{display:block;width:100%;height:84px;overflow:visible}
.b-spark path{fill:none;stroke:var(--tone,var(--orange));stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.b-spark path.a{fill:var(--tone,var(--orange));stroke:none;opacity:.14}
.b-spark circle{fill:var(--tone,var(--orange))}
.b-air[data-kind=price] .b-air-q{margin-top:6px;min-height:1.9em}
.b-air[data-kind=price] .b-ring{--rs:92px}
.b-air[data-kind=price] .b-pot{margin:12px 0 0}
.b-air[data-kind=price] .b-air-sides{margin-top:auto;padding-top:16px}
.b-airs{list-style:none;margin:0;padding:0;display:grid;gap:28px 26px}
.b-airs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-airs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.b-airs>li[hidden]{display:none}
.b-airs+.b-airs{margin-top:28px}
.b-airs[hidden]{display:none}

/* ═════ the up next tile, the recent result tile ═════ */
.b-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:22px}
.b-tiles.res{--n:5}
.b-nt,.b-rt{position:relative;filter:drop-shadow(var(--sh-5));min-width:0}
.b-nt-f,.b-rt-f{height:100%;clip-path:var(--clip-panel);background:var(--bg2)}
.b-nt-f{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"c k" "m h" "m q";gap:6px 14px;align-items:center;padding:20px 22px 22px 20px}
.b-nt-c{grid-area:c;font-family:var(--data);font-weight:800;font-size:26px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-nt .b-chip{grid-area:k;justify-self:start}
.b-nt-m{grid-area:m;display:block;width:64px;height:64px}
.b-nt-m svg{width:100%;height:100%;display:block}
.b-nt-h{grid-area:h;margin:4px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;text-transform:uppercase;line-height:.95;color:var(--paper)}
.b-nt-q{grid-area:q;margin:0;align-self:start;font-family:var(--call);font-size:var(--fs-call-s);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1.15}
.b-nt-a{color:inherit}.b-nt-a::after{content:"";position:absolute;inset:0}
.b-nt:has(.b-nt-a:focus-visible){outline:3px solid var(--orange);outline-offset:4px}.b-nt-a:focus-visible{outline:none}
@media (hover:hover){.b-nt:hover .b-nt-h{color:var(--yellow)}}
.b-rt-f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:18px 20px 20px 18px;align-items:start}
.b-arw{grid-row:span 3;display:grid;place-items:center;width:40px;height:40px;background:var(--bg1);border:2px solid var(--line);font-size:20px;line-height:1;color:var(--yes)}
.b-arw[data-dir=down]{color:var(--red-soft)}
.b-rt-n{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;line-height:1;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-rt-s{margin:0;font-family:var(--data);font-weight:700;font-size:var(--fs-tick);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.b-rt-v{margin:2px 0 0;font-family:var(--data);font-weight:800;font-size:20px;color:var(--paper);font-variant-numeric:tabular-nums}
.b-rt-v.up{color:var(--yes)}
.b-rt-v small{font-size:var(--fs-floor);font-weight:700;letter-spacing:.08em;color:var(--muted);margin-left:6px}

/* ═════ the promo panels: the art banner with a cream sign (.b-promo) and the art pair (.b-duo) ═════ */
.b-promo{position:relative;filter:drop-shadow(var(--sh-9))}
.b-promo-f{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:300px;padding:40px 52px 44px 44px;clip-path:var(--clip-panel);background:var(--violet-deep);overflow:hidden;container-type:inline-size}
.b-promo-art{position:absolute;inset:0}
.b-promo-art img{width:100%;height:100%;object-fit:cover;object-position:var(--obj,60% 40%)}
.b-promo-art .art-loop{object-position:var(--obj,60% 40%)}
.b-sign{position:relative;z-index:1;max-width:520px;margin:0;padding:30px 44px 34px 34px;background:var(--paper);color:var(--ink);clip-path:var(--clip-sign);transform:rotate(-2deg);filter:drop-shadow(var(--sh-5))}
.b-sign b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(36px,4.4vw,62px);line-height:.88}
.b-sign span{display:block;margin-top:12px;font-family:var(--read);font-size:var(--fs-read);line-height:1.3;color:#3A362F}
.b-promo .plate{position:relative;z-index:1;flex:none}
.b-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.b-duo .b-promo-f{flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:360px;padding:36px 36px 38px}
.b-duo .b-promo-f::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(14,13,12,.9) 0,rgba(14,13,12,.55) 46%,rgba(14,13,12,0) 74%)}
.b-duo .b-promo-f.r::before{background:linear-gradient(90deg,rgba(33,13,73,.92) 0,rgba(33,13,73,.65) 48%,rgba(33,13,73,0) 78%)}
.b-duo .b-promo-f.r{justify-content:center}
.b-duo-h{position:relative;z-index:2;margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(34px,3.6vw,52px);line-height:.88;color:var(--paper);text-shadow:3px 3px 0 var(--shadow)}
.b-duo-p{position:relative;z-index:2;margin:12px 0 0;max-width:30ch;font-family:var(--read);font-size:var(--fs-read);line-height:1.35;color:var(--paper)}
.b-duo .plate{position:relative;z-index:2;margin-top:20px}

/* ═════ THE ROUND PANEL (a game centre's live round): the tag, the question, LOCKS IN, the pot, the estimates, the ticket ═════ */
.b-rnd{padding:30px 34px 30px 32px}
.b-rnd-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start}
.b-rnd-q{margin:14px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(34px,3.3vw,48px);line-height:.92;color:var(--paper)}
.b-lockin{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;padding:16px 30px 18px 26px;background:var(--yellow);color:var(--ink);clip-path:var(--clip-sign);transform:rotate(-2deg);filter:drop-shadow(var(--sh-5))}
.b-lockin small{font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.b-lockin b{font-family:var(--data);font-weight:800;font-size:clamp(36px,3.4vw,50px);line-height:1;font-variant-numeric:tabular-nums}
.b-lockin[data-state=closed]{background:var(--bg4);color:var(--paper)}
.b-lockin[data-state=closed] b{font-size:26px;font-family:var(--shout);font-style:italic;text-transform:uppercase}
.b-rnd-mid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:end;margin-top:28px}
.b-rnd-amt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"l l" "a c";gap:10px 18px;align-items:center;margin-top:26px}
.b-rnd-amt .tkt-lbl{grid-area:l}
.b-rnd-amt .amt{grid-area:a;margin:0}
.b-rnd-amt .chips{grid-area:c;margin:0}
.amt.b-dark{background:var(--bg1);color:var(--paper);box-shadow:var(--sh-4);border:0}
.amt.b-dark input{text-align:left;color:var(--paper)}
.amt.b-dark span{color:var(--paper)}
.amt.b-dark input::placeholder{color:#6E695F}
.chips.b-c4{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.chips.b-c4 button{min-width:0}
.chips.b-c4 span{background:var(--bg4);font-size:17px}
.chips.b-c4 button[aria-pressed=true] span{background:var(--yellow);color:var(--ink)}
.b-rnd .sides{flex-direction:row;gap:18px;margin-top:24px}
.b-rnd .side{height:72px;font-size:34px}
.b-rnd .tkt-msg{min-height:0;margin:14px 0 0;text-align:center}
.b-rnd .tkt-msg:empty{display:none}
.b-rnd .tkt-fine{margin-top:14px}

/* ═════ the rows: next rounds, your positions, the play-by-play, the live activity ═════ */
.b-list{padding:28px 30px 28px 28px}
.b-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.b-nr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;min-height:76px;padding:12px 18px 12px 14px;background:var(--b-row);border:2px solid var(--ink)}
.b-num{display:grid;place-items:center;width:40px;height:40px;background:var(--orange);color:var(--ink);font-family:var(--data);font-weight:800;font-size:19px;box-shadow:var(--sh-2)}
.b-nr p{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0}
.b-nr small{font-family:var(--call);font-size:var(--fs-call-s);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.b-nr b{font-family:var(--call);font-weight:500;font-size:var(--fs-call-l);letter-spacing:.04em;text-transform:uppercase;color:var(--paper);line-height:1.05}
.b-eta{display:flex;align-items:center;gap:8px;font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--paper);white-space:nowrap}
.b-eta svg{width:20px;height:20px;color:var(--paper)}
.b-pos{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:72px;padding:10px 16px 10px 0;background:var(--b-row);border:2px solid var(--ink)}
.b-pos-k{align-self:stretch;display:grid;place-items:center;border-right:2px solid var(--ink);font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--muted)}
.b-pos p{margin:0;font-family:var(--call);font-size:var(--fs-call);letter-spacing:.04em;text-transform:uppercase;color:var(--paper);line-height:1.1}
.b-pos>b{font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums}
.b-pos>b.pnlt[data-t=up]{color:var(--yes)}
.b-pos.new{animation:v8LogIn var(--t-reveal) var(--e-out)}
.b-empty{margin:0;padding:22px 18px;border:2px dashed var(--line);font-family:var(--read);font-size:var(--fs-read-s);color:var(--muted);text-align:center}
.b-pbp{list-style:none;margin:0;padding:0}
.b-pbp li{position:relative;display:grid;grid-template-columns:28px 64px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:62px;border-bottom:2px solid var(--b-rule)}
.b-pbp li:last-child{border-bottom:0}
.b-pbp li::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:#5B5A2E}
.b-pbp li:first-child::before{top:50%}.b-pbp li:last-child::before{bottom:50%}
.b-pbp li:only-child::before{display:none}
.b-pbp i{position:relative;z-index:1;justify-self:center;width:14px;height:14px;border-radius:50%;background:#77753A;border:2px solid var(--ink)}
.b-pbp li.now i{width:20px;height:20px;background:var(--yellow);box-shadow:0 0 0 4px rgba(250,244,36,.22)}
.b-pbp time{font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--muted);font-variant-numeric:tabular-nums}
.b-pbp li.now time{color:var(--paper)}
.b-pbp span{font-family:var(--data);font-weight:700;font-size:var(--fs-field);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);min-width:0}
.b-pbp li.now span{color:var(--paper)}
.b-pbp li.new{animation:v8LogIn var(--t-reveal) var(--e-out)}
.b-lab{position:relative;display:inline-grid;place-items:center;height:36px;padding:0 16px;color:var(--ink);filter:drop-shadow(2px 2px 0 #000)}
.b-lab svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--yellow)}
.b-lab b{position:relative;font-family:var(--shout);font-style:italic;font-weight:800;font-size:18px;text-transform:uppercase;line-height:1;white-space:nowrap}
.b-lab[data-tone=yes] svg{fill:var(--yes)}
.b-pbp .b-lab,.b-pbp li.now .b-lab{color:var(--ink);justify-self:end}
.b-act{list-style:none;margin:0;padding:0}
.b-act li{display:grid;grid-template-columns:40px minmax(0,1fr) 72px 64px 64px;align-items:center;gap:14px;min-height:52px;border-bottom:2px solid var(--b-rule)}
.b-act li:last-child{border-bottom:0}
.b-act li.new{animation:v8LogIn var(--t-reveal) var(--e-out)}
.b-av{width:40px;height:40px;object-fit:cover;clip-path:var(--clip-hex);background:var(--bg4)}
.b-act-n{font-family:var(--data);font-weight:700;font-size:var(--fs-field);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-act-a{font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--paper);text-align:right;font-variant-numeric:tabular-nums}
.b-act .b-side{justify-self:center;min-width:52px;height:28px;font-size:17px}
.b-act time{font-family:var(--data);font-weight:500;font-size:var(--fs-key);color:var(--muted);text-align:right;white-space:nowrap}

/* ═════ the resolved round: the chip, the question, start / end, the burst with the winning side ═════ */
.b-rsv{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:24px 36px;padding:30px 40px 32px 34px}
.b-rsv-q{margin:16px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(30px,2.7vw,40px);line-height:.92;color:var(--paper)}
.b-rsv-src{margin:12px 0 0;font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b-rsv .b-st{min-width:0;height:40px;padding:0 22px 0 18px;font-size:24px;gap:10px}
.b-se{display:grid;grid-template-columns:1fr 1fr;gap:0}
.b-se>div{padding:0 26px}
.b-se>div+div{border-left:2px solid var(--line)}
.b-se>div:first-child{padding-left:0}
.b-se h4{margin:0 0 12px;font-family:var(--data);font-weight:700;font-size:var(--fs-tick);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.b-se dl{margin:0;display:grid;grid-template-columns:auto auto;justify-content:start;gap:8px 18px}
.b-se dt{font-family:var(--data);font-weight:700;font-size:var(--fs-field);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.b-se dd{margin:0;font-family:var(--data);font-weight:800;font-size:22px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-won{display:flex;flex-direction:column;align-items:center;gap:8px}
.b-won .burst{width:150px;height:126px;background:var(--yes);font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;text-transform:uppercase;line-height:.88;text-align:center;filter:drop-shadow(var(--sh-4))}
.b-won .burst[data-side=no]{background:var(--no);color:#fff}
.b-won b{font-family:var(--data);font-weight:800;font-size:26px;color:var(--paper)}

/* ═════ the broadcast stage: the skycam in a torn frame + the headline sign over the end zone (never over the CADE wordmark at
   midfield; the phone: above it) ═════ */
.b-stage{position:relative}
.b-stage .skc{filter:drop-shadow(var(--sh-9))}
.b-stage .skc-st{clip-path:var(--clip-panel)}
.b-stage-sign{position:absolute;z-index:7;right:calc(var(--u,1px) * 70);top:calc(var(--u,1px) * 250);max-width:calc(var(--u,1px) * 460);margin:0;padding:calc(var(--u,1px) * 34) calc(var(--u,1px) * 44) calc(var(--u,1px) * 40) calc(var(--u,1px) * 36);background:var(--orange);color:var(--ink);clip-path:var(--clip-sign);transform:rotate(3deg);filter:drop-shadow(5px 5px 0 #000);
  font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:max(20px,calc(var(--u,1px) * 88));line-height:.88;pointer-events:none}
.b-stage-sign span{display:block}
.b-stage .skc[data-l=tall]~.b-stage-sign,.b-stage .skc[data-l=tall] .b-stage-sign{display:none}
.b-stage-top{display:none}
.b-stage-keys{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:20px}
.b-stage-note{margin:0;font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ═════ TOURNAMENT parts: the stats row + day clock, credits loaded, standings, daily titles, the schedule strip, the live game card ═════ */
.b-stats{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;background:var(--bg1);border:2px solid var(--ink);box-shadow:var(--sh-5)}
.b-stat{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 26px}
.b-stat+.b-stat{border-left:2px solid var(--line)}
.b-stat b{font-family:var(--data);font-weight:800;font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-stat small{font-family:var(--call);font-size:var(--fs-call);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.b-stat.clock b{display:flex;align-items:center;gap:10px;color:var(--yellow)}
.b-stat.clock svg{width:28px;height:28px}
.b-loaded{position:relative;display:flex;align-items:center;gap:22px;filter:drop-shadow(var(--sh-7))}
.b-loaded-f{flex:1;display:flex;align-items:center;gap:24px;padding:14px 40px 16px 18px;background:var(--paper);color:var(--ink);clip-path:var(--clip-sign)}
.b-loaded img{flex:none;width:96px;height:96px;object-fit:cover;clip-path:var(--clip-hex)}
.b-loaded b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(26px,2.8vw,40px);text-transform:uppercase;line-height:.9}
.b-loaded small{display:block;margin-top:8px;font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;color:#4A453B}
.b-stand{width:100%;border-collapse:collapse}
/* the builder's standings (.b-standf): fixed columns, the name gives way (ellipsis), never runs into the credits (phone fix 2026-10-07) */
.b-standf{table-layout:fixed}
.b-standf td:nth-child(3),.b-standf th:nth-child(3){width:7.4em}
.b-pl-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-stand th{padding:0 10px 10px;font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:2px solid var(--b-rule)}
.b-stand td{padding:8px 10px;height:56px;border-bottom:2px solid var(--b-rule);font-family:var(--data);font-weight:700;font-size:var(--fs-field);text-transform:uppercase;color:var(--paper)}
.b-stand td:first-child,.b-stand th:first-child{width:56px;font-weight:800}
.b-stand td:last-child,.b-stand th:last-child{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.b-stand th[scope=row]{padding:8px 10px;height:56px;border-bottom:2px solid var(--b-rule);font-family:var(--data);font-weight:700;font-size:var(--fs-field);text-transform:uppercase;color:var(--paper);text-align:left}
.b-stand .b-pl{display:flex;align-items:center;gap:12px;min-width:0}
.b-stand .b-av{flex:none}
.b-stand .b-av{width:36px;height:36px}
/* YOU: the deep violet with white type (7:1; the light violet held ink or white at 4.4:1) */
.b-stand tr.you td,.b-stand tr.you th{background:var(--violet-deep);color:#fff;border-bottom-color:var(--ink)}
/* the optional title column (standings(rows, {title})): a crown for the leader, a dot for no title */
.b-stand4 td:last-child,.b-stand4 th:last-child{width:64px;text-align:center}
.b-stand4 td:nth-child(3),.b-stand4 th:nth-child(3){text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.b-crown{display:inline-block;width:32px;height:32px;vertical-align:middle;clip-path:var(--clip-hex)}
/* the cut-out art (V8B.cut): the picture steps out of the layout, the img keeps it; the art is its own shape on any colour, so no
   hexagon clip, no dark ground, nothing cropped */
.b-cut{display:contents}
.b-cut>img{object-fit:contain!important;clip-path:none!important;background:none!important}
.b-nil{color:var(--muted-2)}
.b-stand tr.you .b-nil{color:inherit}
.b-stand tr.gap td{height:28px;text-align:center;color:var(--muted)}
.b-titles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:18px}
.b-title{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.b-title img{width:118px;height:118px;object-fit:cover}
.b-title .b-chip{margin-top:-14px;position:relative;padding-right:24px}
.b-title p:not(.b-chip){margin:12px 0 0;font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.35}
.b-title p b{display:block;font-size:var(--fs-field);color:var(--paper)}
.b-sched{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:8px}
.b-sched li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 14px;background:var(--b-row);border:2px solid var(--ink);font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.b-sched li b{font-size:var(--fs-key);color:var(--paper)}
.b-sched li i{display:grid;place-items:center;height:26px;font-style:normal;font-family:var(--shout);font-style:italic;font-weight:800;font-size:19px;color:var(--yes)}
.b-sched li i svg{width:20px;height:20px;color:var(--muted)}
.b-sched li[data-st=live]{background:var(--yellow);color:var(--ink);box-shadow:var(--sh-3)}
.b-sched li[data-st=live] b,.b-sched li[data-st=live] i{color:var(--ink)}
.b-sched li[data-st=next]{background:var(--b-row);border-color:var(--yellow);box-shadow:var(--sh-3)}
.b-sched li[data-st=next] i{color:var(--yellow);font-size:17px}
/* the champion under a played day: their hexagon + handle */
.b-champ{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:2px;font-size:var(--fs-floor);color:var(--paper);max-width:100%}
.b-champ>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-champ .b-av{width:36px;height:36px}
.b-sched li[data-st=live] .b-champ{color:var(--ink)}
.b-gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px}
.b-gc{position:relative;filter:drop-shadow(var(--sh-6));min-width:0}
.b-gc-f{height:100%;clip-path:var(--clip-panel);background:var(--bg2);padding:14px 16px 20px;display:flex;flex-direction:column;gap:14px}
.b-gc-art{position:relative;height:150px;overflow:hidden;clip-path:var(--clip-field);background:var(--ink)}
.b-gc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--obj,50% 40%)}
.b-gc-art .b-bug{--bw:184px;position:absolute;left:50%;top:8px;transform:translateX(-50%)}
/* the skycam still (V8B.still): the frame fills the art box, the play (the arc, the ball, the lines) kept in view */
.b-gc-still{position:absolute;inset:0}
.b-gc-art .b-gc-still img{object-position:var(--fobj,58% 50%)}
.b-gc-art .b-chip{position:absolute;left:8px;bottom:10px}
.b-gc-q{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.b-gc-q h3{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;line-height:.95;color:var(--paper)}
.b-gc-q .clk b{font-size:20px}
.b-gc .b-air-sides .mside{height:56px}
.b-gc-field{position:absolute;inset:0;width:100%;height:100%}
.b-gc-a{color:inherit;text-decoration:none}
.b-gc-a::after{content:"";position:absolute;inset:0;z-index:1}
.b-gc-a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.b-gc .b-air-sides,.b-gc-q .clk{position:relative;z-index:2}
@media (hover:hover){.b-gc:hover .b-gc-q h3{color:var(--yellow)}}
.b-gc-pot{margin:0;font-family:var(--data);font-weight:800;font-size:var(--fs-key);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.b-gc-pot b{color:var(--paper)}

/* ═════ the demo toast (V8B.say): one line, bottom centre, 2.4s ═════ */
.b-toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:calc(100vw - 32px);transform:translate(-50%,16px);padding:12px 18px 11px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--sh-4);font-family:var(--data);font-weight:800;font-size:var(--fs-key);letter-spacing:.06em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity var(--t-fade),transform var(--t-fade) var(--e-out)}
.b-toast.on{opacity:1;transform:translate(-50%,0)}

/* ═════ the footer (V8B.footer): the concept's one row of doors + the shipped legal lines ═════ */
.bfoot .foot-top{align-items:center}
.bfoot .foot-cols{gap:8px 34px;flex-wrap:wrap}
.bfoot .foot-cols a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--call);font-size:var(--fs-call);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
@media (hover:hover){.bfoot .foot-cols a:hover{color:var(--yellow)}}

/* ═════ motion off: reduced motion and ?static ═════ */
@media (prefers-reduced-motion:reduce){.b-air,.b-add,.b-sw i,.b-sw i::after,.b-ring .v,.b-toast,.b-me-b svg{transition:none}.b-est b.bump,.b-pos.new,.b-pbp li.new,.b-act li.new{animation:none}}
html.static .b-ring .v,html.static .b-air{transition:none}
html.static .b-est b.bump,html.static .b-pos.new,html.static .b-pbp li.new,html.static .b-act li.new{animation:none}

/* ═════ the 1180 / 1100 / 1023 / 860 / 760 / 360 rungs ═════ */
@media (max-width:1180px){
  .bnav .nav-links a{padding:0 10px}
  .b-bal{font-size:var(--fs-field);height:44px}
  .b-page{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h h" "t d"}
  .b-page>div:first-child{grid-area:h}.b-page .tabs{grid-area:t}.b-page-rule{display:none}.b-page .b-dur{grid-area:d}
  .b-air-art .b-bug{--bw:210px;left:140px}
  .b-airs.three{gap:22px 18px}
  .b-air[data-kind=price] .b-air-f{padding:20px 18px 22px}
  .b-air .mside{font-size:19px}.b-air .mside em{font-size:19px}
  .b-tiles{gap:16px}
  .b-rsv{grid-template-columns:minmax(0,1fr) auto;padding:28px 30px}
  .b-rsv .b-se{grid-column:1;grid-row:2}
  .b-rsv .b-won{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:1100px){
  .b-air-sb{grid-template-columns:1fr;grid-template-areas:"q" "p" "s"}
  .b-airs.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-tiles{--n:2}
  .b-tiles.res{--n:3}
  .b-gcards{--n:2}
}
@media (max-width:1023px){
  .b-cols,.b-cols.even{grid-template-columns:1fr}
  .b-rnd-mid{grid-template-columns:1fr 1fr}
  .b-rnd-mid .b-pot{grid-column:1 / -1}
  .b-strip{--n:4}
  .b-duo{grid-template-columns:1fr}
  .b-promo-f{flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
}
@media (max-width:860px){
  .bnav .b-acct{margin-left:auto}
}
@media (max-width:760px){
  .b9{--b-sec:56px}
  .b-main{padding-top:84px}
  .bnav .nav-in{gap:10px}
  .b-acct{gap:10px}
  .b-bal{height:40px;padding-left:10px;font-size:var(--fs-key)}
  .b-bal>span{padding-right:8px}
  .b-add{width:40px;min-height:40px;font-size:20px}
  .b-me-b img{width:40px;height:40px}
  .b-me-b svg{display:none}
  .b-page{grid-template-columns:1fr;grid-template-areas:"h" "t" "d";gap:16px;padding-bottom:18px}
  .b-page-h{font-size:clamp(44px,13vw,56px)}
  .b-page .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .b-page .tabs .tab span{padding:0 6px;font-size:clamp(14px,4.2vw,18px)}
  .tabs.b-sm .tab span{height:44px;padding:0 14px 0 16px;font-size:17px}
  .b-hd{margin-bottom:18px;gap:8px 14px}
  .b-hd-h{font-size:clamp(32px,9.6vw,40px)}
  .b-hd-p{flex:1 0 100%;order:3;font-size:15px}
  .b-ph-h{font-size:clamp(28px,8.4vw,34px)}
  .b-stack{gap:24px}
  .b-airs.two,.b-airs.three{grid-template-columns:1fr;gap:24px}
  .b-airs+.b-airs{margin-top:24px}
  .b-air-f{padding:20px 20px 22px 18px}
  .b-air-art{height:150px;margin:10px 10px 0}
  .b-air-art .b-bug{--bw:190px;left:auto;right:10px;top:auto;bottom:6px}
  .b-air[data-kind=sports] .b-ring{--rs:84px;top:24px;right:20px}
  .b-air-sb{padding:18px 20px 0 18px;gap:12px}
  .b-air .mside{height:52px}
  .b-spark{height:72px}
  .b-tiles,.b-tiles.res{--n:1;gap:14px}
  .b-nt-f{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"m h c" "m q k";padding:16px 18px 18px 16px}
  .b-nt-m{width:52px;height:52px}
  .b-nt-q{align-self:center}
  .b-nt .b-chip{justify-self:end}
  .b-rt-f{padding:16px 18px 18px 16px}
  .b-promo-f{min-height:0;padding:28px 22px 30px;aspect-ratio:auto}
  .b-promo-f .b-promo-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,12,0) 30%,rgba(14,13,12,.55))}
  .b-sign{max-width:100%;padding:22px 30px 26px 24px}
  .b-sign b{font-size:clamp(32px,10vw,44px)}
  .b-sign span{font-size:16px}
  .b-promo .plate{margin-top:120px}
  .b-duo .b-promo-f{min-height:340px;padding:28px 22px 30px}
  .b-strip{--n:4;gap:6px}
  .b-strip .tab span{height:46px;padding:0 4px;font-size:16px;flex-direction:column;gap:0;line-height:.95}
  .b-rnd{padding:24px 20px 24px 18px}
  .b-rnd-top{grid-template-columns:1fr}
  .b-lockin{justify-self:start;flex-direction:row;gap:12px;padding:12px 26px 14px 20px}
  .b-lockin small{font-size:19px}
  .b-lockin b{font-size:34px}
  .b-rnd-q{font-size:clamp(28px,8.4vw,36px)}
  .b-rnd-mid{gap:14px;margin-top:22px}
  .b-est-h{font-size:24px;padding:8px 10px 6px}
  .b-est-b{padding:12px 8px 10px}
  .b-rnd-amt{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "a" "c"}
  .b-rnd .sides{gap:12px;margin-top:20px}
  .b-rnd .side{height:62px;font-size:26px}
  .b-list{padding:22px 18px 22px 16px}
  .b-nr{gap:12px;padding:10px 12px 10px 10px}
  .b-nr b{font-size:19px}
  .b-pos{grid-template-columns:38px minmax(0,1fr) auto;grid-template-areas:"k q q" "k s v";gap:8px 12px;padding:10px 12px 10px 0}
  .b-pos-k{grid-area:k}.b-pos p{grid-area:q;font-size:17px}.b-pos .b-st{grid-area:s;justify-self:start}.b-pos>b{grid-area:v}
  .b-pbp li{grid-template-columns:28px 52px minmax(0,1fr);grid-template-areas:"i t w" "i t l";gap:4px 10px;padding:10px 0}
  .b-pbp i{grid-area:i}.b-pbp time{grid-area:t;font-size:var(--fs-key)}.b-pbp span{grid-area:w;font-size:var(--fs-key)}.b-pbp .b-lab{grid-area:l;justify-self:start;height:30px}
  .b-lab b{font-size:16px}
  .b-act li{grid-template-columns:36px minmax(0,1fr) auto auto;grid-template-areas:"av n a s" "av t t t";gap:2px 10px;padding:8px 0}
  .b-act .b-av{grid-area:av;width:36px;height:36px}.b-act-n{grid-area:n;font-size:var(--fs-key)}.b-act-a{grid-area:a;font-size:var(--fs-key)}.b-act .b-side{grid-area:s;min-width:44px;height:26px;font-size:15px}.b-act time{grid-area:t;text-align:left;font-size:var(--fs-floor)}
  .b-rsv{grid-template-columns:1fr;padding:24px 20px 26px;gap:22px}
  .b-rsv .b-se,.b-rsv .b-won{grid-column:auto;grid-row:auto}
  .b-rsv .b-won{flex-direction:row;justify-content:flex-start;gap:18px}
  .b-se>div{padding:0 14px}
  .b-se dd{font-size:19px}
  .b-se dt{font-size:var(--fs-key)}
  .b-won .burst{width:128px;height:108px;font-size:26px}
  .b-stage-top{display:block;margin:0 0 16px}
  .b-stage-top .b-sign{display:inline-block;background:var(--orange);transform:rotate(-2deg)}
  .b-stage-top .b-sign b{font-size:clamp(30px,9.6vw,40px)}
  .b-stage-keys{margin-top:14px}
  .b-race .duel-bar.slash{height:40px}.b-race-l{font-size:20px}
  .b-stats{display:grid;grid-template-columns:1fr 1fr}
  .b-stat{padding:12px 16px}.b-stat:first-child{grid-column:1 / -1}
  .b-stat+.b-stat{border-left:0;border-top:2px solid var(--line)}.b-stat:nth-child(3){border-left:2px solid var(--line)}
  .b-loaded-f{gap:14px;padding:12px 26px 14px 12px}
  .b-loaded img{width:64px;height:64px}
  .b-titles{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.b-title img{width:84px;height:84px}.b-title .b-chip{font-size:15px;height:26px;padding:0 20px 0 10px}
  .b-sched{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b-gcards{--n:1}
  .b-stand4 td:last-child,.b-stand4 th:last-child{width:56px;padding-left:4px;padding-right:4px}
}
@media (max-width:360px){
  /* the balance pill hides on the narrowest phones; in tournament mode the credits are the page's currency, they stay */
  .b-bal:not(.cr){display:none}
  .b-bal.cr{height:38px;padding:0 10px;font-size:var(--fs-key)}
  .b-bal.cr small{font-size:var(--fs-floor);margin-left:4px}
  .b-strip .tab span{font-size:14px}
  .b-air-art .b-bug{--bw:168px}
  .b-air[data-kind=sports] .b-ring{--rs:76px}
  .b-air .mside,.b-air .mside em{font-size:17px}
  .b-air-tk{font-size:26px}.b-air-px>b{font-size:19px}
  .b-page .tabs .tab span{font-size:13px}
  .b-rnd .side{font-size:22px}
  .b-est-b b{font-size:26px}
  .chips.b-c4{gap:6px}.chips.b-c4 span{font-size:15px}
  .b-act li{grid-template-columns:32px minmax(0,1fr) auto auto;gap:2px 8px}.b-act .b-av{width:32px;height:32px}
}
.b-rnd .tkt-msg[data-bad]{color:#FF7A8A}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE SHARED PIECES (2026-10-06 consolidation): what the v9 pages built on their own and two or more of them use, or that is
   plainly generic. One name per concept; where two pages drew the same concept two ways the look is a modifier on that name.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═════ the step number in a tone (V8B.num(n, tone)) ═════ */
.b-num[data-tone=violet]{background:var(--violet)}
.b-num[data-tone=yellow]{background:var(--yellow)}
.b-num[data-tone=orange]{background:var(--orange)}

/* ═════ the prize status chip (V8B.prize): Awarded green → Verifying yellow → Paid violet; always a word ═════ */
.b-prize{display:inline-flex;align-items:center;justify-content:center;min-width:110px;height:32px;padding:0 14px 0 12px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:18px;text-transform:uppercase;line-height:1;color:var(--ink);clip-path:var(--clip-chip);filter:drop-shadow(var(--sh-2))}
.b-prize[data-st=awarded]{background:var(--yes)}
.b-prize[data-st=verifying]{background:var(--yellow)}
.b-prize[data-st=paid]{background:var(--violet);color:#fff}

/* ═════ their LIVE tag in a section head (V8B.livetag) ═════ */
.b-livetag{--lt-w:148px;flex:none}

/* ═════ in-page section tabs (.b-ttabs + V8B.spy): anchors, the section in view yellow. .fill: equal columns (the NFL pages);
   on a kit .tabs row they wrap ═════ */
.b-ttabs .tab[aria-current] span{background:var(--yellow);color:var(--ink)}
.b-ttabs.tabs{flex-wrap:wrap}
.b-ttabs.fill{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px}
.b-ttabs.fill .tab{display:block}
.b-ttabs.fill .tab span{height:58px;padding:0 12px}
@media (hover:hover){.b-ttabs.fill .tab:hover{transform:translate(-2px,-2px)}}

/* ═════ the tip-off card (V8B.tipCard): the two team colour boxes (V8B.tbox: abbreviations, never logos), the clock, View game ═════ */
.b-tip{position:relative;filter:drop-shadow(var(--sh-6));min-width:0}
.b-tip-f{height:100%;clip-path:var(--clip-panel);background:var(--bg2);padding:16px 16px 22px;display:flex;flex-direction:column;align-items:stretch;gap:18px}
.b-tip-f .b-chip{align-self:flex-start}
.b-tip-tm{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.b-tbox{display:grid;place-items:center;height:84px;background:var(--tc);color:#fff;border:2px solid var(--ink);font-family:var(--shout);font-style:italic;font-weight:800;font-size:32px;text-transform:uppercase;line-height:1;text-shadow:2px 2px 0 var(--shadow)}
.b-tip-c{display:flex;flex-direction:column;align-items:center;gap:8px;margin:auto 0 0;font-family:var(--data)}
.b-tip-c small{font-weight:700;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.b-tip-c b{font-weight:800;font-size:clamp(28px,2.6vw,36px);line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.b-tip-go{display:flex;align-items:center;justify-content:center;height:56px;background:var(--bg4);border:2px solid var(--line);box-shadow:var(--sh-3);color:var(--paper);font-family:var(--shout);font-style:italic;font-weight:800;font-size:21px;text-transform:uppercase;text-decoration:none;transition:transform var(--t-key) var(--e-std),box-shadow var(--t-key) var(--e-std)}
.b-tip-go:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
@media (hover:hover){.b-tip-go:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shadow);border-color:var(--paper)}}
.b-tip-go:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}

/* ═════ a key row under a stage (replay, pause) ═════ */
.b-keys{display:flex;flex-wrap:wrap;gap:12px}
.b-keys[hidden]{display:none}

/* ═════ a dark CTA plate (paper type): V8.plate(label, {fill:'#2A2724', cls:'b-dark'}) ═════ */
.plate.b-dark{color:var(--paper)}

/* ═════ an empty list row: the line + its bold lead ═════ */
.b-rows .b-empty,.b-act .b-empty{list-style:none;display:block;padding:34px 18px}
.b-empty b{display:block;margin-bottom:6px;font-family:var(--call);font-weight:500;font-size:var(--fs-call-l);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}

/* ═════ the lock sticker's second line (the round length under LOCKS IN) ═════ */
.b-lock-s{font-family:var(--data);font-weight:800;font-size:var(--fs-floor);letter-spacing:.08em;text-transform:uppercase;line-height:1}

/* ═════ a panel head's plain line (right of the title) ═════ */
.b-ph-p{margin:6px 0 0;font-family:var(--read);font-size:var(--fs-read-s);color:var(--muted)}

/* ═════ THE NEXT ROUND BAR (.b-nxb). The strip under a stage (V8B.nextBar: the yellow ribbon clock, the question, Yes / No into
   the game); .cream: the cream panel riding a banner's foot (next round + question | starts in | the instrument | the plate) ═════ */
/* 2026-10-07: no box behind the strip (its fill + shadow read as a dark slab offset behind the plate); the ribbon carries the
   kit's hard shadow on its own shape (the face is a ::before under a drop-shadow, so the shadow follows the notch and the
   point); the ribbon's padding clears its notch (10% of its width) and its point (6%) by the same 12 to 14px */
.b-nxb:not(.cream){display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,420px);align-items:center;gap:14px 28px;margin-top:22px;padding:0}
.b-nxb-k{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;height:56px;margin:0;padding:0 34px 0 46px;color:var(--ink);filter:drop-shadow(var(--sh-4))}
.b-nxb-k::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);clip-path:var(--clip-ribbon)}
.b-nxb-k>span{display:flex}
.b-nxb-k svg{display:block;width:24px;height:24px}
.b-nxb-k small{font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;line-height:1;white-space:nowrap}
.b-nxb-k b{display:flex;align-items:center;height:30px;padding-left:12px;border-left:2px solid rgba(11,11,11,.35);font-family:var(--data);font-weight:800;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.b-nxb-q{margin:0;min-width:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(22px,2vw,28px);text-transform:uppercase;line-height:.95}
.b-nxb-q a{color:var(--paper)}
@media (hover:hover){.b-nxb-q a:hover{color:var(--yellow)}}
.b-nxb-s{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.b-nxb .mside{height:52px;font-size:21px;justify-content:center}
.b-nxb .mside em{font-family:var(--shout);font-style:italic;font-weight:800;font-size:21px}
.b-nxb.cream{margin-top:-34px;margin-left:24px;margin-right:24px;z-index:3}
.b-nxb-f{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:16px 28px;padding:18px 30px 20px 30px}
.b-nxb-h{margin:0;display:flex;flex-direction:column;gap:4px}
.b-nxb-h b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(30px,2.8vw,40px);text-transform:uppercase;line-height:.9;color:var(--ink)}
.b-nxb-h span{font-family:var(--call);font-size:var(--fs-call);letter-spacing:.04em;text-transform:uppercase;color:#3A362F}
.b-nxb-c{display:flex;align-items:center;gap:14px;margin:0;padding:10px 18px;background:var(--ink);box-shadow:var(--sh-3)}
.b-nxb-c small{font-family:var(--shout);font-style:italic;font-weight:800;font-size:18px;text-transform:uppercase;color:var(--paper);line-height:1}
.b-nxb-c b{font-family:var(--data);font-weight:800;font-size:36px;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.b-nxb-m{display:flex;align-items:center;gap:12px;margin:0;padding:8px 16px 8px 10px;background:var(--ink);box-shadow:var(--sh-3)}
.b-nxb-med{display:block;width:44px;height:44px}.b-nxb-med svg{width:100%;height:100%;display:block}
.b-nxb-m small{display:block;font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.1em;color:var(--muted)}
.b-nxb-m b{font-family:var(--data);font-weight:800;font-size:20px;color:var(--paper)}
@media (max-width:1180px){
  .b-nxb:not(.cream){grid-template-columns:auto minmax(0,1fr);}
  .b-nxb-s{grid-column:1 / -1}
}
@media (max-width:1023px){
  .b-nxb-f{grid-template-columns:minmax(0,1fr) auto auto;}
  .b-nxb-m{display:none}
}
@media (max-width:760px){
  .b-nxb:not(.cream){grid-template-columns:1fr;gap:14px;padding:0}
  .b-nxb-k{justify-self:start;height:50px;padding:0 30px 0 40px}
  .b-nxb-k small{font-size:20px}.b-nxb-k b{font-size:26px;height:26px}
  .b-nxb-q{font-size:24px}
  .b-nxb.cream{margin:-20px 10px 0}
  .b-nxb-f{grid-template-columns:minmax(0,1fr) auto;gap:14px 14px;padding:16px 22px 18px 16px}
  .b-nxb-c{padding:8px 12px;gap:10px}.b-nxb-c b{font-size:26px}.b-nxb-c small{font-size:15px}
  .b-nxb.cream .plate{grid-column:1 / -1;justify-self:start}
}
@media (max-width:360px){
  .b-nxb-k{padding:0 26px 0 34px;gap:8px}.b-nxb-k small{font-size:18px}.b-nxb-k b{font-size:22px;height:22px;padding-left:8px}
  .b-nxb .mside,.b-nxb .mside em{font-size:18px}
}

/* ═════ THE ART BANNER (.b-pfb): the art in a torn panel, the headline on the left, the cream sign on the right ═════ */
.b-pfb{filter:drop-shadow(var(--sh-9))}
.b-pfb-f{position:relative;height:clamp(280px,30vw,400px);clip-path:var(--clip-panel);overflow:hidden;background:var(--violet-deep);container-type:inline-size}
.b-pfb-art{position:absolute;inset:0}
.b-pfb-art img,.b-pfb-art .art-loop{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.b-pfb-f::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,13,12,.82),rgba(14,13,12,.35) 34%,rgba(14,13,12,0) 52%)}
.b-pfb-h{position:absolute;z-index:2;left:44px;top:50%;transform:translateY(-50%);margin:0;max-width:7ch;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(48px,6cqw,84px);line-height:.84;color:var(--paper);text-shadow:4px 4px 0 var(--shadow)}
.b-pfb-h span{display:block}
.b-pfb-s{position:absolute;z-index:2;right:44px;top:50%;margin:0;padding:22px 32px 26px 24px;background:var(--paper);color:var(--ink);clip-path:var(--clip-sign);transform:translateY(-50%) rotate(-3deg);filter:drop-shadow(var(--sh-5))}
.b-pfb-s b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(30px,3cqw,42px);text-transform:uppercase;line-height:.86}
@media (max-width:760px){
  .b-pfb-f{height:auto;aspect-ratio:16/10}
  .b-pfb-h{left:20px;font-size:clamp(34px,11cqw,46px)}
  .b-pfb-s{display:none}
}

/* ═════ THE HEXAGON MEDALLION (.b-hexav): a ring hexagon, the face inside, an optional rank hexagon on top; --hs sets the size ═════ */
.b-hexav{--hs:150px;position:relative;width:var(--hs);height:calc(var(--hs) * .9);filter:drop-shadow(var(--sh-6))}
.b-hexav-r{position:absolute;inset:0;clip-path:var(--clip-hex);background:var(--orange)}
.b-hexav img{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover;clip-path:var(--clip-hex);background:var(--bg4)}
.b-hexav-n{position:absolute;left:50%;top:-22px;transform:translateX(-50%);display:grid;place-items:center;width:52px;height:46px;clip-path:var(--clip-hex);background:var(--ink);color:var(--paper);font-family:var(--data);font-weight:800;font-size:22px}

/* ═════ THE WIDE TABLE (.b-tbl): rows of 64, the player as the row header, the last column the number; on a phone each row folds
   into a two-line card (b-k keys show). .b-hist: the history variant (wins green, losses calm, voids refunded) ═════ */
.b-tbl{width:100%;border-collapse:collapse}
.b-tbl th,.b-tbl td{padding:8px 14px;text-align:left;border-bottom:2px solid var(--b-rule);font-family:var(--data);font-weight:700;font-size:var(--fs-field);color:var(--paper);white-space:nowrap}
.b-tbl thead th{padding-top:0;padding-bottom:12px;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.b-tbl tbody th,.b-tbl tbody td{height:64px}
.b-tbl tbody tr:last-child>*{border-bottom:0}
.b-tbl th:last-child,.b-tbl td:last-child{text-align:right;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.b-tbl thead th:last-child{font-size:var(--fs-label)}
.b-tbl .b-pl{display:flex;align-items:center;gap:14px}
.b-tbl .b-st{min-width:110px}
.b-k{display:none}
@media (max-width:760px){
  .b-tbl thead{display:none}
  .b-tbl,.b-tbl tbody{display:block}
  .b-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p e" "d s";gap:6px 12px;padding:12px 0;border-bottom:2px solid var(--b-rule)}
  .b-tbl tbody tr:last-child{border-bottom:0}
  .b-tbl tbody th,.b-tbl tbody td{height:auto;padding:0;border:0}
  .b-tbl tbody th{grid-area:p}.b-tbl td:nth-child(2){grid-area:d;color:var(--muted);font-size:var(--fs-key);align-self:center}
  .b-tbl td:nth-child(3){grid-area:s;justify-self:end}.b-tbl td:last-child{grid-area:e;align-self:center}
  .b-tbl .b-st{min-width:0;height:28px;font-size:16px}
  .b-k{display:inline}
  .b-tbl td:last-child .b-k{display:none}
}
.b-hist td,.b-hist th{font-size:var(--fs-key)}
.b-hist tbody td,.b-hist tbody th{height:52px}
.b-hist .b-h-t{color:var(--muted)}
.b-hist .b-chip{height:26px;font-size:16px;padding:0 14px 0 11px}
.b-hist .b-h-q{font-family:var(--call);font-weight:500;font-size:var(--fs-call-s);letter-spacing:.04em;text-transform:uppercase;white-space:normal}
.b-hist td.b-h-p{font-variant-numeric:tabular-nums}
.b-hist tr[data-r=win] .b-h-p{color:var(--yes)}
.b-hist tr[data-r=void] .b-h-p,.b-hist tr[data-r=loss] .b-h-p{color:var(--muted)}
.b-hist td:last-child{font-size:var(--fs-key)}
.b-hist .b-st{min-width:72px;height:28px;font-size:16px}
@media (max-width:1180px){
  .b-hist .b-h-t{white-space:normal}
}
@media (max-width:1023px){
  .b-hist thead th:nth-child(1),.b-hist td.b-h-t{display:none}
}
@media (max-width:760px){
  .b-hist thead{display:none}
  .b-hist,.b-hist tbody{display:block}
  .b-hist tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"c . r" "q q q" "s e p";gap:8px 12px;padding:14px 0;border-bottom:2px solid var(--b-rule)}
  .b-hist tbody tr:last-child{border-bottom:0}
  .b-hist tbody td,.b-hist tbody th{height:auto;padding:0;border:0;white-space:normal}
  .b-hist td.b-h-c{grid-area:c}.b-hist td.b-h-r{grid-area:r;text-align:right}.b-hist th.b-h-q{grid-area:q;font-size:17px}
  .b-hist td.b-h-s{grid-area:s;color:var(--muted)}.b-hist td.b-h-e{grid-area:e;color:var(--muted)}.b-hist td.b-h-p{grid-area:p;text-align:right}
  .b-hist .b-k{display:none}
}

/* ═════ THE ANSWERS (.b-faq): a disclosure list, h3 > button[aria-expanded] + .b-faq-a (one answer region each); the accent is
   --faq-k (yellow; a page can set orange). Native <details><summary> rows work in it too. .two: two columns of item boxes
   (.b-faq-i), the landing's lighter face (orange) ═════ */
.b-faq h3{margin:0 0 12px}
.b-faq button{width:100%;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:var(--b-row);border:2px solid var(--b-rule);box-shadow:var(--sh-3);text-align:left;font-family:var(--call);font-size:var(--fs-call);letter-spacing:.04em;text-transform:uppercase;color:var(--paper)}
.b-faq button svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--faq-k,var(--yellow));stroke-width:2.6;transition:transform var(--t-key)}
.b-faq button[aria-expanded=true]{border-color:var(--faq-k,var(--yellow))}
.b-faq button[aria-expanded=true] svg{transform:rotate(180deg)}
@media (hover:hover){.b-faq button:hover{border-color:#57524b}}
.b-faq-a{margin:-4px 0 14px;padding:14px 18px 16px;background:var(--bg1);border-left:4px solid var(--faq-k,var(--yellow))}
.b-faq-a p{margin:0;font-family:var(--read);font-size:var(--fs-read-s);line-height:1.45;color:var(--paper)}
.b-faq>details+details{margin-top:12px}
.b-faq details{background:var(--b-row);border:2px solid var(--b-rule);box-shadow:var(--sh-3)}
.b-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:12px 18px;cursor:pointer;list-style:none;font-family:var(--data);font-weight:700;font-size:var(--fs-field);letter-spacing:.04em;text-transform:uppercase;color:var(--paper)}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:3px solid var(--faq-k,var(--yellow));border-bottom:3px solid var(--faq-k,var(--yellow));transform:translateY(-3px) rotate(45deg);transition:transform var(--t-key) var(--e-std)}
.b-faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.b-faq summary:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
@media (hover:hover){.b-faq summary:hover{color:var(--yellow)}}
.b-faq details p{margin:0;padding:0 18px 18px;font-family:var(--read);font-size:var(--fs-read-s);line-height:1.45;color:var(--muted)}
.b-faq.two{--faq-k:var(--orange);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;align-items:start}
.b-faq.two h3{margin:0}
.b-faq.two button{min-height:62px;padding:12px 20px 12px 22px;background:var(--bg1);border-color:var(--line);box-shadow:none;font-family:var(--data);font-weight:700;font-size:var(--fs-field);line-height:1.3}
.b-faq.two button svg{width:18px;height:18px;color:var(--faq-k);transition:transform var(--t-key) var(--e-std)}
@media (hover:hover){.b-faq.two button:hover{border-color:var(--faq-k)}}
.b-faq.two .b-faq-a{margin:0;padding:14px 22px 6px;background:none;border:0}
.b-faq.two .b-faq-a p{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.b-faq button svg,.b-faq summary::after{transition:none}}
@media (max-width:760px){
  .b-faq button{min-height:56px;padding:10px 14px;font-size:17px}
  .b-faq.two{grid-template-columns:1fr;gap:10px}
  .b-faq.two button{min-height:62px;padding:12px 14px 12px 16px;font-size:var(--fs-key)}
}

/* ═════ THE STEPS (.b-steps, an ol / ul of three): .line the numbered row with › between (a panel .b-steps-p around it; the round
   numbers .b-steps-n in orange .o or violet .v); .rows dark tiles with the square .b-num; .tone colour panels with a hexagon
   art (each .b-step data-tone orange | violet | yellow); .tall tall colour panels with the art at the foot.
   .b-how: the how it works panel (a head, the steps, the ball on a burst) ═════ */
.b-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.b-steps-p{padding:28px 40px 28px 36px}
.b-steps.line li{position:relative;display:flex;gap:18px;align-items:flex-start;padding:4px 26px 4px 30px;min-width:0}
.b-steps.line li:first-child{padding-left:4px}
.b-steps.line li+li{border-left:2px solid var(--b-line2)}
.b-steps.line li+li::before{content:"›";position:absolute;left:-9px;top:40%;width:16px;text-align:center;background:var(--bg2);color:var(--orange);font-size:24px;line-height:1}
.b-steps-n{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:3px solid var(--ink);box-shadow:var(--sh-3);font-family:var(--shout);font-weight:800;font-size:32px;font-style:normal;color:var(--ink)}
.b-steps-n.o{background:var(--orange)}.b-steps-n.v{background:var(--violet)}
.b-steps.line :is(h3,h4){margin:6px 0 6px;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.4vw,34px);line-height:.92;color:var(--paper)}
.b-steps.line p{margin:0;font-family:var(--read);font-size:var(--fs-read);line-height:1.3;color:var(--muted)}
.b-steps.rows{gap:16px}
.b-steps.rows li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n h" "n p";gap:6px 14px;align-content:start;padding:20px 18px 22px 16px;background:var(--b-row);border:2px solid var(--ink)}
.b-steps.rows .b-num{grid-area:n;width:46px;height:46px;font-size:22px}
.b-steps.rows :is(h3,h4){grid-area:h;margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:28px;line-height:.95;text-transform:uppercase;color:var(--paper)}
.b-steps.rows p{grid-area:p;margin:0;font-family:var(--read);font-size:var(--fs-read-s);line-height:1.35;color:var(--muted)}
.b-steps.tone{gap:22px}
.b-steps.tone .b-step{filter:drop-shadow(var(--sh-6));min-width:0}
.b-steps.tone .b-step-f{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:16px;height:100%;padding:20px 26px 22px 20px;clip-path:var(--clip-panel);background:var(--orange);color:var(--ink)}
.b-steps.tone .b-step[data-tone=violet] .b-step-f{background:var(--violet)}
.b-steps.tone .b-step[data-tone=yellow] .b-step-f{background:var(--yellow)}
.b-steps.tone .b-step-f img{width:84px;height:84px;object-fit:cover;clip-path:var(--clip-hex);background:var(--ink)}
.b-steps.tone .b-step-f .b-num{background:var(--ink);color:var(--paper)}
.b-steps.tone .b-step-f p{margin:0}
.b-steps.tone .b-step-f b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(24px,2.1vw,30px);text-transform:uppercase;line-height:.92}
.b-steps.tone .b-step-f p span{display:block;margin-top:6px;font-family:var(--read);font-size:var(--fs-read-s);line-height:1.3}
.b-steps.tall{gap:24px}
.b-steps.tall .b-step-f{--sp:28px;position:relative;display:flex;flex-direction:column;height:100%;padding:var(--sp) var(--sp) 0;overflow:hidden;background:var(--orange);color:var(--ink)}
.b-steps.tall .b-step[data-tone=violet] .b-step-f{background:var(--violet)}
.b-steps.tall .b-step[data-tone=yellow] .b-step-f{background:var(--yellow)}
.b-step-n{display:grid;place-items:center;width:52px;height:52px;background:var(--ink);color:var(--paper);font-family:var(--data);font-weight:800;font-size:26px;box-shadow:var(--sh-3)}
.b-step-h{position:relative;z-index:1;margin:18px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(30px,2.8vw,40px);text-transform:uppercase;line-height:.9}
.b-step-p{position:relative;z-index:1;margin:10px 0 0;max-width:30ch;font-family:var(--read);font-size:var(--fs-read-s);line-height:1.35}
/* the art sits under the text, never under it (phone fix 2026-10-07): the foot of the card, full card width to the torn edge,
   one 16:9 box on every card so the three match; .sq (a transparent cut-out, the coins or a badge) is contained, no frame */
.b-step-art{position:relative;display:block;flex:none;margin:auto calc(var(--sp) * -1) 0;aspect-ratio:16/9;border-top:3px solid var(--ink);overflow:hidden}
.b-steps.tall .b-step-p{margin-bottom:22px}
.b-step-art img{width:100%;height:100%;object-fit:cover;object-position:var(--obj,50% 40%);display:block}
.b-step-art.sq{border-top:0;padding:4px 0 10px}
.b-step-art.sq img{object-fit:contain;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.28))}
.b-how{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:32px;padding:36px 40px 40px 38px;overflow:hidden}
.b-how .b-hd{margin-bottom:28px}
.b-how-art{position:relative;display:grid;place-items:center;height:240px}
.b-how-art .burst{position:absolute;inset:0;background:var(--orange)}
.b-how-art .burst::after{content:"";position:absolute;inset:16%;clip-path:var(--burst);background:var(--violet)}
.b-how-art img{position:relative;width:200px;height:200px;object-fit:contain;transform:rotate(-14deg);filter:drop-shadow(5px 5px 0 #000)}
@media (max-width:1180px){
  .b-steps.tone{grid-template-columns:1fr}
  .b-how{grid-template-columns:minmax(0,1fr) 220px}
  .b-how-art{height:200px}.b-how-art img{width:160px;height:160px}
}
@media (max-width:1023px){
  .b-steps.tall{grid-template-columns:1fr;gap:20px}
  .b-steps.tall .b-step-art{aspect-ratio:21/9}
  .b-how{grid-template-columns:1fr}
  .b-how-art{display:none}
}
@media (max-width:760px){
  .b-steps-p{padding:24px 18px 24px 16px}
  .b-steps.line{grid-template-columns:1fr;gap:22px}
  .b-steps.line li,.b-steps.line li:first-child{padding:0}
  .b-steps.line li+li{border-left:0;padding-top:22px;border-top:2px solid var(--b-line2)}
  .b-steps.line li+li::before{display:none}
  .b-steps-n{width:52px;height:52px;font-size:28px}
  .b-steps.rows{grid-template-columns:1fr;gap:12px}
  .b-steps.rows li{padding:16px 14px 18px 12px}
  .b-steps.tone .b-step-f{grid-template-columns:auto minmax(0,1fr);padding:16px 18px 18px 14px}
  .b-steps.tone .b-step-f img{width:64px;height:64px;grid-row:1 / span 2}
  .b-steps.tone .b-step-f .b-num{display:none}
  .b-steps.tall .b-step-f{--sp:20px}
  .b-step-n{width:44px;height:44px;font-size:22px}
  .b-steps.tall .b-step-art{aspect-ratio:16/9}
  .b-how{padding:26px 20px 28px 18px}
}

/* ═════ THE PODIUM (.b-podium of three .b-pod). .tiles: hexagon avatars over a tile each, the champion on the burst (2 · 1 · 3 in
   the markup); .arena: the hexagon medallions (.b-hexav) on their plinths, the champion raised (CSS order puts 2 · 1 · 3) ═════ */
.b-podium{list-style:none;margin:0;padding:0;display:grid;align-items:end;gap:20px}
.b-podium.tiles{margin:56px 0 0;grid-template-columns:1fr 1.15fr 1fr}
.b-podium.tiles .b-pod{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.b-podium.tiles .b-pod-av{position:relative;display:grid;place-items:center;width:150px;height:150px;margin-bottom:-14px;z-index:1}
.b-podium.tiles .b-pod[data-n="1"] .b-pod-av{width:200px;height:200px}
.b-podium.tiles .b-pod-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:var(--clip-hex);background:var(--orange);filter:drop-shadow(var(--sh-4))}
.b-podium.tiles .b-pod[data-n="2"] .b-pod-av img{background:var(--muted)}
.b-podium.tiles .b-pod[data-n="3"] .b-pod-av img{background:var(--orange-deep)}
.b-podium.tiles .b-pod-av .burst{position:absolute;inset:-26% -26% 6%;background:var(--yellow)}
.b-podium.tiles .b-pod-n{position:absolute;z-index:3;left:4px;bottom:6px;display:grid;place-items:center;width:46px;height:46px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);clip-path:var(--clip-hex);font-family:var(--data);font-weight:800;font-size:22px}
.b-podium.tiles .b-pod[data-n="1"] .b-pod-n{width:56px;height:56px;font-size:28px}
.b-podium.tiles .b-pod-f{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 14px 22px;background:var(--b-row);border:2px solid var(--ink);box-shadow:var(--sh-4)}
.b-podium.tiles .b-pod[data-n="1"] .b-pod-f{padding:36px 14px 34px;background:var(--bg4);border-color:var(--yellow)}
.b-podium.tiles .b-pod-f p{margin:0}
.b-podium.tiles .b-pod-w{font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(26px,2.4vw,34px);line-height:.95;text-transform:uppercase;color:var(--paper);overflow-wrap:anywhere;max-width:100%}
.b-podium.tiles .b-pod-v{font-family:var(--data);font-weight:800;font-size:clamp(20px,2vw,28px);color:var(--paper);font-variant-numeric:tabular-nums}
.b-podium.tiles .b-pod[data-n="1"] .b-pod-v{color:var(--yellow)}
.b-podium.tiles .b-pod-p{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;font-family:var(--data);font-weight:700;font-size:var(--fs-field);color:var(--muted)}
.b-podium.arena{position:relative;z-index:1;margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px}
.b-podium.arena .b-pod{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px 34px;position:relative}
.b-podium.arena .b-pod[data-rank="1"]{order:2;padding-bottom:64px}
.b-podium.arena .b-pod[data-rank="2"]{order:1}
.b-podium.arena .b-pod[data-rank="3"]{order:3}
/* the plinth starts where the medallion stands (its foot 14px into the plinth), so the name, the figure and the chip always sit
   inside it, on every rung and every rank (2026-10-07: it was a share of the column, the names straddled its top edge) */
.b-podium.arena .b-pod{--hs:150px;--hf:14px}
.b-podium.arena .b-hexav{--hs:inherit}
.b-podium.arena .b-pod::after{content:"";position:absolute;z-index:-1;left:3%;right:3%;bottom:0;top:calc(var(--hs) * .9 - var(--hf));background:#141210;border:3px solid var(--ink);border-bottom:0;box-shadow:var(--sh-5)}
.b-podium.arena .b-pod[data-rank="1"]::after{background:#1C1916}
.b-podium.arena .b-pod[data-rank="1"]{--hs:196px}
.b-podium.arena .b-pod[data-rank="1"] .b-hexav-r{background:var(--yellow)}
.b-podium.arena .b-pod[data-rank="2"] .b-hexav-r{background:var(--violet)}
.b-podium.arena .b-pod[data-rank="1"] .b-hexav-n{width:62px;height:54px;font-size:28px;background:var(--yellow);color:var(--ink);top:-28px}
.b-podium.arena .b-pod[data-rank="2"] .b-hexav-n{background:var(--violet);color:var(--ink)}
.b-podium.arena .b-pod[data-rank="3"] .b-hexav-n{background:var(--orange);color:var(--ink)}
.b-podium.arena .b-pod-w{position:relative;margin:16px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(22px,2vw,28px);text-transform:uppercase;line-height:1;max-width:100%;overflow-wrap:anywhere}
.b-podium.arena .b-pod-w a{color:var(--paper)}
.b-podium.arena .b-pod-w a::after{content:"";position:absolute;inset:-180px -10px -110px}
@media (hover:hover){.b-podium.arena .b-pod:hover .b-pod-w a{color:var(--yellow)}}
.b-podium.arena .b-pod-v{margin:8px 0 0;font-family:var(--data);font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-podium.arena .b-pod-v[data-t=up]{color:var(--yes)}
.b-podium.arena .b-pod-t{margin:14px 0 0}
@media (max-width:760px){
  .b-podium.tiles{gap:8px;margin-top:40px}
  .b-podium.tiles .b-pod-av .burst{inset:-14% -14% 6%}
  .b-podium.tiles .b-pod-av{width:84px;height:84px;margin-bottom:-10px}
  .b-podium.tiles .b-pod[data-n="1"] .b-pod-av{width:110px;height:110px}
  .b-podium.tiles .b-pod-n{width:32px;height:32px;font-size:15px;left:-4px;bottom:0}
  .b-podium.tiles .b-pod[data-n="1"] .b-pod-n{width:38px;height:38px;font-size:18px}
  .b-podium.tiles .b-pod-f{padding:18px 4px 14px;gap:6px}
  .b-podium.tiles .b-pod[data-n="1"] .b-pod-f{padding:22px 4px 20px}
  .b-podium.tiles .b-pod-w{font-size:15px;overflow-wrap:normal}
  .b-podium.tiles .b-pod-v{font-size:var(--fs-key)}
  .b-podium.tiles .b-pod-p{font-size:var(--fs-label);flex-direction:column;gap:6px}
  .b-podium.tiles .b-pod-p .b-prize{min-width:0;height:24px;font-size:13px;padding:0 9px 0 8px}
  .b-podium.arena{gap:6px}
  .b-podium.arena .b-pod{padding:0 2px 22px}
  .b-podium.arena .b-pod[data-rank="1"]{padding-bottom:40px}
  .b-podium.arena .b-pod{--hs:84px;--hf:8px}
  .b-podium.arena .b-pod[data-rank="1"]{--hs:108px}
  .b-podium.arena .b-hexav img{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
  .b-podium.arena .b-hexav-n{width:38px;height:34px;font-size:16px;top:-16px}
  .b-podium.arena .b-pod[data-rank="1"] .b-hexav-n{width:44px;height:38px;font-size:19px;top:-20px}
  .b-podium.arena .b-pod-w{font-size:clamp(14px,4.4vw,19px);margin-top:10px}
  .b-podium.arena .b-pod-v{font-size:clamp(14px,4.2vw,18px)}
  .b-podium.arena .b-pod-t .b-chip{font-size:14px;height:26px;padding:0 12px 0 10px}
  .b-podium.arena .b-pod[data-rank="1"] .b-pod-w{font-size:clamp(13px,3.9vw,18px)}
}
@media (max-width:420px){
  .b-podium.arena .b-pod-w,.b-podium.arena .b-pod[data-rank="1"] .b-pod-w{font-size:13px}
  .b-podium.arena .b-pod-v{font-size:13px}
  .b-podium.arena .b-pod-t .b-chip{font-size:12px;height:24px;padding:0 9px 0 8px}
}
@media (max-width:420px){.b-podium.arena .b-pod-t{display:none}}
/* the narrowest phones: the champion's medallion keeps inside its column */
@media (max-width:360px){.b-podium.arena .b-pod{--hs:76px}.b-podium.arena .b-pod[data-rank="1"]{--hs:88px}
  .b-podium.arena .b-pod[data-rank="1"] .b-hexav-n{width:38px;height:34px;font-size:16px;top:-16px}}

/* ═════ THE ACTIVITY FEED (.b-feed): group labels (.b-fg), rows (.b-fi > .b-fi-b: a hexagon badge, what happened, when, the chevron);
   a loss stays calm grey, never red ═════ */
.b-fg{display:inline-flex;margin:26px 0 12px;padding:7px 14px 6px;background:var(--bg4);color:var(--paper);font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--sh-2)}
.b-fg:first-child{margin-top:0}
.b-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.b-fi-b{display:grid;grid-template-columns:56px minmax(0,1fr) auto 20px;align-items:center;gap:16px;width:100%;min-height:76px;padding:10px 16px 10px 12px;background:var(--b-row);border:2px solid var(--ink);color:var(--paper);text-align:left;font:inherit;transition:transform var(--t-key) var(--e-std),border-color var(--t-key)}
@media (hover:hover){.b-fi-b:hover{transform:translate(-2px,-2px);border-color:var(--line);box-shadow:var(--sh-3)}.b-fi-b:hover .b-fi-t b{color:var(--yellow)}}
.b-fi-b:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.b-badge{display:grid;place-items:center;width:52px;height:48px;clip-path:var(--clip-hex);background:var(--yes)}
.b-badge img{width:26px;height:26px}
.b-badge[data-kind=lost]{background:#8E897E}
.b-badge[data-kind=void]{background:var(--paper)}
.b-badge[data-kind=rank]{background:var(--violet)}
.b-badge[data-kind=crew]{background:var(--orange)}
.b-fi-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.b-fi-t b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;line-height:1;color:var(--paper);transition:color var(--t-key)}
.b-fi-t em{font-style:italic;color:var(--yes)}
.b-fi[data-kind=lost] .b-fi-t em{color:var(--muted)}
.b-fi[data-kind=void] .b-fi-t em{color:var(--paper)}
.b-fi-t small{font-family:var(--read);font-size:var(--fs-read-s);line-height:1.3;color:var(--muted)}
.b-fi-t small b{font-family:var(--data);font-style:normal;font-size:var(--fs-field);color:var(--paper);text-transform:none}
.b-fi-t .up{font-family:var(--data);font-weight:800;color:var(--yes)}
.b-fi-b time{font-family:var(--data);font-weight:500;font-size:var(--fs-key);color:var(--muted);white-space:nowrap}
.b-fi-go{display:block;width:16px;height:16px;filter:invert(.9)}
.b-fi-go img{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.b-fi-b{transition:none}}
html.static .b-fi-b{transition:none}
@media (max-width:760px){
  .b-fi-b{grid-template-columns:44px minmax(0,1fr) 16px;grid-template-areas:"i t g" "i w g";gap:2px 12px;padding:10px 12px 10px 10px}
  .b-badge{grid-area:i;width:44px;height:40px}.b-badge img{width:22px;height:22px}
  .b-fi-t{grid-area:t}.b-fi-b time{grid-area:w;font-size:var(--fs-label)}.b-fi-go{grid-area:g;width:14px;height:14px}
  .b-fi-t b{font-size:21px}
  .b-fi-t small{font-size:15px}
}

/* ═════ THE PICK FEED BAND (.b-picks): the violet band of the crowd's latest picks (.b-picks-i, cream signs) ═════ */
.b-picks{position:relative;filter:drop-shadow(var(--sh-7))}
.b-picks-f{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px 36px;padding:30px 36px 32px 34px;clip-path:var(--clip-panel);
  background:radial-gradient(circle,rgba(33,13,73,.34) 0 1.7px,transparent 2.2px) 0 0/11px 11px,linear-gradient(90deg,var(--violet-deep),var(--violet))}
.b-picks-h{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(38px,3.8vw,54px);line-height:.88;color:var(--paper);text-shadow:3px 3px 0 var(--shadow)}
.b-picks-p{margin:12px 0 0;font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.b-picks-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.b-picks-i{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 22px 16px 14px;background:var(--paper);color:var(--ink);clip-path:var(--clip-sign);filter:drop-shadow(var(--sh-4))}
.b-picks-i:nth-child(2){transform:rotate(1deg)}.b-picks-i:nth-child(1),.b-picks-i:nth-child(3){transform:rotate(-1deg)}
.b-picks-i.new{animation:v8LogIn var(--t-reveal) var(--e-out)}
.b-picks-i .b-av{flex:none;width:64px;height:64px;background:var(--orange)}
.b-picks-i p{display:flex;flex-direction:column;gap:3px;margin:0;min-width:0}
.b-picks-i b{font-family:var(--data);font-weight:800;font-size:var(--fs-field);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-picks-i span{font-family:var(--shout);font-style:italic;font-weight:800;font-size:21px;text-transform:uppercase;line-height:1}
.b-picks-i em{font-style:italic;color:var(--violet-deep)}
.b-picks-i small{font-family:var(--data);font-weight:700;font-size:var(--fs-key);color:#5E594F}
@media (prefers-reduced-motion:reduce){.b-picks-i.new{animation:none}}
html.static .b-picks-i.new{animation:none}
@media (max-width:1180px){
  .b-picks-l{grid-template-columns:1fr 1fr}.b-picks-i:nth-child(3){display:none}
}
@media (max-width:760px){
  .b-picks-f{grid-template-columns:1fr;padding:26px 18px 28px 16px}
  .b-picks-l{grid-template-columns:1fr;gap:12px}.b-picks-i:nth-child(3){display:flex}
}

/* ═════ THE RECEIPT (.b-rcpt): key / value rows, .cut a rule before the values, .tot the total ═════ */
.b-rcpt{margin:0;display:flex;flex-direction:column}
.b-rcpt>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:12px;min-height:38px}
.b-rcpt>div.cut{margin-top:12px;padding-top:12px;border-top:2px solid var(--line)}
.b-rcpt dt{font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b-rcpt dd{margin:0;font-family:var(--data);font-weight:800;font-size:var(--fs-input);color:var(--paper);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.b-rcpt dd .b-side{box-shadow:var(--sh-2)}
.b-rcpt .tot dd{font-size:22px}
.b-rcpt .up{color:var(--yes)}
@media (max-width:760px){
  .b-rcpt>div{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px}
  .b-rcpt dt{font-size:var(--fs-label)}
}

/* ═════ THE DRAWER (.b-drawer): a panel from the right (desktop) or a bottom sheet (phone), the backdrop, the close key;
   html.b-lock stops the page under it. The page traps focus and closes it on Escape / the backdrop ═════ */
.b-drawer{position:fixed;inset:0;z-index:90}
.b-drawer[hidden]{display:none}
.b-drawer-bg{position:absolute;inset:0;width:100%;border:0;padding:0;background:rgba(8,7,6,.72);opacity:0;transition:opacity var(--t-fade)}
.b-drawer.on .b-drawer-bg{opacity:1}
.b-drawer-p{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);display:flex;flex-direction:column;background:var(--bg2);border-left:3px solid var(--ink);box-shadow:-9px 0 0 var(--shadow);transform:translateX(104%);transition:transform var(--t-depth) var(--e-out);outline:none}
.b-drawer-p:focus,.b-drawer-p:focus-visible{outline:none}
.b-drawer.on .b-drawer-p{transform:none}
.b-drawer-hd{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px 18px 26px;border-bottom:2px solid var(--b-rule)}
.b-drawer-h{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:34px;text-transform:uppercase;line-height:.9;color:var(--orange)}
.b-drawer-x{display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--sh-3)}
.b-drawer-x img{width:18px;height:18px}
@media (hover:hover){.b-drawer-x:hover{background:var(--yellow)}}
.b-drawer-c{flex:1;overflow:auto;overscroll-behavior:contain;padding:24px 26px 32px}
html.b-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.b-drawer-p,.b-drawer-bg{transition:none}}
html.static .b-drawer-p,html.static .b-drawer-bg{transition:none}
@media (max-width:760px){
  .b-drawer-p{top:auto;left:0;width:100%;max-height:88vh;border-left:0;border-top:3px solid var(--ink);box-shadow:0 -6px 0 var(--shadow);transform:translateY(104%)}
  .b-drawer-hd{padding:18px 16px 14px 18px}
  .b-drawer-h{font-size:30px}
  .b-drawer-c{padding:20px 16px 28px}
}

/* ═════ THE TICKET (.b-tkt on a .b-rnd panel, narrow): LOCKS IN with the round length under it (.b-lock-s), two estimates side by
   side (.b-rnd-mid.b-two), the amount, the sides ═════ */
.b-tkt{padding:28px 28px 28px 26px}
.b-tkt-top{display:flex;justify-content:flex-start}
.b-tkt .b-lockin{flex-direction:row;align-items:center;gap:14px;padding:14px 30px 16px 22px}
.b-tkt .b-lockin b{font-size:clamp(34px,3vw,44px)}
.b-tkt .b-lockin small{max-width:4.4em;line-height:.9}
.b-tkt .b-lock-s{max-width:6em;line-height:1.15}
.b-rnd-mid.b-two{grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.b-tkt .b-est-h{font-size:26px}
.b-tkt .b-rnd-amt{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "a" "c";gap:10px}
.b-tkt .sides{gap:12px;margin-top:22px}
.b-tkt .side{height:64px;min-width:0;padding:0 12px;font-size:clamp(22px,2vw,28px)}
.b-tkt .tkt-fine{text-align:left}
@media (max-width:1023px){
  .b-tkt .b-rnd-amt{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"l l" "a c"}
}
@media (max-width:760px){
  .b-tkt{padding:22px 18px 24px 16px}
  .b-tkt .b-rnd-amt{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "a" "c"}
  .b-tkt .side{height:58px;font-size:22px}
}
@media (max-width:360px){
  .b-tkt .b-lockin{gap:10px;padding:12px 22px 14px 16px}
}

/* ═════ THE POT SPLIT (.b-split): the race bar in Yes / No colours (.b-race.b-hl), each side's money, the pot + entries ═════ */
.b-split{display:flex;align-items:stretch;gap:32px}
.b-split-m{flex:1;min-width:0}
.b-split .b-ph{align-items:center;flex-wrap:wrap}
.b-race.b-hl .duel-bar.slash{--a:var(--yes);--b:var(--no);height:44px}
.b-race.b-hl .b-race-l span:first-child{color:var(--ink)}
.b-race.b-hl .b-race-l span:last-child{color:#fff}
.b-split-v{display:flex;justify-content:space-between;gap:16px;margin-top:16px}
.b-split-v p{margin:0;display:flex;flex-direction:column;gap:4px}
.b-split-v p:last-child{align-items:flex-end}
.b-split-v b{font-family:var(--data);font-weight:800;font-size:24px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.b-split-v small{font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.b-split-n{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0;padding-left:32px;border-left:2px solid var(--line);min-width:140px}
.b-split-n small{font-family:var(--data);font-weight:700;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.b-split-n b{font-family:var(--data);font-weight:800;font-size:34px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .b-split{flex-direction:column;gap:18px}
  .b-split-n{flex-direction:row;justify-content:space-between;padding:16px 0 0;border-left:0;border-top:2px solid var(--line)}
  .b-split-v b{font-size:20px}
}

/* ═════ THE SOURCE BAND (.b-src): where the price comes from, the coins hexagon, the cream sign ═════ */
.b-src{position:relative;filter:drop-shadow(var(--sh-7))}
.b-src-f{display:flex;align-items:center;gap:28px;min-height:150px;padding:22px 40px 24px 28px;background:var(--violet-deep);clip-path:var(--clip-panel)}
.b-src-art img{display:block;width:96px;height:96px;object-fit:contain}
.b-src-c{flex:1;min-width:0}
.b-src-h{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(28px,2.8vw,40px);text-transform:uppercase;line-height:.92;color:var(--paper)}
.b-src-c p{margin:10px 0 0;font-family:var(--read);font-size:var(--fs-read);color:var(--paper)}
.b-src-s{flex:none;padding:22px 34px 26px 26px}
.b-src-s b{font-size:clamp(28px,2.6vw,40px)}
@media (max-width:1023px){
  .b-src-s{display:none}
}
@media (max-width:760px){
  .b-src-f{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 20px 24px}
  .b-src-art img{width:72px;height:72px}
}

/* the titles on a phone (phone fix 2026-10-07): three badges side by side cut the chip words ("SHARPSHOOTER") at the chip's torn
   ends, so under 560 each title is a row, the badge left, the chip and its line beside it */
@media (max-width:560px){
  .b-titles{grid-template-columns:1fr!important;gap:14px}
  .b-title{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i c" "i p";align-items:center;column-gap:16px;text-align:left}
  .b-title img{grid-area:i;width:64px!important;height:64px!important}
  .b-title .b-chip{grid-area:c;justify-self:start;align-self:end;margin-top:0;padding:0 24px 0 14px}
  .b-title p:not(.b-chip){grid-area:p;align-self:start;margin-top:8px}
  /* the standings: tighter number columns, so the name keeps its room */
  .b-standf td,.b-standf th,.b-standf th[scope=row]{padding-left:6px;padding-right:6px}
  .b-standf td:first-child,.b-standf th:first-child{width:46px}
  .b-standf td:nth-child(3),.b-standf th:nth-child(3){width:6em}
  .b-standf .b-pl{gap:8px}.b-standf .b-av{width:28px;height:28px}
}
/* title ribbons: the chip's right notch eats ~15% of its width, so long names need room in em, at every size */
.b-title .b-chip,.b-day .b-chip{padding-right:1.9em!important;padding-left:.8em!important}
.b-chip{padding-right:max(18px,1.3em)}