/* =====================================================================
   Winter Ball Updates · v6.css (Lane 0, Phase 2)
   The v5 design system ("Noche de pelota", design/v5/DIRECTION.md) laid
   over the live v4 markup. theme.css (v4 shell) and stats.css (v4 L2)
   still load first and keep every rule the pages rely on; this file
   re-points their tokens to the v5 palette and restyles the components.
   Fonts: Saira (display, variable width), Inter (text), JetBrains Mono.
   Motifs: costura (seam stitch) under card titles, persiana (louvre
   hatch) on mastheads, noche data rooms. Motion dial: html[data-motion].
   ===================================================================== */

@property --p   { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --v   { syntax: "<number>"; inherits: true;  initial-value: 0; }

/* ---------- tokens: light (v5 names + the v4 names re-pointed) ---------- */
:root {
  color-scheme: light;
  --paper:#F2F0EA; --paper-2:#E8E4DA; --card:#FFFFFF; --card-2:#F8F6F1; --thead:#F4F1EA;
  --line:#E2DDD2; --rule:rgb(15 35 64 / .10); --rule-2:rgb(15 35 64 / .06);
  --ink:#0E1428; --ink-2:#3E4459; --ink-3:#5A6072;
  --mar:#9a0f16; --mar-fill:#a0101a; --mar-soft:#f2d5c6;
  --flam:#C23324; --flam-fill:#C93A2B; --flam-soft:#FBE6E2;
  --mango:#F2A637; --mango-ink:#7E4C00; --mango-soft:#FDF0D9;
  --palma:#167447; --palma-fill:#177A4B; --cold:#2E6CAD; --sand:#D8D1C2;
  --noche:#0b1622; --noche-2:#13202e; --noche-3:#1a2a3a; --noche-line:#2a3a4a;
  --on-noche:#f0e2c6; --on-noche-2:#d4c3a2; --on-noche-3:#bdad8c;
  --lidom:#1f3b6e; --lvbp:#C78A05; --lmp:#13894B; --lbprc:#D2375B;
  --lidom-ink:#1f3b6e; --lvbp-ink:#7E5800; --lmp-ink:#0F6E3C; --lbprc-ink:#B02647;
  --lidom-k:#1f3b6e; --lvbp-k:#7E5800; --lmp-k:#0F6E3C; --lbprc-k:#B02647;
  --sh-1:0 1px 2px rgb(15 35 64 / .06), 0 1px 3px rgb(15 35 64 / .08);
  --sh-lift:0 12px 26px -12px rgb(15 35 64 / .34), 0 2px 4px rgb(15 35 64 / .06);
  --r-1:4px; --r-2:8px; --r-3:14px;
  --gap:12px; --gutter:16px; --side:212px; --maxw:1440px; --tbh:64px;
  --fd:"Saira","Arial Narrow",system-ui,sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --fdw:760; --fdk:1; --fdt:-.005em;
  --d-1:120ms; --d-2:200ms; --d-3:600ms; --d-4:1400ms; --d-amb:53s; /* leaders ticker: 40s → 53s = 25% slower (operator 2026-10-23) */
  --e-out:cubic-bezier(.16,1,.3,1); --e-std:cubic-bezier(.4,0,.2,1); --e-spring:cubic-bezier(.3,1.7,.5,1);
  --m-dist:14px;
  /* v4 names */
  --bg:var(--paper); --bg-2:var(--paper-2);
  --navy:var(--noche); --navy-2:var(--noche-2); --navy-3:var(--noche-3);
  --blue:var(--mar); --blue-2:#7a0c12; --blue-soft:var(--mar-soft); --blue-fill:var(--mar-fill);
  --turq:var(--mar-fill); --coral:var(--flam-fill); --coral-ink:var(--flam);
  --palm:var(--palma); --good:var(--palma); --bad:var(--flam); --hi:var(--mango-ink);
  --sample-a:#FDF0D9; --sample-b:#F9E2B4; --sample-ink:#5A3700;
  --shadow:var(--sh-1); --shadow-2:var(--sh-lift); --shadow-pop:0 28px 70px -20px rgb(11 22 34 / .6);
  --r:var(--r-2); --r-sm:6px; --r-xs:var(--r-1);
  --costura: linear-gradient(90deg, var(--line), var(--line)) 0 0 / 100% 1px no-repeat,
             repeating-linear-gradient(60deg, transparent 0 4px, color-mix(in oklab, var(--flam-fill) 75%, transparent) 4px 5.5px, transparent 5.5px 12px) 0 2px / 100% 4px no-repeat;
  --costura-on-dark: repeating-linear-gradient(60deg, transparent 0 4px, #E04A3A 4px 5.5px, transparent 5.5px 12px), repeating-linear-gradient(-60deg, transparent 0 4px, #E04A3A 4px 5.5px, transparent 5.5px 12px);
  --persiana-light: repeating-linear-gradient(180deg, transparent 0 5px, rgb(15 35 64 / .045) 5px 6px, rgb(255 255 255 / .6) 6px 7px);
  --persiana-dark: repeating-linear-gradient(180deg, transparent 0 5px, rgb(255 255 255 / .09) 5px 6px, rgb(0 0 0 / .25) 6px 7px);
}
:root[data-font="b"] { --fd:"Oswald","Arial Narrow",sans-serif; }
:root[data-font="c"] { --fd:"Roboto Condensed","Arial Narrow",sans-serif; }
/* ---------- tokens: dark (same selectors as theme.css so these win) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#080D1B; --paper-2:#0C1224; --card:#0F1629; --card-2:#141C33; --thead:#131B31;
    --line:#202A45; --rule:rgb(240 226 198 / .11); --rule-2:rgb(240 226 198 / .06);
    --ink:#f0e2c6; --ink-2:#B7BFD2; --ink-3:#929BB2;
    --mar:#ff8f80; --mar-fill:#a0101a; --mar-soft:#2c1a1e;
    --flam:#FF8070; --flam-fill:#C93A2B; --flam-soft:#3A1A1A;
    --mango:#F7B955; --mango-ink:#F7B955; --mango-soft:#2E2412;
    --palma:#4ACF8A; --palma-fill:#177A4B; --cold:#9db3c4; --sand:#3A4258;
    --noche:#07101a; --noche-2:#0f1b28; --noche-3:#182838; --noche-line:#2a3a4a;
    --lidom:#8fa9d9; --lvbp:#E6A82A; --lmp:#2FB36B; --lbprc:#F0607E;
    --lidom-ink:#8fa9d9; --lvbp-ink:#F2C25A; --lmp-ink:#5FD596; --lbprc-ink:#FF8FA6;
    --lidom-k:#1f3b6e; --lvbp-k:#7E5800; --lmp-k:#0F6E3C; --lbprc-k:#B02647;
    --sh-1:0 1px 2px rgb(0 0 0 / .5); --sh-lift:0 14px 30px -12px rgb(0 0 0 / .8);
    --bg:var(--paper); --bg-2:var(--paper-2); --navy:var(--noche); --navy-2:var(--noche-2); --navy-3:var(--noche-3);
    --blue:var(--mar); --blue-2:#ffb3a8; --blue-soft:var(--mar-soft); --blue-fill:var(--mar-fill); --turq:var(--mar);
    --coral:var(--flam-fill); --coral-ink:var(--flam); --palm:var(--palma); --good:var(--palma); --bad:var(--flam); --hi:var(--mango-ink);
    --sample-a:#3A2C0C; --sample-b:#2E2309; --sample-ink:#FFD98A;
    --shadow:var(--sh-1); --shadow-2:var(--sh-lift);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#080D1B; --paper-2:#0C1224; --card:#0F1629; --card-2:#141C33; --thead:#131B31;
  --line:#202A45; --rule:rgb(240 226 198 / .11); --rule-2:rgb(240 226 198 / .06);
  --ink:#f0e2c6; --ink-2:#B7BFD2; --ink-3:#929BB2;
  --mar:#ff8f80; --mar-fill:#a0101a; --mar-soft:#2c1a1e;
  --flam:#FF8070; --flam-fill:#C93A2B; --flam-soft:#3A1A1A;
  --mango:#F7B955; --mango-ink:#F7B955; --mango-soft:#2E2412;
  --palma:#4ACF8A; --palma-fill:#177A4B; --cold:#9db3c4; --sand:#3A4258;
  --noche:#07101a; --noche-2:#0f1b28; --noche-3:#182838; --noche-line:#2a3a4a;
  --lidom:#8fa9d9; --lvbp:#E6A82A; --lmp:#2FB36B; --lbprc:#F0607E;
  --lidom-ink:#8fa9d9; --lvbp-ink:#F2C25A; --lmp-ink:#5FD596; --lbprc-ink:#FF8FA6;
  --lidom-k:#1f3b6e; --lvbp-k:#7E5800; --lmp-k:#0F6E3C; --lbprc-k:#B02647;
  --sh-1:0 1px 2px rgb(0 0 0 / .5); --sh-lift:0 14px 30px -12px rgb(0 0 0 / .8);
  --bg:var(--paper); --bg-2:var(--paper-2); --navy:var(--noche); --navy-2:var(--noche-2); --navy-3:var(--noche-3);
  --blue:var(--mar); --blue-2:#ffb3a8; --blue-soft:var(--mar-soft); --blue-fill:var(--mar-fill); --turq:var(--mar);
  --coral:var(--flam-fill); --coral-ink:var(--flam); --palm:var(--palma); --good:var(--palma); --bad:var(--flam); --hi:var(--mango-ink);
  --sample-a:#3A2C0C; --sample-b:#2E2309; --sample-ink:#FFD98A;
  --shadow:var(--sh-1); --shadow-2:var(--sh-lift);
}
/* the night data room: same token names, noche values, even in light mode */
.room {
  color-scheme: dark;
  --paper:var(--noche); --card:#13202e; --card-2:#162433; --thead:#162433;
  --line:#2a3a4a; --rule:rgb(240 226 198 / .12); --rule-2:rgb(240 226 198 / .06);
  --ink:#f0e2c6; --ink-2:#d4c3a2; --ink-3:#9AA4BC;
  --mar:#ff8f80; --mar-soft:#2c1a1e; --flam:#FF8070; --flam-soft:#3A1A1A; --mango-ink:#F7B955;
  --palma:#4ACF8A; --cold:#9db3c4; --sand:#3A4258;
  --lidom-ink:#8fa9d9; --lvbp-ink:#F2C25A; --lmp-ink:#5FD596; --lbprc-ink:#FF8FA6;
  --blue:var(--mar); --blue-soft:var(--mar-soft); --coral-ink:var(--flam); --hi:var(--mango-ink); --good:var(--palma); --bad:var(--flam);
  --sh-1:none;
  --l2-card:#13202e; --l2-card-2:#162433; --l2-ink:#f0e2c6; --l2-ink-2:#d4c3a2; --l2-muted:#9AA4BC; --l2-line:#2a3a4a; --l2-line-2:#22313f;
  background: var(--noche) !important; color: var(--ink); border-color: #22313f !important;
}
:root[data-theme="dark"] .room { --noche:#07101a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .room { --noche:#07101a; } }

/* league and team vars */
[data-lg="LIDOM"] { --lg:var(--lidom); --lg-ink:var(--lidom-ink); }
[data-lg="LVBP"]  { --lg:var(--lvbp);  --lg-ink:var(--lvbp-ink); }
[data-lg="LMP"]   { --lg:var(--lmp);   --lg-ink:var(--lmp-ink); }
[data-lg="LBPRC"] { --lg:var(--lbprc); --lg-ink:var(--lbprc-ink); }
[style*="--team"] {
  --team-deep: color-mix(in oklab, var(--team) 38%, #0b1622);
  --team-tile: linear-gradient(in oklab 180deg, color-mix(in oklab, var(--team), white 10%) 25%, color-mix(in oklab, var(--team), black 12%) 75%);
  --team-soft: color-mix(in oklab, var(--team) 11%, transparent);
}

/* ---------- base ---------- */
html { font-variant-numeric: tabular-nums lining-nums; scroll-padding-top: 90px; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--fb); font-optical-sizing: auto; }
a { color: var(--mar); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--mar); outline-offset: 2px; border-radius: 3px; }
.kick { font: 650 11px/1.2 var(--fd); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tag { font: 700 10px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; padding: 4px 6px; border-radius: var(--r-1); background: var(--mango-soft); color: var(--mango-ink); vertical-align: middle; }
.tag.soft { background: var(--rule-2); color: var(--ink-2); }
a.ast, .ast { color: var(--flam); font: 800 14px/1 var(--fb); }
a.ast.tip-on::after { display: block; } /* A12: the note shown on a tap (touch screens) */
/* B3: the time-zone picker where a card said "Times ET" */
.tzpick { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tzpick select { font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule-2); border-radius: 4px; padding: 1px 4px; cursor: pointer; }
html[data-nerd="off"] .nerd-only { display: none !important; }
html[data-nerd="on"] .classic-only { display: none !important; }
.boot { display: grid; place-items: center; gap: 10px; padding: 60px 0; color: var(--ink-3); font-size: 13px; }

/* display type: every v4 display slot gets the v5 widths (font shorthand in theme.css resets stretch) */
.card-head h2, .card-head h3, .page-h h1, .acc-title, .m-name, .m-card h4, .excard .q, .lgcard h3 { font-family: var(--fd); font-stretch: 72%; font-weight: 740; letter-spacing: -.005em; }
.card-head h2, .card-head h3 { font-size: 22px; line-height: 1.05; }
.page-h h1 { font-size: 34px; font-stretch: 70%; font-weight: 800; line-height: 1; }
.hero-t, .slogan .big, .story b, .slogan-caps b { font-family: var(--fd); font-stretch: 68%; font-weight: 800; }
.war, .score, .gc .tr .r, .gl .tm3 b, .lr .n, .table td.rank, .numtile .big, .ls-item b { font-family: var(--fd); font-stretch: 108%; font-weight: 740; }
.side-h { font: 650 11px/1.2 var(--fd); font-stretch: 118%; letter-spacing: .14em; }
.table th, .ls th, .chipbar .lbl, .lr .v small, .st, .badge, .lg, .org, .hero-k, .story .k, .kicker, .box-sec, .lgcard .cty, .wxc.lab { font-family: var(--fd); font-stretch: 115%; }

/* ---------- top bar ---------- */
.topbar { background: color-mix(in oklab, var(--card) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); box-shadow: none; }
.tb-in { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; height: var(--tbh); }
.brand { gap: 0; color: var(--ink); text-decoration: none !important; }
.brand picture, .brand img.wbu-logo { display: block; height: 46px; width: auto; }
.brand .wm-fb { font: 800 19px/1 var(--fd); font-stretch: 112%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.navpanel { display: contents; }
.mainnav { justify-content: flex-start; gap: 0; margin-left: 4px; }
.mainnav a { padding: 0 10px; color: var(--ink); font: 600 14.5px/1 var(--fb); transition: opacity var(--d-2) var(--e-std), box-shadow var(--d-2) var(--e-std), color var(--d-1); box-shadow: inset 0 0 0 0 var(--mar); text-decoration: none !important; }
.mainnav:hover a:not(:hover) { opacity: .62; }
.mainnav a:hover { color: var(--mar); }
.mainnav a.on { color: var(--mar); box-shadow: inset 0 -3px 0 0 var(--mar); }
.mainnav a.on::after { display: none; }
.mainnav a.disc .dot { background: var(--mar-fill); box-shadow: none; }
.tb-set { display: flex; align-items: center; gap: 8px; flex: none; }
.tb-tools { gap: 8px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); transition: transform var(--d-2) var(--e-spring), background var(--d-1); }
.icon-btn:hover { background: var(--card-2); color: var(--ink); transform: rotate(-12deg) scale(1.06); }
.search { width: 220px; }
.search input { height: 38px; border-radius: 999px; background: var(--card-2); }
.search input:focus { border-color: var(--mar); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mar) 18%, transparent); }
.qres { border-radius: var(--r-2); box-shadow: var(--sh-lift); }
.qres button:hover, .qres a:hover, .qres .sel { background: var(--mar-soft); }
.qres .k { font-family: var(--fd); font-stretch: 115%; }
/* Nerd stats switch (role=switch) */
.nerd { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: 650 12.5px/1 var(--fb); cursor: pointer; white-space: nowrap; }
.nerd:hover { border-color: var(--ink-3); }
.nerd-k { width: 30px; height: 18px; border-radius: 999px; background: #8E95A6; position: relative; flex: none; transition: background var(--d-2); }
.nerd-k i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: left var(--d-2) var(--e-spring); }
.nerd[aria-checked="true"] .nerd-k { background: var(--mar-fill); }
.nerd[aria-checked="true"] .nerd-k i { left: 14px; }
.nerd-v { font: 700 11px/1 var(--fd); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); min-width: 2.2em; }
/* springy segmented toggle (EN|ES, motion dial) */
.seg { --n: 2; --i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; gap: 0; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); isolation: isolate; }
.seg::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 999px; background: var(--ink); translate: calc(var(--i) * 100%) 0; transition: translate 380ms var(--e-spring); }
.seg button { border: 0; background: transparent; cursor: pointer; padding: 0 10px; height: 26px; font: 700 11px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-radius: 999px; transition: color var(--d-2); }
.seg button[aria-pressed="true"] { color: var(--card); background: transparent; }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg.dial { --n: 3; }
.dialwrap { position: relative; }
.dialpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--sh-lift); padding: 12px; width: 260px; }
.dialpop[hidden] { display: none; }
.dialpop .kick { margin-bottom: 8px; }
.dialpop p { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.menubtn { display: none; }
.skip { background: var(--mar-fill); border-radius: 6px; }

/* ---------- league strip = score strip (one rail) ---------- */
.lgstrip { background: var(--noche) !important; color: var(--on-noche); border-bottom: 1px solid #000; overflow: hidden; }
.lgstrip::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--costura-on-dark); opacity: .9; z-index: 2; }
.lgstrip > .ls-scene, .lgstrip > .ls-paint { display: none; }
.ls-in { height: auto; min-height: 64px; align-items: stretch; gap: 0; padding: 7px var(--gutter) 10px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.ls-item { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; height: auto; margin-right: 4px; border: 0; border-radius: var(--r-2); color: #fff; text-decoration: none !important; scroll-snap-align: start;
  background: linear-gradient(100deg, color-mix(in oklab, var(--lg) 36%, transparent) 0 50%, transparent 50%), repeating-linear-gradient(180deg, transparent 0 6px, rgb(255 255 255 / .05) 6px 7px); }
.ls-item:first-of-type { padding-left: 10px; }
.ls-item + .ls-item, .ls-tile + .ls-item { margin-left: 10px; }
.ls-item:hover { background: linear-gradient(100deg, color-mix(in oklab, var(--lg) 52%, transparent) 0 50%, rgb(255 255 255 / .04) 50%); }
.ls-item:hover b { color: #fff; }
.ls-item b { font-size: 17px; font-stretch: 105%; letter-spacing: .02em; }
.ls-item small { font: 600 9.5px/1 var(--fd); font-stretch: 120%; letter-spacing: .16em; color: var(--on-noche-2); margin-top: 3px; }
.ls-item .st3 { font: 700 10px/1 var(--fd); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; background: rgb(255 255 255 / .1); color: #fff; }
.ls-item .st3.live { background: rgb(255 255 255 / .12); }
.ls-item .st3.soon { background: rgb(247 185 85 / .16); color: #FFD892; }
.ls-tile { flex: none; width: 142px; padding: 6px 10px; color: var(--on-noche); text-decoration: none !important; position: relative; scroll-snap-align: start;
  border-left: 1px solid; border-image: linear-gradient(transparent 8%, rgb(255 255 255 / .22) 50%, transparent 92%) 1 100%;
  transition: box-shadow 160ms var(--e-std), background 160ms, border-radius 160ms, translate 220ms var(--e-out); }
.ls-tile:hover { border-left-color: transparent; border-radius: 6px; background: rgb(255 255 255 / .06); box-shadow: 0 6px 14px 2px rgb(0 0 0 / .35); translate: 0 -2px; }
.ls-tile .row { display: flex; align-items: center; gap: 6px; height: 19px; font: 650 13px/1 var(--fd); font-stretch: 92%; min-width: 0; }
.ls-tile .row span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ls-tile .row .logo-badge { --ls: 16px; padding: 1px; box-shadow: none; }
.ls-tile .row .r { margin-left: auto; font-weight: 760; font-stretch: 112%; }
.ls-tile .row.lose { color: var(--on-noche-3); }
.ls-tile .row.lose .logo-badge { opacity: .6; }
.ls-tile .row.win .r::after { content: "◂"; font-size: 10px; margin-left: 3px; color: var(--mango); }
.ls-tile .meta { font: 600 9.5px/1 var(--fd); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; color: var(--on-noche-2); margin-top: 4px; display: flex; justify-content: space-between; gap: 6px; }
.ls-slogan { display: none !important; }
.lgstrip .mode-toggle { display: none !important; }

/* ---------- page hero (paintings) ---------- */
.page-hero { padding-top: var(--gap); }
.hero { border-radius: var(--r-3); background: var(--noche); box-shadow: none; }
.hero::before { background: linear-gradient(90deg, rgb(11 22 34 / .94) 0 22%, rgb(11 22 34 / .55) 52%, rgb(11 22 34 / .08) 80%), linear-gradient(0deg, rgb(11 22 34 / .7), transparent 45%); }
.hero.painted::before { background: linear-gradient(90deg, rgb(11 22 34 / .9) 0 20%, rgb(11 22 34 / .45) 50%, rgb(11 22 34 / .05) 78%), linear-gradient(0deg, rgb(11 22 34 / .6), transparent 45%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: var(--persiana-dark); opacity: .55; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); pointer-events: none; z-index: 1; }
.hero > img.photo-bg { animation: kenburns 24s var(--e-std) both; }
@keyframes kenburns { from { scale: 1.08; } to { scale: 1; } }
.hero-body { padding: 40px 40px 36px; z-index: 2; }
.hero-k { display: inline-block; background: var(--mango); color: #2A1A00; padding: 5px 7px 4px; border-radius: 3px; font: 650 11px/1.2 var(--fd); font-stretch: 118%; letter-spacing: .12em; margin-bottom: 12px; }
.hero-t { font-size: clamp(36px, 4.6vw, 60px); line-height: .92; letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 2px 16px rgb(0 0 0 / .35); }
.hero-s { color: #E3E8F3; font-size: 16px; }
.hero.short { --hh: 210px; }
.hero.short .hero-t { font-size: clamp(34px, 4.2vw, 56px); }
.hero-side { z-index: 2; }
.hero-side .slogan-caps, .hero-side .dayseg { background: rgb(11 22 34 / .78); border-radius: 12px; padding: 12px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.slogan-caps { color: #FFE2B8; letter-spacing: .22em; }
.slogan-caps b { font-size: 30px; line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.dayseg button { border-radius: 999px; }

/* ---------- buttons ---------- */
.btn { height: 36px; border-radius: 999px; font: 650 13px/1 var(--fb); transition: transform var(--d-2) var(--e-spring), background var(--d-1), box-shadow var(--d-2); text-decoration: none !important; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-lift); border-color: var(--line); color: var(--ink); }
.btn.primary { background: var(--mar-fill); border-color: var(--mar-fill); color: #fff; }
.btn.primary:hover { background: #096D7A; color: #fff; }
.btn.white { background: #fff; border-color: #fff; color: var(--noche); }
.btn.white:hover { color: var(--noche); }
.btn.ghost { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .35); }
.btn.ghost:hover { color: #fff; background: rgb(255 255 255 / .16); }
.btn .arr { transition: translate var(--d-2) var(--e-out); display: inline-block; }
.btn:hover .arr { translate: 3px 0; }
.vp { border-radius: 999px; }
.clipbtn { background: var(--flam-fill); border-radius: 999px; height: 24px; padding: 0 10px; }

/* ---------- layout + left rail ---------- */
.layout { gap: var(--gap); }
.side { top: calc(var(--tbh) + 10px); border-radius: var(--r-2); box-shadow: var(--sh-1); padding: 0 0 6px; overflow: hidden; }
.side-h { padding: 12px 14px 10px; margin: 0 0 6px; color: var(--ink-2); background: var(--persiana-light), var(--card-2); border-bottom: 1px solid var(--line); }
.side a { color: var(--ink); font: 550 14px/1.2 var(--fb); padding: 9px 14px; box-shadow: inset 0 0 0 0 var(--mar); transition: box-shadow var(--d-2) var(--e-std), background var(--d-1), padding var(--d-2) var(--e-out); text-decoration: none !important; }
.side a:hover { background: var(--card-2); padding-left: 18px; color: var(--ink); }
.side a.on { box-shadow: inset 3px 0 0 0 var(--mar); background: var(--mar-soft); color: var(--mar); font-weight: 650; }
.side a.on::before { display: none; }
.side-note { margin: 8px 10px 4px; padding: 10px; border-radius: 6px; background: var(--card-2); font: 400 12px/1.5 var(--fb); color: var(--ink-2); }
.side-note b { color: var(--ink); }

/* ---------- cards ---------- */
.card { border-radius: var(--r-2); box-shadow: var(--sh-1); padding: 14px 16px 12px; }
.card-head { position: relative; align-items: baseline; padding-bottom: 10px; margin-bottom: 10px; min-height: 0; }
.card-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--costura); opacity: .9; }
.card-head h2 .ct { font: 600 13px var(--fb); color: var(--ink-3); }
.va { font: 650 12.5px/1 var(--fb); color: var(--mar); }
.va::after { content: " →"; display: inline-block; transition: translate var(--d-2) var(--e-out); }
.va:hover::after { translate: 3px 0; }
.card-foot, .foot { font: 400 12px/1.5 var(--fb); color: var(--ink-3); }
.card-foot a, .foot a { color: var(--mar); }
.meta { font: 400 12.5px/1.5 var(--fb); color: var(--ink-3); }
.page-h { margin: 4px 0 var(--gap); }
.page-h .meta { font-size: 13px; }
.select { border-radius: 999px; background-color: var(--card-2); border-color: var(--line); font: 600 12px var(--fb); color: var(--ink); }
.empty { color: var(--ink-3); font: 400 13px/1.5 var(--fb); }
.stub { border-color: var(--line); color: var(--ink-2); }
.sect { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.sect h3 { font: 700 13px/1 var(--fd); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; margin: 0; }
.sect::after { content: ""; flex: 1; height: 6px; background: var(--costura); opacity: .7; }

/* pill tabs: v5 ptabs (white active with mar underline) */
.pill-tabs { background: var(--card-2); border-radius: 6px; padding: 3px; gap: 3px; }
.pill-tabs button { height: 28px; border-radius: 4px; font: 650 12.5px/1 var(--fb); color: var(--ink-2); transition: box-shadow var(--d-2) var(--e-std), background var(--d-1), color var(--d-1); }
.pill-tabs button:hover { color: var(--ink); }
.pill-tabs button.on { background: var(--card); color: var(--ink); box-shadow: inset 0 -2px 0 0 var(--mar), var(--sh-1); }
.pill-tabs.loose button { border-radius: 999px; background: var(--card); }
.pill-tabs.loose button.on { background: var(--ink); color: var(--card); border-color: var(--ink); box-shadow: none; }
.subtabs a { border-radius: 999px; font: 600 12.5px/1 var(--fb); color: var(--ink); text-decoration: none !important; }
.subtabs a:hover { color: var(--mar); }
.subtabs a.on, :root[data-theme="dark"] .subtabs a.on { background: var(--ink); border-color: var(--ink); color: var(--card); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .subtabs a.on { background: var(--ink); border-color: var(--ink); color: var(--card); } }

/* chips */
.chip { border-radius: 999px; font: 600 12.5px/1 var(--fb); color: var(--ink); transition: background var(--d-1), border-color var(--d-1), transform var(--d-2) var(--e-spring); }
.chip:hover { transform: translateY(-1px); border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.chip .sw { background: var(--lc, var(--ink-3)); }
.chip.on .sw { background: var(--card); box-shadow: inset 0 0 0 2px var(--lc); }
.chip .ct { font: 600 11px/1 var(--fm); opacity: .85; }
.chipbar .lbl { font-weight: 650; font-size: 11px; letter-spacing: .12em; }

/* badges, league codes, org chips */
.badge { font: 700 10px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; border-radius: 3px; height: 20px; }
.badge.final, :root[data-theme="dark"] .badge.final { background: var(--noche); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.final { background: #2a3a4a; } }
:root[data-theme="dark"] .badge.final { background: #2a3a4a; }
.badge.sched { background: var(--mar-soft); color: var(--mar); }
.badge.live { background: var(--flam-fill); }
.lg { font: 700 10px/1 var(--fd); font-stretch: 115%; letter-spacing: .08em; height: 18px; border-radius: 3px; }
.org { font: 700 10px/1 var(--fd); font-stretch: 112%; letter-spacing: .05em; border-radius: 3px; }
.tg { border-radius: 3px; font: 700 10px/1 var(--fd); font-stretch: 112%; letter-spacing: .05em; }
.st { font-weight: 700; font-size: 10px; letter-spacing: .1em; color: var(--ink-3); }
.kicker { color: var(--flam); font-size: 11px; letter-spacing: .14em; }
.pbtn { font: 600 13.5px/1.25 var(--fb); color: var(--ink); }
.pbtn:hover, .pbtn:focus-visible { color: var(--mar); border-bottom-color: var(--mar); }
/* player names are links (#player/<id>, 2026-10-31): the link keeps the name-button look (a plain a {} rule must not recolour it) */
a.pbtn { color: var(--ink); text-decoration: none; }
a.pbtn:hover, a.pbtn:focus-visible { text-decoration: none; }
a.l2-pname { display: inline-block; color: var(--l2-ink); text-decoration: none; }
a.l2-pname:hover, a.l2-pname:focus-visible { color: var(--l2-blue); text-decoration: underline; }
[data-tip] { text-decoration-color: color-mix(in srgb, var(--mar) 60%, transparent); }
[data-tip]::after { background: var(--noche); color: #f6eedd; border: 1px solid var(--noche-line); box-shadow: var(--sh-lift); font: 500 12px/1.45 var(--fb); }
.logo-badge { background: #fff; box-shadow: 0 0 0 1px rgb(15 35 64 / .10); }
:root[data-theme="dark"] .logo-badge { background: #F3F1EC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-badge { background: #F3F1EC; } }
.logo-badge.bare { background: transparent; box-shadow: none; }
.lglogo { border-radius: var(--r-2); }

/* tables */
.table th { font: 700 10.5px/1.15 var(--fd); font-stretch: 115%; letter-spacing: .1em; color: var(--ink-3); background: var(--thead); border-bottom: 0; padding: 8px 7px; }
.table td { padding: 7px 7px; border-bottom: 1px solid var(--rule-2); }
.table tbody tr:hover td { background: color-mix(in oklab, var(--mar) 6%, transparent); }
.table tr.hl td { background: color-mix(in oklab, var(--mango) 10%, transparent); }
.table td.rank { color: var(--ink-3); font-size: 16px; overflow: visible; text-overflow: clip; }
.lgcard .teams a { display: inline-flex; align-items: center; gap: 5px; background: rgb(255 255 255 / .1); border-radius: var(--r-1); padding: 3px 8px 3px 3px; font: 700 11px var(--fb); color: #fff; text-decoration: none; }
.lgcard .teams a:hover { background: rgb(255 255 255 / .2); }
.lgcard .teams .logo-badge { --ls: 20px; }
.table th.sorted, .table th.sort:hover { color: var(--ink); }
.war { font-size: 19px; }
.war.neg { color: var(--flam); }
.war .u { font: 650 9.5px var(--fd); font-stretch: 118%; letter-spacing: .12em; color: var(--ink-3); }
.sub { color: var(--ink-3); font: 400 12px/1.4 var(--fb); }
.na { color: var(--ink-3); font-style: normal; font-size: 11.5px; }
.ls { font: 500 12px/1 var(--fm); }
.ls th { font: 650 10px/1 var(--fd); font-stretch: 112%; color: var(--ink-3); }
.ls tr.w td { font-weight: 700; color: var(--ink); }
.ls .rhe { background: var(--card-2); font-weight: 700; }
.formula { border-left-color: var(--mar); font: 500 12.5px/1.7 var(--fm); background: var(--card-2); }
.notrack { font-style: normal; }

/* compact list rows (leaders, best, names) */
.lr { grid-template-columns: 22px 30px minmax(0,1fr) auto; padding: 8px 0; border-bottom: 1px solid var(--rule-2); min-height: 48px; }
.lr .n { font-size: 17px; color: var(--ink-3); }
.lr:first-child .n { color: var(--flam); }
.lr .logo-badge { --ls: 30px; }
.lr .who .pbtn { font-weight: 650; }
.lr .v .war { font-size: 20px; }
.lr .v small { font: 650 9.5px/1 var(--fd); font-stretch: 118%; letter-spacing: .12em; color: var(--ink-3); }
.lr .v small.vd { display: block; margin-top: 3px; font: 600 11.5px/1.2 var(--fb); letter-spacing: 0; text-transform: none; color: var(--ink-2); white-space: nowrap; } /* B4 */
.lr.nr { grid-template-columns: 30px minmax(0,1fr) auto; }
/* A9 (fan review 2026-10-23): the line under a name wraps instead of ending in "…" ("Naranjeros vs Ja…", the
   Names-you-know card cut mid-sentence); same for the phone-only line under a name in the rehab table */
.lr .who .sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
td.nw > .sub.only-sm.ell { white-space: normal; overflow: visible; text-overflow: clip; }

/* game list rows */
.gl { min-height: 48px; text-decoration: none !important; color: inherit; }
.gl .tt { font: 760 15px/1.1 var(--fd); font-stretch: 108%; color: var(--ink); }
.gl .tt small { font: 700 10.5px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; color: var(--ink-3); margin-top: 3px; }
.gl .tm3 { font: 650 14px/1.15 var(--fd); font-stretch: 92%; }
.gl .tm3.w span { font-weight: 760; }
/* a game row with linked club names (2026-10-31): the whole row opens the game through an overlay link (.gl-a), each name
   sits above it and opens the club's page (the strip's .lx-g pattern; never a link inside a link) */
.gl.gl-ov { position: relative; }
.gl.gl-ov > .gl-a { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.gl.gl-ov > .gl-a:focus-visible { outline: 2px solid var(--mar); outline-offset: 2px; }
.gl.gl-ov .tmlink { position: relative; z-index: 1; }
.gl.gl-ov .tm3 .tmn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gl.gl-ov .tm3.w .tmn { font-weight: 760; }
.gl:hover .chev { color: var(--mar); }

/* game cards (container query) */
.gcards { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--gap); }
.gc { border-radius: var(--r-2); box-shadow: var(--sh-1); overflow: hidden; transition: translate 260ms var(--e-out), box-shadow 260ms var(--e-std); }
.gc:hover { translate: 0 -3px; box-shadow: var(--sh-lift); }
.gc .gh { padding: 7px 12px; background: linear-gradient(90deg, color-mix(in oklab, var(--lg, var(--ink-3)) 16%, transparent), transparent 70%); border-bottom: 1px solid var(--rule-2); justify-content: space-between; }
.gc .gh .badge.final { background: var(--noche); color: #fff; }
.gc .gh .lgc { font: 700 10.5px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; }
.gc .tr { grid-template-columns: 30px minmax(0,1fr) auto; padding: 6px 12px; }
.gc .tr b { font: 700 15.5px/1.05 var(--fd); font-stretch: 92%; }
.gc .tr small { font: 500 11.5px/1.2 var(--fm); color: var(--ink-3); }
.gc .tr .r { min-width: 36px; height: 32px; display: grid; place-items: center; border-radius: var(--r-1); font-size: 24px; font-stretch: 112%; }
.gc .tr.w .r { background: var(--noche); color: #fff; }
:root[data-theme="dark"] .gc .tr.w .r { background: #fff; color: var(--noche); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gc .tr.w .r { background: #fff; color: var(--noche); } }
.gc .tr.l b, .gc .tr.l .r { color: var(--ink-3); }
.gc .tr.l .logo-badge { opacity: .6; }
.gc .gd { margin: 4px 12px 0; padding: 6px 0 8px; font: 400 12px/1.45 var(--fb); color: var(--ink-2); }
.gc .gf { border-top: 1px solid var(--rule-2); }
.gc .gf > * { color: var(--mar); font: 650 12px/1 var(--fb); }
.gc .gf > *:hover { background: var(--mar-soft); }
.gc .gf > .off { color: var(--ink-3); font-weight: 500; }

/* weather chips */
.wxc { font: 500 11px/1 var(--fm); border-radius: 4px; border-color: var(--rule-2); color: var(--ink-2); }
.wxc.lab { font: 700 9.5px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; }
.wxc.thin { background: var(--flam-soft); color: var(--flam); border-color: transparent; }
.wxc.rain { background: color-mix(in srgb, var(--cold) 14%, transparent); color: var(--cold); border-color: transparent; }

/* numbers of the night */
.nums { gap: 8px; }
.numtile { background: var(--card); border-radius: var(--r-2); padding: 12px; transition: translate 260ms var(--e-out), box-shadow 260ms; }
.numtile:hover { translate: 0 -2px; box-shadow: var(--sh-lift); }
/* Numbers of the Night detail (operator 2026-10-23): unit beside the number, then up to two quiet detail lines */
.numtile .big .u { font: 700 .5em/1 var(--fd); font-stretch: 108%; letter-spacing: .02em; margin-left: .18em; color: var(--ink-2); }
.numtile .det { font: 500 11px/1.35 var(--fb); color: var(--ink-3, var(--ink-2)); margin-top: 4px; opacity: .85; }
.numtile .lbl + .det { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .nums .numtile:last-child:nth-child(odd) { grid-column: span 2; } }
.numtile .big { font: 700 30px/1 var(--fm); letter-spacing: -.03em; color: var(--ink); }
.numtile .lbl { font: 400 12px/1.35 var(--fb); color: var(--ink-3); }

/* accordions */
details.acc { border-radius: var(--r-2); box-shadow: var(--sh-1); }
details.acc > summary::after { border-color: var(--mar); }
.acc-title { font-size: 21px; }
.prose { font: 400 15px/1.6 var(--fb); }
.prose p { margin: 0 0 10px; }
.report-intro p { margin: 0 0 6px; font: 500 17px/1.45 var(--fb); color: var(--ink); max-width: 68ch; }
.report-intro { margin: 2px 0 14px; }
/* report: one block per game under a league heading (operator 2026-10-23) */
.prose .rlg { margin: 18px 0 0; }
.prose .rlg-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 11px/1 var(--fd); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.prose .rg { padding: 10px 0; border-top: 1px solid var(--line); max-width: 72ch; }
.prose .rg-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.prose .rg-h b { font-weight: 700; color: var(--ink); }
.prose .rg-h .wbtn { flex: none; }
.prose .rg p { margin: 0; }
.row2 { font-size: 13.5px; }

/* story tiles + slogan (Today hero row) */
.hrow { grid-template-columns: minmax(0,1.86fr) minmax(0,1fr) minmax(0,.8fr); height: 380px; }
.story { grid-template-columns: 92px minmax(0,1fr); background: var(--noche-2); border-radius: var(--r-2); box-shadow: none; transition: translate 260ms var(--e-out), box-shadow 260ms; text-decoration: none !important; }
.story:hover { transform: none; translate: 0 -2px; box-shadow: var(--sh-lift); }
.story::after { display: none; }
.story .sb { background: var(--team-tile, #fff); }
.story .sb::after { display: none; }
.story .sb .logo-badge { --ls: 58px; background: rgb(255 255 255 / .94); border-radius: 50%; padding: 6px; }
.story .txt { background: var(--persiana-dark), var(--noche-2); padding: 12px 14px; }
.story .k { color: var(--mango); font: 650 11px/1.2 var(--fd); font-stretch: 118%; letter-spacing: .12em; margin-bottom: 5px; }
.story b { font-size: 19px; font-stretch: 78%; font-weight: 740; line-height: 1.05; }
.story .d { color: var(--on-noche-2); font-size: 12.5px; }
.slogan { border-radius: var(--r-2); background: var(--persiana-dark), radial-gradient(120% 90% at 50% 110%, #E04A3A55, transparent 60%), var(--noche) !important; color: #fff; box-shadow: none; gap: 14px; justify-content: center; }
.slogan > svg.scene { display: none; }
.slogan::before { display: none; }
.slogan .big { font-size: 44px; line-height: .9; letter-spacing: 0; }
.slogan .big::after { width: 70%; height: 6px; background: var(--costura-on-dark); border-radius: 0; margin: 14px auto 0; }
.slogan .big em { font-style: normal; color: var(--mango); }
.slogan .caps { font: 650 10.5px/1.6 var(--fd); font-stretch: 120%; letter-spacing: .2em; color: var(--on-noche-2); margin: 0; }
.slogan .x { background: rgb(255 255 255 / .16); }

/* stories rotator (v5 #15) */
.rot { position: relative; border-radius: var(--r-3); overflow: hidden; background: var(--noche); color: #fff; min-height: 380px; height: 100%; isolation: isolate; }
.rot > img.photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: kenburns 24s var(--e-std) both; }
.rot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(11 22 34 / .96) 0 34%, rgb(11 22 34 / .6) 64%, rgb(11 22 34 / .2)), linear-gradient(90deg, rgb(11 22 34 / .8), transparent 72%); }
.rot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: var(--persiana-dark); opacity: .55; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); pointer-events: none; }
.rot .segs { position: absolute; top: 14px; left: 18px; right: 18px; display: flex; gap: 5px; z-index: 3; }
.rot .segs button { flex: 1; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgb(255 255 255 / .3); cursor: pointer; position: relative; overflow: hidden; }
.rot .segs button::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.rot .segs button::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; scale: 0 1; }
.rot .segs button.done::after { scale: 1 1; }
.rot .segs button.now::after { animation: segfill 7s linear forwards; }
.rot:hover .segs button.now::after, .rot:focus-within .segs button.now::after { animation-play-state: paused; }
@keyframes segfill { to { scale: 1 1; } }
.rot .slide { position: absolute; inset: auto 0 0 0; padding: 0 32px 30px; opacity: 0; translate: 0 var(--m-dist); transition: opacity 500ms var(--e-std), translate 700ms var(--e-out); pointer-events: none; z-index: 2; }
.rot .slide.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.rot .slide .hero-k { margin-bottom: 10px; }
.rot .slide h2 { font: 800 clamp(32px, 3.6vw, 52px)/.94 var(--fd); font-stretch: 68%; max-width: 760px; text-wrap: balance; margin: 0; }
.rot .slide p { margin: 10px 0 0; color: #E3E8F3; max-width: 640px; font-size: 15.5px; line-height: 1.45; }
.rot .slide .hero-acts { margin-top: 16px; }

/* leaders ticker (v5 #17) */
.ticker { position: relative; overflow: hidden; border-radius: var(--r-2); background: var(--noche); color: var(--on-noche); display: flex; align-items: center; margin: var(--gap) 0; -webkit-mask-image: linear-gradient(90deg, #000, #000 96%, transparent); mask-image: linear-gradient(90deg, #000, #000 96%, transparent); }
.ticker .lbl { flex: none; position: relative; z-index: 2; background: var(--flam-fill); color: #fff; font: 760 12px/1 var(--fd); font-stretch: 118%; letter-spacing: .14em; padding: 12px 14px; text-transform: uppercase; }
.ticker .trk { display: flex; width: max-content; animation: marq var(--d-amb) linear infinite; }
.ticker:hover .trk, .ticker:focus-within .trk { animation-play-state: paused; }
.ticker .grp { display: flex; flex: none; }
.ticker .it { display: flex; align-items: center; gap: 8px; padding: 10px 18px; font: 500 13px/1 var(--fm); white-space: nowrap; border-left: 1px solid rgb(255 255 255 / .12); color: var(--on-noche); }
.ticker .it .logo-badge { --ls: 18px; padding: 1px; box-shadow: none; }
.ticker .it .k { font: 700 10.5px/1 var(--fd); font-stretch: 118%; letter-spacing: .12em; color: var(--mango); }
.ticker .it b { font-weight: 700; color: #fff; }
.ticker .it .pbtn { color: var(--on-noche); font: 500 13px/1 var(--fm); }
.ticker .it .pbtn:hover { color: #fff; border-bottom-color: #fff; }
@keyframes marq { to { translate: -50% 0; } }

/* ---------- named slots (Lanes B–F render into these) ---------- */
[data-slot]:empty { display: none; }
.slot-row { margin-bottom: var(--gap); }

/* ---------- team page (v5 #9 flood hero, #8 ordinals, #13 form chips) ---------- */
.flood { position: relative; overflow: hidden; border-radius: var(--r-3); color: #fff; background: var(--team-deep, var(--noche)); isolation: isolate; min-height: 210px; display: flex; align-items: center; }
.flood::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at -10% -30%, color-mix(in oklab, var(--team) 70%, transparent), transparent 60%), var(--persiana-dark); opacity: .9; }
.flood .ghost { position: absolute; right: -60px; top: 50%; translate: 0 -50%; width: 440px; height: 440px; object-fit: contain; opacity: .1; z-index: -1; mix-blend-mode: luminosity; filter: grayscale(1) brightness(1.8); animation: drift 30s var(--e-std) infinite alternate; pointer-events: none; }
@keyframes drift { to { rotate: -6deg; scale: 1.06; } }
.flood .in { display: flex; align-items: center; gap: 22px; padding: 26px 30px; width: 100%; flex-wrap: wrap; }
.flood .in > .logo-badge { --ls: 96px; background: rgb(255 255 255 / .95); border-radius: 18px; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .6); padding: 10px; }
.flood .kick { color: #FFD58A; }
.flood h1 { font: 800 clamp(32px, 4.4vw, 52px)/.95 var(--fd); font-stretch: 70%; text-transform: uppercase; margin: 6px 0 0; }
.flood .meta { margin-top: 8px; font-size: 14px; color: rgb(255 255 255 / .92); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flood .meta .num { font: 760 20px/1 var(--fd); font-stretch: 108%; }
.ords { display: flex; margin-left: auto; }
.ord { padding: 4px 16px; text-align: center; border-left: 1px solid rgb(255 255 255 / .22); }
.ord:first-child { border-left: 0; }
.ord .k { font: 700 10.5px/1 var(--fd); font-stretch: 118%; letter-spacing: .14em; color: #fff; text-transform: uppercase; }
.ord .r { font: 800 30px/1 var(--fd); font-stretch: 78%; margin-top: 4px; }
.ord .r sup { font-size: 13px; font-stretch: 100%; vertical-align: top; margin-left: 1px; letter-spacing: .04em; }
.ord .x { font: 600 12.5px/1 var(--fm); color: #fff; margin-top: 4px; }
.form { display: inline-flex; gap: 3px; }
.form b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; font: 700 10px/1 var(--fd); font-stretch: 110%; }
.form b.W { background: var(--palma-fill); color: #fff; }
.form b.L { background: transparent; color: var(--flam); box-shadow: inset 0 0 0 1.5px var(--flam); }
.form b.n { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.flood .form b.L { background: #fff; color: #A82A1D; box-shadow: none; }
.flood .form b.W { background: #fff; color: #135E3A; }
.flood .form b.n { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
.res { display: grid; grid-template-columns: 60px minmax(0,1fr) auto 22px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule-2); }
.res:first-child { border-top: 0; }
.res .stt { font: 700 10.5px/1.25 var(--fd); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.res .res-tm { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 15px/1 var(--fd); font-stretch: 92%; }
.res .res-tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box2 { display: grid; grid-template-columns: 34px 34px; gap: 2px; background: var(--line); border-radius: var(--r-1); overflow: hidden; }
.box2 b { display: grid; place-items: center; height: 30px; background: var(--card-2); font: 760 17px/1 var(--fd); font-stretch: 112%; color: var(--ink-3); }
.box2 b.w { background: var(--noche); color: #fff; }
.tpark { border-radius: var(--r-2); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.tpark .ph { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--noche); }
.tpark .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tpark .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(11 22 34 / .9)); }
.tpark .ph .cap { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; color: #fff; }
.tpark .ph .cap b { font: 760 19px/1.05 var(--fd); font-stretch: 78%; display: block; }
.tpark .ph .cap span { font-size: 12px; color: #DDE3EE; }
.tpark .bd { padding: 10px 12px; font-size: 12px; color: var(--ink-3); }
.tpark .ph.none { display: grid; place-items: center; background: var(--persiana-dark), var(--noche); }
.tpark .ph.none::after { display: none; }
.tpark .ph.none span { color: var(--on-noche-2); font: 650 11px/1.3 var(--fd); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; padding: 0 16px; text-align: center; }
.tmlink { color: inherit; text-decoration: none; }
.tmlink:hover { color: var(--mar); text-decoration: underline; text-underline-offset: 3px; }
a.orgcell { color: var(--ink); text-decoration: none !important; transition: border-color var(--d-1), translate var(--d-2) var(--e-out); }
a.orgcell:hover { border-color: var(--mar); translate: 0 -1px; }
a.orgcell:hover b { color: var(--mar); }

/* ---------- league cards ---------- */
.lgcard { border-radius: var(--r-2); background: var(--persiana-dark), linear-gradient(100deg, color-mix(in oklab, var(--lc) 52%, #0b1622) 0 50%, var(--noche) 50% 100%) !important; background-color: var(--noche) !important; box-shadow: var(--sh-1); transition: translate 260ms var(--e-out), box-shadow 260ms; }
.lgcard:hover { translate: 0 -3px; box-shadow: var(--sh-lift); }
.lgcard::before { display: none; }
.lgcard.painted { background: linear-gradient(90deg, rgb(11 22 34 / .92), rgb(11 22 34 / .62)), var(--paint) center/cover !important; }
.lgcard h3 { font-size: 34px; font-stretch: 85%; font-weight: 800; }
.lgcard .cty { color: #d8c7a6; }
.lgcard p { color: #f0e2c6; }
.excard { border-radius: var(--r-2); box-shadow: var(--sh-1); }
.excard .q { color: var(--ink); font-size: 22px; }
.park { border-radius: var(--r-2); background: var(--card); box-shadow: var(--sh-1); }
.flights span { background: var(--flam-soft); color: var(--flam); border-radius: 999px; font: 650 10.5px var(--fb); }
.tl .ev .d { color: var(--mar); font-family: var(--fd); font-stretch: 115%; }

/* ---------- modal + media viewer ---------- */
.modal-bg { background: rgb(11 22 34 / .62); }
.modal { border-radius: var(--r-3); background: var(--card); box-shadow: var(--shadow-pop); }
.m-head.scene-wrap { background: var(--noche); }
.m-x { border-radius: 50%; }
.modal.media { width: min(960px, 100%); background: #000; color: #fff; overflow: hidden; display: flex; flex-direction: column; }
.modal.media.portrait { width: min(420px, 100%); }
.mv-stage { position: relative; aspect-ratio: 16/9; background: #000; }
.modal.media.portrait .mv-stage { aspect-ratio: 9/16; max-height: calc(100vh - 170px); margin: 0 auto; width: 100%; }
.mv-stage iframe, .mv-stage .mv-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mv-stage .mv-poster { object-fit: cover; opacity: .55; }
.mv-out { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; font: 500 14px/1.5 var(--fb); }
.mv-bar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--noche); border-top: 1px solid #22313f; }
.mv-bar .mv-cap { min-width: 0; }
.mv-bar .mv-cap b { display: block; font: 700 14px/1.3 var(--fb); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-bar .mv-cap span { display: block; font: 400 12px/1.4 var(--fb); color: var(--on-noche-2); }
.mv-bar .mv-cap a { color: #f2c38a; }
.mv-nav { display: flex; gap: 6px; }
.mv-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .08); color: #fff; font: 700 18px/1 var(--fb); cursor: pointer; }
.mv-nav button:disabled { opacity: .35; cursor: default; }
.mv-count { font: 600 11px/1 var(--fm); color: var(--on-noche-2); white-space: nowrap; }
.modal.media .m-x { top: 10px; right: 10px; background: rgb(11 22 34 / .7); color: #fff; z-index: 6; }

/* ---------- clips (thumbnails, tap to open the viewer) ---------- */
.clip { border-radius: var(--r-2); }
.clip-media { padding: 0; background: var(--noche); }
.clip-media .cthumb { all: unset; cursor: pointer; position: absolute; inset: 0; display: block; }
.clip-media .cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1.2s var(--e-out); }
.clip-media .cthumb:hover img { scale: 1.05; }
.clip-media .cthumb::after { content: "▶"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgb(11 22 34 / .78); color: #fff; font-size: 19px; box-shadow: 0 0 0 3px rgb(255 255 255 / .85); transition: scale var(--d-2) var(--e-spring); }
.clip-media .cthumb:hover::after { scale: 1.1; }
.clip-media .cthumb:focus-visible { outline: 3px solid var(--mar); outline-offset: -3px; }
.clip-media .ctxt { position: relative; z-index: 1; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.thumb { overflow: hidden; position: relative; padding: 0; border: 0; cursor: pointer; background: var(--noche); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.thumb::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; text-shadow: 0 1px 4px #000; }
.cliprow { display: grid; grid-template-columns: 72px minmax(0,1fr) 14px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-2); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; cursor: pointer; font: inherit; }
.cliprow:last-child { border-bottom: 0; }
.cliprow b { font: 600 13px/1.3 var(--fb); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.cliprow .sub { display: block; }
.cliprow .chev { color: var(--ink-3); }
.cliprow:hover b { color: var(--mar); }

/* ---------- moves (lazy transactions.json) ---------- */
.moves-more { margin-top: 8px; }

/* ---------- footer ---------- */
.site-foot { border-top: 0; font: 400 12px/1.7 var(--fb); color: var(--ink-3); padding: 0 var(--gutter) 30px; }
.site-foot::before { content: ""; display: block; height: 6px; background: var(--costura); margin: 0 0 12px; }
.site-foot b { color: var(--ink-2); }
.site-foot a { color: var(--mar); }

/* ---------- L2 (stats.css) re-pointed to the v5 tokens ---------- */
.l2 {
  --l2-bg: var(--paper); --l2-card: var(--card); --l2-card-2: var(--card-2); --l2-thead: var(--thead);
  --l2-ink: var(--ink); --l2-ink-2: var(--ink-2); --l2-muted: var(--ink-3); --l2-line: var(--line); --l2-line-2: var(--rule-2);
  --l2-blue: var(--mar); --l2-blue-soft: var(--mar-soft); --l2-navy: var(--noche); --l2-coral: var(--flam); --l2-mango: var(--mango); --l2-palm: var(--palma); --l2-lagoon: var(--mar);
  --l2-r: var(--r-2); --l2-shadow: var(--sh-1);
  --l2-fd: var(--fd); --l2-fdw: 740; --l2-fb: var(--fb); --l2-fm: var(--fm);
  --l2-good-ink: var(--palma); --l2-bad-ink: var(--flam); --l2-pill-on: var(--ink); --l2-seg-on: var(--ink); --l2-rank-ink: var(--mango-ink); --l2-tile-hero: var(--noche);
  --l2-lg-LIDOM: var(--lidom-k); --l2-lg-LVBP: var(--lvbp-k); --l2-lg-LMP: var(--lmp-k); --l2-lg-LBPRC: var(--lbprc-k);
  --l2-lgi-LIDOM: #fff; --l2-lgi-LVBP: #fff; --l2-lgi-LMP: #fff; --l2-lgi-LBPRC: #fff;
  --l2-p1: color-mix(in oklab, var(--cold) 30%, var(--card)); --l2-p2: color-mix(in oklab, var(--cold) 13%, var(--card)); --l2-p4: color-mix(in oklab, var(--flam-fill) 13%, var(--card)); --l2-p5: color-mix(in oklab, var(--flam-fill) 28%, var(--card));
  --l2-p1-ink: var(--ink); --l2-p2-ink: var(--ink); --l2-p4-ink: var(--ink); --l2-p5-ink: var(--ink);
  font-size: 14px;
}
:root[data-theme="dark"] .l2 {
  --l2-bg: var(--paper); --l2-card: var(--card); --l2-card-2: var(--card-2); --l2-ink: var(--ink); --l2-ink-2: var(--ink-2); --l2-muted: var(--ink-3);
  --l2-line: var(--line); --l2-line-2: var(--rule-2); --l2-blue: var(--mar); --l2-blue-soft: var(--mar-soft);
  --l2-p1: color-mix(in oklab, var(--cold) 34%, var(--card)); --l2-p2: color-mix(in oklab, var(--cold) 16%, var(--card)); --l2-p4: color-mix(in oklab, var(--flam-fill) 18%, var(--card)); --l2-p5: color-mix(in oklab, var(--flam-fill) 36%, var(--card));
  --l2-p1-ink: var(--ink); --l2-p2-ink: var(--ink); --l2-p4-ink: var(--ink); --l2-p5-ink: var(--ink);
  --l2-good-ink: var(--palma); --l2-bad-ink: var(--flam); --l2-pill-on: var(--ink); --l2-seg-on: var(--ink); --l2-rank-ink: var(--mango-ink); --l2-tile-hero: var(--noche-3);
  --l2-lg-LIDOM: var(--lidom-k); --l2-lg-LVBP: var(--lvbp-k); --l2-lg-LMP: var(--lmp-k); --l2-lg-LBPRC: var(--lbprc-k);
  --l2-lgi-LIDOM: #fff; --l2-lgi-LVBP: #fff; --l2-lgi-LMP: #fff; --l2-lgi-LBPRC: #fff;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .l2 {
  --l2-bg: var(--paper); --l2-card: var(--card); --l2-card-2: var(--card-2); --l2-ink: var(--ink); --l2-ink-2: var(--ink-2); --l2-muted: var(--ink-3);
  --l2-line: var(--line); --l2-line-2: var(--rule-2); --l2-blue: var(--mar); --l2-blue-soft: var(--mar-soft);
  --l2-p1: color-mix(in oklab, var(--cold) 34%, var(--card)); --l2-p2: color-mix(in oklab, var(--cold) 16%, var(--card)); --l2-p4: color-mix(in oklab, var(--flam-fill) 18%, var(--card)); --l2-p5: color-mix(in oklab, var(--flam-fill) 36%, var(--card));
  --l2-p1-ink: var(--ink); --l2-p2-ink: var(--ink); --l2-p4-ink: var(--ink); --l2-p5-ink: var(--ink);
  --l2-good-ink: var(--palma); --l2-bad-ink: var(--flam); --l2-pill-on: var(--ink); --l2-seg-on: var(--ink); --l2-rank-ink: var(--mango-ink); --l2-tile-hero: var(--noche-3);
  --l2-lg-LIDOM: var(--lidom-k); --l2-lg-LVBP: var(--lvbp-k); --l2-lg-LMP: var(--lmp-k); --l2-lg-LBPRC: var(--lbprc-k);
  --l2-lgi-LIDOM: #fff; --l2-lgi-LVBP: #fff; --l2-lgi-LMP: #fff; --l2-lgi-LBPRC: #fff;
} }
.l2-card { border-radius: var(--r-2) !important; box-shadow: var(--sh-1) !important; }
.l2-card-h { position: relative; padding-bottom: 10px; margin-bottom: 10px; }
.l2-card-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--costura); opacity: .9; }
.l2-card-h h2, .l2-card-h h3, .l2-ph h1, .l2-head h1, .l2-banner h1 { font-family: var(--fd) !important; font-stretch: 72%; font-weight: 740 !important; letter-spacing: -.005em; }
.l2-section-t { font-family: var(--fd) !important; font-stretch: 118%; }
.l2-t th, .l2-t th .l2-sortbtn .ab { font-family: var(--fd); font-stretch: 115%; letter-spacing: .1em; }
.l2-t td { font-variant-numeric: tabular-nums; }
body .l2 .l2-t th.sorted { box-shadow: inset 0 3px 0 0 var(--mar); background: color-mix(in oklab, var(--mar) 12%, var(--thead)); color: var(--ink); }
.l2-pill { border-radius: 999px !important; }
body .l2 .l2-pill.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.l2-btn { border-radius: 999px !important; }
.l2-lead li .rk, .l2-mini .rk, .l2-board td.bigrk, .l2-tile .v, .l2-ph .warbig .v, .l2-lead li .v, .l2-mini .v { font-family: var(--fd); font-stretch: 108%; }
.l2-tile .v { font-family: var(--fm) !important; font-weight: 700 !important; letter-spacing: -.03em; }
.l2-tile .k, .l2-strip .k, .l2-stamp, .l2-meta, .l2-tag, .l2-lg, .l2-org { font-family: var(--fd) !important; font-stretch: 115%; }
.l2-ph { background: var(--persiana-dark), radial-gradient(120% 140% at -10% -30%, color-mix(in oklab, var(--team, #1a2a3a) 70%, transparent), transparent 60%), var(--noche) !important; border-radius: var(--r-3) var(--r-3) 0 0; }
.l2-org { border-radius: 3px; }
.l2-pbars-room { border-radius: var(--r-3); }
.l2-viewbtn { border-radius: 999px !important; }
.l2-nerdgate { display: block; font-size: 14.5px; line-height: 1.55; max-width: 72ch; }
.l2-nerdgate .nerd { justify-self: start; }

/* ---------- reveals (B7): visible by default; JS arms them only with IO + motion ---------- */
.reveal.rv-armed { opacity: 0; translate: 0 var(--m-dist); transition: opacity var(--d-3) var(--e-std), translate var(--d-3) var(--e-out); }
.reveal.rv-armed.rv-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .reveal.rv-armed { opacity: 1 !important; translate: none !important; } }
html[data-motion="off"] .reveal.rv-armed { opacity: 1; translate: none; }

/* ball-flight loader */
.flight { position: relative; width: 200px; height: 100px; }
.flight svg { width: 100%; height: 100%; overflow: visible; }
.flight .trail { fill: none; stroke: var(--mango); stroke-width: 2; stroke-dasharray: 4 5; }
.flight .trail-draw { fill: none; stroke: var(--mango); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.8s var(--e-out) .2s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.flight .ball { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--flam-fill), 0 0 12px #fff8; offset-path: path("M8 92 Q 96 -40 190 50"); offset-rotate: 0deg; animation: fly 1.8s var(--e-out) .2s infinite both; }
@keyframes fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ringdot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc, var(--flam-fill)); display: inline-block; animation: ring 2s var(--e-std) infinite; flex: none; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--rc, var(--flam-fill)) 70%, transparent); scale: .85; } 70% { box-shadow: 0 0 0 7px transparent; scale: 1; } 100% { scale: .85; } }

/* ---------- motion dial ---------- */
html[data-motion="calm"] { --d-1:80ms; --d-2:120ms; --d-3:360ms; --d-4:840ms; --m-dist:0px; --e-spring:var(--e-std); }
html[data-motion="calm"] :is(.ticker .trk, .ringdot, .flood .ghost, .hero > img.photo-bg, .rot > img.photo-bg, .flight .ball, .flight .trail-draw) { animation: none !important; }
html[data-motion="calm"] .rot .segs button.now::after { animation: none; scale: .5 1; }
html[data-motion="calm"] .ticker { overflow-x: auto; } html[data-motion="calm"] .ticker .grp + .grp { display: none; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] .ticker { overflow-x: auto; } html[data-motion="off"] .ticker .grp + .grp { display: none; }
html[data-motion="off"] .rot .segs button.now::after { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="calm"]) *, html:not([data-motion="calm"]) *::before, html:not([data-motion="calm"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html .ticker { overflow-x: auto; } html .ticker .grp + .grp { display: none; }
  html:not([data-motion="calm"]) .rot .segs button.now::after { scale: 1 1; }
  html[data-motion="calm"] { --m-dist:0px; }
  html[data-motion="calm"] :is(.ticker .trk, .ringdot, .flood .ghost, .hero > img.photo-bg, .rot > img.photo-bg, .flight .ball, .flight .trail-draw, .rot .segs button.now::after) { animation: none !important; }
}

/* ===================== responsive ===================== */
@media (max-width: 1540px) {
  .search { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px); width: auto; z-index: 60; }
  .search.open { display: block; }
  .qbtn { display: grid; }
}
@media (max-width: 1380px) { .mainnav a { padding: 0 8px; font-size: 14px; } .tb-in { gap: 10px; } }
@media (max-width: 1280px) {
  .nerd-l { display: none; }
  .hrow { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); height: auto; }
  .hrow .rot { height: 380px; }
  .hrow .slogan { grid-column: 1 / -1; min-height: 120px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: 20px 22px; }
  .hrow .slogan .big::after { margin: 10px 0 0; }
}
@media (max-width: 1100px) { .mainnav a { padding: 0 7px; font-size: 13.5px; } .tb-set .seg.lang { display: none; } }
/* tablet + phone: one row top bar, "Section ▾" opens a panel with the sections and the display settings */
@media (max-width: 980px) {
  :root { --tbh: 56px; }
  .tb-in { display: flex; height: var(--tbh); padding: 0 var(--gutter); gap: 8px; grid-template-areas: none; }
  .brand { flex: none; margin-right: auto; }
  .tb-tools { order: 3; flex: none; }
  .menubtn { order: 2; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); color: var(--ink); font: 650 13.5px/1 var(--fb); cursor: pointer; margin: 0; flex: none; max-width: 46vw; }
  .menubtn #menulabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menubtn .chev { font-size: 11px; color: var(--ink-3); transition: rotate var(--d-2); }
  .menubtn[aria-expanded="true"] .chev { rotate: 180deg; }
  .navpanel { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--sh-lift); padding: 6px 0 12px; max-height: calc(100vh - var(--tbh)); overflow-y: auto; }
  .navpanel.open { display: block; }
  .navpanel .mainnav { display: flex !important; position: static; flex-direction: column; align-items: stretch; height: auto; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .navpanel .mainnav a { padding: 12px var(--gutter); font-size: 15.5px; height: auto; box-shadow: none; }
  .navpanel .mainnav a.on { background: var(--mar-soft); box-shadow: inset 3px 0 0 0 var(--mar); }
  .mainnav:hover a:not(:hover) { opacity: 1; }
  .tb-set { flex-wrap: wrap; gap: 10px; padding: 12px var(--gutter) 0; margin-top: 6px; border-top: 1px solid var(--line); }
  .tb-set .seg.lang { display: inline-grid; }
  .nerd-l { display: inline; }
  .dialpop { left: 0; right: auto; }
  .topbar { position: sticky; }
  .tb-in { position: relative; }
  .search { left: var(--gutter); right: var(--gutter); }
  .icon-btn { width: 36px; height: 36px; }
  .hrow { grid-template-columns: minmax(0,1fr); }
  .hrow .rot { height: auto; min-height: 340px; }
  .stories { grid-template-rows: none; }
  .story { min-height: 92px; }
  .lgcards { grid-template-columns: minmax(0,1fr); }
  .ords { margin-left: 0; }
}
@media (max-width: 820px) {
  .side { top: var(--tbh); background: var(--paper); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 8px var(--gutter); }
  .side nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .side nav::-webkit-scrollbar { display: none; }
  .side a { border-radius: 999px; padding: 0 12px; }
  .side a:hover { padding-left: 12px; }
  .side a.on { box-shadow: none; background: var(--ink); color: var(--card); border-color: var(--ink); }
}
@media (max-width: 599px) {
  :root { --tbh: 52px; --gutter: 16px; --gap: 10px; }
  .brand picture, .brand img.wbu-logo { height: 35px; }
  .ls-in { min-height: 0; padding: 6px var(--gutter) 8px; }
  .ls-item { gap: 7px; padding: 5px 9px 5px 7px; }
  .ls-item small { display: none; }
  .ls-item b { font-size: 15px; }
  .ls-item .st3 { font-size: 9px; padding: 3px 5px; }
  .ls-item .flag3 { width: 22px; height: 15px; }
  .ls-tile { width: 112px; padding: 4px 8px; }
  .ls-tile .row { height: 17px; font-size: 12.5px; }
  .ls-tile .meta { display: none; }
  .ls-in { padding: 4px var(--gutter) 7px; }
  .slogan { padding: 18px 18px 20px; gap: 10px; }
  .slogan .acts { flex-direction: row !important; flex-wrap: wrap; }
  .slogan .acts .btn { width: auto !important; }
  .page-hero { padding-top: 8px; }
  .hero-body { padding: 24px 20px 22px; }
  .hero::before, .hero.painted::before { background: linear-gradient(0deg, rgb(11 22 34 / .94) 0 50%, rgb(11 22 34 / .72) 100%); }
  .rot .slide { padding: 0 18px 22px; }
  .rot .slide h2 { font-size: 34px; }
  .story { grid-template-columns: 68px minmax(0,1fr); }
  .story .sb .logo-badge { --ls: 44px; }
  .slogan .big { font-size: 34px; }
  .card { padding: 12px 12px 10px; }
  .card-head h2 { font-size: 21px; }
  .page-h h1 { font-size: 28px; }
  .gcards { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .gc .tr { grid-template-columns: 24px minmax(0,1fr) auto; gap: 6px; padding: 5px 9px; }
  .gc .tr .r { min-width: 30px; height: 28px; font-size: 20px; }
  .gc .tr b { font-size: 14px; }
  .gc .gh { padding: 6px 9px; }
  .flood .in { padding: 20px; gap: 14px; }
  .flood .in > .logo-badge { --ls: 64px; }
  .flood .ghost { width: 300px; height: 300px; right: -90px; }
  .ord { padding: 4px 10px; } .ord .r { font-size: 24px; }
  .modal.media { border-radius: var(--r-3) var(--r-3) 0 0; width: 100%; }
  .modal.media.portrait { width: 100%; }
  .mv-bar { grid-template-columns: minmax(0,1fr) auto; }
  .mv-bar .mv-count { display: none; }
  .ticker .lbl { padding: 12px 10px; font-size: 11px; }
  .site-foot { font-size: 12px; }
}
@media (max-width: 380px) {
  .menubtn { padding: 0 10px; font-size: 13px; }
  .icon-btn { width: 34px; height: 34px; }
}
/* dark: the rail header uses the dark louvre (light slats would glare) */
:root[data-theme="dark"] .side-h { background: var(--persiana-dark), var(--card-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side-h { background: var(--persiana-dark), var(--card-2); } }

/* ---------- place figures (aerials; Lane E fills the slots today.place, team.place, league.place) ---------- */
.place-fig { margin: 0; border-radius: var(--r-2); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.place-fig img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--noche); }
.place-fig figcaption { display: grid; gap: 3px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.place-fig .cap { font: 650 14px/1.35 var(--fb); color: var(--ink); }
.place-fig .where { font: 500 12.5px/1.4 var(--fb); color: var(--ink-2); }
.place-fig .pf-ph { position: relative; }
/* .place-fig .credit sits on the photo (.pf-ph) as the shared .wb-credit */
.slot-row:not(:empty) { margin-bottom: var(--gap); }
.lgcard .lg-place:not(:empty) { margin: -18px -18px 14px; }
.lgcard .lg-place .place-fig { border-radius: 0; border: 0; box-shadow: none; }
.lgcard .lg-place .place-fig img { aspect-ratio: 3 / 1; }
.tvisit { display: grid; gap: var(--gap); align-content: start; }
.tvisit .slot-row:not(:empty) { margin-bottom: 0; }
#slot-place .place-fig img { aspect-ratio: 16 / 5; }
/* the league map band in the same slot (page-home.js placeMap): the height is held before clubs-map.js lands, so nothing below moves */
.home-map { position: relative; height: clamp(340px, 31vw, 448px); border-radius: 14px; }
.home-map:not([data-state="on"]) { background: var(--card-2); }
@media (max-width: 640px) { .home-map { height: 292px; border-radius: 12px; } }
@media (max-width: 599px) { .place-fig img, #slot-place .place-fig img { aspect-ratio: 16 / 9; } .lgcard .lg-place:not(:empty) { margin: -18px -18px 12px; } }
/* name buttons inside noche surfaces (rotator, heroes, story tiles, ticker) take the surface's text colour */
.rot .pbtn, .hero .pbtn, .story .pbtn, .flood .pbtn, .slogan .pbtn { color: inherit; font: inherit; font-weight: 700; border-bottom: 1px solid rgb(255 255 255 / .45); }
.rot .pbtn:hover, .hero .pbtn:hover, .story .pbtn:hover, .flood .pbtn:hover { color: #fff; border-bottom-color: #fff; }
.rot .slide h2 .pbtn { border-bottom-width: 2px; }

/* ===================== Exit-2 check fixes (2026-10-17) ===================== */
/* MLB Pipeline Top 100 gold (OP-3): --t100 is AA (≥ 4.5:1) on paper, card, card-2 and the noche surfaces */
:root { --t100: #7A4A00; --t100-line: rgb(122 74 0 / .45); }
:root[data-theme="dark"] { --t100: #F7C46A; --t100-line: rgb(247 196 106 / .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t100: #F7C46A; --t100-line: rgb(247 196 106 / .5); } }
.room, .rot, .hero, .story, .ticker, .lgstrip, .flood, .l2-ph, .slogan, .mv-bar, .modal.media, #l2-tipbox { --t100: #F7C46A; --t100-line: rgb(247 196 106 / .5); }
body .t100.t100.t100 { color: var(--t100); }
body .story.t100.t100.t100 { color: #fff; }
body .btn.t100.t100.t100 { color: var(--noche); } body .btn.t100 .t100c.t100c { color: #7A4A00; }
.t100c { display: inline-block; margin-left: 5px; padding: 1px 4px 0; border: 1px solid var(--t100-line); border-radius: 3px; font: 700 10px/1.25 var(--fd); font-stretch: 112%; letter-spacing: .04em; color: var(--t100); vertical-align: 1px; white-space: nowrap; }
body .l2 .l2-tag.rank { color: var(--t100); }
/* F1: the welcome ✕ sits inside its panel again */
.slogan { position: relative; isolation: isolate; overflow: hidden; }
.slogan .x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; }
/* F5: on phones the viewer's ✕ sits in its own bar above the stage */
@media (max-width: 599px) { .modal.media { padding-top: 52px; } .modal.media .m-x { top: 8px; right: 10px; background: rgb(255 255 255 / .12); } }
/* F9: photo credits on a solid plate: now the shared .wb-credit (end of this file) */
/* F10: the profile head's numbers sit on a noche plate */
.l2-ph .warbig { background: rgb(11 22 34 / .82); padding: 8px 12px 6px; border-radius: 10px; }
body .l2 .l2-ph .warbig .k, body .l2 .l2-ph .warbig .k .l2-tip { color: #f0e2c6; }
.l2-strip { background: rgb(11 22 34 / .84); border-radius: 8px; }
body .l2 .l2-ph .l2-strip .k { color: #e6d6b6; }
.l2-ph h1, .l2-ph .subl { text-shadow: 0 1px 10px rgb(0 0 0 / .6); }
/* AA: kickers on team floods ride a mango chip; dark meta text a step lighter; no fade masks over text */
body .flood .kick { display: inline-block; background: var(--mango); color: #2A1A00; padding: 4px 7px 3px; border-radius: 3px; margin-bottom: 8px; }
body .flood h1 { margin-top: 14px; }
:root[data-theme="dark"] { --ink-3: #bdad8c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-3: #bdad8c; } }
.ticker, .ls-in, .side nav { -webkit-mask-image: none !important; mask-image: none !important; }
.kicker { font-weight: 650; letter-spacing: .12em; }
.rot .slide h2.long { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.04; font-stretch: 72%; }
@media (max-width: 599px) { .ls-tile { width: 124px; } .rot .slide h2.long { font-size: 26px; } }
.story.t100 .txt b { color: inherit; }
.l2-ph h1 .t100c { font-size: 14px; vertical-align: 6px; }
/* the viewer's ✕ never covers the player: its own bar above the stage at every width */
.modal.media { padding-top: 52px; }
.modal.media .m-x { top: 8px; right: 10px; background: rgb(255 255 255 / .12); }
/* rank tags + Top 100 chips on a soft gold fill (no thin border under the glyphs) */
body .l2 .l2-tag.rank, body .t100c { border: 0; background: color-mix(in oklab, var(--t100) 13%, transparent); padding: 2px 5px 1px; }
body .form b.L { background: var(--flam-fill); color: #fff; box-shadow: none; }
/* team flood: the corner glow stays dark enough for white text on every club tint */
.flood::before { background: radial-gradient(120% 140% at -10% -30%, color-mix(in oklab, var(--team) 50%, #0b1622), transparent 60%), var(--persiana-dark) !important; }
.flood .ghost { opacity: .07; }
/* when the ticker doesn't move (Calm, Off, reduced motion) it wraps instead of clipping an item at the edge */
html[data-motion="calm"] .ticker, html[data-motion="off"] .ticker { overflow: hidden; align-items: stretch; }
html[data-motion="calm"] .ticker .trk, html[data-motion="off"] .ticker .trk { width: auto; flex: 1; min-width: 0; }
html[data-motion="calm"] .ticker .grp, html[data-motion="off"] .ticker .grp { flex-wrap: wrap; flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { html .ticker { overflow: hidden; align-items: stretch; } html .ticker .trk { width: auto; flex: 1; min-width: 0; } html .ticker .grp { flex-wrap: wrap; flex: 1; min-width: 0; } }
.ticker .lbl { display: flex; align-items: center; }
html[data-motion="calm"] .ticker .it, html[data-motion="off"] .ticker .it { white-space: normal; max-width: 100%; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { html .ticker .it { white-space: normal; max-width: 100%; flex-wrap: wrap; } }
@media (max-width: 599px) { html[data-motion="calm"] .ticker .it, html[data-motion="off"] .ticker .it { flex: 1 1 100%; border-left: 0; border-top: 1px solid rgb(255 255 255 / .12); } }
@media (max-width: 599px) and (prefers-reduced-motion: reduce) { html .ticker .it { flex: 1 1 100%; border-left: 0; border-top: 1px solid rgb(255 255 255 / .12); } }
/* MLB relevance pills on Today's Best of the Night (All · Top 100 · 40-man · My MLB team); one scrolling row on phones */
.relbar { margin: 0 0 10px; flex-wrap: wrap; gap: 5px; }
.relbar .chip { height: 28px; padding: 0 9px; }
@media (max-width: 599px) { .relbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } }
.relbar::-webkit-scrollbar { display: none; }
.relbar .chip { flex: 0 0 auto; white-space: nowrap; }
.relbar .lbl { display: inline; flex: 0 0 auto; }
.relfoot { margin-top: 8px; }
/* team rosters on phones: names wrap instead of clipping; stat columns a step narrower */
@media (max-width: 599px) {
  .table.roster td.nw { white-space: normal; overflow: visible; text-overflow: clip; }
  .table.roster td.nw .pbtn { white-space: normal; text-align: left; overflow-wrap: break-word; word-break: normal; }
  .table.roster th.r { width: 48px !important; } .table.roster td.num { font-size: 12px; padding-left: 2px; padding-right: 4px; }
  .table.roster th.r.sorted { width: 68px !important; }
}
@media (max-width: 599px) { .orggrid { grid-template-columns: minmax(0, 1fr) !important; } }
/* m9: long club names (Algodoneros, Magallanes, Tomateros) fit whole on phones: the display face a step narrower, never an ellipsis */
@media (max-width: 599px) {
  .gc .tr b { font-stretch: 76%; }
  .ls-tile .row .n { font-family: var(--fd); font-stretch: 78%; font-size: 13.5px; text-overflow: clip; }
  .bx-teams .row > span:first-child, .bx-teams .row .tm span, .bx-teams .row .tm .tmn { font-family: var(--fd); font-stretch: 80%; font-size: 14px; }
}
/* AA over pictures (Exit-2 r2): the team-page park caption sits on a solid noche band; painted league cards get a flat, darker scrim */
.tpark .ph::after { background: linear-gradient(transparent 40%, rgb(11 22 34 / .78) 62%, rgb(11 22 34 / .95)); }
.tpark .ph .cap { background: rgb(11 22 34 / .82); padding: 6px 9px 7px; border-radius: 6px; left: 8px; right: auto; max-width: calc(100% - 16px); bottom: 8px; }
.lgcard.painted { background: linear-gradient(90deg, rgb(11 22 34 / .95), rgb(11 22 34 / .86)), var(--paint) center/cover !important; }
.lgcard:not(.painted) { background: var(--persiana-dark), linear-gradient(100deg, color-mix(in oklab, var(--lc) 32%, #0b1622) 0 50%, var(--noche) 50% 100%) !important; background-color: var(--noche) !important; }
/* OP-3: where the name already carries the gold "#N" chip, the older "Top 100 #N" sub-tag beside it is dropped (one rank, said once) */
.l2-pname.t100 ~ .l2-sub .l2-tag.rank, .l2-pname.t100 ~ .l2-ast ~ .l2-sub .l2-tag.rank, b.t100 ~ .l2-tag.rank, .nm:has(> .t100) + .l2-tag.rank, tr:has(.l2-pname.t100) .l2-tag.rank { display: none; }
@media (max-width: 599px) { body .l2-strip .v { flex-wrap: wrap; row-gap: 2px; white-space: normal; } body .l2-strip .v small { flex: 1 1 100%; white-space: normal; } }
@media (max-width: 599px) { body .l2-tile .r { white-space: normal; overflow: visible; text-overflow: clip; } }
/* the winner's score chip is as tall as the score's glyph box (1.6em), so no part of the number ever sits off the chip */
.gc .tr.w .r { height: calc(1.6em + 4px); }
.gl .tt small { display: block; margin-top: 6px; }
/* OP-3 in the viewer caption: the linked name and its "#N" chip stay inline in the one-line title */
.mv-bar .mv-cap b .pbtn { display: inline; font: inherit; border-bottom: 1px solid rgb(255 255 255 / .45); }
.mv-bar .mv-cap b span.t100c { display: inline-block; font: 700 10px/1.25 var(--fd); font-stretch: 112%; color: var(--t100); margin-left: 5px; vertical-align: 1px; }
.mv-bar .mv-cap b .pbtn:not(.t100) { color: inherit; }
.lgcard .teams span, .lgcard .teams a { background: rgb(11 22 34 / .62); }  .lgcard .teams a:hover { background: rgb(11 22 34 / .85); }
/* Statcast tab tiles: the unit stays on the number line, small */
body .l2-tile .v small { font-size: 12px; font-weight: 600; letter-spacing: 0; font-family: var(--fb); white-space: nowrap; }
body .l2-tile .v:has(small) { white-space: nowrap; }

/* ===================== Pride hero (Today, operator 2026-10-21): full-bleed team photos ===================== */
.pride-wrap:empty { display: none; }
.pride { position: relative; height: 68vh; height: 68svh; min-height: 440px; max-height: 800px; overflow: hidden; isolation: isolate; background: var(--noche); color: #fff; }
.pr-stage, .pr-layer, .pr-scrim { position: absolute; inset: 0; }
.pr-layer { opacity: 0; transition: opacity 900ms var(--e-std, ease); }
.pr-layer.on { opacity: 1; }
.pr-layer picture, .pr-layer img { display: block; width: 100%; height: 100%; }
.pr-layer img { object-fit: cover; transform-origin: var(--fx, 50%) var(--fy, 50%); }
.pr-layer.kb img { animation: prKB 7.5s linear both; }
@keyframes prKB { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.pride.pr-calm .pr-layer { transition-duration: 1800ms; }
.pride.pr-static .pr-layer { transition: none; }
.pride.pr-paused .pr-layer.kb img, .pride:hover .pr-layer.kb img, .pride:focus-within .pr-layer.kb img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pr-layer { transition: none; } .pr-layer.kb img { animation: none; } }
html[data-motion="off"] .pr-layer { transition: none; } html[data-motion="off"] .pr-layer.kb img, html[data-motion="calm"] .pr-layer.kb img { animation: none; }
.pr-scrim { z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgb(11 22 34 / .92) 0%, rgb(11 22 34 / .55) 34%, rgb(11 22 34 / 0) 62%), linear-gradient(90deg, rgb(11 22 34 / .55), rgb(11 22 34 / 0) 55%); }
.pr-over { position: absolute; z-index: 2; left: max(24px, calc((100vw - var(--maxw, 1400px)) / 2 + 24px)); bottom: 28px; right: 24px; display: flex; align-items: flex-end; gap: 18px; max-width: 880px; }
.pr-crest .logo-badge, .pr-crest img { --ls: 76px; width: 76px; height: 76px; flex: 0 0 auto; box-shadow: 0 6px 24px rgb(0 0 0 / .45); }
.pr-txt { min-width: 0; background: rgb(11 22 34 / .62); border-radius: 14px; padding: 12px 16px 12px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pr-meta { font: 650 11px/1.3 var(--fd); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: #FFE2B8; }
.pr-name { margin: 4px 0 6px; font: 800 clamp(40px, 5.6vw, 84px)/.92 var(--fd); font-stretch: 70%; letter-spacing: 0; color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / .45); text-wrap: balance; }
.pr-cap { margin: 0 0 12px; font: 500 15px/1.4 var(--fb); color: #f0e2c6; max-width: 60ch; }
.pr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pr-go { font-size: 15px; padding: 10px 18px; }
/* .pr-credit: the shared .wb-credit (end of this file) */
.pr-ctl { position: absolute; z-index: 3; right: max(16px, calc((100vw - var(--maxw, 1400px)) / 2 + 16px)); top: 16px; display: flex; align-items: center; gap: 6px; background: rgb(11 22 34 / .66); border-radius: 999px; padding: 4px 6px; }
.pr-b { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .1); color: #fff; font: 700 18px/1 var(--fb); cursor: pointer; display: grid; place-items: center; }
.pr-b:hover { background: rgb(255 255 255 / .22); }
.pr-b:focus-visible, .pr-go:focus-visible, .pr-credit a:focus-visible { outline: 3px solid var(--mango, #FFB547); outline-offset: 2px; }
.pr-pp span { font-size: 12px; letter-spacing: -1px; }
.pr-count { font: 700 12px/1 var(--fd); font-stretch: 112%; color: #fff; padding: 0 8px 0 4px; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.pride .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pride.pr-none { display: none; }
@media (max-width: 599px) {
  .pride { height: 56vh; height: 56svh; min-height: 400px; max-height: 620px; }
  .pr-over { left: 16px; right: 16px; bottom: 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .pr-crest .logo-badge, .pr-crest img { --ls: 56px; width: 56px; height: 56px; }
  .pr-txt { padding: 10px 12px; width: 100%; }
  .pr-name { font-size: 40px; }
  .pr-cap { font-size: 13.5px; margin-bottom: 10px; }
  .pr-ctl { top: 10px; right: 12px; }
  .pr-b { width: 34px; height: 34px; }
}
/* Today has no Pride hero (operator 2026-10-31): nothing reserves its height there any more; the component stays for the Teams page.
   The score strip keeps its filled height from the first paint, so Today's story row under it never moves (CLS) */
#lgstrip-wrap { min-height: 91.5px; }
@media (max-width: 599px) { #lgstrip-wrap { min-height: 54px; } }
@media (max-width: 599px) { .pr-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; } .pr-txt { background: rgb(11 22 34 / .58); } .pr-go { font-size: 14px; padding: 9px 16px; } }
.pr-ctl[hidden], .pr-b[hidden] { display: none; }
/* Today's story row under the score strip keeps its place from the first paint too (measured heights of #page-hero) */
@media (min-width: 1300px) { html[data-route="today"] .page-hero:empty { display: block; min-height: 442px; } }
@media (min-width: 981px) and (max-width: 1299px) { html[data-route="today"] .page-hero:empty { display: block; min-height: 585px; } }

/* ---------- fan photo bands (BANNER_MODE "fans", operator 2026-10-21): real crowd photos replace the paintings and the
   drawn dusk scenes. The title sits on an ink (#0F2340) scrim; caption + credit use the .photo-cap component. ---------- */
.scene-wrap.fans > img.fan-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; display: block; }
.scene-wrap.fans > .fan-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* the ink sits only behind the text block (left, fading out by ~58% of the width); the crowd shows at full strength elsewhere */
.hero.fans::before { background: linear-gradient(90deg, rgb(15 35 64 / .88) 0, rgb(15 35 64 / .8) 30%, rgb(15 35 64 / .55) 46%, rgb(15 35 64 / 0) 60%); }
.rot.fans::before { background: linear-gradient(0deg, rgb(15 35 64 / .92) 0, rgb(15 35 64 / .8) 30%, rgb(15 35 64 / .45) 48%, rgb(15 35 64 / 0) 62%); }
.m-head.scene-wrap.fans::before { background: linear-gradient(90deg, rgb(15 35 64 / .86) 0, rgb(15 35 64 / .6) 34%, rgb(15 35 64 / 0) 60%); }
.l2-ph.l2-painted.fans::after { background: linear-gradient(90deg, rgb(15 35 64 / .88) 0, rgb(15 35 64 / .78) 32%, rgb(15 35 64 / .45) 48%, rgb(15 35 64 / 0) 60%), linear-gradient(0deg, rgb(15 35 64 / .8), rgb(15 35 64 / 0) 45%); }
/* small text on a photo gets its own tight ink backing (4.5:1) instead of a darker photo */
.hero.fans .hero-s, .rot.fans .slide p, .l2-ph.fans .subl { width: fit-content; max-width: min(100%, 64ch); background: rgb(15 35 64 / .75); padding: 3px 8px; margin-left: -8px; border-radius: 4px; }
.l2-ph.fans .subl { margin-left: 0; }
.hero.fans .btn.ghost, .rot.fans .btn.ghost { background: rgb(15 35 64 / .86); }
.hero.fans .hero-t, .rot.fans .slide h2, .l2-ph.fans h1 { text-shadow: 0 0 2px rgb(15 35 64 / .7), 0 1px 14px rgb(15 35 64 / .75); }
/* .fan-cap: the shared .wb-credit (end of this file); the profile header keeps room under its bio strip for it */
/* profile header on a photo: name and bio strip on tight ink boxes (all widths) */
.l2-ph.fans h1 { width: fit-content; background: rgb(15 35 64 / .7); padding: 2px 8px 4px; border-radius: 4px; }
.l2-ph.fans .l2-strip .k, .l2-ph.fans .l2-strip .v, .l2-ph.fans .warbig .v, .l2-ph.fans .warbig .k { width: fit-content; background: rgb(15 35 64 / .78); padding: 0 4px; border-radius: 3px; }
.l2-ph.fans .warbig .v, .l2-ph.fans .warbig .k { margin-left: auto; }
/* the Top 100 chip on a photo gets a solid ink plate */
body .l2-ph.fans .t100c.t100c, body .hero.fans .t100c.t100c, body .rot.fans .t100c.t100c { background: #0F2340; color: #E8B65A; }
.fan-cap a { text-decoration: underline; text-underline-offset: 2px; }
.card.painted-card.fans { position: relative; }
.fan-band { position: relative; overflow: hidden; isolation: isolate; height: 170px; border-radius: var(--r-3); margin-top: var(--gap); background: var(--noche); }
.fan-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(15 35 64 / .55), rgb(15 35 64 / .08) 60%); }
/* narrow screens: the caption + credit takes its own line under the title block instead of sitting over the subtitle */
@media (max-width: 1100px) {
  .hero.fans { flex-wrap: wrap; align-content: flex-end; }
  .rot.fans::before { background: linear-gradient(0deg, rgb(15 35 64 / .92) 0, rgb(15 35 64 / .84) 45%, rgb(15 35 64 / .66) 72%, rgb(15 35 64 / .3) 90%, rgb(15 35 64 / .12)); }
}
@media (max-width: 720px) {
  .card.painted-card.fans { background-image: linear-gradient(90deg, var(--card) 0 50%, color-mix(in srgb, var(--card) 74%, transparent)), var(--fan-bg) !important; }
}
@media (max-width: 599px) {
  /* phones (operator intent: the crowd shows): no full-band ink; a short low fade (< .5, bottom 40%) and tight ink boxes on each text item */
  .hero.fans::before, .rot.fans::before { background: linear-gradient(0deg, rgb(15 35 64 / .45) 0, rgb(15 35 64 / 0) 40%); }
  .hero.fans.short { --hh: 340px; }
  .rot.fans { min-height: 420px; }
  /* ink hugs each line of the title and subtitle (inline boxes), not the whole block */
  .hero.fans .hero-s { width: auto; background: none; padding: 0; margin-left: 0; }
  .hero.fans .hx { background: rgb(15 35 64 / .7); padding: 1px 6px 3px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .hero.fans .hero-s .hx { background: rgb(15 35 64 / .82); line-height: 1.55; }
  .rot.fans .slide h2, .l2-ph.fans h1 { width: fit-content; background: rgb(15 35 64 / .7); padding: 2px 8px 4px; margin-left: -8px; border-radius: 4px; }
  .l2-ph.fans h1 { margin-left: 0; }
  .rot.fans .slide p, .l2-ph.fans .subl { background: rgb(15 35 64 / .8); }
  /* rotator: headline and line hug each text line (inline plates), tall enough to cover the glyph tops */
  .rot.fans .slide h2 { display: inline; width: auto; margin-left: 0; padding: .12em .3em .1em; line-height: 1.12; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .rot.fans .slide h2::after { content: "\A"; white-space: pre; }
  .rot.fans .slide p { display: inline; width: auto; margin-left: 0; padding: 2px 6px; line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .rot.fans .slide .hero-acts { margin-top: 10px; }
  /* profile tiles: one plate per tile (label + value) */
  .l2-ph.fans .l2-strip > div, .l2-ph.fans .l2-strip > div:first-child { justify-self: start; width: fit-content; max-width: 100%; background: rgb(15 35 64 / .82); padding: 1px 4px; border-radius: 3px; border-left: 0; margin: 0; }
  .l2-ph.fans .l2-strip .k, .l2-ph.fans .l2-strip .v { background: none; padding: 0; }
  .l2-ph.fans .l2-strip, .l2-ph.fans .warbig { background: transparent; }
  .hero.fans .hero-s .hx { padding: 0 4px 1px; }
  .l2-ph.fans .l2-strip .k, .l2-ph.fans .l2-strip .v, .l2-ph.fans .warbig .v, .l2-ph.fans .warbig .k { width: fit-content; background: rgb(15 35 64 / .78); padding: 0 4px; border-radius: 3px; }
  .l2-ph.fans .warbig { width: fit-content; }
  .l2-ph.l2-painted.fans::after { background: linear-gradient(0deg, rgb(15 35 64 / .45) 0, rgb(15 35 64 / 0) 40%); }
  .fan-band { height: 120px; }
}
@media (max-width: 360px) {
  .rot.fans { min-height: 420px; }
  /* 320-wide phones: a 260 px band; tighter padding and type so title, line and buttons fit above the credit */
  .hero.fans.short { --hh: 260px; }
  .hero.fans .hero-body { padding: 14px 12px var(--cr-room); }
  .hero.fans.short .hero-t { font-size: 27px; margin-bottom: 4px; }
  .hero.fans .hero-s { font-size: 13px; margin-bottom: 8px; }
  .hero.fans .hero-s .hx { line-height: 1.5; padding: 0 4px 1px; }
  .hero.fans .hx { padding: 0 4px 1px; }
  .hero.fans .hero-acts .btn { height: 30px; padding: 0 10px; font-size: 12px; }
}
/* profile tiles: labels wrap inside their plate (never hang off it) */
.l2-ph.fans .l2-strip .k { white-space: normal; overflow-wrap: anywhere; }

/* =====================================================================
   Club tools (v6.1, Lanes S + C2): Org report, No MLB organization, Workload, Rule 5 watch, Prospect report, Pitch data.
   Moved out of the page scripts; colours only through the palette tokens (palette.css).
   ===================================================================== */
/* Club tools base (was injected by workload.js) */
.club-head{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin:0 0 var(--gap,16px)}
.club-head h1{margin:0;font:760 clamp(26px,4vw,40px)/1.05 var(--fd);font-stretch:78%;color:var(--ink)}
.club-head .kick{margin-bottom:6px}
.club-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;font:500 13px/1.4 var(--fb);color:var(--ink-2)}
.club-stats b{font:700 15px/1 var(--fm,var(--fb));color:var(--ink)}
.club-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.club-acts .btn{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer}
.club-acts .alt{font:500 12px/1.3 var(--fb);color:var(--ink-3)}
.club-acts .alt a{color:var(--ink-2)}
.club-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.club-tabs a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font:600 13px/1 var(--fb);color:var(--ink);text-decoration:none}
.club-tabs a.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.club-t td,.club-t th{vertical-align:top}
.club-t td.who{white-space:normal}
.club-t td.who .pbtn{white-space:normal;text-align:left;overflow-wrap:anywhere}
.club-t .sub{display:block}
.club-t td{overflow:visible;white-space:normal;overflow-wrap:anywhere}
.club-t .num{font-variant-numeric:tabular-nums}
.cb{display:inline-block;font:700 10px/1 var(--fd,var(--fb));letter-spacing:.06em;padding:3px 5px;border-radius:3px;margin-left:4px;vertical-align:1px;white-space:nowrap;border:1px solid var(--line);color:var(--ink-2);background:var(--card-2,transparent)}
.cb.forty{border-color:var(--mar);color:var(--mar)}
.cb.r5{border-color:var(--ink-3);color:var(--ink-2)}
.cb.xm{border-color:var(--ink-2);color:var(--ink)}
.club-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.club-orgc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-2,8px);background:var(--card);color:var(--ink);text-decoration:none}
.club-orgc:hover{border-color:var(--ink-3)}
.club-orgc b{font:700 15px/1.2 var(--fb);color:var(--ink)}
.club-orgc .sub{grid-column:1/-1;margin:0}
.club-filters{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 12px}
.club-filters .grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.club-filters .lbl{font:650 11px/1 var(--fd,var(--fb));letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.club-filters .chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.club-filters .chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.club-filters select{height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:500 13px var(--fb);padding:0 8px;max-width:100%}
.club-note{font:500 12.5px/1.5 var(--fb);color:var(--ink-2);margin:0 0 10px}
.club-note b{color:var(--ink)}
details.wl{border:1px solid var(--line);border-radius:var(--r-2,8px);background:var(--card);margin:0 0 8px}
.wl>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,2.2fr) repeat(5,minmax(0,1fr));gap:6px 10px;align-items:start;padding:10px 12px}
.wl>summary::-webkit-details-marker{display:none}
.wl>summary .k{display:block;font:650 10px/1.2 var(--fd,var(--fb));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.wl>summary .v{font:600 13px/1.3 var(--fb);color:var(--ink)}
.wl>summary .who{min-width:0}
.wl>summary .sub{display:block;margin-top:2px}
.wl>summary .who .org{margin-left:4px}
.wl[open]>summary{border-bottom:1px solid var(--rule-2,var(--line))}
.wl .in{padding:8px 12px 12px}
.wl-head{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(5,minmax(0,1fr));gap:6px 10px;padding:0 12px 6px;font:650 10px/1.2 var(--fd,var(--fb));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:599px){
  .wl>summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wl>summary .who{grid-column:1/-1}
  .wl-head{display:none}
  .club-t .hide-sm{display:none}
}
@media (min-width:600px){ .wl>summary .k{display:none} }

/* Org report (was injected by page-org.js) */
.club-t .sm-only{display:none}@media (max-width:599px){.club-t .sm-only{display:block}}
.club-org-t col.c-who{width:27%}.club-org-t col.c-last{width:16%}.club-org-t col.c-sea{width:19%}.club-org-t col.c-wh{width:12%}.club-org-t col.c-ad{width:9%}.club-org-t col.c-nx{width:17%}
.club-org-t th{white-space:normal}
@media (max-width:599px){.club-org-t col.c-who{width:42%}.club-org-t col.c-last{width:28%}.club-org-t col.c-sea{width:30%}}
.club-dep li{margin:0 0 6px}.club-dep{margin:0;padding-left:18px;font:500 13px/1.45 var(--fb);color:var(--ink-2)}

/* No MLB organization board (was injected by page-signable.js) */
.club-sg-t col.c-who{width:22%}.club-sg-t col.c-age{width:5%}.club-sg-t col.c-pos{width:5%}.club-sg-t col.c-bt{width:5%}.club-sg-t col.c-lv{width:19%}.club-sg-t col.c-g{width:9%}.club-sg-t col.c-w{width:19%}.club-sg-t col.c-v{width:16%}
.club-sg-t th{white-space:normal}.club-t .sm-only{display:none}
@media (max-width:599px){.club-sg-t col.c-who{width:44%}.club-sg-t col.c-w{width:30%}.club-sg-t col.c-v{width:26%}.club-t .sm-only{display:block}}
.club-label{display:inline-block;font:600 12.5px/1.4 var(--fb);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--card)}
.club-more{margin-top:10px}

/* Prospect report, Rule 5 watch, Pitch data (C2) (was injected by prospect-cards.js) */
.c2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start}
@media (max-width:899px){.c2-grid{grid-template-columns:minmax(0,1fr)}}
.c2-card .card-head h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.c2-card .card-head h2 .pbtn{font:inherit;color:inherit}
.c2-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:2px 0 8px;color:var(--ink-2);font-size:12.5px}
.c2-grid>.card+.card{margin-top:0}
.c2-base{width:100%;table-layout:fixed}.c2-base thead th:first-child{width:34%}
.c2-base th.c2-rl{font:700 12.5px/1.2 var(--fb);letter-spacing:0;text-transform:none;text-align:left;color:var(--ink);background:none;padding:6px 7px;white-space:normal}
.c2-base th.c2-rl .sub{display:block;font-weight:500;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c2-base td,.c2-base th{font-variant-numeric:tabular-nums}
.c2-fastrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0 6px}
@media (max-width:420px){.c2-fastrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c2-fast{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border:1px solid var(--rule-2);border-radius:var(--r-sm,6px);min-width:0}
.c2-fast b{font-size:17px;white-space:nowrap}.c2-fast small{font-size:11px}
.c2-ladder{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:6px 0;padding:0;font-size:12px}
.c2-ladder li{padding:2px 7px;border:1px solid var(--rule-2);border-radius:999px;color:var(--ink-3)}
.c2-ladder li.on{color:var(--ink-2)}.c2-ladder li.cur{color:var(--ink);border-color:var(--ink-3);font-weight:700}
.c2-reel{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px;scrollbar-width:thin}
.c2-clip{all:unset;cursor:pointer;flex:0 0 160px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.3;color:var(--ink-2)}
.c2-clip img{width:160px;height:90px;object-fit:cover;border-radius:6px;display:block;background:var(--noche)}
.c2-clip:focus-visible{outline:3px solid var(--mar);outline-offset:2px;border-radius:6px}
.c2-clipt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c2-sec{font:700 10.5px/1.2 var(--fd);font-stretch:115%;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:10px 0 4px}
.c2-note{border-left:3px solid var(--rule);padding:6px 10px;margin:0 0 var(--gap);color:var(--ink-2);font-size:13px}
/* C8 share buttons */
.sharebtn{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:3px 10px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;color:inherit;font:600 12.5px/1 var(--fb);cursor:pointer}
.sharebtn:hover{border-color:currentColor}
.sharebtn:focus-visible{outline:2px solid var(--vt-red,var(--mar));outline-offset:2px}
.sharebtn.on-photo{background:rgb(15 35 64 / .78);color:#fff;border-color:rgb(255 255 255 / .5);margin-left:4px}
.sharebar{display:flex;justify-content:flex-end;margin:8px 0 0}
.bx-share{display:flex;justify-content:flex-end;margin:4px 0}
#share-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:200;padding:8px 14px;border-radius:6px;background:#14213D;color:#fff;font:600 13px/1.3 var(--fb);transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);overflow-wrap:anywhere}
#share-toast.on{opacity:1;transform:translate(-50%,0)}
.watchl{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink-2)} /* C1 */
.watchl .wl-k{font:700 10px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.watchl a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:2px}
/* full games + Media › Clips rows (channels job, agent F 2026-10-24): links out to YouTube / lidom.com, never embedded */
.fullg{color:var(--blue);font:600 12.5px/1.3 var(--fb);text-decoration:none;white-space:nowrap}
.fullg:hover{text-decoration:underline;text-underline-offset:2px}
.fullg.btn{color:inherit}
.gc .gfl{margin:0 12px;padding:0 0 8px}
.rg .rg-f{margin-top:2px}
.mrow{margin:0 0 calc(var(--gap) * 1.2)}
.mrow > .card-head{margin:6px 0 8px}
.mrow > .card-head h2 .ct{font-weight:500;color:var(--ink-3,var(--ink-2))}
/* Media › Clips: each earlier night under its date (operator 2026-10-25: keep 5 nights) */
.mrow .mday{margin:18px 0 8px;padding-top:10px;border-top:1px solid var(--line,rgba(0,0,0,.12));font:700 13px/1.3 var(--vt-serif,Georgia,serif);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.mrow .mday .ct{font-weight:500;letter-spacing:0;text-transform:none}
/* Media › Clips · more videos (operator 2026-10-31): compact rows, linked out to YouTube; no game or player link */
.mrow .mmnote{margin:-2px 0 6px;color:var(--ink-2)}
.mmlg{margin:8px 0 12px}
.mmlg > .st{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.mmlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 14px}
.mmore{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start;min-width:0}
.mmore .mmthumb{display:block;width:96px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--noche)}
.mmore .mmthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mmore .mmbody{min-width:0;display:flex;flex-direction:column;gap:3px}
.mmore .mt{font:600 13.5px/1.3 var(--fb);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.mmore .mt:hover{text-decoration:underline;text-underline-offset:2px}
.mmore .sub a{color:var(--blue);font-weight:700;text-decoration:none;white-space:nowrap}
@media (max-width:420px){.mmlist{grid-template-columns:minmax(0,1fr)}}
.mlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--gap)}
.mcard{border:1px solid var(--line);border-radius:var(--r-2);background:var(--card);overflow:hidden;display:flex;flex-direction:column;min-width:0;box-shadow:var(--sh-1)}
.mcard .mthumb{position:relative;display:block;aspect-ratio:16/9;background:var(--noche);overflow:hidden}
.mcard .mthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.2s var(--e-out)}
.mcard .mthumb:hover img{scale:1.04}
.mcard .mthumb.nothumb{aspect-ratio:16/7;display:grid;place-items:center;background:var(--rule-2)}
.mcard .mthumb.nothumb > :not(.mtag){width:64px;height:64px;object-fit:contain;scale:1}
.mcard .mtag{position:absolute;left:8px;top:8px;padding:4px 7px;border-radius:3px;background:rgb(15 35 64 / .84);color:#F0E2C6;font:700 10px/1 var(--fd);font-stretch:115%;letter-spacing:.1em;text-transform:uppercase}
.mcard .mbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.mcard .mbody > .st{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard .mt{font:600 14px/1.35 var(--fb);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.mcard .mt:hover{text-decoration:underline;text-underline-offset:2px}
.mcard .mfoot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto;padding-top:7px;border-top:1px solid var(--rule-2);font:500 11.5px/1.3 var(--fb)}
.mcard .mfoot > a{font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.mcard .mfoot .sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myguys{margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px} /* C3 */
.myguys[hidden]{display:none}
.myguys .mg-k{font:700 10px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.myguys .org{vertical-align:middle}
.c2-move{border-left:3px solid var(--flam, var(--mar));padding:4px 10px;margin:8px 0;color:var(--ink-2);font-size:13px;line-height:1.45} /* B8: an org change in 2026 */
.c2-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:13.5px}.c2-dl dt{font-weight:700}.c2-dl dd{margin:0}
.c2-tbl{width:100%;table-layout:fixed}.c2-tbl td,.c2-tbl th{font-variant-numeric:tabular-nums}.c2-tbl td.nm{white-space:normal;min-width:0}
.c2-tbl td.nm .pbtn{text-align:left}
.c2-tbl th.c2-rk{width:30px}.c2-tbl .c2-w88{width:92px}.c2-tbl .c2-w64{width:64px}.c2-tbl .c2-w56{width:66px}.c2-tbl .c2-w52{width:52px}.c2-tbl .c2-w44{width:44px}
@media (max-width:599px){.c2-tbl th.c2-rk{width:24px}.c2-tbl td.rank{font-size:13px}.c2-tbl .c2-w88{width:84px}}
.c2-caps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--gap)}
.c2-cap{flex:1 1 150px;border:1px solid var(--rule-2);border-radius:var(--r-2,10px);padding:10px 12px;background:var(--card);min-width:0}
.c2-cap b{display:block;font:760 15px/1.2 var(--fd)}.c2-cap .tg{margin-left:6px}
.c2-mix{width:100%;margin:4px 0 8px}.c2-mix td,.c2-mix th{font-variant-numeric:tabular-nums}
details.c2-more>summary{cursor:pointer;color:var(--mar);font-weight:600;padding:8px 0;list-style-position:inside}
details.c2-pm{border-bottom:1px solid var(--rule-2)}details.c2-pm>summary{cursor:pointer;padding:8px 2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
details.c2-pm>summary::-webkit-details-marker{display:none}details.c2-pm>summary::before{content:"▸";color:var(--ink-3)}details.c2-pm[open]>summary::before{content:"▾"}
.c2-grey{color:var(--ink-3)}
/* Club tools in the vintage look (palette tokens only): red serif kickers, a double rule under the page head,
   newspaper-square controls in ink; the night edition comes from the same tokens */
.club-head{padding-bottom:12px;border-bottom:3px double var(--rule)}
.club-head .kick{color:var(--mar);font-family:var(--vt-serif,var(--fd));font-stretch:normal;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.club-acts .btn,.club-tabs a,.club-filters .chip,.club-filters select,.club-more{border-radius:3px;border-color:var(--rule);background:transparent;color:var(--ink)}
.club-acts .btn:hover,.club-tabs a:hover,.club-filters .chip:hover{border-color:var(--ink);text-decoration:underline;text-decoration-color:var(--mar);text-underline-offset:4px}
.club-tabs a{font-family:var(--vt-serif,var(--fb));font-weight:500;letter-spacing:.04em}
.club-tabs a.on,.club-filters .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);text-decoration:none}
.club-label{border-radius:3px;border-color:var(--ink);background:var(--card)}
.club-orgc{border-radius:3px;border-color:var(--rule)}
.club-orgc:hover{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--mar)}
.wl{border-radius:3px;border-color:var(--rule)}
.cb{border-radius:2px}
.c2-note{border-left-color:var(--mar)}
.c2-sec{color:var(--mar)}

/* ===================== Photo credits (operator 2026-10-21: "make sure the credits for wiki commons are aligned to the left
   at the bottom of the photo and are smaller than what they are now")
   ONE component for every credit on a photo: .wb-credit, carried by the fan bands (.fan-cap), the stadium/park photos
   (.photo-cap), the aerials (.place-fig .credit, on .pf-ph) and the Pride hero (.pr-credit). It sits on the photo's
   bottom-left corner at every width, 9.5 px (9 px on phones), on a tight ink plate (white on rgb(15 35 64 / .8) is
   >= 8:1 over any pixel) and wraps instead of spanning the photo. Text blocks on a photo end --cr-room above the
   bottom edge (two credit lines on desktop, three on phones), so the credit never covers a title, line, button or tile. */
:root { --cr-fs: 9.5px; --cr-room: 42px; --cr-room1: 32px; }
@media (max-width: 599px) { :root { --cr-fs: 9px; --cr-room: 50px; --cr-room1: 30px; } }
body .wb-credit.wb-credit { position: absolute; inset: auto auto 6px 6px; z-index: 5; display: block; order: 0; flex: none; float: none; width: fit-content; max-width: min(calc(100% - 12px), 640px); height: auto; margin: 0; padding: 2px 6px; border-radius: 3px; background: rgb(15 35 64 / .8); color: #fff; font: 500 var(--cr-fs)/1.3 var(--fb); letter-spacing: 0; text-align: left; text-shadow: none; text-transform: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body .wb-credit.wb-credit[hidden] { display: none; }
body .wb-credit.wb-credit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
body .wb-credit.wb-credit a:hover { color: #FFE2B8; }
@media (max-width: 599px) { body .wb-credit.wb-credit { max-width: calc(100% - 12px); } }
/* the room above the credit on every photo that carries text */
body .hero.fans .hero-body, body .hero.photo .hero-body, body .rot.fans .slide, body .card.painted-card.fans, body .l2-ph.fans, body .m-head.fans { padding-bottom: var(--cr-room); }
body .pride .pr-over { bottom: var(--cr-room1); }
/* phones: the hero's side block (day switch, slogan) drops under the text, so it keeps the room instead */
@media (max-width: 560px) { body .hero.fans:has(> .hero-side) .hero-body { padding-bottom: 0; } body .hero.fans > .hero-side { padding-bottom: var(--cr-room); } }
/* V1 m14: every recent game shows its W/L badge; last night's also has the box link (same 5 columns on every row) */
.res { grid-template-columns: 60px minmax(0,1fr) auto 22px 14px; }
.cb.mfa{border-color:var(--ink-3);color:var(--ink-2)}

/* ---------- v6-fix2 (verifier V2 findings, 2026-10-21) ---------- */
/* a. Today rotator: slides that are not showing sit ABOVE their place (never below), so an outgoing slide's buttons
      can't dip under the photo credit during the crossfade; on phones the text block keeps >= 8 px clear of a
      three-line credit */
body .rot.fans .slide:not(.on) { translate: 0 calc(-1 * var(--m-dist, 12px)); }
@media (max-width: 599px) { body .rot.fans .slide { padding-bottom: calc(var(--cr-room) + 10px); } }
/* b. season calendar (Serie del Caribe card): the photo gets its own visible strip at the foot of the card and the
      credit sits on that strip's bottom-left corner (not on the faded paper) */
body .card.painted-card.fans[data-banner="serie-del-caribe"] { background-image: none !important; background-color: var(--card); overflow: hidden; padding-bottom: 0; }
body .card.painted-card.fans[data-banner="serie-del-caribe"]::after { content: ""; display: block; height: 150px; margin: 14px -16px 0; background: var(--fan-bg) center 55% / cover no-repeat; }
@media (max-width: 599px) { body .card.painted-card.fans[data-banner="serie-del-caribe"]::after { height: 120px; } }
/* d. 320-px phones: the photo heroes are shorter so the page heading or the first card starts on the first screen */
@media (max-width: 360px) {
  body .hero.fans.short { --hh: 214px; }
  body .hero.fans .hero-t { font-size: 26px; }
  body .hero.fans .hero-s, body .hero.fans .hero-s .hx { font-size: 12.5px; line-height: 1.42; }
  body .hero.fans .hero-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  body .hero.fans .hero-acts .btn { margin: 0; padding: 5px 10px; }
}
/* e. a park with no free-licence photo: a small paper card (engraved ballpark vignette + one short line), not an empty ink panel */
body .park .scene-wrap:has(> .np-t), body .tpark .ph.none { aspect-ratio: auto !important; height: auto; min-height: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card-2, #F0E2C6); border: 1px dashed color-mix(in srgb, var(--ink, #0F2340) 35%, transparent); border-radius: var(--r-2, 8px); box-shadow: none; }
body .park .scene-wrap:has(> .np-t)::before, body .park .scene-wrap:has(> .np-t)::after, body .tpark .ph.none::after { display: none; }
body .park .scene-wrap .np-ic, body .tpark .ph.none .np-ic { position: static; inset: auto; flex: none; width: 70px; height: auto; aspect-ratio: auto; object-fit: contain; opacity: .9; transform: none; filter: none; }
body .park .scene-wrap .np-t, body .tpark .ph.none span { position: static; flex: 1 1 auto; min-width: 0; color: var(--ink-2, #33425A); font: italic 500 12.5px/1.35 var(--fb); letter-spacing: 0; text-transform: none; text-align: left; padding: 0; background: none; }
/* i. Prospects board on phones: a long name wraps and the Top 100 chip stays inside the Player column */
@media (max-width: 599px) { .l2-t td.stick2 .l2-who .l2-pname { white-space: normal; overflow-wrap: anywhere; } .l2-t td.stick2 .l2-who > div { max-width: 100%; } .l2-t td.stick2 .l2-who .t100c { white-space: nowrap; } }
/* compact bar, narrow desktops: the last section ("How we calculate" / "Cómo lo calculamos") was cut off under the
   display controls; no letter-spacing and tighter padding keep all nine sections readable (ES runs ~10% longer) */
@media (min-width: 1100px) {
  body .topbar .mainnav a { letter-spacing: 0; padding: 0 4px; }
  html[lang="es"] body .topbar .mainnav a { padding: 0 3px; }
}
@media (min-width: 1100px) and (max-width: 1365px) { body .topbar .mainnav a { font-size: 12px; } html[lang="es"] body .topbar .mainnav a { font-size: 11px; } }
@media (min-width: 1366px) and (max-width: 1699px) { html[lang="es"] body .topbar .mainnav a { font-size: 12.5px; } }
@media (min-width: 1100px) and (max-width: 1279px) { body .topbar .mainnav a { font-size: 10.5px; padding: 0 3px; } html[lang="es"] body .topbar .mainnav a { font-size: 10px; padding: 0 2px; } }
@media (min-width: 1600px) { body .topbar .mainnav a { font-size: 11.5px; letter-spacing: 0; padding: 0 4px; } html[lang="es"] body .topbar .mainnav a { font-size: 10.5px; padding: 0 3px; } }
/* compact bar (masthead scrolled away), 981-1099 px: nine sections can't fit beside the controls, so the compact bar
   collapses to the phone-style section menu (as below 981 px). At the top of the page the newspaper nav row under the
   masthead keeps its full row. (Coordinator ruling 2026-10-21.) */
@media (min-width: 981px) and (max-width: 1099px) {
  html.mh-stuck .topbar .tb-in { display: flex; height: 56px; padding: 0 var(--gutter); gap: 8px; grid-template-areas: none; position: relative; }
  html.mh-stuck .topbar .brand { flex: none; margin-right: auto; }
  html.mh-stuck .topbar .tb-tools { order: 3; flex: none; }
  html.mh-stuck .topbar .menubtn { order: 2; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); color: var(--ink); font: 650 13.5px/1 var(--fb); cursor: pointer; margin: 0; flex: none; max-width: 46vw; }
  html.mh-stuck .topbar .menubtn #menulabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.mh-stuck .topbar .menubtn .chev { font-size: 11px; color: var(--ink-3); transition: rotate var(--d-2); }
  html.mh-stuck .topbar .menubtn[aria-expanded="true"] .chev { rotate: 180deg; }
  html.mh-stuck .topbar .navpanel { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70; border-bottom: 1px solid var(--vt-ink, var(--line)); box-shadow: var(--sh-lift); padding: 6px 0 12px; max-height: calc(100vh - 56px); overflow-y: auto; }
  html.mh-stuck .topbar .navpanel.open { display: block; }
  html.mh-stuck .topbar .navpanel .mainnav { display: flex !important; position: static; flex-direction: column; align-items: stretch; height: auto; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  html.mh-stuck .topbar .navpanel .mainnav a { min-height: 44px; display: flex; align-items: center; padding: 10px var(--gutter); font: 500 15px/1.25 var(--vt-serif); letter-spacing: .08em; height: auto; box-shadow: none; }
  html.mh-stuck .topbar .navpanel .mainnav a.on::after { display: none; }
  html.mh-stuck .topbar .tb-set { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px var(--gutter) 0; margin-top: 6px; border-top: 1px solid rgb(20 33 61 / .25); }
  html.mh-stuck .topbar .tb-set .nerd .nerd-l { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  html.mh-stuck .topbar .tb-set .seg.lang { display: inline-grid; }
  html.mh-stuck .topbar .dialpop { left: 0; right: auto; }
}
/* compact bar at 1700 px and up: the "Nerd stats" words go screen-reader-only (as below 1700) so all nine sections fit */
@media (min-width: 1700px) { html.mh-stuck .topbar .nerd { position: relative; } html.mh-stuck .topbar .nerd .nerd-l { display: inline; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
/* last pixels: ES at 981-1099 (top row), ES at 1100-1279 (compact) and EN at 1600+ (compact) */
@media (min-width: 981px) and (max-width: 1099px) { html[lang="es"] body .topbar .mainnav a { font-size: 10.5px; padding: 0 3px; } }
@media (min-width: 1100px) and (max-width: 1279px) { html[lang="es"] body .topbar .mainnav a { padding: 0 1.5px; } }
@media (min-width: 1600px) { body .topbar .mainnav a { padding: 0 3px; } html[lang="es"] body .topbar .mainnav a { padding: 0 2.5px; } }
/* V1 2026-10-22: a league's not-final / not-played count on its strip tile, shown on every width */
.ls-item .st3.inprog { background: rgb(190 42 50 / .3); color: #FFD9D9; display: inline-block; }
.ls-item .st3.np { background: rgb(255 255 255 / .08); color: #fff; display: inline-block; }
.ls-item .st3 + .st3 { margin-left: 4px; }
/* Prospects on phones (<= 430 px): the hero is only as tall as its title, line and credit, so the view tabs and the
   filter row start on the first screen (320: tabs; 375-430: tabs + filters) */
@media (max-width: 430px) {
  body .hero.fans.short[data-banner="prospects"] { --hh: 0px; min-height: 0; }
  body .hero.fans.short[data-banner="prospects"] .hero-body { padding-top: 14px; }
  body .hero.fans.short[data-banner="prospects"] .hero-t { font-size: 26px; margin-bottom: 4px; }
  body .hero.fans.short[data-banner="prospects"] .hero-s, body .hero.fans.short[data-banner="prospects"] .hero-s .hx { font-size: 12.5px; line-height: 1.42; }
}
/* V2 2026-10-22: on a partial night the league chips carry counts ("All leagues (5 finals · 5 in progress · 1 not played)");
   on narrow phones a long chip wraps inside the chip bar instead of widening the page */
@media (max-width: 430px) { .chipbar .chip { white-space: normal; height: auto; min-height: 30px; max-width: 100%; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; text-align: left; } .chipbar .chip .ct { line-height: 1.25; } }
/* V2 2026-10-22: on narrow phones a card title and its link ("Juegos de anoche" + "Todos los box scores →") stack
   instead of cutting the title */
@media (max-width: 360px) { .card-head { flex-wrap: wrap; row-gap: 4px; } .card-head h2, .card-head h3 { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; } }
/* operator 2026-10-22 ("when i open the box scores in a computer, they are flushed for mobile"): the box list is a
   3-column masonry, so an opened box stayed one 460-px column wide. On desktop an opened box spans the whole row:
   photo, line score, weather and the game line across the top, then the game WAR and org lists in two columns */
@media (min-width: 900px) {
  .boxes > details.acc[open] { column-span: all; }
  .boxes > details.acc[open] > .acc-b { columns: 2 340px; column-gap: 28px; }
  .boxes > details.acc[open] > .acc-b > :is(.photo-band, .tw, .wxrow, .wxattr, .sub, .badge, .notrack) { column-span: all; }
  .boxes > details.acc[open] > .acc-b > .photo-band { height: 220px; }
  .boxes > details.acc[open] > .acc-b > .tw { max-width: 720px; }
  .boxes > details.acc[open] > .acc-b > :is(.row2, .box-sec) { break-inside: avoid; }
  .boxes > details.acc[open] > .acc-b > .box-sec { break-after: avoid; }
}
/* operator 2026-10-22: a game with no final score gets its own strip tile; its status sits under it, like "Final" */
.ls-tile.nf .row .r { opacity: .55; }
.ls-tile.nf .meta span { color: #F2C38A; }
/* operator 2026-10-22: the score strip is two rows (LIDOM + LVBP, then LMP + LBPRC) with no sideways scroll; on narrow
   screens the tiles of a row wrap onto more lines */
body .lgstrip .ls-in { display: block; height: auto; overflow: visible; padding-top: 4px; padding-bottom: 7px; }
body .lgstrip .ls-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; min-height: 58px; padding: 3px 0; }
body .lgstrip .ls-row + .ls-row { border-top: 1px solid rgb(255 255 255 / .09); }
body .lgstrip .ls-row > .ls-item:first-child { margin-left: 0; }
#lgstrip-wrap { min-height: 140px; }
@media (max-width: 599px) { #lgstrip-wrap { min-height: 112px; } body .lgstrip .ls-row { min-height: 46px; } body .lgstrip .ls-tile { width: calc((100% - 8px) / 3); min-width: 0; } }
@media (max-width: 599px) { body .lgstrip .ls-tile .meta { display: flex; margin-top: 3px; font-size: 8.5px; letter-spacing: .1em; } body .lgstrip .ls-tile .meta span + span { display: none; } }
/* About (operator 2026-10-22): one newspaper column in the vintage serif, the photo set into the column, a drop cap */
.about { max-width: 680px; margin: 0 auto var(--gap); font: 400 18px/1.62 var(--vt-serif, Georgia, serif); color: var(--ink); }
.about p { margin: 0 0 1em; }
.about p.lede { font-size: 21px; line-height: 1.5; }
/* operator 2026-10-22, option B: a raised initial (sits on the first line's baseline and rises above it; the text keeps its left edge) + the whole opening sentence in spaced small caps (operator: caps "all the way through the word newspaper") */
.about p.lede { padding-top: 28px; }
.about p.lede::first-letter { float: none; margin: 0 .02em 0 0; font: 600 88px/0 var(--vt-serif, Georgia, serif); color: var(--mar, #9A0F16); letter-spacing: 0; }
.about p.lede { font-variant-caps: all-small-caps; letter-spacing: .06em; }   /* the whole opening sentence */
.about p.lede::first-letter { font-variant-caps: normal; }
@media (max-width: 599px) { .about p.lede::first-letter { font-size: 72px; } }
.about-ph { float: right; width: 220px; margin: 4px 0 14px 22px; shape-outside: circle(50%); }
.about-ph img { display: block; width: 100%; height: auto; border-radius: 50%; }
.about p:nth-last-child(2) { margin-top: 1.4em; font-size: 20px; }
.about p.about-sig { margin: 1.2em 0 0; font: italic 500 24px/1.2 var(--vt-serif, Georgia, serif); color: var(--mar, #9A0F16); letter-spacing: .01em; }
@media (max-width: 599px) { .about { font-size: 17px; } .about p.lede { font-size: 19px; } .about-ph { width: 150px; margin: 2px 0 10px 14px; } }
/* operator 2026-10-22: every fan photo band rotates; the next photo fades in over the current one */
img.fan-img.fan-next { opacity: 0; transition: opacity .9s var(--e-std, ease); }
img.fan-img.fan-next.in { opacity: 1; }
:root[data-motion="calm"] img.fan-img.fan-next { transition-duration: 1.4s; }
/* team pages: the fans lead the page, a tall rotating crowd band above the team header */
.fan-band.team-lead { height: 380px; margin: 0 0 var(--gap); }
@media (max-width: 980px) { .fan-band.team-lead { height: 300px; } }
@media (max-width: 599px) { .fan-band.team-lead { height: 230px; } }
/* V1 2026-10-22: ▶ Watch wherever a game with a clip is named (watch.js); white on #BE2A32 = 6.2:1 on every theme */
.wbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; min-height: 28px; padding: 0 10px; border: 0; border-radius: 999px;
  background: #BE2A32; color: #fff; font: 800 11px/1 var(--fb); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; flex: none; text-decoration: none; }
.wbtn .wi { font-size: 10px; line-height: 1; }
.wbtn:hover { background: #9E1F27; }
.wbtn:focus-visible { outline: 2px solid var(--mango); outline-offset: 2px; }
.wbtn.wrow { padding: 0; width: 28px; }
.lr:has(> .wrow) { grid-template-columns: 18px 32px minmax(0,1fr) auto auto; }
.lr.nr:has(> .wrow) { grid-template-columns: 32px minmax(0,1fr) auto auto; }
.story-w { position: relative; display: grid; min-height: 0; }
.story-w > .story { min-height: 0; height: 100%; }
.wbtn.wstory { position: absolute; right: 8px; bottom: 8px; z-index: 2; box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.ls-wv { position: relative; flex: none; display: flex; }
.ls-wv + .ls-item { margin-left: 10px; }
.wbtn.wtile { position: absolute; right: 6px; bottom: 4px; min-width: 24px; min-height: 24px; width: 24px; padding: 0; font-size: 9px; }
.wbtn.winl { min-height: 24px; padding: 0 8px; vertical-align: middle; font-size: 10px; }
.wbtn.wbox { margin-top: 6px; }
.gc .gf > .wbtn.wcard { display: flex; align-items: center; justify-content: center; gap: 5px; background: #BE2A32; color: #fff; font: 800 11px/1 var(--fb); letter-spacing: .04em; text-transform: uppercase; border-radius: 0; }
.gc .gf > .wbtn.wcard:hover { background: #9E1F27; }
.btn.wnight { gap: 6px; }
/* the viewer's up-next countdown */
.mv-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; font: 600 12px/1.3 var(--fb); color: #fff; position: relative; padding-bottom: 4px; }
.mv-next .mv-nt { opacity: .8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.mv-next button { min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .5); background: transparent; color: #fff; font: 700 12px/1 var(--fb); cursor: pointer; }
.mv-next .mv-go { background: #BE2A32; border-color: #BE2A32; }
.mv-next .mv-bar2 { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / .2); }
.mv-next[data-anim="full"] .mv-bar2::after { content: ""; position: absolute; inset: 0; background: var(--mango); transform-origin: left; animation: mvcd var(--cd) linear forwards; }
@keyframes mvcd { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wbtn.wres, .wbtn.wlog { width: 24px; min-width: 24px; min-height: 24px; padding: 0; font-size: 9px; vertical-align: middle; }
.res:has(> .wres) { grid-template-columns: 60px minmax(0,1fr) auto 22px 24px; }
/* postponed / not-played games: dimmed by colour, not opacity, so the names keep AA (4.5:1) and the "–" stays readable */
body .gl.np .tm3, body .row2.np .tm, body .gc.np .tr { opacity: 1; color: var(--ink-2); }
body .gc.np .tr .r, body .gc.np .tr .score { color: var(--ink-2); }
/* the page area keeps a screen's height while a page (e.g. a team page) fills in, so the footer never flashes up and
   jumps down (CLS 0.12-0.20 on cold team-page loads at 1024-1440) */
main#main { min-height: 100vh; }
/* operator 2026-10-22 ("make sure this spacing is neat on mobile"):
   1. score strip: on phones each league starts its own line (LVBP no longer trails LIDOM's games) */
.lgstrip .ls-br { display: none; }
@media (max-width: 599px) { .lgstrip .ls-br { display: block; flex-basis: 100%; height: 0; margin: 2px 0; } }
/* 2. Today's story rotator on phones: the kicker on its own line, the headline and the line under it each one neat
      plate with the same left edge (no per-line ragged boxes); the outgoing story fades out before the next one comes in */
@media (max-width: 599px) {
  body .rot.fans .slide .hero-k { display: table; margin: 0 0 8px; }
  body .rot.fans .slide h2 { display: block; width: fit-content; max-width: 100%; margin: 0; padding: 6px 10px 7px; line-height: 1.02; border-radius: 4px; background: rgb(15 35 64 / .82); -webkit-box-decoration-break: slice; box-decoration-break: slice; }
  body .rot.fans .slide h2::after { content: none; }
  body .rot.fans .slide p { display: block; width: fit-content; max-width: 100%; margin: 8px 0 0; padding: 6px 10px; line-height: 1.42; border-radius: 4px; background: rgb(15 35 64 / .82); -webkit-box-decoration-break: slice; box-decoration-break: slice; }
  body .rot.fans .slide .hero-acts { margin-top: 12px; }
}
body .rot .slide:not(.on) { transition-duration: 160ms, 160ms; }
body .rot .slide.on { transition-delay: 140ms; }
/* the Watch label (was class "wl", which the Workload cards also use: it drew a bordered card around "WATCH") */
.wbtn .wlab { display: inline; }
/* the Watch button among the rotator's buttons looks like its neighbours (white, sentence case) */
.wbtn.btn.white.whero { height: 36px; min-height: 36px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid #fff; background: #fff; color: var(--navy, #0F2340); font: 700 13px/1 var(--fb); letter-spacing: 0; text-transform: none; }
.wbtn.btn.white.whero:hover { background: #F0E2C6; }
.wbtn.btn.white.whero .wi { color: var(--mar, #9A0F16); font-size: 11px; }
/* phones: a story card's text ends above its ▶ Watch button, never under it */
@media (max-width: 599px) { .story-w:has(> .wbtn.wstory) > .story { padding-bottom: 46px; } }

/* team page: top performers under Next up (operator 2026-10-23) */
.tperf { margin-top: 14px; }
.tperf .tp-h { font: var(--fdw) 17px/1.1 var(--fd); font-stretch: 84%; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.tperf .tp-h span { font: 500 12px/1 var(--fb); color: var(--ink-3, var(--ink-2)); }
.tperf .tp-k { font: 700 10.5px/1 var(--fd); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); margin: 12px 0 2px; }
.tperf .tp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 4px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tperf .tp-row:last-child { border-bottom: 0; }
.tperf .tp-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tperf .tp-who .sub { font-size: 11.5px; color: var(--ink-3, var(--ink-2)); }
.tperf .tp-line { font: 500 12.5px/1.3 var(--fb); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.tperf .tp-war { text-align: right; }
@media (max-width: 560px) { .tperf .tp-row { grid-template-columns: minmax(0, 1fr) 48px; } .tperf .tp-line { grid-column: 1; grid-row: 2; text-align: left; } .tperf .tp-war { grid-row: 1 / span 2; grid-column: 2; } }

/* team page: club story band under the hero (operator 2026-10-23) */
.club-story { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 28px; align-items: center; margin-top: var(--gap); padding: 16px 22px; border-radius: var(--r-3); background: var(--card); border: 1px solid var(--line); }
.club-story .cs-facts { display: flex; gap: 0; }
.club-story .cs-f { padding: 2px 20px; border-left: 1px solid var(--line); min-width: 96px; }
.club-story .cs-f:first-child { border-left: 0; padding-left: 0; }
.club-story .cs-f .k { font: 700 10.5px/1 var(--fd); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); }
.club-story .cs-f .v { font: var(--fdw) 30px/1.05 var(--fd); font-stretch: 96%; color: var(--ink); margin-top: 5px; font-variant-numeric: tabular-nums; }
.club-story .cs-f .x { font: 500 11px/1.3 var(--fb); color: var(--ink-3, var(--ink-2)); margin-top: 3px; max-width: 170px; }
.club-story .cs-body p { margin: 0; font: 500 14.5px/1.5 var(--fb); color: var(--ink-2); max-width: 78ch; }
.club-story .cs-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.club-story .cs-l { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font: 600 12.5px/1 var(--fb); color: var(--ink); text-decoration: none; background: var(--card-2, transparent); }
.club-story .cs-l:hover, .club-story .cs-l:focus-visible { border-color: var(--ink); }
/* C15: the full title list behind a tap (page-team.js clubStory) */
.club-story .cs-all summary { list-style: none; cursor: pointer; }
.club-story .cs-all summary::-webkit-details-marker { display: none; }
.club-story .cs-all .cs-more { color: var(--mar, var(--ink)); font-weight: 700; white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 3px; }
.club-story .cs-all .cs-more::after { content: " ▾"; }
.club-story .cs-all[open] .cs-last { display: none; }
.club-story .cs-all[open] .cs-more::after { content: " ▴"; }
.club-story .cs-all .cs-yrs { margin-top: 4px; font-variant-numeric: tabular-nums; }
.club-story .cs-all .cs-yrs span { white-space: nowrap; }
.club-story .cs-all .cs-yrs span:not(:last-child)::after { content: " ·"; }
@media (max-width: 760px) { .club-story { grid-template-columns: 1fr; padding: 14px 16px; } .club-story .cs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .club-story .cs-f { padding: 2px 10px; min-width: 0; } .club-story .cs-f .k { font-size: 9.5px; letter-spacing: .1em; } .club-story .cs-f .v { font-size: 24px; } .club-story .cs-f .x { font-size: 10.5px; } }

/* A12 (fan review 2026-10-23): on phones a long story pushed its "THE NIGHT" kicker up under the progress bars. The
   slides now share one grid cell, so the box grows to the tallest story and every story starts below the bars. */
@media (max-width: 599px) {
  .rot { display: grid; }
  .rot .slide { position: relative; inset: auto; grid-area: 1 / 1; align-self: end; padding-top: 40px; }
}

/* B5 (fan review 2026-10-23): phones show the sections in the top bar (left of the menu and search buttons) while the
   masthead is on screen; once the bar is stuck it carries the logo, the menu and search as before */
.phsec { display: none; }
@media (max-width: 600px) {
  html:not(.mh-stuck) .topbar .brand { display: none; }
  html:not(.mh-stuck) .topbar .phsec { display: flex; flex: 1 1 auto; min-width: 0; order: -1; align-self: stretch; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .topbar .phsec::-webkit-scrollbar { display: none; }
  .topbar .phsec a { flex: none; position: relative; display: flex; align-items: center; height: 44px; padding: 0 8px; color: var(--vt-ink, var(--ink)); text-decoration: none; white-space: nowrap;
    font: 500 12px/1 var(--vt-serif, var(--fb)); letter-spacing: .06em; text-transform: uppercase; }
  .topbar .phsec a.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 2px; background: var(--vt-red, var(--mar)); }
  .topbar .phsec a.disc .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vt-red, var(--mar)); margin-right: 5px; }
  .topbar .phsec a:focus-visible { outline: 2px solid var(--vt-red); outline-offset: -3px; }
  /* with the sections on show, the menu button is a compact ☰ (its label stays for screen readers) */
  html:not(.mh-stuck) .topbar .menubtn { flex: none; width: 44px; justify-content: center; padding: 0; }
  html:not(.mh-stuck) .topbar .menubtn #menulabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(.mh-stuck) .topbar .menubtn .chev { display: none; }
  html:not(.mh-stuck) .topbar .menubtn::before { content: "\2630"; font: 400 20px/1 var(--fb); color: var(--vt-ink, var(--ink)); }
}

/* team page: three shots of the park, a main photo and its thumbnails (operator 2026-10-23) */
.tset .ts-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 0; }
.tset .ts-th { position: relative; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; aspect-ratio: 16/10; background: var(--noche); cursor: pointer; }
.tset .ts-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.tset .ts-th.on { border-color: var(--ink); } .tset .ts-th.on img, .tset .ts-th:hover img { opacity: 1; }
.tset .ts-cap { font-weight: 600; color: var(--ink); }
.tset .ts-cr { font-size: 12px; color: var(--ink-3, var(--ink-2)); padding-top: 0; }

/* team page: the club's history carousel at the top of the right column (operator 2026-10-23) */
.thist { margin: 0; border-radius: var(--r-2); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.thist .ph { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--noche); }
.thist .th-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.thist .th-yr { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 3px 8px; border-radius: 3px; background: rgb(15 35 64 / .82); color: #F0E2C6; font: 700 13px/1 var(--fd); font-stretch: 108%; letter-spacing: .04em; }
.thist .th-nav { position: absolute; top: 50%; z-index: 4; translate: 0 -50%; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgb(240 226 198 / .5); background: rgb(11 22 34 / .7); color: #F0E2C6; font: 700 18px/1 var(--fb); cursor: pointer; }
.thist .th-nav.prev { left: 8px; } .thist .th-nav.next { right: 8px; }
.thist .th-n { position: absolute; top: 10px; right: 10px; z-index: 4; padding: 3px 7px; border-radius: 3px; background: rgb(11 22 34 / .7); color: #F0E2C6; font: 600 11px/1 var(--fb); }
.thist figcaption { display: flex; flex-direction: column; gap: 3px; }
.thist .th-k { font: 700 10.5px/1 var(--fd); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, var(--ink-2)); }
.thist .th-cap { font: 600 14px/1.4 var(--fb); color: var(--ink); }
.thist .th-img.small { object-fit: contain; filter: none; }

/* ---------- New to winter ball: the live map (operator 2026-10-29: hover a country and it lights up; hover a stadium and
   a small card with its photo pops up). Markup: app.js liveMap() / parkCard(); behaviour: app.js mapBehaviour(). ---------- */
.wbmap-wrap { min-width: 0; }
.wbm-dek { margin: 0 0 10px; }
.wbm-dek span { display: block; font: 500 14px/1.45 var(--fb); color: var(--ink-2); }
.wbm-dek span + span { color: var(--ink-3); font-size: 13px; }
.wbmap { position: relative; }
.wbmap .map { touch-action: manipulation; }
body .wbmap .map .land.cty { cursor: pointer; transition: fill .18s ease; }
body .wbmap .map .land.cty.lit { fill: color-mix(in srgb, var(--lc) 42%, #F5EBD3); stroke: var(--lc); stroke-width: 1.6; }
:root[data-theme="dark"] body .wbmap .map .land.cty.lit { fill: color-mix(in srgb, var(--lc) 45%, #1A2A3A); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .wbmap .map .land.cty.lit { fill: color-mix(in srgb, var(--lc) 45%, #1A2A3A); } }
.wbmap .map .lbl.sea { font-style: italic; font-weight: 500; opacity: .6; }
.wbmap .map .lbl[data-cty] { cursor: pointer; transition: fill .18s ease; }
.wbmap .map .lbl.lit { fill: var(--lc); font-size: 13px; }
:root[data-theme="dark"] .wbmap .map .lbl { fill: #F0E2C6; stroke: #0B1622; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wbmap .map .lbl { fill: #F0E2C6; stroke: #0B1622; } }
:root[data-theme="dark"] .wbmap .map .lbl.lit { fill: var(--lc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wbmap .map .lbl.lit { fill: var(--lc); } }
.wbm-pk { cursor: pointer; outline: none; }
.wbm-pk .hit { fill: transparent; pointer-events: all; }
.wbm-pk .dot { fill: var(--lc); stroke: #F5EBD3; stroke-width: 2; transition: r .15s ease; pointer-events: none; }
.wbm-pk:hover .dot, .wbm-pk:focus-visible .dot, .wbm-pk.on .dot { r: 8; }
.wbm-pk:focus-visible .dot { stroke: var(--ink); stroke-width: 3; }
.wbm-pk.lit .dot { stroke: #fff; }
.wbm-cty { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 5px 9px; border-radius: 4px; border-left: 4px solid var(--lc, var(--ink)); background: var(--card); box-shadow: var(--sh-1); font: 500 12.5px/1.35 var(--fb); color: var(--ink-2); pointer-events: none; }
.wbm-cty b { color: var(--ink); }
.wbm-cty .lg { pointer-events: none; }
.wbm-leg { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.wbm-leg button, .wbm-chip { font: 600 12px/1.2 var(--fb); color: var(--ink); background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; cursor: pointer; min-height: 30px; }
.wbm-leg button i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--lc); margin-right: 6px; vertical-align: 0; }
.wbm-leg button.lit, .wbm-leg button:hover, .wbm-leg button:focus-visible { border-color: var(--lc); box-shadow: inset 0 0 0 1px var(--lc); }
.wbm-idx { display: grid; gap: 10px; margin-top: 12px; border-top: 1px solid var(--rule-2); padding-top: 10px; }
.wbm-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.wbm-rh { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; padding-top: 5px; }
.wbm-rh .sub { display: inline; }
.wbm-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.wbm-chip { font-weight: 500; font-size: 12px; padding: 4px 9px; min-height: 28px; border-left: 3px solid var(--lc); border-radius: 4px; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.wbm-chip:hover, .wbm-chip:focus-visible, .wbm-chip.on { border-color: var(--lc); background: var(--card); }
@media (max-width: 599px) { .wbm-row { grid-template-columns: minmax(0, 1fr); } .wbm-rh { padding-top: 0; } }
.wbm-card { position: fixed; z-index: 90; width: 280px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2, 8px); box-shadow: var(--sh-lift); overflow: hidden; color: var(--ink); }
.wbm-card[hidden] { display: none; }
.wbm-card .wbm-ph { position: relative; aspect-ratio: 16 / 9; background: var(--card-2); }
.wbm-card .wbm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wbm-card .wbm-ph .wb-credit { --cr-fs: 9.5px; }
.wbm-card .wbm-b { padding: 9px 12px 11px; display: grid; gap: 4px; }
.wbm-card .wbm-k { display: flex; gap: 6px; align-items: center; font: 600 11px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.wbm-card .wbm-n { font: var(--fdw, 740) 19px/1.1 var(--fd); font-stretch: 72%; color: var(--ink); }
.wbm-card .wbm-t { display: flex; flex-direction: column; gap: 3px; font: 500 13px/1.3 var(--fb); }
.wbm-card .wbm-t .tm { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.wbm-card .sub { font-size: 12px; color: var(--ink-3); }
.nw .wbm-src, .nw .wbm-off { font-size: 12px; white-space: nowrap; }
.nw .wbm-off { display: block; margin-top: 6px; white-space: normal; }
@media (max-width: 599px) {
  .wbm-cty { position: static; display: block; margin-top: 6px; max-width: none; box-shadow: none; border: 1px solid var(--line); border-left-width: 4px; }
  .wbm-pk .dot { r: 7; } .wbm-pk .hit { r: 14; } .wbm-pk:hover .dot, .wbm-pk.on .dot { r: 10; }
  .wbmap .map .lbl { font-size: 15px; }
}
.wbm-cty[hidden] { display: none !important; }

/* ===== Team page photo refresh (2026-10-31, operator: "credit where needed, and deploy"; reference design
   photo-refresh-1031/mock/mock.css). ONE header: the club's crowd photo, else its own park, else the tinted panel; the team
   colour is the scrim; the rankings sit on glass chips; the credit is the shared .wb-credit on the photo's bottom-left
   corner, with --cr-room kept free above it. The photo and the scrim are the same in both themes; only the cards change. */
.flood.phero.has-ph { min-height: clamp(300px, 34vw, 460px); align-items: flex-end; background: var(--noche); }
.flood.phero.has-ph > .fan-scrim { display: none; }
.flood.phero.has-ph::before { opacity: 1; background: linear-gradient(90deg, color-mix(in oklab, var(--team) 78%, #05080c) 0%, color-mix(in oklab, var(--team) 45%, transparent) 34%, transparent 62%), linear-gradient(0deg, rgb(5 8 12 / .82) 0%, rgb(5 8 12 / .25) 38%, transparent 60%) !important; }
.flood.phero.has-ph .in { padding: 28px 30px var(--cr-room); align-items: flex-end; }
.flood.phero.has-ph h1 { text-shadow: 0 2px 18px rgb(0 0 0 / .45); }
.flood.phero.has-ph .ord { min-width: 104px; padding: 9px 12px; margin-left: 8px; border: 1px solid rgb(255 255 255 / .14); border-radius: 8px; background: rgb(5 8 12 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.flood.phero.has-ph .ord:first-child { border-left: 1px solid rgb(255 255 255 / .14); margin-left: 0; }
.flood.phero .hp-row { margin-top: 10px; }
.flood.phero .hpark { font: 600 12px/1 var(--fb); color: #fff; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); padding: 6px 9px; border-radius: 999px; cursor: pointer; }
.flood.phero .hpark:hover, .flood.phero .hpark:focus-visible { background: rgb(255 255 255 / .24); }
@media (max-width: 760px) {
  .flood.phero.has-ph { min-height: 430px; }
  .flood.phero.has-ph::before { background: linear-gradient(0deg, color-mix(in oklab, var(--team) 55%, #05080c) 0%, rgb(5 8 12 / .55) 42%, transparent 68%) !important; }
  .flood.phero.has-ph .in { padding: 16px 16px var(--cr-room); gap: 12px; }
  .flood.phero .ords { margin-left: 0; width: 100%; gap: 6px; }
  .flood.phero.has-ph .ord { flex: 1; min-width: 0; padding: 7px 6px; margin-left: 0; }
  .flood.phero.has-ph .ord .r { font-size: 24px; }
}
/* the ballpark card, right under the club story (second on a phone, after the header) */
.pcard { margin-top: var(--gap); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--card); overflow: hidden; box-shadow: var(--sh-1); scroll-margin-top: 80px; }
.pcard.solo { grid-template-columns: minmax(0, 1fr); }
.pc-gal { position: relative; min-width: 0; background: #05080c; }
.pc-main { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pc-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; background: #05080c; }
.pc-thumbs button { position: relative; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #111; aspect-ratio: 16 / 9; min-width: 0; }
.pc-thumbs button.on { border-color: #E8A33A; }
.pc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-thumbs span { position: absolute; left: 5px; bottom: 5px; font: 700 9.5px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgb(5 8 12 / .7); padding: 3px 5px; border-radius: 3px; }
.pc-gal.nopic { display: grid; place-items: center; align-content: center; text-align: center; color: #d9cdb3; padding: 28px 20px; min-height: 260px; background: radial-gradient(circle at 50% 120%, #1a3326 0 38%, transparent 38.2%), #0b1622; }
.pc-gal.nopic svg { width: 180px; max-width: 60%; height: auto; opacity: .85; }
.pc-gal.nopic p { margin: 10px 0 0; font: 500 13px/1.4 var(--fb); max-width: 38ch; }
.pc-info { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pc-info .eyebrow { font: 700 11px/1 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--flam, #9B1C1F); }
.pc-info h2 { margin: 0; font: 800 34px/1 var(--fd); font-stretch: 78%; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.pc-info .city { margin: -4px 0 0; color: var(--ink-2); font: 500 14px/1.3 var(--fb); }
.pc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pc-f { padding: 10px 0 9px; border-bottom: 1px solid var(--line); min-width: 0; }
.pc-f:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--line); }
.pc-f:nth-child(even) { padding-left: 14px; }
.pc-f .k { font: 700 10px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pc-f .v { font: 800 25px/1.15 var(--fd); font-stretch: 85%; color: var(--ink); overflow-wrap: anywhere; }
.pc-f .v a { color: inherit; }
.pc-f .v.sm { font: 700 16px/1.25 var(--fb); padding-top: 4px; }
.pc-f .s a { text-decoration: underline; text-underline-offset: 2px; }
.pc-f .s { font: 400 11px/1.3 var(--fb); color: var(--ink-3); }
.pc-f .s a { color: var(--ink-3); }
.pc-cap, .pc-note { margin: 0; font: 400 14px/1.45 var(--fb); color: var(--ink-2); }
.pc-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.pc-links .pill { font: 600 12.5px/1 var(--fb); color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: var(--card-2); padding: 7px 10px; border-radius: 999px; }
.pc-links .pill:hover { border-color: var(--ink-3); }
@media (max-width: 760px) {
  .pcard { grid-template-columns: minmax(0, 1fr); }
  .pc-main { aspect-ratio: 4 / 3; }
  .pc-thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .pc-thumbs button { scroll-snap-align: start; }
  .pc-info { padding: 16px; }
  .pc-info h2 { font-size: 28px; }
}
/* "Photos on this page" */
.pcredits { margin-top: 28px; border-top: 3px double var(--ink); padding-top: 10px; }
.pcredits h3 { margin: 0 0 6px; font: 700 12px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pcredits ol { margin: 0; padding-left: 18px; columns: 2 360px; column-gap: 28px; font: 400 12.5px/1.5 var(--fb); color: var(--ink-2); }
.pcredits li { break-inside: avoid; margin-bottom: 3px; overflow-wrap: anywhere; }
.pcredits a { color: var(--ink); }
@media (min-width: 761px) { .pcard.solo .pc-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .pcard.solo .pc-f { padding: 10px 14px 9px; border-right: 1px solid var(--line); } }
/* phone: the ballpark card comes second, right after the header (a long club story would push it ~2,500 px down) */
@media (max-width: 760px) {
  [data-team-mount] { display: flex; flex-direction: column; }
  [data-team-mount] > * { order: 3; min-width: 0; }
  [data-team-mount] > .flood { order: 0; }
  [data-team-mount] > .sharebar { order: 1; }
  [data-team-mount] > .pcard { order: 2; }
  .flood.phero .ord .k { font-size: 9.5px; letter-spacing: .08em; }
  .flood.phero .ord .r { font-size: 21px; }
}

/* ===================== The Teams page (#teams/all, "Clubs"; page-teams.js), operator Miguel 2026-10-31: "put the hero
   shot of the main page there ... do a cool map with all the stuff there ... keep the bottom of that page ... massive and
   epic". Scoped to .pr-clubs / the page's own classes / html[data-route="clubs"], so no other page changes. */
/* 1. the Pride hero, taller here, with the title on the photo. Fixed heights (no layout shift); boot.js sets
   data-route="clubs" before the first paint, so the empty mount already holds the box */
.pride.pr-clubs, html[data-route="clubs"] .pride-wrap:empty { display: block; height: clamp(600px, 84svh, 960px); min-height: 0; max-height: none; background: var(--noche, #0B1622); }
@media (max-width: 599px) { .pride.pr-clubs, html[data-route="clubs"] .pride-wrap:empty { height: clamp(540px, 74svh, 700px); } }
/* a second scrim from the top-left: the title reads over any photo */
.pr-clubs .pr-scrim { background:
  linear-gradient(180deg, rgb(11 22 34 / .82) 0%, rgb(11 22 34 / .35) 30%, rgb(11 22 34 / 0) 48%),
  linear-gradient(0deg, rgb(11 22 34 / .94) 0%, rgb(11 22 34 / .55) 30%, rgb(11 22 34 / 0) 56%),
  linear-gradient(90deg, rgb(11 22 34 / .6), rgb(11 22 34 / 0) 60%); }
.pr-clubs .pr-title { position: absolute; z-index: 2; left: max(24px, calc((100vw - var(--maxw, 1440px)) / 2 + 24px)); right: 24px; top: clamp(28px, 6svh, 72px); color: #fff; pointer-events: none; }
.pr-clubs .pr-title a, .pr-clubs .pr-title button { pointer-events: auto; }
.ct-kick { margin: 0; font: 700 13px/1.2 var(--fd); font-stretch: 118%; letter-spacing: .22em; text-transform: uppercase; color: #FFE2B8; }
.pr-clubs .ct-h1 { margin: 2px 0 6px -.04em; font: 800 clamp(96px, min(15vw, 24svh), 236px)/.8 var(--fd); font-stretch: 70%; letter-spacing: .005em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 40px rgb(0 0 0 / .55), 0 1px 0 rgb(0 0 0 / .3); }
.ct-stat { margin: 0 0 16px; font: 600 clamp(18px, 1.9vw, 26px)/1.2 var(--fd); letter-spacing: .02em; color: #F0E2C6; text-shadow: 0 2px 12px rgb(0 0 0 / .5); }
.ct-stat b { font-weight: 800; color: var(--mango, #FFC145); font-size: 1.25em; font-variant-numeric: tabular-nums; }
.ct-stat i { font-style: normal; margin: 0 .45em; opacity: .6; }
.ct-lgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; max-width: 1100px; }
.ct-lgs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: 999px; color: #fff; text-decoration: none; background: rgb(11 22 34 / .58); border: 1px solid rgb(255 255 255 / .22); border-left: 4px solid var(--lc, #fff); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ct-lgs a:hover { background: rgb(11 22 34 / .8); }
.ct-lgs svg { width: 22px; height: auto; border-radius: 2px; flex: 0 0 auto; }
.ct-lgs b { font: 800 15px/1 var(--fd); font-stretch: 112%; letter-spacing: .06em; }
.ct-lgs span { font: 500 13px/1 var(--fb); color: #E6D6B6; }
.ct-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; background: #fff; color: var(--noche, #0B1622); font: 700 15px/1 var(--fb); }
.ct-go:hover { background: #FFE2B8; }
.ct-lgs a:focus-visible, .ct-go:focus-visible { outline: 3px solid var(--mango, #FFB547); outline-offset: 2px; }
.pr-clubs .pr-name { font-size: clamp(34px, 3.6vw, 64px); }
/* no pride.json: the hero keeps its box and its h1 on the plain night panel (the page never loses its title) */
.pride.pr-clubs.pr-none { display: block; }
.pr-clubs.pr-none .pr-ctl, .pr-clubs.pr-none .pr-over { display: none; }
@media (max-width: 899px) { .ct-lgs { display: none; } }  /* the league strip right under the hero carries the same five links */
@media (max-height: 640px) and (min-width: 600px) { .ct-lgs { display: none; } }
@media (max-width: 599px) {
  .pr-clubs .pr-title { left: 16px; right: 16px; top: 60px; }  /* clears the ‹ ❚❚ › pill */
  .ct-kick { font-size: 11.5px; letter-spacing: .18em; }
  .pr-clubs .ct-h1 { font-size: clamp(84px, 27vw, 120px); margin-bottom: 4px; }
  .ct-stat { font-size: 17px; margin-bottom: 14px; }
  .ct-go { font-size: 14px; padding: 9px 16px; }
}
/* 2. the map (assets/js/clubs-map.js). Before the module lands, its box holds the height the module will take (filter chips
   + a 1.94:1 stage; under 900 px a hint line too; under 641 px a 1.712:1 stage), measured 2026-10-31: 360→267, 390→284,
   600→407, 720→428, 980→537, 1440+→774 px */
.clubs-map-sec { margin: 0 0 calc(var(--gap) * 2); }
.cm-head { display: grid; gap: 4px; margin: 8px 0 14px; }
.cm-head .ct-kick { color: var(--hi, #B4590B); }
.cm-head h2 { margin: 0; font: 800 clamp(40px, 5.2vw, 80px)/.9 var(--fd); font-stretch: 70%; letter-spacing: .005em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.cm-head p { margin: 4px 0 0; font: 500 15px/1.45 var(--fb); color: var(--ink-2); max-width: 70ch; }
.clubs-map { position: relative; }
.clubs-map:not([data-state="on"]) { min-height: calc((min(100vw, var(--maxw, 1440px)) - 2 * var(--gutter, 16px)) / 1.94 + 48px); border-radius: 14px; background: var(--card-2); }
@media (max-width: 899px) { .clubs-map:not([data-state="on"]) { min-height: calc((100vw - 2 * var(--gutter, 16px)) / 1.94 + 74px); } }
@media (max-width: 640px) { .clubs-map:not([data-state="on"]) { min-height: calc((100vw - 2 * var(--gutter, 16px)) / 1.712 + 75px); } }
.clubs-map:focus-visible { outline: 3px solid var(--mango, #FFB547); outline-offset: 3px; }
.clubs-map .cm-off { margin: 0; padding: 24px; font: 500 15px/1.4 var(--fb); color: var(--ink-2); }
/* 3. the country bands (assets/css/clubs-bands.css); 4. the kept league panels + Last night */
.clubs-bands:empty { min-height: 1px; }
.clubs-list .page-h h2 { font: 800 34px/1 var(--fd); font-stretch: 70%; margin: 0; }
.clubs-list .lgcard, .clubs-bands .cb-band { scroll-margin-top: calc(var(--tbh-px, 64px) + 12px); }
.clubs-list .lgcard .tmchip { min-height: 32px; }