/* Cade v8 kit (2026-10-06): the ONE shared visual language of the product pages, extracted from /home/v8
   (itself ported from /landing/v8). Load AFTER /ds/ds.css (fonts, resets, .shape plates) and before the page's own css:
     <body class="v8">  ...  <link rel="stylesheet" href="/ds/ds.css"><link rel="stylesheet" href="/lib/v8/v8.css">
   Shapes are only the allowed ones: --clip-panel (DS_PANEL_CLIP), their CTA plates (data-s="CTA", /ds/source-shapes.js),
   the packages/shapes tab polygon, the ribbon, the banner sign, the starburst (--burst). Nothing under 11px.
   API and usage: /lib/v8/README.md */

/* ═════ tokens + ground ═════
   colour: the grounds step --bg (page) --bg1 (ticker, footer, keys) --bg2 (panels) --bg3 (rows) --bg4 (tab, sort face)
   --bg5 (chips, bar ground, the quiet rule); --ink is the type on plates and every keyline, --shadow the hard black,
   --line the key and field keyline, --red-soft no / loss text on dark, --muted-2 the legal lines.
   shadows: --sh-2 .. --sh-9, the hard ladder: box-shadow:var(--sh-3) or filter:drop-shadow(var(--sh-7)).
   type: the SHOUT scale (--fs-hero .. --fs-plate), then DATA, CALL and READ sizes; nothing under --fs-floor (11px).
   motion: --t-* durations, --e-* easings (V8.T / V8.E in v8.js carry the same numbers). README: every token, one line. */
.v8{
  --gut:32px;--bg:#0E0D0C;--bg1:#121110;--bg2:#161514;--bg3:#1E1C1A;--bg4:#262421;--bg5:#2A2724;--muted:#B8B2A3;--muted-2:#8E897E;
  --ink:#0B0B0B;--shadow:#000;--line:#3A3734;
  --paper:#EFE9D8;--yellow:#FAF424;--orange:#FFA800;--orange-deep:#FF7A00;--violet:#9652EF;--violet-deep:#6330D3;--violet-ink:#210D49;
  --green:#91BB4F;--red:#EA2A46;--yes:#91BB4F;--no:#EA2A46;--red-soft:#FF6B80;
  --shout:"Barlow Condensed",Impact,sans-serif;--call:"Futura PT Cond","Barlow Condensed",sans-serif;
  --read:"Futura PT",system-ui,sans-serif;--data:"JetBrains Mono",ui-monospace,monospace;
  --sh-2:2px 2px 0 var(--shadow);--sh-3:3px 3px 0 var(--shadow);--sh-4:4px 4px 0 var(--shadow);--sh-5:5px 5px 0 var(--shadow);
  --sh-6:6px 6px 0 var(--shadow);--sh-7:7px 7px 0 var(--shadow);--sh-9:9px 9px 0 var(--shadow);
  --fs-hero:clamp(30px,9.4cqw,132px);--fs-h2:clamp(44px,6.2vw,92px);--fs-band:clamp(44px,4.6vw,68px);--fs-h3:clamp(34px,4vw,56px);
  --fs-h4:clamp(34px,3.2vw,48px);--fs-q:clamp(24px,2.5vw,36px);--fs-tkt:32px;--fs-side:30px;--fs-card-q:clamp(24px,1.9vw,28px);--fs-plate:22px;
  --fs-floor:11px;--fs-label:12px;--fs-key:13px;--fs-tick:14px;--fs-field:15px;--fs-input:17px;--fs-clock:28px;
  --fs-call-s:16px;--fs-call:18px;--fs-nav:19px;--fs-call-l:22px;
  --fs-read-s:16px;--fs-read:18px;--fs-lede:clamp(17px,1.5vw,21px);
  --t-key:150ms;--t-fade:200ms;--t-nav:250ms;--t-stamp:320ms;--t-reveal:450ms;--t-depth:500ms;--t-bar:600ms;--t-pop:650ms;--t-draw:670ms;--t-slash:780ms;--t-blink:1.2s;--t-breathe:3.6s;
  --e-out:cubic-bezier(.16,1,.3,1);--e-std:cubic-bezier(0,0,.2,1);--e-rise:cubic-bezier(.2,.8,.2,1);--e-stamp:cubic-bezier(.34,1.56,.64,1);--e-slash:cubic-bezier(.34,1.3,.64,1);
  --clip-panel:polygon(14px 8px,36% 10px,34.5% 0%,56% 9px,calc(100% - 18px) 0%,calc(100% - 2px) 12%,calc(100% - 12px) 32%,calc(100% - 2px) 50%,calc(100% - 16px) 64%,calc(100% - 4px) 80%,calc(100% - 14px) calc(100% - 6px),77% 100%,50% calc(100% - 8px),53% 100%,14px calc(100% - 2px),8px 72%,2px 50%,10px 20%);
  --burst:polygon(76.96% 15.82%,68.58% 0.65%,57.99% 18.01%,48.92% 0%,39.78% 21.01%,33.76% 5.83%,25.42% 21.43%,4.99% 17.72%,12.17% 38.54%,0% 51.54%,10.43% 61.88%,4.58% 76.64%,22.61% 80.52%,31% 100%,41.48% 83.43%,47.48% 99.65%,55.78% 81.8%,65.96% 97.17%,73.75% 78.49%,92.45% 84.33%,85.47% 67.52%,99.18% 65.05%,91.2% 53.02%,100% 37.99%,84.74% 30.57%,91.29% 13.45%);
  --clip-field:polygon(1.46% 100%,0 71.21%,1.2% 48.12%,0 22.93%,1.66% 0,98.6% 0,100% 26.66%,98.8% 61.82%,100% 100%);
  --clip-chip:polygon(7.47% 100%,7.47% 71.17%,0 48.05%,11.08% 22.97%,8.02% 0,97.61% 0,87.15% 26.58%,93.7% 42.04%,85.68% 61.71%,100% 100%);
  /* landing only (the kit pages never use them; kept so the landing's palette has a name): */
  --ink4:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink));
  background:var(--bg);overflow-x:clip}
