/* ═══════════════════════════════════════════════════════════════════
   CADE CATEGORIES: the parts that tell memecoins, sports and stocks apart,
   built once for /home and shown in the DS (/ds/#cards, #tabs, #badges, #data, #sports).
   Pair with /lib/category.js (window.CadeCategory), which writes the markup.

   Every part sizes itself from its own box (container units), so a page can
   place it at any size: the homepage drops them into its frame in frame units.

   Sources, all frontend-v1 (the client's own code):
     .acard     MemeMadnessAllStarCard.module.css + ShareSplitBar + AllStarMarketMetrics, 1:1
                (read from their storybook build); sports and stocks change only the
                identity mark, the words on the split and the two metric labels
     .cboard    landing/components/CadeLandingMobileAllStarBoard.module.css, 1:1
     .ctile     landing/components/CadeLandingHero.tsx shortcut plates (HERO_CTA_FACE/SHADOW, .liftGroup)
     .cduel     landing/components/CadeLandingCoinPlate.tsx + CadeLandingOddsChip.tsx (hero-plate-*.svg)
     .cticker   landing/components/CadeLandingTicker.tsx (+ the .ticker* rules)
     badges     design-system/indicators/CoinMedallion.tsx, design-system/sports/sports-teambadge.svg
   What is ours: the category tag, the team / ticker identity on the card, the
   board filter's glyphs and counts, the game row and the tape item (both built
   only from the parts above).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. the All Stars card (their MemeMadnessAllStarCard), three categories ──
   Their silhouette, chip, split and bolt stay 1:1; ours: one identity slot (the medallion family),
   more air (padding 9cqw, the tag only for a state), and three LOOKS read from tokens.
   A look is set by data-look on the card or any ancestor (the page sets it on <html>):
     dark   (default) the production dark palette: face #1A1816 as the hero panel, a #2E2A26 keyline,
            paper type; the yellow clock and the green / red split are the only colour
     cream  their paper, cleaned: #F3EEE1, ink #141414, a real black keyline
     edge   the arena panels' material: face #161514, the keyline in the category's tone
            (memecoins orange, sports yellow, stocks violet), as the panels around the board
   The keyline is drawn by .ac-fw (drop-shadows on an unclipped wrapper; on the clipped face itself
   the clip would cut them off). */
.acard{--ac-face:#1A1816;--ac-ink:#EFE9D8;--ac-quiet:#A1A1A1;--ac-quiet-off:#6E6A64;--ac-edge:#2E2A26;--ac-edge-hi:#4A443D;--ac-ew:1.5px;
  --ac-dot:rgba(239,233,216,.09);--ac-rule:rgba(239,233,216,.18);--ac-chip-off:#8E8981;--ac-load:#161514;--ac-ghost:rgba(239,233,216,.08);--ac-won:#91BB4F;
  aspect-ratio:400/310;width:100%;min-width:0;color:var(--ac-ink);cursor:pointer;transition:transform .15s cubic-bezier(0,0,.2,1);display:block;position:relative;container-type:inline-size;text-decoration:none}
