/* ═══════════════════════════════════════════════════════════════════
   CADE SPORTS: the sports lobby's parts (/lib/sports.js, window.CadeSports).
   Pair with /lib/category.css (the card shell, the filter, the board, the pick) and
   /ds/ds.css (the LIVE tag). Specimens: /ds/#sports. No new shapes: the panel is their
   DS_PANEL_CLIP (--clip-panel in ds.css), the rest rides the category parts.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. the game card: the All Stars card's shell carrying a game ── */
.sgame .sg-sc{display:flex;align-items:baseline;justify-content:space-between;gap:3cqw;margin-top:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--ac-ink)}
.sgame .sg-sc>span{font-size:max(22px,10.5cqw);letter-spacing:-.03em;white-space:nowrap}
.sgame .sg-sc i{font-style:normal;color:var(--ac-quiet);padding:0 .12em}
.sgame .sg-sc b{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:max(14px,6cqw);letter-spacing:.03em;color:var(--ac-quiet)}
.sgame[data-state=resolved] .sg-sc>span,.sgame[data-state=unavailable] .sg-sc>span{color:var(--ac-quiet)}
.sgame:focus-visible{outline:3px solid #FFA800;outline-offset:3px;box-shadow:none}
.sgame .ac-act .ac-bar{flex:1 1 auto}

/* ── 2. league tabs: the filter; a league that is not live yet is quiet and says Soon ── */
.sleagues{flex-wrap:wrap}
.sleagues .ntab{min-height:44px}
.sleagues .ntab[data-soon]{cursor:default;color:rgb(239 233 216 / 42%)}
.sleagues .ntab[data-soon]>b{opacity:1;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-style:normal;font-weight:500;font-synthesis:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgb(239 233 216 / 28%);padding:3px 6px 2px;line-height:1}
.sleagues .ntab[data-soon]:hover{color:rgb(239 233 216 / 42%)}

/* ── 3. schedule + calls rows: rows of their mobile board ── */
.cboard .srow,.cboard .scall{--cb-row:84px;gap:14px}
.srow .sr-t{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:76px;height:52px;box-sizing:border-box;background:#EFE9D8;border:1.5px solid #0B0B0B;box-shadow:3px 3px 0 #000;color:#141414}
.srow .sr-d{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.srow .sr-h{margin-top:4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:17px;line-height:1;font-variant-numeric:tabular-nums}
.srow .cr-mk,.scall .cr-mk{flex:none;width:72px;height:46px;display:flex;align-items:center}
.srow .cr-mk svg,.scall .cr-mk svg{width:100%;height:auto;display:block;overflow:visible}
.srow .sr-c,.scall .sr-c{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
.sr-q{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:22px;line-height:1;text-transform:uppercase;color:var(--cb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-q em{font-style:inherit}.sr-q em[data-side=yes]{color:#91BB4F}.sr-q em[data-side=no]{color:#F24B61}
.sr-l{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cb-quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .sr-a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid rgb(239 233 216 / 38%);font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:#EFE9D8;text-decoration:none;white-space:nowrap;transition:color .15s,border-color .15s}
@media (hover:hover) and (pointer:fine){.srow .sr-a:hover{color:#FFA800;border-color:#FFA800}}
.srow .sr-a:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.scall .sc-v{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.scall .sc-k{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:var(--cb-quiet)}
.scall .sc-n{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:800;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;color:#FAF424}
.scall .sc-n.won{color:#91BB4F}
@media (max-width:420px){
  .cboard .srow,.cboard .scall{gap:10px;padding:0 10px 0 12px}
  .srow .sr-t{width:62px}.srow .sr-h{font-size:15px}
  .srow .cr-mk,.scall .cr-mk{width:56px}
  .sr-q{font-size:19px}.sr-l{font-size:10px;letter-spacing:.04em}
  .srow .sr-a{padding:0 10px;font-size:14px}
}
@media (max-width:359px){.srow .cr-mk{display:none}}

/* ── 4. the playoff teaser: their team badges on a plain ladder, a matchup per row ── */
.sbracket{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px;align-items:stretch}
.sbracket .bk-c{display:flex;flex-direction:column;gap:10px;position:relative;min-width:0}
.sbracket .bk-ms{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-around;gap:10px}
.sbracket .bk-h{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:#A1A1A1}
.sbracket .bk-m{position:relative;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid rgb(239 233 216 / 16%);min-width:0}
.sbracket .bk-m.is-live{border-color:#FAF424}
.sbracket .bk-c+.bk-c .bk-m::before{content:"";position:absolute;right:calc(100% + 1px);top:50%;width:26px;border-top:1px solid rgb(239 233 216 / 30%)}
.sbracket .bk-t{display:block;flex:0 1 52px;min-width:0;aspect-ratio:128/88}
.sbracket .bk-t svg{display:block;width:100%;height:100%;overflow:visible}
.sbracket .bk-tbd{display:flex;align-items:center;justify-content:center;aspect-ratio:128/88;border:1px dashed rgb(239 233 216 / 30%);font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:10px;letter-spacing:.06em;color:#A1A1A1}

/* ── 5. how a round works ── */
.ssteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.ssteps li{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid #FAF424}
.ssteps .st-h{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;color:#EFE9D8}
.ssteps .st-t{font-family:"Futura PT",system-ui,sans-serif;font-size:16px;line-height:1.4;color:#A1A1A1}
@media (max-width:720px){.ssteps{grid-template-columns:minmax(0,1fr);gap:20px}.ssteps .st-h{font-size:22px}}

/* ── 6. the featured live game: the stage (the LIVE line, the scoreboard, the field) and the drive's market, the
      shared round (CadeCategory.round, its styles in /lib/category.css) on the ground beside it, no panel of its own:
      the chart is the market's one box ── */
.sfeat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px 48px;align-items:start}
.sf-stage{min-width:0;display:flex;flex-direction:column}
.sf-top{display:flex;align-items:center;gap:14px;min-width:0}
.sf-live{--lt-w:104px;flex:none}
.sf-k{margin:0;min-width:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#A1A1A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-sb{margin:30px auto 0;width:min(100%,720px)}
.sf-fld{position:relative;margin-top:28px}
.sf-fld svg{display:block;width:100%;height:auto;overflow:hidden}
.sf-ev{position:absolute;left:50%;top:8px;transform:translateX(-50%);padding:6px 16px 5px;background:#419FE5;color:#0B0B0B;box-shadow:4px 4px 0 #000;outline:2px solid #000;font-family:"Barlow Condensed",Impact,sans-serif;font-style:italic;font-weight:800;font-size:20px;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none}
.sf-ev[data-tone=yes]{background:#91BB4F}.sf-ev[data-tone=no]{background:#EA2A46;color:#EFE9D8}
.sf-ev.on{animation:sfEv 2.6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes sfEv{0%{opacity:0;transform:translate(-50%,-14px) scale(.7)}12%{opacity:1;transform:translate(-50%,0) scale(1.06)}20%,85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0}}
.sf-mkt{min-width:0}
.sf-cta{margin-top:6px}
.sf-cta .cmore{width:min(100%,340px);height:56px}
.sf-cta .cm-w{font-size:22px}
/* any .spanel: their DS_PANEL_CLIP, face #1A1816 over a 6px black copy (drawn twice, never box in box) */
.spanel{position:relative;min-width:0;isolation:isolate}
.spanel::before,.spanel::after{content:"";position:absolute;inset:0;clip-path:var(--clip-panel);z-index:-1}
.spanel::before{background:#000;transform:translate(6px,6px)}
.spanel::after{background:#1A1816}
@media (max-width:1180px){.sfeat{grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:36px 36px}}
@media (max-width:1023px){
  .sfeat{grid-template-columns:minmax(0,1fr);gap:36px}
  .sf-sb{margin-top:24px}
  .sf-fld{margin-top:20px}
  .sf-cta .cmore{width:100%;max-width:none}
}
@media (max-width:420px){.sf-k{font-size:11px;letter-spacing:.04em}.sf-live{--lt-w:84px}.sf-ev{font-size:15px;padding:4px 10px}}
@media (prefers-reduced-motion:reduce){.sf-ev.on{animation:none;opacity:1}}
/* a call's line may take two lines on a narrow phone (the side must stay readable) */
.cboard .scall{height:auto;min-height:84px;padding-top:12px;padding-bottom:12px}
.scall .sr-q{white-space:normal;line-height:1.05}

/* the featured game's loading twin: the field plate at the drawing's ratio (1000 x 280; the phone camera 560 x 280) */
.sf-fghost{display:block;aspect-ratio:1000/280}
@media (max-width:731px){.sf-fghost{aspect-ratio:560/280}}
/* the interaction vocabulary (/lib/category.css 21): the reminder plate presses */
.srow .sr-a{transition:color .15s,border-color .15s,translate .15s cubic-bezier(0,0,.2,1)}
.srow .sr-a:active{translate:1px 1px}