.v8 ::selection{background:var(--yellow);color:#0B0B0B}
.v8 .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
.v8 .skip{position:absolute;left:12px;top:-60px;z-index:99;display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;background:var(--yellow);color:var(--ink);font-weight:600}
.v8 .skip:focus{top:12px}
.v8 a:focus-visible,.v8 button:focus-visible,.v8 input:focus-visible,.v8 [tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.v8 [id]{scroll-margin-top:96px}
.w{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.v8::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(239,233,216,.035) 0 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(120% 70% at 50% 0,#1A1714,var(--bg) 70%)}

/* ═════ the voices ═════ */
.shout{font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;line-height:.88;letter-spacing:0}
.h2{margin:0;font-size:var(--fs-h2);color:var(--paper)}
.lede{margin:10px 0 0;font-family:var(--read);font-size:var(--fs-lede);line-height:1.35;color:var(--muted)}
.tag{display:inline-block;margin:0;padding:6px 12px 5px;background:var(--orange);color:var(--ink);font-family:var(--data);font-weight:800;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--sh-3)}

/* ═════ the plates: their CTA_FACE, filled (V8.plates draws the svg) ═════ */
.plate{height:56px;min-width:0;padding:0 34px 2px 30px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:var(--fs-plate);letter-spacing:.01em;text-transform:uppercase;line-height:1;color:var(--ink);white-space:nowrap}
.plate>svg .fc{stroke-width:3}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--call);font-size:var(--fs-call);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.more span{text-decoration:none;display:inline-block;transition:transform var(--t-key) var(--e-std)}
@media (hover:hover){.more:hover span{transform:translateX(4px)}.more:hover{color:var(--yellow)}}

/* ═════ the torn panel: DS_PANEL_CLIP on the face, a hard shadow on the wrapper; cream + violet faces ═════ */
.pnl{position:relative;filter:drop-shadow(var(--sh-7));min-width:0}
.pnl-face{position:relative;clip-path:var(--clip-panel);background:var(--bg2)}
.pnl.cream .pnl-face{background:var(--paper);color:var(--ink)}
.pnl.violet .pnl-face{background:radial-gradient(circle,rgba(33,13,73,.34) 0 1.7px,transparent 2.2px) 0 0/11px 11px,radial-gradient(70% 90% at 50% 50%,var(--violet),var(--violet-deep));color:var(--paper)}
/* the starburst (their --burst): a yellow face, ink type; size it and set a background / color for another face */
.burst{display:grid;place-items:center;clip-path:var(--burst);background:var(--yellow);color:var(--ink)}

/* ═════ NAV (V8.header): transparent until the page scrolls, the menu below 860 ═════ */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background-color var(--t-nav),box-shadow var(--t-nav)}
.nav.stuck{background:var(--bg);box-shadow:0 2px 0 var(--shadow),0 5px 0 rgba(0,0,0,.45)}
.nav-in{display:flex;align-items:center;gap:28px;height:88px;transition:height var(--t-nav)}
.nav.stuck .nav-in{height:72px}
.nav-mark{display:block;flex:none;min-height:44px;padding:4px 0}
.nav-mark img{width:auto;height:52px;transition:height var(--t-nav)}
.nav.stuck .nav-mark img{height:44px}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a,.nav-drop a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-family:var(--call);font-size:var(--fs-nav);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.nav-links a[aria-current=page]{color:var(--yellow);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.nav-drop a[aria-current=page]{color:var(--yellow)}
@media (hover:hover){.nav-links a:hover{color:var(--yellow)}}
.nav-cta{height:50px;font-size:20px;padding:0 30px 2px 26px}
.nav-menu{display:none;width:44px;height:44px;place-items:center;color:var(--paper);border:2px solid var(--line);background:var(--bg2)}
.nav-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
.nav-drop{background:var(--bg);border-top:2px solid var(--bg5);box-shadow:0 4px 0 var(--shadow);padding:6px var(--gut) 12px;display:flex;flex-direction:column}
.nav-drop[hidden]{display:none}
/* the menu state at any width (V8.header({open:true}) sets it, with the drop open): what the 860 rung does, as a still state */
.nav.is-menu .nav-links{display:none}
.nav.is-menu .nav-menu{display:grid}
.nav.is-menu :is(.nav-cta,.nav-user){margin-left:auto}
/* signed in (opts.user): the account chip in place of Sign In, ink plate, hexagon avatar, hard shadow */
.nav-user{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 6px;background:var(--bg2);border:2px solid #2E2A26;box-shadow:var(--sh-3);color:var(--paper);font-family:var(--data);font-weight:500;font-size:var(--fs-field);line-height:1;letter-spacing:.04em;white-space:nowrap;transition:transform var(--t-key) var(--e-std),border-color var(--t-fade)}
.nav-user img{width:32px;height:32px;object-fit:cover;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
@media (hover:hover){.nav-user:hover{transform:translate(-2px,-2px);border-color:var(--orange)}}

/* ═════ THE STAGE: the torn art panel, SHOUT headline, cream sign (their banner) ═════
   per art crop: style="--obj:62% 40%;--obj-sm:66% 40%" on the .stage-art picture (desktop / phone) */
.stage{margin:0;position:relative;filter:drop-shadow(var(--sh-9))}
.stage-face{position:relative;aspect-ratio:var(--aspect,16/9);clip-path:var(--clip-panel);background:var(--ink);overflow:hidden;container-type:inline-size}
.stage-art,.stage-art img{position:absolute;inset:0;width:100%;height:100%}
.stage-art img{object-fit:cover;object-position:var(--obj,62% 40%)}
.stage-art{visibility:hidden;opacity:0}
.stage-art.on{visibility:visible;opacity:1;z-index:0}
.stage-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,13,12,.86) 0,rgba(14,13,12,.62) 26%,rgba(14,13,12,0) 50%),linear-gradient(0deg,rgba(11,11,11,.8) 0,rgba(11,11,11,0) 22%)}
.stage-h{position:absolute;left:5.2cqw;top:9.5cqw;z-index:2;margin:0;max-width:38cqw;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:var(--fs-hero);line-height:.86;color:var(--paper);text-shadow:.45cqw .45cqw 0 var(--shadow)}
.stage-h span{display:inline-block}
.stage-sign{position:absolute;right:5cqw;top:8.5cqw;z-index:2;margin:0;padding:2.2cqw 3cqw 1.8cqw 2.6cqw;background:var(--paper);color:var(--ink);font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(13px,3.3cqw,46px);line-height:.92;
  clip-path: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%);
  transform:rotate(-2deg);filter:drop-shadow(var(--sh-5))}
.stage-sign span{display:block;white-space:nowrap}
.stage-sign span+span{color:var(--violet-deep)}

/* ═════ sections: 112px rhythm, the heading row (SHOUT h2 + small lede, a tag or tabs on the right) ═════ */
.sec{padding:112px 0 0}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:34px}
.sec-hd>.tag{margin-bottom:8px}