:where([data-look=cream]) .acard,.acard[data-look=cream]{--ac-face:#F3EEE1;--ac-ink:#141414;--ac-quiet:#55514A;--ac-quiet-off:#8A847A;--ac-edge:#0B0B0B;--ac-edge-hi:#0B0B0B;
  --ac-dot:rgba(11,11,11,.13);--ac-rule:rgba(20,20,20,.3);--ac-chip-off:#d8d0be;--ac-load:#e7e0cd;--ac-ghost:rgba(20,20,20,.1);--ac-won:#46711b}
:where([data-look=edge]) .acard,.acard[data-look=edge]{--ac-face:#161514;--ac-edge:color-mix(in srgb,var(--ac-tone) 55%,#161514);--ac-edge-hi:var(--ac-tone);--ac-ew:2px;--ac-dot:rgba(239,233,216,.07)}
.acard[data-cat=memecoins]{--ac-tone:#FFA800}.acard[data-cat=sports]{--ac-tone:#FAF424}.acard[data-cat=stocks]{--ac-tone:#9652EF}
.acard:focus-visible,.acard .ac-open:focus-visible{box-shadow:0 0 0 2px #000,0 0 0 5px #FFA800;outline:none}
.acard .ac-open{z-index:1;color:inherit;text-decoration:none;display:block;position:absolute;inset:0}
.acard{--ac-clip: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%)}
.acard .ac-sh{background:#000;position:absolute;inset:2.5cqw 0 0 2.5cqw;clip-path:var(--ac-clip)}
.acard .ac-fw{position:absolute;inset:0 2.5cqw 2.5cqw 0;
  filter:drop-shadow(var(--ac-ew) 0 0 var(--ac-edge)) drop-shadow(calc(-1 * var(--ac-ew)) 0 0 var(--ac-edge)) drop-shadow(0 var(--ac-ew) 0 var(--ac-edge)) drop-shadow(0 calc(-1 * var(--ac-ew)) 0 var(--ac-edge))}
.acard .ac-fc{background-color:var(--ac-face);position:absolute;inset:0;overflow:hidden;clip-path:var(--ac-clip)}
.acard .ac-fc::before,.acard .ac-fc::after{content:"";pointer-events:none;background-image:radial-gradient(circle,var(--ac-dot) 0,var(--ac-dot) 1px,rgba(0,0,0,0) 1.35px);background-size:9px 9px;width:30%;position:absolute;top:0;bottom:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.acard .ac-fc::before{left:0;-webkit-mask-image:radial-gradient(92% 78% at 0 center,#000 0,#000 16%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(92% 78% at 0 center,#000 0,#000 16%,rgba(0,0,0,.55) 45%,transparent 100%)}
.acard .ac-fc::after{background-position:4px 0;right:0;-webkit-mask-image:radial-gradient(92% 78% at 100% center,#000 0,#000 16%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(92% 78% at 100% center,#000 0,#000 16%,rgba(0,0,0,.55) 45%,transparent 100%)}
.acard .ac-in{z-index:2;pointer-events:none;flex-direction:column;min-width:0;padding:9cqw 9.2cqw 9cqw;display:flex;position:absolute;inset:0 2.5cqw 2.5cqw 0;box-sizing:border-box}
.acard .ac-in>*{flex:0 0 auto}
/* one fixed identity band for every category, so the questions in a row share one line */
.acard .ac-id{align-items:center;gap:3.4cqw;min-width:0;display:flex;height:24cqw}
.acard .ac-med{flex:0 0 auto;height:24cqw;display:flex;align-items:center}
.acard .ac-med svg{display:block;height:100%;width:auto;overflow:visible}
/* the matchup: two smaller octagons, centred in the same band */
.acard .ac-med[data-pair] svg{height:19.5cqw}
.acard .ac-copy{flex-direction:column;flex:1 1 0%;align-items:flex-end;gap:2.1cqw;min-width:0;display:flex}
.acard .ac-clk{box-sizing:border-box;background:#FAF424;border:1.5px solid #0B0B0B;min-width:18.5cqw;max-width:100%;color:#141414;flex-direction:column;flex:0 0 auto;align-items:center;gap:1.05cqw;margin-right:1.4cqw;padding:2.15cqw 2.35cqw 2cqw;display:inline-flex;overflow:hidden;box-shadow:1.4cqw 1.4cqw 0 #000}
.acard .ac-dur{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-size:max(10px,3.15cqw);font-style:italic;font-weight:800;line-height:1}
.acard .ac-tmr{min-width:0;max-width:100%;font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:max(12px,4.2cqw);font-weight:800;line-height:1;display:block;overflow:hidden}
/* ours: a state's word under the clock (won, data delayed), in the label voice */
.acard .ac-tag{margin-right:1.4cqw;font-family:"Futura PT Cond","Barlow Condensed","Arial Narrow",sans-serif;font-size:max(10px,3.15cqw);font-weight:500;font-style:normal;font-synthesis:none;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-quiet);white-space:nowrap;line-height:1}
.acard .ac-tl{justify-content:space-between;align-items:baseline;gap:3cqw;min-width:0;margin-top:auto;display:flex}
.acard .ac-q{min-width:0;color:var(--ac-ink);font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:7cqw;font-style:italic;font-weight:800;line-height:1.08;display:-webkit-box;overflow:hidden;margin:0}
.acard .ac-ft{align-items:baseline;margin-top:3.4cqw;display:flex;position:relative}
.acard .ac-met{min-width:0;color:var(--ac-quiet);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:max(10px,3.15cqw);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:left;text-transform:uppercase;white-space:nowrap;align-items:baseline;gap:max(8px,3.6cqw);font-weight:700;line-height:1;display:flex;overflow:hidden}
.acard .ac-m{align-items:baseline;gap:max(4px,1.4cqw);min-width:0;display:inline-flex}
.acard .ac-m+.ac-m{border-left:1px solid var(--ac-rule);padding-left:max(8px,3.6cqw)}
.acard .ac-m>span{color:var(--ac-quiet);letter-spacing:.06em;font-weight:800}
.acard .ac-m strong{color:var(--ac-ink);letter-spacing:0;font-size:1.14em;font-weight:800}
.acard .ac-act{align-items:center;gap:2.6cqw;margin:4.4cqw 0 0;display:flex}
.acard .ac-bar{--ac-h:9.6cqw;--ac-fs:max(10px,3.35cqw);--ac-inset:2cqw;--ac-drop:1cqw;flex:1 1 auto;min-height:22px}
.acard .ac-bolt{background:#FF7A00;color:#FFF8E6;cursor:pointer;width:9.6cqw;min-width:9.6cqw;height:9.6cqw;pointer-events:auto;border:2px solid #000;border-radius:999px;justify-content:center;align-items:center;padding:0;display:inline-flex;box-shadow:1.1cqw 1.1cqw 0 #000;position:relative;z-index:3;
  transition:transform .14s cubic-bezier(0,0,.2,1),box-shadow .14s cubic-bezier(0,0,.2,1),filter .14s cubic-bezier(0,0,.2,1)}
/* the bolt's hit area reaches 44px without growing the drawing */
.acard .ac-bolt::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.acard .ac-bolt:hover:not(:disabled),.acard .ac-bolt:focus-visible:not(:disabled){filter:saturate(1.08);transform:translate(-.35cqw,-.35cqw);box-shadow:1.45cqw 1.45cqw 0 #000}
/* focus on the orange bolt: a black ring off the face reads on cream; on the dark faces the ring is paper */
.acard .ac-bolt:focus-visible{box-shadow:1.45cqw 1.45cqw 0 #000;outline:3px solid var(--ac-ring,#EFE9D8);outline-offset:3px}
:where([data-look=cream]) .acard,.acard[data-look=cream]{--ac-ring:#0B0B0B}
.acard .ac-bolt:disabled{color:#d8d0be;cursor:default;filter:grayscale(.35);background:#777168}
.acard .ac-bolt svg{fill:currentColor;width:58%;height:58%;display:block;transform:translate(2%)}
/* hover: their 4px lift; on the dark faces the keyline also steps up one tone. Nothing else moves */
.acard .ac-fw{transition:filter .15s cubic-bezier(0,0,.2,1)}
@media (hover:hover) and (pointer:fine){.acard:hover{transform:translateY(-4px)}.acard:hover{--ac-edge:var(--ac-edge-hi)}}
@media (max-width:720px){
  .acard{min-height:258px}
  .acard .ac-in{padding:max(22px,9cqw) max(22px,9.2cqw) max(22px,9cqw)}
  .acard .ac-id{gap:max(9px,3.4cqw);height:max(64px,21cqw)}.acard .ac-copy{gap:max(6px,2.1cqw)}.acard .ac-med{height:max(64px,21cqw)}.acard .ac-med[data-pair] svg{height:max(54px,17.5cqw)}
  .acard .ac-clk{gap:max(3px,.9cqw);min-width:max(54px,18.5cqw);padding:max(6px,2cqw) max(7px,2.2cqw) max(6px,1.8cqw)}
  .acard .ac-dur{font-size:max(10px,3.15cqw)}.acard .ac-tmr{font-size:max(14px,4.2cqw)}
  .acard .ac-q{font-size:max(22px,7cqw)}
  .acard .ac-met{font-size:max(11px,2.95cqw)}
  .acard .ac-bar{--ac-h:max(32px,9.6cqw);--ac-fs:max(11px,3.35cqw);min-height:32px}
  .acard .ac-bolt{width:max(32px,9.6cqw);min-width:max(32px,9.6cqw);height:max(32px,9.6cqw)}
}
@media (prefers-reduced-motion:reduce){.acard,.acard .ac-fw{transition:none}}
/* states (the handoff's list): live, loading, empty, scheduled, unavailable (stale), closed, resolved */
.acard[data-state=closed] .ac-q,.acard[data-state=closed] .ac-m strong,.acard .ac-met[data-unavailable=true] strong{color:var(--ac-quiet-off)}
.acard[data-state=closed] .ac-clk,.acard[data-state=resolved] .ac-clk,.acard[data-state=unavailable] .ac-clk{background:var(--ac-chip-off)}
.acard[data-state=scheduled] .ac-clk{background:#EFE9D8}
.acard .ac-tag[data-won]{color:var(--ac-won)}
.acard[data-state=loading]{cursor:default}
.acard[data-state=loading] .ac-fc{background-color:var(--ac-load)}
.acard .ac-ghost{display:block;background:var(--ac-ghost)}
.acard .ac-gm{width:24cqw;aspect-ratio:1;clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.acard .ac-gc{width:18.5cqw;height:11cqw;margin-right:1.4cqw}
.acard .ac-gq{margin-top:auto;width:78%;height:7cqw}
.acard .ac-ft .ac-gf{width:64%;height:3.6cqw}
.acard .ac-gb{flex:1;height:9.6cqw}
/* specimen hooks for the DS page: the hover and focus looks, frozen */
.acard.is-hover{transform:translateY(-4px);--ac-edge:var(--ac-edge-hi)}
.acard.is-focus{box-shadow:0 0 0 2px #000,0 0 0 5px #FFA800}
.acard .ac-bolt.is-focus{box-shadow:1.45cqw 1.45cqw 0 #000;outline:3px solid var(--ac-ring,#EFE9D8);outline-offset:3px;transform:translate(-.35cqw,-.35cqw)}
/* visually hidden text for the parts' accessible names */
.cc-sr,.ntab>.cc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}

/* ── the share split, welded (their design-system/market/ShareSplitBar, data-variant="welded") ── */
.ac-bar{--p:.5;--S:calc(var(--p) * (100% - 9px) + 12px);height:var(--ac-h,30px);display:block;position:relative}
.ac-bar .ac-pl{position:absolute;inset:0;filter:drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(var(--ac-drop,0px) var(--ac-drop,0px) 0 #000)}
.ac-bar .ac-l,.ac-bar .ac-r{position:absolute;inset:0;transition:clip-path .6s cubic-bezier(.16,1,.3,1)}
.ac-bar .ac-l{background:#91BB4F;clip-path:polygon(5px 4%,calc(var(--S) + 2px) 0%,calc(var(--S) - 12px) 35%,var(--S) 60%,calc(var(--S) - 14px) 100%,7px 100%,0% 62%,15px 45%,0% 28%)}
.ac-bar .ac-r{background:#EA2A46;clip-path:polygon(calc(var(--S) + 2px) 0%,calc(100% - 9px) 0%,calc(100% - 1px) 35%,calc(100% - 7px) 62%,100% 100%,calc(var(--S) - 14px) 100%,var(--S) 60%,calc(var(--S) - 12px) 35%)}
.ac-bar .ac-s{z-index:1;font-size:var(--ac-fs,13px);pointer-events:none;align-items:center;line-height:1;display:flex;position:absolute;top:0;bottom:0;overflow:hidden;container:acSlot/inline-size}
.ac-bar .ac-sl{left:calc(15px + var(--ac-inset,.55rem));width:max(0px,calc(var(--S) - 15px - 14px - 2 * var(--ac-inset,.55rem)));color:#0B0B0B;justify-content:flex-start}
.ac-bar .ac-sr{right:calc(9px + var(--ac-inset,.55rem));width:max(0px,calc(100% - var(--S) - 9px - 2px - 2 * var(--ac-inset,.55rem)));color:#fff;justify-content:flex-end}
.ac-bar .ac-v{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.ac-bar .ac-w{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;font-style:italic;font-weight:900}
.ac-bar .ac-n{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:700}
@container acSlot (width < 4.8em){.ac-bar .ac-w{display:none}}
@container acSlot (width < 2.6em){.ac-bar .ac-v{display:none}}
.ac-bar[data-empty=true]{background:#1c1c1c;outline:1.5px solid #000;box-shadow:var(--ac-drop,0px) var(--ac-drop,0px) 0 1.5px #000;justify-content:center;align-items:center;display:flex}
.ac-bar[data-empty=true]>span:not(.ac-empty){display:none}
.ac-bar .ac-empty{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;color:#9c9c9c;font-size:max(10px,.65rem);text-transform:uppercase;white-space:nowrap}
.ac-bar:not([data-empty=true]) .ac-empty{display:none}

/* ── 2. the phone board (their CadeLandingMobileAllStarBoard) ──
   The same three looks as the card. The shell (.cboard) is unclipped and draws the keyline + the hard
   shadow; .cb-clip carries their torn outline and the paper. Rows: ours, the market's medallion leads. */
.cboard{--cb-face:#1A1816;--cb-ink:#EFE9D8;--cb-quiet:#A1A1A1;--cb-rule:rgba(239,233,216,.12);--cb-edge:#2E2A26;--cb-ew:1.5px;--cb-dot:rgba(239,233,216,.07);
  --cb-ban:#161514;--cb-ban-ink:#EFE9D8;--cb-ban-meta:#FAF424;--cb-ban-rule:#2E2A26;
  position:relative;filter:drop-shadow(var(--cb-ew) 0 0 var(--cb-edge)) drop-shadow(calc(-1 * var(--cb-ew)) 0 0 var(--cb-edge)) drop-shadow(0 var(--cb-ew) 0 var(--cb-edge)) drop-shadow(0 calc(-1 * var(--cb-ew)) 0 var(--cb-edge)) drop-shadow(5px 5px 0 #000)}
:where([data-look=cream]) .cboard,.cboard[data-look=cream]{--cb-face:#F3EEE1;--cb-ink:#141414;--cb-quiet:rgb(20 20 20 / 62%);--cb-rule:rgb(20 20 20 / 22%);--cb-edge:#000;--cb-ew:2.5px;--cb-dot:rgb(11 11 11 / 12%);
  --cb-ban:#FAF424;--cb-ban-ink:#141414;--cb-ban-meta:rgb(20 20 20 / 62%);--cb-ban-rule:#000}
:where([data-look=edge]) .cboard,.cboard[data-look=edge]{--cb-face:#161514;--cb-edge:#FFA800;--cb-ew:2px;--cb-ban:#FAF424;--cb-ban-ink:#141414;--cb-ban-meta:rgb(20 20 20 / 62%);--cb-ban-rule:#000}
.cboard .cb-clip{position:relative;overflow:hidden;background:var(--cb-face);color:var(--cb-ink);
  clip-path:polygon(0 6px,2% 0,98% 3px,100% 10px,100% calc(100% - 8px),97% 100%,3% calc(100% - 4px),0 calc(100% - 12px))}
.cboard .htl,.cboard .htr{position:absolute;top:0;bottom:0;width:30%;background-image:radial-gradient(circle,var(--cb-dot) 0 1px,transparent 1.35px);background-size:9px 9px;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
/* the board's dotted side fades sat behind the rows' copy: retired 2026-10-03 ("way too much dots"); the spans stay */
.cboard .htl,.cboard .htr{display:none}
.cboard .htl{left:0;-webkit-mask-image:radial-gradient(ellipse 92% 78% at 0 50%,#000 0 16%,rgb(0 0 0 / .55) 45%,transparent 100%);mask-image:radial-gradient(ellipse 92% 78% at 0 50%,#000 0 16%,rgb(0 0 0 / .55) 45%,transparent 100%)}
.cboard .htr{right:0;background-position:4px 0;-webkit-mask-image:radial-gradient(ellipse 92% 78% at 100% 50%,#000 0 16%,rgb(0 0 0 / .55) 45%,transparent 100%);mask-image:radial-gradient(ellipse 92% 78% at 100% 50%,#000 0 16%,rgb(0 0 0 / .55) 45%,transparent 100%)}
.cboard .cb-banner{position:relative;display:flex;height:var(--cb-banner,34px);align-items:center;gap:8px;border-bottom:3px solid var(--cb-ban-rule);background:var(--cb-ban);padding:0 14px;box-sizing:border-box}
.cboard .cb-banner h2,.cboard .cb-banner h3{margin:0;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:18px;font-style:italic;font-weight:900;line-height:1;text-transform:uppercase;color:var(--cb-ban-ink)}
.cboard .cb-banner span{margin-left:auto;flex:none;white-space:nowrap;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--cb-ban-meta)}
.cboard .cfilter{border-bottom:2px dashed var(--cb-rule);height:var(--cb-filter,46px);padding:0 6px;--cf-h:40px;--cf-ink:var(--cb-ink);justify-content:space-between}
.cboard .cfilter .ntab{flex:1 1 auto;padding:0 6px;min-width:0}
.cboard ul{position:relative;margin:0;padding:0;list-style:none}
.crow{position:relative;display:flex;overflow:hidden;height:var(--cb-row,94px);align-items:center;gap:12px;border-bottom:2px dashed var(--cb-rule,rgb(20 20 20 / 25%));padding:0 12px 0 14px;box-sizing:border-box;color:var(--cb-ink,#141414)}
.crow:last-child{border-bottom:0}
/* the identity slot: one width for every row, so the questions share a left edge; the market's medallion
   with its clock under it, the card's yellow chip in small */
.crow .cr-id{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:7px}
.crow .cr-mk{height:44px;display:flex;align-items:center;justify-content:center}
.crow .cr-mk svg{display:block;height:44px;width:auto;overflow:visible}
.crow[data-cat=sports] .cr-mk svg{height:36px}
.crow .cr-clk{display:inline-flex;align-items:baseline;gap:3px;background:#FAF424;color:#141414;border:1.5px solid #0B0B0B;box-shadow:2px 2px 0 #000;padding:3px 4px 2px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.crow .cr-per{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:10px;letter-spacing:.04em}
.crow .bd,.crow .px,.crow .cr-chev{position:relative;z-index:1}
.crow .bd{display:block;overflow:hidden;min-width:0;flex:1;text-decoration:none;color:inherit}
.crow .bd:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
.crow .qq{display:flex;overflow:hidden;align-items:baseline;gap:4px;min-width:0;max-width:100%}
.crow .tk,.crow .qt{overflow:hidden;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:19px;font-style:italic;font-weight:900;line-height:1;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;color:var(--cb-ink,#141414)}
.crow .tk{flex:0 0 auto}.crow .qt{min-width:0;flex:0 1 auto}
.crow[data-cat=sports] .tk{flex:0 1 auto;min-width:0}
.crow .cl,.crow .mt{display:flex;overflow:hidden;align-items:baseline;gap:5px;font-family:"JetBrains Mono",ui-monospace,monospace;line-height:1;text-transform:uppercase;white-space:nowrap}
.crow .cl{margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.02em}
.crow .mt{margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.04em}
/* theirs 8px; floored to the house 10px on a phone */
.crow .lb{flex:none;font-size:10px;letter-spacing:.08em;color:var(--cb-quiet,rgb(20 20 20 / 52%))}
.crow .px{display:flex;flex:none;gap:5px}
/* the price buttons: their colours and size (54 x 44), the shape calmed to the approved parallelogram
   (the /landing/v2 pill, M12 1H189L178 64H1Z: a 6px lean), a thin ink keyline, a hard 2px shadow (owner 2026-10-02) */
.crow .pr{--pr-lean:6px;position:relative;width:54px;height:44px;flex:none;border:0;background:#0B0B0B;padding:1.5px;cursor:pointer;display:block;text-decoration:none;
  clip-path:polygon(var(--pr-lean) 0,100% 0,calc(100% - var(--pr-lean)) 100%,0 100%);
  filter:drop-shadow(2px 2px 0 #000);transition:filter 120ms ease,transform 120ms ease;box-sizing:border-box}
.crow .pr:active{transform:translate(1px,1px);filter:brightness(.92)}
.crow .pr:focus-visible{z-index:1;outline:0;filter:drop-shadow(2px 0 0 #faf424) drop-shadow(-2px 0 0 #faf424) drop-shadow(0 2px 0 #faf424) drop-shadow(0 -2px 0 #faf424)}
.crow .pr[aria-disabled=true]{cursor:default;opacity:.42;filter:grayscale(.55)}
.crow .pf{display:grid;width:100%;height:100%;align-content:center;justify-items:center;gap:3px;
  clip-path:polygon(calc(var(--pr-lean) - 1px) 0,100% 0,calc(100% - var(--pr-lean) + 1px) 100%,0 100%);line-height:1}
.crow .pr[data-side=up] .pf{background:#91bb4f}.crow .pr[data-side=down] .pf{background:#ea2a46}
.crow .ps{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:12px;font-style:italic;font-weight:900;letter-spacing:.045em;text-transform:uppercase;color:#000}
.crow .pp{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:13px;font-style:italic;font-weight:900;font-variant-numeric:tabular-nums;color:rgb(0 0 0 / 72%)}
.crow .cr-chev{display:flex;flex:none;align-items:center;justify-content:center;width:10px;margin-left:-2px;color:var(--cb-quiet,#141414)}
@media (max-width:359px){.crow{gap:8px;padding:0 8px 0 10px}.crow .cr-chev{display:none}.crow .cr-id{width:56px}.crow .cr-mk svg{height:38px}.crow[data-cat=sports] .cr-mk svg{height:31px}.crow .pr{width:50px}.cboard .cfilter{padding:0 2px}.cboard .cfilter .ntab{padding:0 4px;font-size:14px}}

/* ── 2b. the round pick (CadeCategory.pick): a calm diagonal plate, the parallelogram the owner approved for the
      /landing/v2 pill (M12 1H189L178 64H1Z). Outcome colour, a thin ink keyline, a 3px hard shadow, the SHOUT label.
      Sized by its box; --pk-fs sets the label. Hover lifts 2px, press and the held pick sit down on the shadow,
      the side not taken steps back once a side is held ── */
.cpick{--pk-fill:#91BB4F;--pk-ink:#141414;--pk-fs:18px;position:relative;display:block;width:100%;height:100%;min-height:0;appearance:none;margin:0;padding:0;border:0;background:none;cursor:pointer;color:var(--pk-ink);font:inherit;-webkit-tap-highlight-color:transparent}
.cpick[data-side=lower]{--pk-fill:#EA2A46;--pk-ink:#FFFFFF}
.cpick::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.cpick>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.cpick .pk-sh{transform:translate(3px,3px)}
.cpick .pk-sh path{fill:#000}
.cpick .pk-fc path{fill:var(--pk-fill);stroke:#0B0B0B;stroke-width:1.5}
.cpick .pk-w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:.08em;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:var(--pk-fs);letter-spacing:.05em;line-height:1;text-transform:uppercase;white-space:nowrap;color:var(--pk-ink)}
.cpick .pk-fc,.cpick .pk-w{transition:transform 150ms cubic-bezier(0,0,.2,1)}
@media (hover:hover) and (pointer:fine){.cpick:not([aria-disabled=true]):not([aria-pressed=true]):not(:active):hover :is(.pk-fc,.pk-w){transform:translate(-2px,-2px)}}
.cpick:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.cpick:focus-visible:not([aria-pressed=true]) :is(.pk-fc,.pk-w){transform:translate(-2px,-2px)}
.cpick:not([aria-disabled=true]):active :is(.pk-fc,.pk-w),.cpick[aria-pressed=true] :is(.pk-fc,.pk-w){transform:translate(3px,3px)}
.cpick[aria-disabled=true]{cursor:default}
.cpick[aria-disabled=true]:not([aria-pressed=true]){opacity:.38}
/* specimen hooks for the DS page */
.cpick.is-hover :is(.pk-fc,.pk-w){transform:translate(-2px,-2px)}
.cpick.is-focus{outline:3px solid #FFA800;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cpick .pk-fc,.cpick .pk-w{transition:none}}

/* ── 3. the category glyph (one per category, never colour alone) ── */
.cglyph{display:inline-block;vertical-align:middle;line-height:0;flex:none}
.cglyph>svg{height:100%;width:auto;display:block;overflow:visible}

/* ── 4. the category tile: their hero shortcut plate, as a tab. Sized by its box;
      --ct-u is one drawing unit (1px by default, the page's frame unit on /home) ── */
.ctile{--ct-u:1px;position:relative;display:block;width:420px;height:96px;container-type:size;appearance:none;margin:0;padding:0;border:0;background:none;color:#EFE9D8;cursor:pointer;text-align:left;font:inherit}
.ctile.compact{width:143px;height:56px}
.ctile>svg,.ctile .ct-lift,.ctile .ct-face{position:absolute;inset:0;width:100%;height:100%}
.ctile svg{overflow:visible;display:block}
.ctile .ct-lift,.ctile .ct-sh{transition:transform 150ms cubic-bezier(0,0,.2,1)}
.ctile .ct-face path{transition:fill 150ms cubic-bezier(0,0,.2,1)}
.ctile .ct-g{position:absolute;left:6.2cqw;top:26cqh;width:17.1cqw;height:47.9cqh;display:flex;align-items:center;justify-content:center}
.ctile .ct-g>svg{max-width:100%;max-height:100%;width:auto;height:100%}
.ctile .ct-k{position:absolute;left:26.7cqw;top:19.8cqh;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:600;font-size:20.8cqh;line-height:normal;white-space:nowrap;color:var(--acc)}
.ctile .ct-t{position:absolute;left:26.7cqw;top:49cqh;width:62.4cqw;overflow:hidden;text-overflow:ellipsis;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:700;font-style:italic;font-size:25cqh;line-height:normal;white-space:nowrap;color:#EFE9D8}
.ctile .ct-c{position:absolute;left:91.4cqw;top:34.4cqh;width:3.48cqw;height:31.25cqh;color:#EFE9D8;transition:color 150ms cubic-bezier(0,0,.2,1)}
.ctile.compact .ct-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5cqw}
.ctile.compact .ct-g{position:relative;left:auto;top:auto;width:auto;height:46cqh}
.ctile.compact .ct-t{position:relative;left:auto;top:auto;width:auto;font-size:max(12px,30cqh)}
@media (hover:hover) and (pointer:fine){
  .ctile:hover .ct-lift{transform:translate(calc(-2 * var(--ct-u)),calc(-2 * var(--ct-u)))}
  .ctile:hover .ct-sh{transform:translate(calc(1 * var(--ct-u)),calc(1 * var(--ct-u)))}
  .ctile:hover .ct-c{color:var(--acc)}
}
.ctile:focus-visible{outline:calc(3 * var(--ct-u)) solid #FFA800;outline-offset:calc(3 * var(--ct-u))}
.ctile:focus-visible .ct-lift{transform:translate(calc(-2 * var(--ct-u)),calc(-2 * var(--ct-u)))}
.ctile:focus-visible .ct-c{color:var(--acc)}
.ctile:active .ct-lift{transform:translate(calc(3 * var(--ct-u)),calc(3 * var(--ct-u)))}
.ctile:active .ct-sh{transform:translate(calc(-2 * var(--ct-u)),calc(-2 * var(--ct-u)))}
.ctile[aria-selected=true] .ct-face path{fill:var(--acc)}
.ctile[aria-selected=true] .ct-k,.ctile[aria-selected=true] .ct-t,.ctile[aria-selected=true] .ct-c{color:#141414}
/* violet takes white ink, as their violet CTA does */
.ctile[data-cat=stocks][aria-selected=true] .ct-k,.ctile[data-cat=stocks][aria-selected=true] .ct-t,.ctile[data-cat=stocks][aria-selected=true] .ct-c{color:#FFFFFF}
@media (prefers-reduced-motion:reduce){.ctile .ct-lift,.ctile .ct-sh,.ctile .ct-c,.ctile .ct-face path{transition:none}}

/* ── 5. the board filter: their SportsTab (the DS .ntab) with a count; the words name the categories ── */
.cfilter{--cf-h:50px;--cf-ink:#EFE9D8;display:flex;align-items:center;gap:calc(var(--cf-h) * .18)}
.cfilter .ntab{width:auto;height:var(--cf-h);padding:0 calc(var(--cf-h) * .28);gap:calc(var(--cf-h) * .14);font-size:max(14px,calc(var(--cf-h) * .41));background:none;color:var(--cf-ink);--press:calc(var(--cf-h) * .05)}
.cfilter .ntab>b{font-size:max(12px,calc(var(--cf-h) * .28));opacity:.6;color:inherit}
.cfilter .ntab[aria-selected=true]{background:url(/ds/assets/ds/navigation/nav-sportstab.svg) 50% 50%/100% 100% no-repeat;color:#0B0B0B}
.cfilter .ntab:not([aria-selected=true]):hover{color:#FFA800}
.cboard .cfilter .ntab:not([aria-selected=true]):hover{color:#FFA800}
.cfilter .ntab:focus-visible{outline:3px solid #FFA800;outline-offset:2px}

/* ── 6. the head to head: their two duel plates (hero-plate-*.svg) carrying a coin, a team or a ticker.
      The box is the plates' bounding box; .m is the phone drawing's pair ── */
.cduel{position:relative;width:100%;aspect-ratio:787/575;container-type:inline-size}
.cduel.m{aspect-ratio:444/334.5}
.cduel .cd-p{position:absolute;background-position:center;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.cduel .cd-p.o{background-image:url(/ds/assets/landing/hero-plate-orange.svg);left:0;top:0;width:46.455%;height:100%}
.cduel .cd-p.v{background-image:url(/ds/assets/landing/hero-plate-violet.svg);left:46.887%;top:0;width:53.113%;height:100%}
.cduel.a{aspect-ratio:394/228}
.cduel.a .cd-p.o{width:46.7%;height:92.1%}
.cduel.a .cd-p.v{left:49.75%;top:4.39%;width:50.25%;height:95.6%}
.cduel.m .cd-p.o{width:47.494%;height:99.146%}
.cduel.m .cd-p.v{left:47.194%;top:3.587%;width:52.806%;height:96.418%}
.cduel .cd-s{position:absolute;inset:0;overflow:hidden}
.cduel .cd-p.o .cd-s{clip-path:polygon(18.615% 0.685%,97.244% 0.685%,89.560% 44.606%,92.517% 47.260%,84.567% 98.373%,1.118% 98.373%)}
.cduel .cd-p.v .cd-s{clip-path:polygon(12.175% 0.685%,97.684% 0.685%,92.982% 98.373%,0.947% 98.373%,7.918% 47.346%,5.333% 44.606%)}
/* CoinPlate's badge: zoom .6 of the plate's width, centred at (.47, .44) */
.cduel .cd-coin{position:absolute;left:10.52%;top:44%;width:75.57%;transform:translateY(-47.86%)}
.cduel .cd-badge{position:absolute;left:14%;top:44%;width:66%;transform:translateY(-50%)}
.cduel .cd-coin svg,.cduel .cd-badge svg{width:100%;height:auto;display:block;overflow:visible}
.cduel .cd-vs{position:absolute;margin:0;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-style:italic;line-height:normal;white-space:nowrap;color:#EFE9D8;
  left:40.79%;top:35.3%;font-size:16.52cqw;text-shadow:1.02cqw 1.39cqw 0 #000}
.cduel.m .cd-vs{left:40.38%;top:32.9%;font-size:15.68cqw;text-shadow:1.13cqw 1.5cqw 0 #000}
.codds{position:absolute;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.14em;background:#EFE9D8;color:#141414;border:.09em solid #000;min-width:0;overflow:hidden;padding-inline:.18em;box-sizing:border-box;
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-style:italic;white-space:nowrap;transform:rotate(-2deg);height:2.03em;min-width:5.83em;max-width:9.5em}
.codds>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codds>b{font-weight:inherit;white-space:nowrap}
.cduel .codds{font-size:2.8cqw}
.cduel .codds.a{left:3.3%;top:86.6%}
.cduel .codds.b{right:2.33%;top:83.1%;height:1.93em}
.cduel.m .codds{font-size:max(12px,4.05cqw)}
.cduel.m .codds.a{left:3.6%;top:68.5%}
.cduel.m .codds.b{right:3.6%;top:65%}
.cduel .swap{animation:cdIn 320ms cubic-bezier(.2,1.4,.4,1) both}
@keyframes cdIn{from{opacity:0;transform:translateY(-44%) scale(.94)}}
@media (prefers-reduced-motion:reduce){.cduel .swap{animation:none}}

/* ── 7. the live predictions ticker, all three categories (their CadeLandingTicker) ── */
.cticker{overflow:hidden;display:flex;align-items:center;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-style:italic;color:#EFE9D8;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - .75em),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - .75em),transparent)}
.cticker.title{font-weight:700}
.cticker .ctk-track{display:inline-flex;align-items:center;flex:none;white-space:nowrap;animation:ctkScroll 36s linear infinite}
.cticker .ctk-half{display:inline-flex;align-items:center}
.cticker .ctk-row{display:inline-flex;align-items:center}
.cticker .ctk-row>span{padding-left:.34em}.cticker .ctk-row>span:first-child{padding-left:0}
.cticker .cglyph{height:.9em}.cticker .cglyph.pair{height:.78em}
.cticker .ctk-tok{color:#FFA800}.cticker .ctk-ago{color:rgba(255,255,255,.45)}
.cticker .ctk-dot{color:rgba(255,255,255,.3);padding:0 .58em !important}
@media (hover:hover) and (pointer:fine){.cticker:hover .ctk-track{animation-play-state:paused}}
.cticker.paused .ctk-track{animation-play-state:paused}
/* the pause / play control: the label voice, a quiet plate; the word says the action */
.ctk-play{appearance:none;margin:0;padding:0 .7em;border:1.5px solid rgba(239,233,216,.28);background:rgba(11,11,11,.6);color:#EFE9D8;cursor:pointer;
  font-family:"Futura PT Cond","Barlow Condensed","Arial Narrow",sans-serif;font-weight:500;font-style:normal;font-synthesis:none;text-transform:uppercase;letter-spacing:.1em;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.ctk-play:hover{border-color:#FFA800;color:#FFA800}
.ctk-play:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.ctk-play [data-off],.ctk-play[aria-pressed=true] [data-on]{display:none}
.ctk-play[aria-pressed=true] [data-off]{display:inline}
/* the ticker's own toggle (tickerToggle, data-ctk-toggle), 2026-10-02 (owner: the boxed PAUSE sat box in box on the band's
   cut): no plate, the band's own SHOUT type in the quiet ink, a hairline before it. The word says the action;
   the hit area stays 44px tall through ::after; it never reaches the band's arrow-cut end (the band pads for it) */
.ctk-play[data-ctk-toggle]{flex:none;min-width:0;padding:0 0 0 .9em;border:0;border-left:1px solid rgba(239,233,216,.2);background:none;
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-style:italic;letter-spacing:.06em;color:rgba(239,233,216,.6);justify-content:flex-start}
.ctk-play[data-ctk-toggle]>span[aria-hidden]{min-width:3.1em;text-align:left}
.ctk-play.ctk-play[data-ctk-toggle]::after{content:"";position:absolute;left:50%;right:auto;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.ctk-play[data-ctk-toggle]:hover{color:#FFA800;border-color:rgba(239,233,216,.2)}
.ctk-play[data-ctk-toggle][aria-pressed=true]{color:#EFE9D8}
.ctk-play[data-ctk-toggle]>span[data-on]{display:inline-block}.ctk-play[data-ctk-toggle]>span[data-off]{display:none}
.ctk-play[data-ctk-toggle][aria-pressed=true]>span[data-on]{display:none}.ctk-play[data-ctk-toggle][aria-pressed=true]>span[data-off]{display:inline-block}
@keyframes ctkScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cticker.still .ctk-track{animation:none}.cticker.still .ctk-half[data-clone]{display:none}
@media (prefers-reduced-motion:reduce){.cticker .ctk-track{animation:none}.cticker .ctk-half[data-clone]{display:none}.cticker{overflow-x:auto;scrollbar-width:thin}}

/* ── 8. the game row (sports): two team badges, the score, the win odds on the welded split ── */
.cgame{position:relative;display:block;width:100%;aspect-ratio:350/132;container-type:inline-size;color:#EFE9D8;text-decoration:none}
.cgame .cg-l{position:absolute;left:0;top:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:max(var(--cg-min,0px),3.43cqw);letter-spacing:.067em;color:rgba(255,255,255,.55);white-space:nowrap}
.cgame .cg-a,.cgame .cg-b{position:absolute;top:19.7%;width:22.3cqw}
.cgame .cg-a{left:0}.cgame .cg-b{right:0}
.cgame .cg-a svg,.cgame .cg-b svg{width:100%;height:auto;display:block;overflow:visible}
.cgame .cg-sc{position:absolute;left:0;right:0;top:22.7%;text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:9.7cqw;line-height:normal}
.cgame .cg-sc i{font-style:normal;color:rgba(255,255,255,.35);padding:0 .3em}
.cgame .ac-bar{position:absolute;left:0;right:0;top:72.7%;--ac-h:7.43cqw;--ac-fs:max(var(--cg-min,0px),3.7cqw);--ac-inset:2cqw;--ac-drop:.57cqw}
.cgame:focus-visible{outline:3px solid #FFA800;outline-offset:4px}
@media (hover:hover) and (pointer:fine){.cgame:hover .cg-sc{color:#FAF424}}

/* ── 9. the tape item (stocks): the ticker badge, the price, their vote bar, the share calling higher ── */
.ctape{position:relative;display:block;width:100%;aspect-ratio:102/164;container-type:inline-size;color:#EFE9D8;text-align:center}
/* ours: the stock's medallion (the brand mark), the ticker, then their price, vote bar and share */
.ctape .cp-b{position:absolute;left:21%;width:58%;top:2%}
.ctape .cp-b svg{width:100%;height:auto;display:block;overflow:visible}
.ctape .cp-k{position:absolute;left:0;right:0;top:41%;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:max(var(--cp-min,0px),16cqw);letter-spacing:.03em;line-height:1;white-space:nowrap}
.ctape .cp-p{position:absolute;left:0;right:0;top:57%;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:max(var(--cp-min,0px),12.75cqw);line-height:normal}
.ctape .cp-t,.ctape .cp-f{position:absolute;left:9.8%;top:75%;height:4.3%;border-radius:3.5cqw}
.ctape .cp-t{width:80.4%;background:rgba(255,255,255,.14)}
.ctape .cp-f{background:#9652EF;transition:width 600ms cubic-bezier(.16,1,.3,1)}
.ctape .cp-s{position:absolute;left:0;right:0;top:84%;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:max(var(--cp-min,0px),11.76cqw);color:rgba(255,255,255,.6);white-space:nowrap;line-height:normal}

/* ── 10. the section head (CadeCategory.heading): their homepage section heading, the orange star and the
      SHOUT title in paper, a quiet count beside it. Sized by --ch-fs (58px desktop, 34px on a phone) ── */
.chead{--ch-fs:58px;display:flex;align-items:center;gap:calc(var(--ch-fs) * .2);min-width:0;flex-wrap:wrap;row-gap:4px}
.chead .ch-star{flex:none;width:calc(var(--ch-fs) * .62);height:calc(var(--ch-fs) * .577);background:url(/assets/art/section-star.svg) center/100% 100% no-repeat}
.chead .ch-t{margin:0;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;font-style:italic;font-size:var(--ch-fs);line-height:1.08;text-transform:uppercase;color:#EFE9D8;white-space:nowrap}
.chead .ch-n{align-self:center;margin-left:calc(var(--ch-fs) * .1);font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:max(11px,calc(var(--ch-fs) * .21));letter-spacing:.12em;text-transform:uppercase;color:#A1A1A1;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:720px){.chead{--ch-fs:34px}}

/* ── 11. the live predictions band (CadeCategory.feed): their FEED_FACE / FEED_SHADOW stretched to the box,
      the bolt badge, the kicker, the ticker, the pause control. Under 720 their phone band, no kicker ── */
/* the right pad clears the band's arrow-cut end (the last 22 of their 1337 face, plus the 6px the plate gives its shadow) */
.cfeed{position:relative;display:flex;align-items:center;gap:16px;height:72px;padding:0 44px 0 26px;box-sizing:border-box;min-width:0}
.cfeed .cf-pl{position:absolute;left:0;top:0;width:calc(100% - 6px);height:calc(100% - 3px);overflow:visible;pointer-events:none;z-index:-1}
.cfeed .cf-pl .cf-sh{fill:#000;transform:translate(14px,14px)}
.cfeed .cf-pl .cf-fc{fill:#121212;stroke:#4A4A4A;stroke-width:2}
.cfeed{isolation:isolate}
.cfeed .cf-pl.m{display:none}
.cfeed .cf-badge{flex:none;width:52px;height:63px;margin-top:-6px;background:url(/ds/assets/ds/badges/profile-boltbadge.svg) center/100% 100% no-repeat}
.cfeed .cf-k{flex:none;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;font-style:italic;font-size:20px;line-height:1;color:#FFA800;text-transform:uppercase;white-space:nowrap}
.cfeed .cf-tk{flex:1 1 auto;min-width:0;display:flex;height:40px}
.cfeed .cticker{flex:1;min-width:0;font-size:22px}
.cfeed .ctk-play{position:relative;height:28px;font-size:17px}
@media (max-width:720px){
  .cfeed{height:56px;gap:10px;padding:0 26px 0 12px}
  .cfeed .cf-pl.d{display:none}.cfeed .cf-pl.m{display:block}
  .cfeed .cf-pl .cf-sh{transform:translate(5px,5px)}
  .cfeed .cf-k{display:none}
  .cfeed .cf-badge{width:38px;height:46px;margin-top:-10px}
  .cfeed .cticker{font-size:15px;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:oblique}
  .cfeed .ctk-play{height:24px;font-size:14px;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:oblique;font-synthesis:none;letter-spacing:.08em;padding-left:.7em}
}

/* ── 12. the quiet board controls (CadeCategory.search / sort): their SearchField and DropdownSelect
      silhouettes in the dark look. The plate is drawn, the control is native; focus turns the keyline orange ── */
.csearch,.csort{position:relative;display:inline-flex;align-items:center;height:54px;box-sizing:border-box;color:#EFE9D8;isolation:isolate;cursor:text}
.csearch{width:340px;max-width:100%}
.csort{width:250px;cursor:pointer}
.csearch .cq-pl,.csort .cq-pl{position:absolute;inset:-8% 0 -6% 0;width:100%;height:114%;overflow:visible;z-index:-1;pointer-events:none}
.cq-pl .cq-sh{fill:#000;stroke:#000;stroke-width:2}
.cq-pl .cq-fc{fill:#161514;stroke:#3A3530;stroke-width:1.5;transition:stroke 150ms cubic-bezier(0,0,.2,1)}
.csearch:hover .cq-fc,.csort:hover .cq-fc{stroke:#6E6A64}
.csearch:focus-within .cq-fc,.csort:focus-within .cq-fc{stroke:#FFA800;stroke-width:2.5}
.csearch input{appearance:none;-webkit-appearance:none;width:100%;height:100%;margin:0;border:0;background:none;color:#EFE9D8;outline:none;padding:0 13% 4px 7%;box-sizing:border-box;
  font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:normal;font-synthesis:none;font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.csearch input::placeholder{color:#8E8981;opacity:1}
.csearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.csort .cs-l{position:absolute;left:17%;top:50%;transform:translateY(-58%);pointer-events:none;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#A1A1A1}
.csort select{appearance:none;-webkit-appearance:none;width:100%;height:100%;margin:0;border:0;background:none;color:#EFE9D8;outline:none;cursor:pointer;padding:0 19% 4px 36%;box-sizing:border-box;
  font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:normal;font-synthesis:none;font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.csort select option{background:#161514;color:#EFE9D8;text-transform:none}
.csort .cs-c{position:absolute;right:15%;top:50%;width:14px;height:14px;transform:translateY(-60%);pointer-events:none}
/* the keyboard ring sits on the label, the plate's own keyline carries the rest */
.csearch:has(input:focus-visible),.csort:has(select:focus-visible){outline:3px solid #FFA800;outline-offset:6px}
@media (max-width:720px){.csearch input,.csort select{font-size:18px}}

/* ── 13. LOAD MORE (CadeCategory.more): their landing CTA, orange, the label centred; their lift and press ── */
.cmore{position:relative;display:inline-block;width:300px;height:58px;appearance:none;margin:0;padding:0;border:0;background:none;cursor:pointer;color:#141414;font:inherit;-webkit-tap-highlight-color:transparent}
.cmore svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.cmore .cm-sh{transform:translate(6px,6px)}.cmore .cm-sh path{fill:#000}
.cmore .cm-lift{position:absolute;inset:0;display:block;transition:transform 150ms cubic-bezier(0,0,.2,1)}
.cmore .cm-fc path{fill:#FFA800;stroke:#000;stroke-width:4;vector-effect:non-scaling-stroke}
.cmore .cm-w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:.06em;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;font-style:italic;font-size:26px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.cmore:hover .cm-lift{transform:translate(-2px,-2px)}}
.cmore:focus-visible{outline:3px solid #FFA800;outline-offset:6px}
.cmore:focus-visible .cm-lift{transform:translate(-2px,-2px)}
.cmore:active .cm-lift{transform:translate(4px,4px)}
.cmore[disabled]{cursor:default;opacity:.4}
.cmore.is-hover .cm-lift{transform:translate(-2px,-2px)}
@media (prefers-reduced-motion:reduce){.cmore .cm-lift{transition:none}}

/* ── 14. the round sheet (CadeCategory.sheet): a modal on a dimmed ground, no panel of its own ── */
.csheet{width:min(720px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);margin:auto;padding:0;border:0;background:none;color:#EFE9D8;overflow:visible}
.csheet::backdrop{background:rgba(8,8,8,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.csheet .cs-in{display:flex;flex-direction:column;gap:18px;max-height:calc(100dvh - 32px);overflow:auto;padding:6px 8px 10px 4px;box-sizing:border-box}
.csheet .cs-top{display:flex;align-items:center;gap:16px;min-width:0}
.csheet .cs-med{flex:none;height:76px;display:flex;align-items:center}
.csheet .cs-med svg{height:100%;width:auto;display:block;overflow:visible}
.csheet .cs-copy{flex:1;min-width:0}
.csheet .cs-k{margin:0 0 4px;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#A1A1A1}
.csheet .cs-q{margin:0;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;font-style:italic;font-size:38px;line-height:1.02;text-transform:uppercase;color:#EFE9D8}
.csheet .cs-x{align-self:flex-start;height:40px;font-size:13px;position:relative}
.csheet .cs-x::after{content:"";position:absolute;inset:-4px}
.csheet .cs-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.csheet .cs-clk{display:inline-flex;align-items:baseline;gap:8px;background:#FAF424;color:#141414;border:1.5px solid #0B0B0B;box-shadow:3px 3px 0 #000;padding:6px 9px 5px;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;line-height:1}
.csheet .cs-dur{font-family:"Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.csheet .cs-met{display:flex;gap:16px;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#A1A1A1}
.csheet .cs-met b{color:#EFE9D8;font-size:14px;letter-spacing:0}
.csheet .cs-chart{position:relative;height:250px}
.csheet .cs-bar .ac-bar{--ac-h:38px;--ac-fs:15px;--ac-inset:10px;--ac-drop:3px}
.csheet .cs-picks{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:54px;--pk-fs:20px}
.csheet .cs-n{margin:0;font-family:"Futura PT","Barlow Condensed",sans-serif;font-size:14px;line-height:1.4;color:rgba(239,233,216,.7)}
@media (max-width:720px){
  .csheet{width:calc(100% - 24px)}
  .csheet .cs-in{gap:14px}
  .csheet .cs-med{height:56px}
  .csheet .cs-q{font-size:26px}
  .csheet .cs-chart{height:200px}
  .csheet .cs-picks{height:48px;--pk-fs:17px;gap:12px}
}

a.cmore,a.ctile{text-decoration:none}

/* ── 15. the clock chip (CadeCategory.clock): the All Stars card's yellow chip, standalone ── */
.cclk{display:inline-flex;flex-direction:column;align-items:center;gap:5px;box-sizing:border-box;min-width:76px;padding:7px 11px 6px;background:#FAF424;border:1.5px solid #0B0B0B;box-shadow:4px 4px 0 #000;color:#141414;line-height:1}
.cclk.off{background:#EFE9D8}
.cclk-k{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cclk-t{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 16. the scoreboard (CadeCategory.scoreboard): two medallions, the score in DATA, the clock chip. No plate:
      one row on whatever it sits on. Sized by its own width (a container) ── */
.cscore{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;min-width:0;color:#EFE9D8}
.cscore .csb-t{display:flex;align-items:center;gap:18px;min-width:0}
.cscore .csb-t.a{flex-direction:row-reverse;text-align:right}
.cscore .csb-m{flex:none;width:clamp(56px,13cqw,112px)}
.cscore .csb-m svg{display:block;width:100%;height:auto;overflow:visible}
.cscore .csb-n{display:flex;flex-direction:column;gap:6px;min-width:0}
.cscore .csb-n b{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:clamp(26px,6cqw,52px);line-height:.92;text-transform:uppercase;text-shadow:.06em .06em 0 #000}
.cscore .csb-n span{font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-synthesis:none;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#A1A1A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cscore .csb-c{display:flex;flex-direction:column;align-items:center;gap:14px}
.cscore .csb-s{display:flex;align-items:baseline;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:clamp(44px,11cqw,92px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:.05em .05em 0 #000;white-space:nowrap}
.cscore .csb-s i{font-style:normal;color:rgb(239 233 216 / 38%);padding:0 .12em;text-shadow:none}
.cscore[data-state=final] .csb-s,.cscore[data-state=delayed] .csb-s{color:#A1A1A1}
@container (max-width:520px){
  .cscore .csb-t,.cscore .csb-t.a{flex-direction:column;gap:10px;text-align:center}
  .cscore .csb-n{align-items:center}
  .cscore .csb-n span{display:none}
  .cscore .csb-c{gap:12px}
  .cscore .cclk{min-width:64px;padding:6px 9px 5px}.cscore .cclk-k{font-size:12px}.cscore .cclk-t{font-size:17px}
}

/* ── 17. the round (CadeCategory.round / roundMarkup): the question over our chart (/lib/replay-chart.css), the two
      picks with what each pays, the note, Pool / Closes / Settles on. The chart is the round's one box.
      Wide (760+): the copy and the picks on the left, the chart on the right; narrow: one column ── */
.cround{container-type:inline-size;min-width:0;color:#EFE9D8}
.cround .rd-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.cround .rd-k{display:flex;align-items:center;gap:10px;margin:0;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-synthesis:none;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:rgb(239 233 216 / 66%)}
.cround .rd-mk{flex:none;display:flex;align-items:center;height:30px}
.cround .rd-mk:empty{display:none}
.cround .rd-mk svg{height:100%;width:auto;display:block;overflow:visible}
.cround .rd-mk[data-pair=true]{height:28px}
.cround .rd-q{margin:10px 0 0;font-family:"Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:800;font-size:34px;line-height:1;text-transform:uppercase;color:#EFE9D8}
.cround .rd-q em{font-style:inherit;color:#FAF424}
.cround .rd-chart{position:relative;height:230px;min-width:0}
.cround .rd-chart .crc{min-height:0}
.cround .rd-act{display:flex;flex-direction:column;gap:14px;min-width:0}
.cround .rd-picks{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cround .rd-pick{display:flex;flex-direction:column;gap:9px;min-width:0}
.cround .rd-pick .cpick{height:54px;--pk-fs:22px}
.cround .rd-pay{text-align:center;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-synthesis:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#A1A1A1}
.cround .rd-pay b{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:16px;letter-spacing:0;color:#EFE9D8}
.cround .rd-verdict{position:absolute;inset:0;pointer-events:none;z-index:6}
.cround .rd-note{margin:0;min-height:1.4em;font-family:"Futura PT",system-ui,sans-serif;font-size:15px;line-height:1.4;color:rgb(239 233 216 / 72%)}
.cround .rd-met{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0;padding-top:16px;border-top:1px solid rgb(239 233 216 / 12%)}
.cround .rd-met div{display:flex;flex-direction:column-reverse;gap:6px}
.cround .rd-met dt{font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-synthesis:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgb(239 233 216 / 55%)}
.cround .rd-met dd{margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:16px;line-height:1;color:#EFE9D8;white-space:nowrap}
@container (min-width:760px){
  .cround .rd-in{grid-template-columns:minmax(0,400px) minmax(0,1fr);grid-template-areas:"copy chart" "act chart";grid-template-rows:auto 1fr;column-gap:44px;row-gap:24px}
  .cround .rd-copy{grid-area:copy}.cround .rd-act{grid-area:act}
  .cround .rd-chart{grid-area:chart;height:auto;min-height:320px}
}
@container (max-width:400px){
  .cround .rd-q{font-size:28px}
  .cround .rd-chart{height:190px}
  .cround .rd-picks{gap:12px}
  .cround .rd-pick .cpick{height:50px;--pk-fs:19px}
  .cround .rd-met{gap:12px 18px}
  .cround .rd-met dd{font-size:15px}
  .cround .rd-k{font-size:13px;letter-spacing:.06em}
}
@container (max-width:300px){.cround .rd-q{font-size:24px}.cround .rd-pick .cpick{--pk-fs:17px}.cround .rd-pay{font-size:12px}}

/* ── 18. the category hero (CadeCategory.hero): the top of a category's board. The shout, the line, the numbers,
      then the category's piece: the head to head + the live round, the featured game, or the three category doors ── */
.chero{position:relative;container-type:inline-size;min-width:0;color:#EFE9D8}
.chero .chh-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:32px 56px;align-items:center}
.chero .chh-k{display:flex;align-items:center;gap:18px;margin:0 0 18px}
.chero .chh-live{--lt-w:112px;flex:none}
.chero .ch-n{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#A1A1A1;white-space:nowrap;font-variant-numeric:tabular-nums}
.chero .chh-h{--chh-fs:clamp(48px,8.4cqw,112px);display:flex;align-items:center;gap:.16em;margin:0;font-family:"Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:800;font-size:var(--chh-fs);line-height:.95;text-transform:uppercase;color:#EFE9D8;text-shadow:.11em .08em 0 #000}
.chero .chh-g{flex:none;display:block;width:.98em;height:.98em}
.chero .chh-g svg{display:block;width:100%;height:100%;overflow:visible}
.chero .chh-w{display:block;min-width:0}
.chero .chh-l{margin:20px 0 0;max-width:32em;font-family:"Futura PT",system-ui,sans-serif;font-size:18px;line-height:1.45;color:rgb(239 233 216 / 72%)}
.chero .chh-st{display:flex;flex-wrap:wrap;gap:16px 48px;margin:30px 0 0}
.chero .chh-st div{display:flex;flex-direction:column;gap:8px}
.chero .chh-st dd{margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:38px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chero .chh-st dt{font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-synthesis:none;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255 / 50%)}
.chero .chh-duel{min-width:0}
.chero .chh-round{margin-top:48px}
/* all: the three category doors under the copy */
.chero .chh-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 22px;margin-top:36px}
.chero .chh-tiles .ctile{width:100%;height:auto;aspect-ratio:420/96}
/* sports: the copy and the door beside the featured game */
.chero .chh-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:36px 56px;align-items:center}
.chero .chh-go{margin-top:30px}
.chero .chh-go .cmore{width:320px;height:58px}.chero .chh-go .cm-w{font-size:22px}
.chero .chh-game{position:relative;display:flex;flex-direction:column;gap:22px;min-width:0;padding:4px 0;color:inherit;text-decoration:none}
.chero .chh-gk{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#A1A1A1}
.chero .chh-gb .ac-bar{--ac-h:34px;--ac-fs:14px;--ac-inset:.6rem;--ac-drop:3px}
.chero .chh-game:focus-visible{outline:3px solid #FFA800;outline-offset:8px}
@media (hover:hover) and (pointer:fine){.chero .chh-game:hover .csb-s{color:#FAF424}}
@container (max-width:1000px){
  .chero .chh-top,.chero .chh-cmp{grid-template-columns:minmax(0,1fr)}
  .chero .chh-duel{width:min(100%,560px)}
  .chero .chh-round{margin-top:36px}
}
@container (max-width:720px){
  .chero .chh-tiles{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px}
  .chero .chh-tiles .ctile{max-width:440px}
  .chero .chh-l{font-size:16px;margin-top:14px}
  .chero .chh-st{gap:14px 36px;margin-top:22px}
  .chero .chh-st dd{font-size:30px}
  .chero .chh-st dt{font-size:13px}
  .chero .chh-k{margin-bottom:14px;gap:14px}
  .chero .chh-live{--lt-w:92px}
  .chero .chh-go{margin-top:24px}
  .chero .chh-go .cmore{width:100%;max-width:340px;height:54px}.chero .chh-go .cm-w{font-size:20px}
}

/* ── 19. the loading twins (CadeCategory.roundGhost / scoreGhost / heroGhost): a known plate is drawn flattened
      (the kit's Foundation / Skeleton filter, --sk-flat), its words hidden; the rest are the kit's bars ── */
.cc-skflat{filter:var(--sk-flat,grayscale(1) opacity(.2));pointer-events:none}
.cc-skflat :is(.pk-w,.cm-w,.ct-k,.ct-t,.ct-c,.cclk-k,.cclk-t){visibility:hidden}
.cround-ghost .rd-chart .sk-chart{height:100%}
.chero[role=status] .chh-st dd .sk-bar,.cround-ghost .rd-met dd .sk-bar{max-width:100%}
.cround .rd-pay{display:block;height:24px;line-height:24px;white-space:nowrap}

/* ═════ 21. ONE interaction vocabulary (2026-10-02, owner: "hovers si etc, sa fie bine cum ai facut pe homepage").
   Every page of the preview speaks these five gestures, nothing re-lays out (only translate, shadow, colour):
     card    .acard / .ci-card   lifts 4px; the medallion hops once (/lib/motion.css .cm-cards); a press settles it to 1px
     plate   .ci-plate           a control with a hard shadow (CTA, tile, tab, pick, pill, stepper, copy button):
                                 hover rises 2px off its shadow, a press lands ON its shadow (--ci-sh, the shadow's offset)
     row     .crow / .ci-row     a quiet keyline (orange at 55%) and a 1px lift; a press sets it back down
     link    .ci-link            the underline sweeps in from the left (::after, so it never moves the text)
     focus   the house ring everywhere: 3px #FFA800, 3px out (a control with its own ring keeps it)
   The individual `translate` property composes with any transform a part already carries (a skewed pill stays
   skewed). Reduced motion and ?static keep the states, without the travel. ═════ */
:root{--ci-ease:cubic-bezier(0,0,.2,1);--ci-t:150ms;--ci-ring:#FFA800;--ci-key:rgb(255 168 0 / 55%)}
:where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--ci-ring);outline-offset:3px}

/* card */
.ci-card{transition:translate var(--ci-t) var(--ci-ease)}
@media (hover:hover) and (pointer:fine){.ci-card:hover{translate:0 -4px}}
.ci-card:focus-visible,.ci-card:has(:focus-visible){translate:0 -4px}
.ci-card:active{translate:0 -1px}
/* the shared card: a press settles it (the bolt is its own control and does not press the card) */
@media (hover:hover) and (pointer:fine){.acard:active:not(:has(.ac-bolt:active)):not([data-state=loading]){transform:translateY(-1px)}}
@media (hover:none){.acard:active:not(:has(.ac-bolt:active)){transform:translateY(1px)}}
.acard .ac-bolt:active:not(:disabled){transform:translate(.8cqw,.8cqw);box-shadow:.3cqw .3cqw 0 #000}

/* plate */
.ci-plate{--ci-sh:4px;transition:translate var(--ci-t) var(--ci-ease),box-shadow var(--ci-t) var(--ci-ease)}
@media (hover:hover) and (pointer:fine){
  .ci-plate:not(:disabled):not([aria-disabled=true]):not([aria-selected=true]):not([aria-pressed=true]):not(:active):hover{translate:-2px -2px;box-shadow:calc(var(--ci-sh) + 2px) calc(var(--ci-sh) + 2px) 0 #000}
}
.ci-plate:not(:disabled):not([aria-disabled=true]):active{translate:var(--ci-sh) var(--ci-sh);box-shadow:0 0 0 #000}
.ci-plate:focus-visible:not(:active){translate:-2px -2px}

/* row */
.ci-row,.crow{transition:translate var(--ci-t) var(--ci-ease),box-shadow var(--ci-t) var(--ci-ease),background-color var(--ci-t) var(--ci-ease)}
@media (hover:hover) and (pointer:fine){
  .ci-row:hover,.crow:not(:has(.sk-bar)):hover{translate:0 -1px;box-shadow:inset 0 0 0 1.5px var(--ci-key);background-color:rgb(239 233 216 / 3%)}
}
.ci-row:has(:focus-visible),.ci-row:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ci-key)}
.ci-row:active,.crow:active{translate:0 0;background-color:rgb(239 233 216 / 1.5%)}
/* the game row (sports) carries no box: its keyline is drawn 8px outside it */
.cgame::before{content:"";position:absolute;inset:-8px;border:1.5px solid transparent;pointer-events:none;transition:border-color var(--ci-t) var(--ci-ease)}
.cgame{transition:translate var(--ci-t) var(--ci-ease)}
@media (hover:hover) and (pointer:fine){.cgame:hover{translate:0 -1px}.cgame:hover::before{border-color:var(--ci-key)}}
.cgame:active{translate:0 0}

/* link */
.ci-link{position:relative;text-decoration:none}
.ci-link::after{content:"";position:absolute;left:0;right:0;bottom:var(--ci-ul,calc(50% - .72em));height:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform 220ms cubic-bezier(.2,.8,.2,1);pointer-events:none}
@media (hover:hover) and (pointer:fine){.ci-link:hover::after{transform:scaleX(1)}}
.ci-link:focus-visible::after{transform:scaleX(1)}
/* a link that always shows its line (it is the only sign it is a link) keeps a quiet one under the sweep */
.ci-link.ci-ruled{background:linear-gradient(currentColor,currentColor) 0 calc(50% + .72em - 2px)/100% 2px no-repeat;background-image:linear-gradient(rgb(255 168 0 / 45%),rgb(255 168 0 / 45%))}

/* the shared parts' own small controls get the press they lacked */
.ctk-play:active{translate:1px 1px}
.cfilter .ntab:not([aria-selected=true]):not([aria-disabled=true]):active{translate:0 2px}

@media (prefers-reduced-motion:reduce){
  .ci-card,.ci-plate,.ci-row,.crow,.cgame,.cgame::before,.ci-link::after{transition:none}
}
html.static :is(.ci-card,.ci-plate,.ci-row,.crow,.cgame,.cgame::before,.ci-link::after){transition:none}

/* ═════ 22. the hero art layer (opt in): .c-art on a hero's box, the art in --hero-art (desktop) and --hero-art-m (phone).
   The banners are 1920 x 1097 with their left 40-55% left as ground for type; here they sit right-anchored behind
   the hero, faded into the ground on the left and the bottom, so no line of copy sits on the busy half.
   Knobs: --art-w, --art-top, --art-right, --art-o (and the -m twins for the phone). Nothing moves on scroll. ═════ */
.c-art{position:relative;isolation:isolate}
.c-art::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:var(--art-top,-120px);right:var(--art-right,-40px);width:var(--art-w,min(64%,1080px));aspect-ratio:1920/1097;
  background:var(--hero-art,none) 100% 0/cover no-repeat;opacity:var(--art-o,.9);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%),linear-gradient(180deg,#000 50%,transparent 98%);
  mask-image:linear-gradient(90deg,transparent 0,#000 42%),linear-gradient(180deg,#000 50%,transparent 98%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (max-width:720px){
  .c-art::before{background-image:var(--hero-art-m,var(--hero-art,none));top:var(--art-top-m,-64px);right:var(--art-right-m,-16px);width:var(--art-w-m,92%);opacity:var(--art-o-m,.42);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48%),linear-gradient(180deg,#000 35%,transparent 92%);
    mask-image:linear-gradient(90deg,transparent 0,#000 48%),linear-gradient(180deg,#000 35%,transparent 92%)}
}

/* ═════ 23. the house brand accents (2026-10-03, owner: "very slightly more Cade branded", taken from Scotty's
   explainer videos, used sparingly). Never a page texture, never decoration everywhere.
     .ci-qplate   the video's QUESTION PLATE: cream #EFE9D8, ink condensed italic caps, an ink keyline and a hard
                  shadow. Worn by a section's kicker. Its padding is paid back by negative margins, so the words stay
                  exactly where they were printed (no layout shift); .ci-qplate.in keeps the left edge (after a mark).
     .ci-hazard   the CLOSED shutter's hazard band (motion.css .cm-shutter .hz): a short yellow / ink tape that marks
                  a closed or empty state. Mirrored for the system pages in /lib/system-pages.css. ═════ */
.ci-qplate{display:inline-block;padding:.2em .5em .1em;margin:-.2em 0 -.1em -.5em;background:#EFE9D8;color:#0B0B0B!important;
  font-style:italic;font-synthesis:none;line-height:1.1;white-space:nowrap;
  box-shadow:0 0 0 1.5px #0B0B0B,3px 3px 0 1.5px #0B0B0B}
.ci-qplate.in{margin-left:0}
.ci-hazard{display:block;width:72px;height:10px;box-sizing:border-box;border-top:1.5px solid #0B0B0B;border-bottom:1.5px solid #0B0B0B;
  background:repeating-linear-gradient(-45deg,#FAF424 0 6px,#0B0B0B 6px 12px);box-shadow:3px 3px 0 #000}