/* ═════ the tabs: their packages/shapes tab polygon, orange when chosen (V8.tabs wires them) ═════ */
.tabs{display:flex;gap:12px;flex-wrap:wrap}
.tab{filter:drop-shadow(var(--sh-4));min-height:44px;transition:transform var(--t-key) var(--e-std)}
.tab span{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px 0 32px;background:var(--bg4);color:var(--paper);font-family:var(--shout);font-style:italic;font-weight:800;font-size:var(--fs-plate);text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(4% 100%,4% 71.21%,0 48.12%,5.5% 22.93%,4.5% 0,98.8% 0,93.5% 26.66%,96.8% 42.12%,92.8% 61.82%,100% 100%)}
.tab[aria-selected=true] span{background:var(--orange);color:var(--ink)}
.tab i{font-style:normal;font-family:var(--data);font-weight:800;font-size:var(--fs-key);padding:3px 6px 2px;background:var(--bg);color:var(--paper);line-height:1}
.tab[aria-selected=true] i{background:var(--ink);color:var(--orange)}
@media (hover:hover){.tab:not([aria-selected=true]):hover{transform:translate(-2px,-2px)}.tab:not([aria-selected=true]):hover span{background:#33302c}}

/* ═════ the yellow clock ribbon ═════ */
.ribbon{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
.ribbon b{display:block;min-width:4.6ch;text-align:center;padding:10px 26px 9px;background:var(--yellow);color:var(--ink);font-family:var(--data);font-weight:800;font-size:var(--fs-clock);line-height:1;font-variant-numeric:tabular-nums;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,10% 50%);filter:drop-shadow(var(--sh-3))}
.ribbon small{font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.ribbon.late b{background:var(--orange)}

/* ═════ the side plates: Higher / Lower, Yes / No (data-s="CTA", class up / down) ═════ */
.side{height:66px;width:100%;font-family:var(--shout);font-style:italic;font-weight:800;font-size:var(--fs-side);text-transform:uppercase;color:var(--ink)}
.side[aria-disabled=true]{cursor:not-allowed;color:var(--ink)}
.side[aria-disabled=true]:not([aria-pressed=true]){opacity:.38}
.side.up>svg .fc{fill:#91BB4F!important;stroke:var(--shadow)!important}.side.down>svg .fc{fill:#EA2A46!important;stroke:var(--shadow)!important}
.side[aria-disabled=true]>svg .sh{display:block!important}
.side[aria-pressed=true]{transform:translate(3px,3px)}.side[aria-pressed=true]>svg .sh{transform:translate(1px,1px)}

/* ═════ THE MARKET CARD (V8.card) on its board grid ═════ */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px}
.card{position:relative;filter:drop-shadow(var(--sh-6));transition:transform var(--t-key) var(--e-std),filter var(--t-key) var(--e-std);min-width:0}
@media (hover:hover){.card:hover{transform:translate(-2px,-2px);filter:drop-shadow(var(--sh-9))}}
.card:has(.card-a:focus-visible){outline:3px solid var(--orange);outline-offset:4px}
.card-a:focus-visible{outline:none}
.card-face{position:relative;height:100%;clip-path:var(--clip-panel);background:var(--bg2);padding:24px 24px 26px 22px;display:flex;flex-direction:column}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-id{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.card-med{display:block;height:56px}
.card-med svg{height:100%;width:auto;display:block}
.chip{display:inline-flex;align-items:center;margin:0;padding:5px 9px 4px;font-family:var(--data);font-weight:800;font-size:var(--fs-floor);letter-spacing:.1em;text-transform:uppercase;line-height:1.1;color:var(--ink);background:var(--orange);box-shadow:var(--sh-2);white-space:nowrap}
.card[data-cat=sports] .chip{background:var(--paper)}
.card[data-cat=stocks] .chip{background:var(--violet)}
.clk{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.clk b{display:block;padding:6px 15px 5px;background:var(--yellow);color:var(--ink);font-family:var(--data);font-weight:800;font-size:var(--fs-input);line-height:1;font-variant-numeric:tabular-nums;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,10% 50%);filter:drop-shadow(var(--sh-2))}
.clk small{font-family:var(--data);font-weight:700;font-size:var(--fs-floor);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.card-q{margin:18px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:var(--fs-card-q);line-height:.95;color:var(--paper);min-height:1.9em}
.card-a{color:inherit}
.card-a::after{content:"";position:absolute;inset:0;z-index:1}
@media (hover:hover){.card:hover .card-q{color:var(--yellow)}}
.card-d{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card-d b{color:var(--paper);font-weight:800}
.card-sides{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:20px}
.mside{height:48px;width:100%;min-width:0;padding:0 8px 1px;gap:8px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:19px;text-transform:uppercase;color:var(--ink);line-height:1}
.mside em{font-style:normal;font-family:var(--data);font-weight:800;font-size:var(--fs-key)}
.mside.down{color:#fff}
.mside>svg .fc{stroke-width:2.5}

/* ═════ THE LIVE TICKER (V8.ticker): one line; hover, focus or the button pause it; reduced motion: still ═════ */
.tick{display:flex;align-items:center;gap:0;height:60px;background:var(--bg1);border:2px solid var(--shadow);box-shadow:var(--sh-5)}
.tick-tag{flex:none;display:flex;align-items:center;gap:8px;align-self:stretch;margin:0;padding:0 18px 0 16px;background:var(--yellow);color:var(--ink);font-family:var(--shout);font-style:italic;font-weight:800;font-size:var(--fs-plate);text-transform:uppercase;line-height:1}
.tick-tag b{width:10px;height:10px;border-radius:50%;background:var(--no);border:2px solid var(--ink);animation:tkBlink var(--t-blink) step-end infinite}
@keyframes tkBlink{50%{opacity:0}}
.tick-win{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent)}
.tick-run{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:tkRun 60s linear infinite}
.tick-run li{display:flex;align-items:center;gap:8px;padding:0 22px;font-family:var(--data);font-weight:700;font-size:var(--fs-tick);letter-spacing:.04em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.tick-run li+li{border-left:2px solid #2E2B28}
.tick-run .who{color:var(--muted)}
.tick-run .up{color:var(--yes)}.tick-run .down{color:var(--red-soft)}
.tick-run .amt-v{color:var(--yellow)}
@keyframes tkRun{to{transform:translateX(-50%)}}
.tick[data-paused] .tick-run,.tick:hover .tick-run,.tick:focus-within .tick-run{animation-play-state:paused}
.tick-pp{flex:none;width:44px;height:44px;margin:0 8px;display:grid;place-items:center;border:2px solid var(--line);background:var(--bg);color:var(--paper)}
.tick-pp svg{width:14px;height:14px;fill:currentColor}
.tick-pp .i-play{display:none}.tick-pp[aria-pressed=true] .i-play{display:block}.tick-pp[aria-pressed=true] .i-pause{display:none}
@media (hover:hover){.tick-pp:hover{border-color:var(--paper)}}
.tick[data-still] .tick-run [data-copy]{display:none}
.tick[data-still] .tick-pp{display:none}

/* ═════ FOOTER (V8.footer) ═════ */
.foot{margin-top:104px;background:var(--bg1);border-top:2px solid var(--shadow)}
.foot-top{display:flex;align-items:flex-start;gap:40px 64px;padding:40px 0 34px}
.foot-mark img{height:62px;width:auto}
.foot-cols{display:flex;gap:56px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-col h2{margin:0 0 4px;font-family:var(--data);font-weight:800;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.foot-col a{display:inline-flex;align-items:center;min-height:40px;font-family:var(--call);font-size:var(--fs-call);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
@media (hover:hover){.foot-col a:hover,.soc a:hover{color:var(--yellow)}}
.soc{display:flex;gap:6px;list-style:none;margin:0 0 0 auto;padding:0}
.soc a{display:grid;place-items:center;width:44px;height:44px;color:var(--paper)}
.soc svg{width:24px;height:24px;fill:currentColor}
.foot-bot{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding:22px 0;border-top:2px solid var(--bg5)}
.foot-bot p{margin:0;font-family:var(--data);font-weight:500;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-legal{padding:0 0 30px;max-width:96ch}
.foot-legal p{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--muted-2)}
.foot-legal b{color:#B5AFA2;font-weight:600}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:underline;text-underline-offset:3px}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════
   THE PRODUCT PARTS (2026-10-06 realignment): what the eight v8 pages had each copied, now ONE name here.
   A page keeps only its deltas (a size, a colour on cream) in its own css. README: every class, one line each.
   ════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═════ the hero: the stage, its tabs riding on the art's lower left, the band under it ═════ */
.hero{padding:104px 0 0}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.hero .stage{grid-area:1/1}
.hero-tabs{grid-area:1/1;align-self:end;justify-self:start;z-index:3;margin:0 0 4.4%;padding-left:4.2%}
/* stage aspect variants (desktop / phone): default 16:9 / 1:1; .wide 21:9 / 1:1; .strip 16:6.2 / 5:4; a page may set --aspect / --aspect-sm */
.stage.wide{--aspect:21/9}
.stage.strip{--aspect:16/6.2;--aspect-sm:5/4}

/* ═════ the stats band: the category | its line | the stats | the door. .band-st is the stats row on its own ═════ */
.band{filter:drop-shadow(var(--sh-7))}
.band-face{clip-path:var(--clip-panel);background:var(--bg2);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"h p st" "h m st";align-items:center;gap:6px 36px;padding:30px 52px 28px 48px}
.band-h{grid-area:h;margin:0;font-size:var(--fs-band);color:var(--paper);padding-right:36px;border-right:2px solid var(--line);line-height:.86;white-space:nowrap;min-width:5.4em}
.band-p{grid-area:p;align-self:end;margin:0;max-width:34ch;font-family:var(--read);font-size:clamp(17px,1.4vw,20px);line-height:1.35;color:var(--paper)}
.band-more{grid-area:m;align-self:start;justify-self:start;font-size:16px}
.band-st{grid-area:st;display:grid;grid-auto-flow:column;margin:0}
.band-st div{display:flex;flex-direction:column-reverse;gap:6px;padding:0 24px}
.band-st div+div{border-left:2px solid #34312d}
.band-st div:last-child{padding-right:0}
.band-st dd{margin:0;font-family:var(--data);font-weight:800;font-size:clamp(28px,2.6vw,40px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.band-st dt{font-family:var(--read);font-size:var(--fs-read-s);color:var(--muted)}
.band-st div:last-child dd{color:var(--yellow)}

/* ═════ small controls: the ghost key (pause, replay), the icon key, the outlined button, the toast ═════ */
.ghost{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--line);background:var(--bg1);color:var(--paper);font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ghost svg{width:14px;height:14px;fill:currentColor}
.ghost .i-play{display:none}.ghost[aria-pressed=true] .i-play{display:block}.ghost[aria-pressed=true] .i-pause{display:none}
.ghost[hidden]{display:none}
@media (hover:hover){.ghost:hover{border-color:var(--paper)}}
.ib{display:grid;place-items:center;flex:none;width:44px;height:44px;border:2px solid var(--line);background:var(--bg1);color:var(--paper);box-shadow:var(--sh-3);transition:transform var(--t-key) var(--e-std),border-color var(--t-key)}
.ib svg{width:20px;height:20px}
.ib:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
@media (hover:hover){.ib:not(:disabled):hover{border-color:var(--paper);transform:translate(-2px,-2px)}}
.btn-o{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:2px solid var(--line);background:var(--bg1);color:var(--paper);box-shadow:var(--sh-3);font-family:var(--data);font-weight:800;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:transform var(--t-key) var(--e-std),border-color var(--t-key)}
.btn-o:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.btn-o[hidden]{display:none}
@media (hover:hover){.btn-o:not(:disabled):hover{border-color:var(--paper);transform:translate(-2px,-2px)}}
/* the keys and the tab, disabled: .38 like .ib / .btn-o (nothing on the pages disables them yet) */
.ghost:disabled,.ghost[aria-disabled=true],.tab:disabled,.tab[aria-disabled=true]{opacity:.38;cursor:not-allowed}
/* ═════ still states: .is-hover .is-focus .is-pressed (or .is-press) .is-disabled, as the ds.css plates have; a specimen,
   a screenshot or a forced state shows a state without the pointer. Pressed: the ghost's aria-pressed look, the chosen tab.
   Not a state there: .btn-o / .ib pressed (one-shot keys), .more pressed / disabled (a text link) ═════ */
.btn-o.is-hover,.ib.is-hover{border-color:var(--paper);transform:translate(-2px,-2px)}
.ghost.is-hover{border-color:var(--paper)}
.more.is-hover{color:var(--yellow)}.more.is-hover span{transform:translateX(4px)}
.tab.is-hover{transform:translate(-2px,-2px)}.tab.is-hover span{background:#33302c}
:is(.btn-o,.ib,.ghost,.more,.tab).is-focus{outline:3px solid var(--orange);outline-offset:3px}
.ghost:is(.is-pressed,.is-press) .i-play{display:block}.ghost:is(.is-pressed,.is-press) .i-pause{display:none}
.tab:is(.is-pressed,.is-press) span{background:var(--orange);color:var(--ink)}
.tab:is(.is-pressed,.is-press) i{background:var(--ink);color:var(--orange)}
:is(.btn-o,.ib).is-disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
:is(.ghost,.tab).is-disabled{opacity:.38;cursor:not-allowed}
.tw{position:relative;display:inline-flex}
.toast{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:5px 9px 4px;background:var(--paper);color:var(--ink);font-family:var(--data);font-weight:800;font-size:var(--fs-floor);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity var(--t-key)}
.toast.on{opacity:1}

/* ═════ form bits: the text field, the labelled select / input, search + sort, the money field ═════ */
.inp{display:flex;align-items:center;gap:4px;height:52px;padding:0 14px;background:var(--paper);color:var(--ink);box-shadow:var(--sh-4);font-family:var(--data);font-weight:800;font-size:var(--fs-input);min-width:0}
.inp span{flex:none;color:#5E594F}
.inp input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;color:inherit;outline:none}
.inp input::placeholder{color:#8a857a}
.inp:focus-within{outline:3px solid var(--orange);outline-offset:3px}
.lfield{position:relative;display:flex;flex-direction:column;gap:8px}
.lfield-k{font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lfield select,.lfield input{height:48px;border:2px solid var(--line);background:var(--bg1);color:var(--paper);box-shadow:var(--sh-3);font-family:var(--data);font-weight:700;font-size:var(--fs-field);letter-spacing:.04em;outline:none}
.lfield select{appearance:none;-webkit-appearance:none;min-width:210px;padding:0 44px 0 14px;cursor:pointer}
.lfield.sel svg{position:absolute;right:14px;bottom:15px;width:16px;height:16px;color:var(--paper);pointer-events:none}
.lfield .sig{position:absolute;left:14px;bottom:13px;font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--yellow)}
.lfield input::placeholder{color:#6E695F}
.lfield select:focus-visible,.lfield input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (hover:hover){.lfield select:hover,.lfield input:hover{border-color:var(--paper)}}
.srch{display:block;width:clamp(240px,24vw,340px);filter:drop-shadow(var(--sh-4))}
.srch input{display:block;width:100%;height:56px;padding:0 18px;border:0;border-radius:0;background:var(--paper);color:var(--ink);font-family:var(--data);font-weight:700;font-size:var(--fs-input);letter-spacing:.02em;-webkit-appearance:none;appearance:none;clip-path:var(--clip-field)}
.srch input::placeholder{color:#6f6a60;opacity:1}
.srch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.srch:focus-within{outline:3px solid var(--orange);outline-offset:3px}
.srch input:focus-visible{outline:none}
.sort{display:flex;flex-direction:column;gap:6px}
.sort-l{font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sort-f{position:relative;display:block;filter:drop-shadow(var(--sh-4))}
.sort select{display:block;height:56px;min-width:200px;padding:0 46px 0 18px;border:0;border-radius:0;background:var(--bg4);color:var(--paper);font-family:var(--call);font-size:20px;letter-spacing:.06em;text-transform:uppercase;-webkit-appearance:none;appearance:none;cursor:pointer;clip-path:var(--clip-field)}
.sort select option{background:var(--bg2);color:var(--paper)}
.sort-f b{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--yellow);font-size:16px}
.sort-f:focus-within{outline:3px solid var(--orange);outline-offset:3px}
.sort select:focus-visible{outline:none}
@media (hover:hover){.sort select:hover{background:#33302c}}
.amt{display:flex;align-items:center;gap:6px;margin-top:10px;height:56px;padding:0 16px;background:var(--paper);color:var(--ink);box-shadow:var(--sh-4);clip-path:var(--clip-field);font-family:var(--data);font-weight:800;font-size:24px}
.amt input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;color:inherit;text-align:right;outline:none}
.amt:focus-within{outline:3px solid var(--orange);outline-offset:3px;clip-path:none}
.amt input::placeholder{color:#8a857a}

/* ═════ the quick amounts: 10% 25% 50% Max (default) or the fixed stakes $10 $50 $100 (.chips.fixed, yellow when picked) ═════ */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.chips button{filter:drop-shadow(var(--sh-3));min-height:44px}
.chips span{display:flex;align-items:center;justify-content:center;height:44px;background:var(--bg5);color:var(--paper);font-family:var(--data);font-weight:700;font-size:var(--fs-key);text-transform:uppercase;clip-path:var(--clip-chip)}
.chips button[aria-pressed=true] span{background:var(--paper);color:var(--ink)}
@media (hover:hover){.chips button:not([aria-pressed=true]):hover span{background:#3a3632}}
.chips.fixed{grid-template-columns:repeat(3,1fr);gap:10px}
.chips.fixed span{font-weight:800;font-size:15px}
.chips.fixed button[aria-pressed=true] span{background:var(--yellow)}
.sides{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.side em{font-style:normal;font-family:var(--data);font-weight:800}

/* ═════ THE LIVE ROUND: the question + clock, the price and its move, the chart or the field, the ticket ═════
   <div class="pnl-face round" data-kind="price|field|court"><div class="round-main">...</div><form class="tkt">...</form></div> */
.round{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 34px;padding:34px 40px 40px 38px}
.round-main{min-width:0}
.round-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.round-q{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:var(--fs-q);line-height:.98;color:var(--paper);max-width:24ch;min-height:2em}
.round-clk{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.round[data-late=true] .ribbon b{background:var(--orange)}
.round-now{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;min-height:48px}
.round-px{display:flex;align-items:baseline;gap:14px;margin:0}
.round-px small{font-family:var(--call);font-size:var(--fs-call-l);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.round-px b{font-family:var(--data);font-weight:800;font-size:clamp(28px,3vw,42px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
/* the move against the line (builds on ds.css .delta, see the reserved names) */
.delta{margin:0;padding:6px 12px 5px;background:var(--yes);color:var(--ink);font-family:var(--data);font-weight:800;font-size:var(--fs-tick);letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--sh-3);white-space:nowrap}
.delta[data-up=false]{background:var(--no)}
.delta[data-up=n]{background:var(--paper)}
.delta b{font-weight:800}
.round-view{position:relative}
/* a game round (data-kind field or court): no price row, no chart; the field fills the column */
.round:where([data-kind=field],[data-kind=court]) .round-main{display:flex;flex-direction:column}
.round:where([data-kind=field],[data-kind=court]) .round-now,.round:where([data-kind=field],[data-kind=court]) .lc-host{display:none}
.round:where([data-kind=field],[data-kind=court]) .round-view{flex:1;display:flex;flex-direction:column;margin-top:18px}
.round:where([data-kind=field],[data-kind=court]) .field{flex:1;height:auto;min-height:300px}
@media (min-width:761px){.round:where([data-kind=field],[data-kind=court]) .round-clk{flex-direction:row;align-items:flex-start;gap:14px}}
/* the ticket */
.tkt{display:flex;flex-direction:column;padding-top:4px;min-width:0}
.tkt-h{margin:0 0 18px;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:var(--fs-tkt);line-height:.9;color:var(--yellow)}
.tkt-lbl{font-family:var(--call);font-size:var(--fs-call-l);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.tkt-hint{margin:8px 0 0;font-family:var(--data);font-size:var(--fs-label);color:var(--muted);letter-spacing:.04em}
.tkt-hint[data-bad]{color:#FF7A8A}
.tkt-pay{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0}
.tkt-pay div{display:flex;flex-direction:column;gap:4px}
.tkt-pay dt{font-family:var(--data);font-weight:700;font-size:var(--fs-floor);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tkt-pay dd{margin:0;font-family:var(--data);font-weight:800;font-size:18px;color:var(--paper);font-variant-numeric:tabular-nums}
.tkt-msg{min-height:3.4em;margin:14px 0 0;font-family:var(--read);font-size:var(--fs-read-s);line-height:1.35;color:var(--paper)}
.tkt-msg b{color:var(--yellow);font-weight:600}
.tkt-fine{margin:auto 0 0;padding-top:6px;font-family:var(--data);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}

/* ═════ the field plate (the gridiron or the court in a torn frame), the event label, the scorebug, the settle stamp ═════ */
.field{position:relative;filter:drop-shadow(6px 6px 0 var(--ink))}
.field[hidden]{display:none}
.field::before{content:"";position:absolute;inset:0;clip-path:var(--clip-panel);background:#111}
.field-svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);display:block;clip-path:var(--clip-panel)}
.field-svg .draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:v8Draw var(--t-draw) var(--e-std) forwards}
@keyframes v8Draw{to{stroke-dashoffset:0}}
.field-svg .pop{transform-box:fill-box;transform-origin:center;animation:v8Pop var(--t-pop) var(--e-out) .82s both}
@keyframes v8Pop{from{transform:scale(.8);opacity:0}}
.field-svg .late{animation:v8Late var(--t-nav) ease .72s both}
@keyframes v8Late{from{opacity:0}}
.field-ev{position:absolute;z-index:3;left:50%;bottom:16%;margin:0;padding:8px 16px 6px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--sh-4);font-family:var(--shout);font-style:italic;font-weight:800;font-size:26px;text-transform:uppercase;line-height:1;white-space:nowrap;transform:translate(-50%,50%);opacity:0;transition:opacity var(--t-fade)}
.field-ev.on{opacity:1}
.field-ev[data-tone=yes]{background:var(--yes)}.field-ev[data-tone=no]{background:var(--no);color:#fff}
.bug{position:absolute;z-index:3;left:24px;top:22px;margin:0;display:flex;align-items:stretch;box-shadow:var(--sh-4);outline:2px solid var(--ink);font-family:var(--data);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.bug-sc{display:flex;align-items:center;background:var(--ink);color:var(--paper);font-size:22px}
.bug-sc i{font-style:normal;align-self:stretch;display:flex;align-items:center;padding:0 9px;font-size:14px;letter-spacing:.04em;color:#fff;background:var(--t)}
.bug-sc b{padding:8px 12px 7px;font-weight:800}
.bug-dd{display:flex;align-items:center;padding:0 12px;background:var(--paper);color:var(--ink);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.stamp{position:absolute;z-index:4;left:50%;top:52%;margin:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 28px 12px;white-space:nowrap;
  border:4px solid var(--ink);box-shadow:var(--sh-7);outline:3px solid var(--ink);outline-offset:5px;background:var(--paper);color:var(--ink);text-align:center}
.stamp[hidden]{display:none}
.stamp b{font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:var(--fs-h3);line-height:.9}
.stamp span{font-family:var(--data);font-weight:800;font-size:var(--fs-key);letter-spacing:.1em;text-transform:uppercase}
.stamp[data-tone=yes]{background:var(--yes)}.stamp[data-tone=no]{background:var(--no);color:#fff}
.stamp:not([hidden]){animation:v8Stamp var(--t-stamp) var(--e-stamp) both}
@keyframes v8Stamp{from{transform:translate(-50%,-50%) scale(1.6);opacity:0}}

/* ═════ the clock ribbon variants: .big (the scoreboard), .ink (on cream), .stack (stays stacked on a phone) ═════ */
.ribbon.big b{font-size:32px;padding:11px 30px 10px}
.ribbon.ink small{color:var(--ink)}

/* ═════ THE SCORELINE: home | the clock | away; team octagons (min ~42px, the letters stay at 11px), big scores ═════
   <div class="scl"><div class="scl-t home"><span class="scl-med"></span><p class="scl-n">..</p><p class="scl-s">48</p></div>
   <div class="scl-mid"><p class="on-air"><b></b>Live</p><div class="ribbon">..</div></div><div class="scl-t away">..</div></div> */
.scl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.scl-t{display:flex;align-items:center;min-width:0;gap:18px}
.scl-t.away{justify-content:flex-end;text-align:right}
.scl-med{flex:none;display:block;width:var(--med,76px);height:var(--med,76px)}
.scl-med svg{width:100%;height:100%;display:block}
.scl-n{margin:0;min-width:0;display:flex;flex-direction:column;gap:4px}
.scl-n b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(30px,3vw,44px);line-height:.9;color:var(--paper);text-transform:uppercase}
.scl-n span{font-family:var(--call);font-size:var(--fs-input);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.scl-s{margin:0 0 0 auto;font-family:var(--data);font-weight:800;font-size:clamp(46px,5.4vw,78px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.scl-t.away .scl-s{margin:0 auto 0 0}
.scl-s.lead{color:var(--yellow)}
.scl-s.bump{animation:v8Bump var(--t-depth) var(--e-out)}
@keyframes v8Bump{0%{transform:scale(1.35)}100%{transform:none}}
.scl-mid{display:flex;flex-direction:column;align-items:center;gap:12px}
/* the Live chip (not ds.css .live): yellow, or .red */
.on-air{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px 5px;background:var(--yellow);color:var(--ink);font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;text-transform:uppercase;line-height:1;box-shadow:var(--sh-3)}
.on-air b{width:10px;height:10px;border-radius:50%;background:var(--no);border:2px solid var(--ink);animation:tkBlink var(--t-blink) step-end infinite}
.on-air.red{background:var(--red);color:#fff}.on-air.red b{background:#fff}

/* ═════ the game numbers: comparison bars (flat, or .slash: their battle parallelogram), the box score, the play log ═════ */
.duel-bar{display:flex;height:26px;border:2px solid var(--ink);box-shadow:var(--sh-4);background:var(--b)}
.duel-bar i{display:block;width:calc(var(--p) * 100%);background:var(--a);border-right:3px solid var(--ink);transition:width var(--t-bar) var(--e-out)}
.duel-bar.slash{display:block;position:relative;height:30px;background:var(--b,var(--violet));border-width:3px;box-shadow:var(--sh-5);overflow:hidden}
.duel-bar.slash i{position:absolute;inset:0;width:auto;border:0;background:var(--a,var(--orange));clip-path:polygon(0 0,calc(var(--p) * 100% + 9px) 0,calc(var(--p) * 100% - 9px) 100%,0 100%);transition:clip-path var(--t-slash) var(--e-slash)}
.duel-bar.slash i::after{content:"";position:absolute;inset:0}
.duel-bar.slash s{position:absolute;top:-4px;bottom:-4px;left:calc(var(--p) * 100% - 12px);width:24px;background:var(--ink);clip-path:polygon(15px 0,24px 0,9px 100%,0 100%);transition:left var(--t-slash) var(--e-slash)}
.box{width:100%;border-collapse:collapse}
.box thead th:first-child,.box td:first-child{text-align:left}
.box thead th:last-child,.box td:last-child{text-align:right}
.box td{font-family:var(--data);font-weight:800;font-size:clamp(22px,2vw,28px);color:var(--paper);font-variant-numeric:tabular-nums}
.box :where(thead th){font-family:var(--data);font-weight:800;font-size:var(--fs-key);letter-spacing:.1em;color:var(--muted);text-align:center}
.box :where(tbody th){font-family:var(--call);font-weight:500;font-size:var(--fs-call);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.plog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plog li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;border:2px solid var(--ink)}
.plog li.new{animation:v8LogIn var(--t-reveal) var(--e-out)}
@keyframes v8LogIn{from{opacity:0;transform:translateY(-10px)}}
.plog-t{font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--muted);font-variant-numeric:tabular-nums}
.plog li:first-child .plog-t{color:var(--yellow)}
.plog-m{display:block}
.plog-w{font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;line-height:1;color:var(--paper);min-width:0}
.plog-r{font-family:var(--data);font-weight:800;font-size:var(--fs-field);color:var(--muted);white-space:nowrap}
.plog-r.hit{padding:5px 9px 4px;background:var(--yellow);color:var(--ink);box-shadow:var(--sh-2)}
.plog-r.hit.yes{background:var(--yes)}

/* ═════ THE SCOREBOARD GAME CARD (V8.gameCard), on the .card shell ═════ */
.games{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
.games>li[hidden]{display:none}
.gcard .card-face{padding:24px 26px 26px 24px}
.g-sc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:20px 0 0}
.g-tm{display:flex;flex-direction:column;gap:4px;min-width:0}
.g-tm.a{align-items:flex-end;text-align:right}
.g-tm b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(34px,3vw,44px);line-height:.86;color:var(--paper);text-transform:uppercase}
.g-tm small{font-family:var(--data);font-weight:700;font-size:var(--fs-floor);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.g-n{font-family:var(--data);font-weight:800;font-size:clamp(30px,2.6vw,38px);line-height:1;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.g-n i{font-style:normal;color:var(--muted);padding:0 6px}
.g-wp{margin:20px 0 0}
.g-wp-l{display:flex;justify-content:space-between;gap:10px;margin:0 0 7px;font-family:var(--data);font-weight:800;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.g-wp-l span:first-child{color:var(--muted)}
.g-bar{display:flex;height:12px;border:2px solid var(--shadow);box-shadow:var(--sh-3);background:var(--bg5)}
.g-bar i{display:block;height:100%}
.g-bar i+i{border-left:2px solid var(--shadow)}
.g-bar.off{background:repeating-linear-gradient(135deg,var(--bg5) 0 6px,#211F1D 6px 12px)}
.gcard .card-d{margin-top:16px}
.g-go{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px;font-family:var(--call);font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.g-go span{display:inline-block;transition:transform var(--t-key) var(--e-std)}
@media (hover:hover){.gcard:hover .g-go{color:var(--yellow)}.gcard:hover .g-go span{transform:translateX(4px)}}
.gcard .clk.off b{background:var(--line);color:var(--paper)}
.gcard .clk.off small{color:var(--muted)}
.gcard .clk.done b{background:var(--paper)}
.gcard .clk.done small{color:var(--paper)}
.gcard[data-state=delayed] .chip,.gcard[data-state=final] .chip{background:var(--line);color:var(--paper)}

/* ═════ the list panel: a torn panel of rows (time | octagon | what | the action or the value) ═════ */
.list{height:100%;padding:30px 36px 34px 32px}
.list-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px solid #2E2B28}
.list-h{margin:0;font-size:var(--fs-h4);color:var(--paper)}
.list-k{margin:0;font-family:var(--data);font-weight:800;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.irows{list-style:none;margin:0;padding:0}
.irow{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:72px;padding:10px 0;border-bottom:2px solid #24211F}
.irow:last-child{border-bottom:0}
.irow-t{display:flex;flex-direction:column;gap:3px;min-width:58px;font-family:var(--data);font-weight:800;line-height:1}
.irow-t small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.irow-t b{font-size:17px;color:var(--paper)}
.irow-med{display:block;height:40px}
.irow-med svg{height:100%;width:auto;display:block}
.irow-c{min-width:0;display:flex;flex-direction:column;gap:4px}
.irow-q{font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:var(--fs-plate);line-height:.95;color:var(--paper)}
.irow-q em{font-style:inherit}
.irow-q em[data-side=yes]{color:var(--yes)}.irow-q em[data-side=no]{color:var(--red-soft)}
.irow-l{font-family:var(--data);font-weight:700;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.irow-a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--call);font-size:var(--fs-call-s);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;white-space:nowrap}
@media (hover:hover){.irow-a:hover{color:var(--yellow)}}
.irow-v{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--data);font-weight:800;line-height:1}
.irow-v small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.irow-v b{font-size:19px;color:var(--yellow)}
.irow-v b.won{color:var(--yes)}

/* ═════ states and small type: the empty / unavailable panel, profit and loss on data, the fine print, the plate row ═════ */
.empty[hidden]{display:none}
.empty .pnl-face{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:44px 48px 48px}
.empty-h{margin:0;font-size:var(--fs-h3);color:var(--paper)}
.empty-p{margin:0;max-width:52ch;font-family:var(--read);font-size:var(--fs-read);line-height:1.4;color:var(--muted)}
.empty .plate{margin-top:10px}
.empty .plate[hidden]{display:none}
.pnlt[data-t=up]{color:var(--green)}.pnlt[data-t=down]{color:var(--red-soft)}.pnlt[data-t=flat]{color:var(--paper)}
.fine{margin:48px 0 0;font-family:var(--data);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.5}
.fine[hidden]{display:none}
.more-row{margin:44px 0 0;display:flex;justify-content:center}
.more-plate{height:58px;font-size:23px}
.more-plate[hidden]{display:none}
.tick-sec{padding-top:80px}

/* ═════ THEIR live chart (/lib/live-chart.js) inside a v8 page: nothing under 11px ═════ */
.v8 .lc :is(.lc-cap span,.lc-tick b,.lc-ey,.lc-fg,.lc-tip small,.lc-ticker span,.lc-delta span,.lc-plate small,.lc-read span,.lc-shut-t,.lc-shut-v,.lc-start){font-size:11px!important}

/* ═════ motion: V8.intro (flash, slam, stamp, pop), V8.depth, V8.loops, V8.reveal; everything readable without it ═════ */
.fx-flash{position:absolute;inset:0;z-index:5;background:var(--yellow);opacity:0;pointer-events:none}
.stage-art img{transition:translate var(--t-depth) var(--e-out)}
.stage.fx-on .stage-art.on img,.stage.fx-on .stage-art.on .art-loop{scale:1.03;translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -6px)}
.stage.fx-on .stage-h{translate:calc(var(--mx,0) * 6px) calc(var(--my,0) * 4px);transition:translate var(--t-depth) var(--e-out)}
.stage.fx-on .stage-sign{translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 9px);animation:fxBreathe var(--t-breathe) ease-in-out infinite;transition:translate var(--t-depth) var(--e-out)}
@keyframes fxBreathe{0%,100%{scale:1}50%{scale:1.035}}
.fx-off .stage-sign{animation-play-state:paused!important}
.art-loop{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity var(--t-bar) ease,translate var(--t-depth) var(--e-out);pointer-events:none}
.art-loop.on{opacity:1}
/* v9 (2026-10-07, html.v9 set by v8.js on the /v9/ pages only): the still hides once its loop is on (the video takes the img's
   exact box, fit, position and clip, see V8.loop), and the pointer depth is a calm drift: the art 4 / 3px, the words 3 / 2px,
   the sign 6 / 4px (the v8 pages keep 10 / 6, 6 / 4, 14 / 9) */
html.v9 img.loop-under{visibility:hidden}
html.v9 .stage.fx-on .stage-art.on img,html.v9 .stage.fx-on .stage-art.on .art-loop{translate:calc(var(--mx,0) * -4px) calc(var(--my,0) * -3px)}
html.v9 .stage.fx-on .stage-h{translate:calc(var(--mx,0) * 3px) calc(var(--my,0) * 2px)}
html.v9 .stage.fx-on .stage-sign{translate:calc(var(--mx,0) * 6px) calc(var(--my,0) * 4px)}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity var(--t-reveal) var(--e-std),transform var(--t-reveal) var(--e-rise)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.nav,.nav-in,.nav-mark img,.more span,.tab,.card,.stage-art img,.nav-user{transition:none}
  .stage-sign{animation:none!important}.art-loop{display:none}.tick-tag b{animation:none}.tick-run{animation:none}}
html.static .rv{opacity:1;transform:none;transition:none}
html.static .stage-sign,html.static .tick-tag b,html.static .tick-run{animation:none!important}
html.static .art-loop{display:none}
@media (prefers-reduced-motion:reduce){.stamp:not([hidden]),.field-ev.on,.on-air b,.scl-s.bump,.plog li.new{animation:none}
  .field-svg .draw,.field-svg .pop,.field-svg .late{animation:none;stroke-dashoffset:0}
  .field-ev,.duel-bar i,.duel-bar s,.g-go span,.ib,.btn-o,.toast{transition:none}.ib:hover,.btn-o:hover{transform:none}}
html.static .stamp:not([hidden]),html.static .field-ev.on,html.static .on-air b{animation:none!important}
html.static .field-svg .draw,html.static .field-svg .pop,html.static .field-svg .late{animation:none;stroke-dashoffset:0}

/* ═════ the 1180 / 1100 / 860 / 760 / 360 rungs ═════ */
@media (max-width:1180px){
  .nav-in{gap:18px}
  .nav-links{gap:0}
  .nav-links a{padding:0 11px;font-size:17px}
  .nav-cta{padding:0 24px 2px 22px;font-size:18px}
}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-id{flex-direction:row;align-items:center;gap:12px}.card-q{min-height:0;margin-top:16px}}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta,.nav-user{margin-left:auto}
  .nav-menu{display:grid}
}
@media (max-width:760px){
  :root .v8{--gut:16px}
  .nav-in{gap:12px;height:72px}
  .nav-mark img{height:40px}.nav.stuck .nav-mark img{height:38px}
  .nav-cta{height:46px;font-size:17px;padding:0 20px 2px 18px}
  .nav-user{font-size:13px;min-height:40px;padding:4px 10px 4px 4px}
  .stage-h{top:7cqw;left:6cqw;font-size:12.4cqw;max-width:56cqw}
  .stage-sign{top:auto;bottom:7cqw;right:6cqw;font-size:max(13px,4.8cqw);padding:2.6cqw 3.6cqw 2.2cqw 3.2cqw}
  .stage-shade{background:linear-gradient(180deg,rgba(14,13,12,.82) 0,rgba(14,13,12,.35) 50%,rgba(14,13,12,0) 62%),linear-gradient(0deg,rgba(11,11,11,.55) 0,rgba(11,11,11,0) 22%)}
  .stage-art img{object-position:var(--obj-sm,66% 40%)}
  .tab span{height:50px;padding:0 10px 0 12px;font-size:clamp(15px,4.4vw,19px);white-space:normal;text-align:center;line-height:.95}
  .sec{padding-top:64px}
  .sec-hd{margin-bottom:24px}
  .h2{font-size:clamp(40px,12vw,56px)}
  .sec-hd>.tag{margin-bottom:0}
  .pnl{filter:drop-shadow(var(--sh-5))}
  .ribbon{flex-direction:row;gap:12px}
  .ribbon b{font-size:24px;padding:8px 20px 7px}
  .side{height:60px;font-size:24px;min-width:0;padding:0 14px}
  .grid{grid-template-columns:1fr;gap:24px}
  .card-face{padding:22px 22px 24px 20px}
  .card-med{height:50px}
  .card-sides{padding-top:18px}
  .tick{height:54px}
  .tick-tag{font-size:19px;padding:0 12px}
  .tick-run li{font-size:13px;padding:0 16px}
  .tick-pp{margin:0 5px}
  .foot{margin-top:64px}
  .foot-top{flex-wrap:wrap;gap:24px 20px;padding:30px 0 24px}
  .foot-mark img{height:50px}
  .soc{margin-left:auto}
  .foot-cols{order:3;width:100%;gap:40px}
  .foot-bot{flex-direction:column}
}
@media (max-width:360px){
  .nav-cta{font-size:15px;padding:0 14px 2px 13px;height:44px}
  .nav-mark img{height:34px}
  .nav-user span{display:none}.nav-user{padding:4px}
  .side{font-size:21px}
  .mside{font-size:17px;gap:6px}
  .card-face{padding:20px 18px 22px 18px}
  .tick-tag{font-size:17px;padding:0 10px}
  .ribbon{gap:8px}.ribbon b{padding:8px 14px 7px;font-size:22px}.ribbon small{letter-spacing:.04em}
}

/* ═════ the product parts on the 1180 / 1023 / 760 / 360 rungs ═════ */
@media (max-width:1180px){
  .band-face{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"h p" "h m" "st st";row-gap:8px;padding:28px 40px 30px}
  .band-st{margin-top:18px;padding-top:18px;border-top:2px solid #34312d;justify-content:start}
  .band-st div:first-child{padding-left:0}
  .round{grid-template-columns:minmax(0,1fr) 260px;gap:0 26px;padding:30px 30px 34px}
}
@media (max-width:1100px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){
  .round{grid-template-columns:1fr;gap:24px}
  .tkt{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"h h" "lbl lbl" "amt sides" "hint sides" "chips sides" "pay pay" "msg msg" "fine fine";gap:0 22px;align-items:start}
  .tkt-h{grid-area:h}.tkt-lbl{grid-area:lbl}.tkt .amt{grid-area:amt}.tkt-hint{grid-area:hint}.tkt .chips{grid-area:chips}.tkt .sides{grid-area:sides;margin-top:10px}.tkt-pay{grid-area:pay}.tkt-msg{grid-area:msg}.tkt-fine{grid-area:fine;margin-top:10px}
  .round:where([data-kind=field],[data-kind=court]) .field{min-height:320px}
}
@media (max-width:760px){
  .scl-n b{font-size:24px}
  .scl-s{font-size:clamp(34px,10vw,44px)}
  .plog-t,.plog-r{font-size:var(--fs-key)}
  .plog-w{font-size:21px}
  .box td{font-size:22px}
  .box :where(tbody th){font-size:var(--fs-call-s)}
  .stage-face{aspect-ratio:var(--aspect-sm,1/1)}
  .hero{padding-top:84px}
  .hero-in{gap:0}
  .hero-tabs{grid-area:auto;align-self:auto;margin:22px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .hero-tabs .tab span{white-space:nowrap}
  .band{margin-top:28px}
  .band-face{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 24px 26px 22px}
  .band-h{padding:0;border:0;font-size:min(13vw,56px);min-width:0}
  .band-p{font-size:17px}
  .band-st{width:100%;margin-top:6px;padding-top:16px;grid-auto-flow:row;grid-template-columns:repeat(3,auto);justify-content:space-between}
  .band-st div{padding:0 0 0 14px}
  .band-st dd{font-size:clamp(20px,6.2vw,26px)}
  .band-st dt{font-size:14px}
  .ghost.compact{width:44px;padding:0;justify-content:center}
  .ghost.compact span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .round{padding:24px 20px 26px}
  .round-top{flex-direction:column;gap:12px}
  .round-q{min-height:0;font-size:clamp(23px,6.6vw,28px)}
  .round-clk{flex-direction:row;justify-content:space-between;align-self:stretch}
  .round-px small{font-size:18px}
  .round:where([data-kind=field],[data-kind=court]) .round-view{margin-top:14px}
  .round:where([data-kind=field],[data-kind=court]) .field{min-height:0;height:clamp(220px,62vw,260px);flex:none}
  .tkt{display:flex;align-items:stretch;padding-top:0}
  .tkt-lbl{font-size:18px}
  .amt{height:50px;margin-top:6px}
  .tkt-hint{margin-top:6px}
  .tkt .chips{margin-top:8px}
  .tkt-msg{min-height:0}
  .sides,.tkt .sides{flex-direction:row;gap:12px;margin-top:16px}
  .bug{left:16px;top:16px}
  .bug-sc{font-size:17px}.bug-sc i{font-size:12px;padding:0 6px}.bug-sc b{padding:6px 8px 5px}
  .bug-dd{font-size:12px;padding:0 8px}
  .stamp{padding:10px 18px 9px;outline-offset:4px;top:58%}
  .stamp b{font-size:32px}
  .stamp span{font-size:11px}
  .ribbon.stack{flex-direction:column;gap:6px}
  .ribbon.stack small{font-size:11px;letter-spacing:.06em}
  .ribbon.big b{font-size:22px;padding:8px 16px 7px}
  .on-air{font-size:17px}
  .games{grid-template-columns:1fr;gap:24px}
  .gcard .card-face{padding:22px 22px 24px 20px}
  .list{padding:24px 22px 24px 20px}
  .irow{grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px}
  .irow-med{display:none}
  .irow-q{font-size:20px}
  .empty .pnl-face{padding:32px 24px 36px}
  .srch input,.sort select{height:50px}
  .sort select{min-width:0;width:150px;font-size:17px;padding:0 36px 0 14px}
  .sort-f b{right:14px}
  .sort-l{display:none}
  .fine{margin-top:36px;text-align:left}
  .more-row{margin-top:34px}
  .tick-sec{padding-top:56px}
}
@media (max-width:360px){
  .scl-n b{font-size:21px}
  .band-st dd{font-size:19px}
  .band-st div{padding-left:10px}
  .round{padding:22px 16px 24px}
  .tkt .chips{gap:6px}
  .bug{flex-wrap:wrap;right:16px}.bug-sc{flex:1}.bug-dd{flex:1 0 100%;padding:5px 8px 4px}
  .stamp b{font-size:28px}.stamp{padding:8px 14px 7px}
  .ribbon.big b{font-size:20px;padding:7px 12px 6px}
  .g-tm b{font-size:30px}.g-n{font-size:26px}
  .list{padding:22px 16px 22px 16px}
  .irow-a{font-size:14px}
  .sort select{width:122px;font-size:16px}
  .srch input{font-size:15px;padding:0 12px}
}