/* Propium site styles: the redesigned pages (spec section 11).
   One visual system for every new page. Dark only. Colors are the tokens in
   section 1 and nothing else.

   Sections
     1  tokens            6  models row (pick card, expert card)
     2  base              7  slate (tiles, board, team bets, player rows, panel)
     3  header            8  record and score
     4  date line         9  states (empty, notice, loading)
     5  shared parts     10  footer
                         11  small screens
                         12  motion (board change, reduced motion)

   Rules that keep the system honest:
   - A modifier is never named after a component. A chip or tag that marks a
     posted pick is `.is-pick`, never `.pick` (that is the pick card).
   - Only transform and opacity animate where layout could move. Colour and
     shadow transitions are paint-only.
   - Hidden-until-animated states live behind `html.anim`, which the page
     script adds only when motion is allowed, so everything is readable
     without a script and with reduced motion.
*/

/* ---------- 1. tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #06142a; --bg-2: #081a34; --card: #0f2440; --card-2: #152d49; --line: #1e3a5e; --line-2: #2a4a72; --skel: #1c3655;
  --accent: #3fa873; --accent-deep: #33966a; --win: #4fc98a; --win-hi: #86e3b3; --win-bg: #0b2b23;
  --info: #6ba7dc; --loss: #e87568; --loss-bg: #2d161c; --warn: #dc9a4b;
  --gold: #edc45f; --gold-hi: #f8e09a; --gold-deep: #d3a63e;
  --text: #e7eefb; --muted: #9aafc9; --dim: #7f94ad; --ink: #04101f;
  /* the same colours as r, g, b so they can carry an alpha */
  --bg-a: 6, 20, 42; --text-a: 231, 238, 251; --win-a: 79, 201, 138; --info-a: 107, 167, 220;
  --gold-a: 237, 196, 95; --loss-a: 232, 117, 104; --warn-a: 220, 154, 75; --line-a: 30, 58, 94; --shadow-a: 2, 8, 20;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --f-display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --f-label: "Sofia Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-body: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  view-transition-name: none;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font: 400 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 420px at 18% -150px, rgba(var(--win-a), .15), transparent 70%),
    radial-gradient(760px 400px at 92% -150px, rgba(var(--info-a), .12), transparent 70%),
    linear-gradient(rgba(var(--line-a), .30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--line-a), .30) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2, h3, h4, h5 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 24px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: 8px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--win); color: var(--ink); font: 800 14px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
/* the svg that only holds gradient definitions takes no room */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* a bar that stands in for text a visitor cannot see (locked content) */
.redact { display: inline-block; height: .78em; max-width: 100%; background: var(--skel); opacity: 1; border-radius: 4px; vertical-align: middle; }

/* ---------- 3. header ---------- */
.hdr { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(var(--bg-a), .88); }
.hdr-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: 800 27px/1 var(--f-display); letter-spacing: .07em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.leagues { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
/* scoped to the league switch: .lg is also a size word on dials and figures */
.leagues .lg { position: relative; padding: 6px 14px; border-radius: 999px; font: 700 14px/1.2 var(--f-label); letter-spacing: .1em; color: var(--muted); transition: color .15s, background-color .15s; }
/* the pill stays compact; the touch area is 44px tall */
.leagues .lg::after { content: ""; position: absolute; inset: -8px 0; }
.leagues .lg:hover { color: var(--text); }
.leagues .lg[aria-current="page"] { background: linear-gradient(180deg, var(--win), var(--accent-deep)); color: var(--ink); }
.secs { grid-column: 1 / -1; display: flex; gap: 2px; margin-inline: -10px; overflow-x: auto; scrollbar-width: none; }
.secs::-webkit-scrollbar { display: none; }
.secs a, .secs button { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 10px; border-radius: 8px; font: 600 14px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color .15s, background-color .15s; }
.secs a:hover, .secs button:hover { color: var(--text); background: rgba(var(--text-a), .06); }
.secs a[aria-current="true"] { color: var(--text); }
.find { grid-column: 1 / -1; position: relative; min-width: 0; }
.find-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: grid; font-size: 17px; color: var(--dim); pointer-events: none; }
.find input { width: 100%; height: 44px; padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 500 16px var(--f-body); }
.find input::placeholder { color: var(--dim); opacity: 1; }
.find input:focus-visible { outline: 2px solid var(--win); outline-offset: 1px; }
.find input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }
#q-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 22px 44px -18px rgba(var(--shadow-a), .95); max-height: min(60vh, 420px); overflow-y: auto; }
#q-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
#q-list li img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--card); flex: none; }
#q-list li .face { width: 34px; height: 34px; }
#q-list li span { display: grid; min-width: 0; }
#q-list li b { font: 800 19px/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
#q-list li i { font: 500 12.5px/1.3 var(--f-label); letter-spacing: .03em; color: var(--muted); font-style: normal; }
#q-list li[aria-selected="true"], #q-list li:hover { background: var(--bg-2); }
#q-list li.none { color: var(--muted); cursor: default; font-size: 14px; background: none; }
/* Phone and tablet: search sits above the section links, and the page script
   pins the header so only the section links stay on screen while scrolling
   (it sets --pin to minus the height of everything above them). */
@media (max-width: 899px) {
  .find { order: 2; }
  .secs { order: 3; }
  .hdr.hdr-pinned { position: sticky; top: var(--pin, 0px); background: var(--bg); }
}
@media (min-width: 900px) {
  .hdr { position: sticky; top: env(safe-area-inset-top, 0px); background: rgba(var(--bg-a), .78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  .hdr-in { grid-template-columns: auto auto minmax(0, 1fr) minmax(210px, 290px); gap: 22px; }
  .secs, .find { grid-column: auto; }
  .secs { margin-inline: 0; }
}

/* ---------- 4. date line ---------- */
.stamp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; min-height: 26px; padding-block: 10px 0; font: 500 12.5px/1.3 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.stamp span { display: inline-flex; align-items: center; gap: 10px; }
.stamp #stamp-date { color: var(--muted); }

/* ---------- 5. shared parts ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(var(--text-a), .05); }
/* lift: a small rise and a brighter edge, on hover and on keyboard focus */
.lift { --glow: var(--win-a); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.lift.t-gold { --glow: var(--gold-a); }
.lift.t-mute, .lift.t-none, .lift.xp { --glow: var(--info-a); }
.lift:has(:focus-visible) { transform: translateY(-2px); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(var(--text-a), .07), 0 20px 34px -22px rgba(var(--shadow-a), 1), 0 14px 44px -24px rgba(var(--glow), .6); }
@media (hover: hover) {
  .lift:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: inset 0 1px 0 rgba(var(--text-a), .07), 0 20px 34px -22px rgba(var(--shadow-a), 1), 0 14px 44px -24px rgba(var(--glow), .6); }
}

/* state tag: upcoming, live, final, postponed */
.state { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.state.live { color: var(--text); }
.state.up { color: var(--info); }
.state.warn { color: var(--warn); }
.dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--loss); flex: none; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--loss); opacity: 0; }
.on > .dot::after { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(3.4); opacity: 0; } }
.c-gold { color: var(--gold); } .c-green { color: var(--win); } .c-mute { color: var(--muted); }
.pos { color: var(--win); } .neg { color: var(--muted); }
/* tick: a changed number flashes once */
.tick { display: inline-block; animation: tick 1.2s var(--ease) both; }
@keyframes tick { 0% { color: var(--gold); text-shadow: 0 0 14px rgba(var(--gold-a), .85); transform: translateY(-3px); } 45% { color: var(--gold); transform: none; } 100% { text-shadow: none; } }

/* odds chip: the price and its book */
.odds { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); white-space: nowrap; flex: none; }
.odds b { font: 800 20px/1 var(--f-label); font-variant-numeric: tabular-nums; }
.odds i { font: 700 11px/1 var(--f-label); letter-spacing: .1em; color: var(--muted); font-style: normal; }
.odds.ghost { padding-block: 9px; }

/* three numbers in a row: a league's record on the landing page */
.stats { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.3fr); margin: 12px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.stats > div { padding: 8px 9px; min-width: 0; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats dt { font: 600 11px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.stats dd { margin: 4px 0 0; font: 700 18px/1.1 var(--f-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats dd small { font-size: 13px; font-weight: 600; color: var(--muted); }
.stats.x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
/* score chip: the score as a number inside a line of text */
.sc { font: 800 1em/1 var(--f-label); font-variant-numeric: tabular-nums; }

/* score dial: xl (featured pick), lg, md, sm. Gold at 90 and up, green from
   51 to 89, muted at 50 and under, a dash when there is no score. The same
   ring in blue (t-conf) carries an Expert Model pick's confidence out of 100. */
.dial { --d: 52px; --c: var(--dim); position: relative; display: inline-grid; place-items: center; width: var(--d); height: var(--d); flex: none; }
.dial.xl { --d: 104px; } .dial.lg { --d: 72px; } .dial.md { --d: 50px; } .dial.sm { --d: 38px; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dial .trk { fill: none; stroke: rgba(var(--text-a), .09); stroke-width: 6; }
.dial .arc { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--s)); }
.dial .num { position: relative; font: 800 calc(var(--d) * .45)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--text); }
.dial.t-green { --c: var(--win); } .dial.t-green .arc { stroke: url(#g-green) var(--win); }
.dial.t-gold { --c: var(--gold); } .dial.t-gold .arc { stroke: url(#g-gold) var(--gold); } .dial.t-gold .num { color: var(--gold); }
.dial.t-mute .num, .dial.t-none .num { color: var(--muted); }
.dial.t-conf { --c: var(--info); }
.dial.t-green.xl .arc, .dial.t-green.lg .arc { filter: drop-shadow(0 0 5px rgba(var(--win-a), .55)); }
.dial.t-gold .arc { filter: drop-shadow(0 0 6px rgba(var(--gold-a), .6)); }
.dial.locked .trk { stroke: var(--line-2); stroke-width: 4; stroke-dasharray: 5 4.2; }
.dial .lk { position: relative; display: grid; font-size: calc(var(--d) * .36); color: var(--dim); }
.dial.t-gold::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(var(--gold-a), .85) 80%, transparent 94%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--ink) calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--ink) calc(100% - 2px)); }
.dial.t-gold.on::after { animation: spin 2.8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
html.anim .dial:not(.run):not(.done):not(.locked) .arc { stroke-dashoffset: 100; }
.dial.run .arc { animation: sweep .95s var(--ease) both; }
@keyframes sweep { from { stroke-dashoffset: 100; } }
.dialw { display: grid; justify-items: center; gap: 5px; }
.dialw > i { font: 700 11px/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-style: normal; white-space: nowrap; }
.s-g1 { stop-color: var(--win-hi); } .s-g2 { stop-color: var(--accent); } .s-o1 { stop-color: var(--gold-hi); } .s-o2 { stop-color: var(--gold-deep); }

/* last-10 bars against the line */
.bars { --pad: 14px; --base: 0px; position: relative; margin: 0; min-width: 0; }
.bars.big { --pad: 30px; --base: 16px; }
.bars figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font: 600 11.5px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.bars figcaption b { font-weight: 700; color: var(--text); letter-spacing: .06em; white-space: nowrap; }
.plot { position: relative; height: 92px; padding-left: 28px; }
.big .plot { height: 150px; }
.plot ol { display: flex; gap: 5px; height: 100%; margin: 0; padding: 0; list-style: none; }
.plot li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.plot .v { font: 700 12px/14px var(--f-label); font-variant-numeric: tabular-nums; color: var(--dim); }
.plot .b { width: 100%; max-width: 30px; height: max(4px, calc(var(--h) * (100% - var(--pad)))); border-radius: 4px 4px 1px 1px; background: var(--line-2); transform-origin: bottom; }
.plot .hit .v { color: var(--text); }
.plot .hit .b { background: linear-gradient(180deg, var(--win-hi), var(--accent-deep)); }
.plot .o { display: grid; place-items: center; width: 100%; height: 16px; overflow: hidden; font: 600 11px/16px var(--f-label); color: var(--dim); white-space: nowrap; }
.plot .o img { width: 14px; height: 14px; object-fit: contain; opacity: .85; }
.plot .ln { position: absolute; left: 28px; right: 0; bottom: calc(var(--base) + var(--l) * (100% - var(--pad))); border-top: 1px dashed rgba(var(--text-a), .5); pointer-events: none; }
.plot .ln i { position: absolute; left: -28px; width: 23px; top: 0; transform: translateY(-50%); text-align: right; font: 700 11.5px/1 var(--f-label); font-style: normal; color: var(--text); }
html.anim .bars:not(.run):not(.done) .b { transform: scaleY(0); }
.bars.run .b { animation: grow .55s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes grow { from { transform: scaleY(0); } }

/* lock box (locked content) and the one button style */
.lockbox { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 10px; background: rgba(var(--bg-a), .45); }
.lockbox p { margin: 0; flex: 1 1 170px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.lockbox strong { display: block; margin-bottom: 2px; font: 700 14px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: linear-gradient(180deg, var(--win), var(--accent-deep)); color: var(--ink); font: 800 14px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; flex: none; white-space: nowrap; transition: filter .15s; }
.btn:hover { filter: brightness(1.08); }
.btn.quiet { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); }

/* face: a headshot or a team logo in a frame. The frame also holds the
   initials (a player) or monogram (a team), shown when there is no image or
   the image fails to load (the page script adds .noimg on the error). */
.face { position: relative; display: grid; place-items: center; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line-2); flex: none; }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.face .mono { display: none; font: 800 1em/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.face.noimg img { display: none; }
.face.noimg .mono { display: block; }
.face { font-size: 19px; }
.face.logo { border-radius: 12px; background: var(--bg-2); }
.face.logo img { padding: 7px; object-fit: contain; object-position: center; }
.face.ghost { background: var(--skel); border-color: transparent; }

/* tag: a small word that carries a state */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font: 700 11.5px/1.35 var(--f-label); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tag.is-pick { background: rgba(var(--win-a), .15); color: var(--win); }
.tag.cashed { background: var(--win-bg); color: var(--win); }
.tag.missed, .tag.dnp { background: rgba(var(--text-a), .07); color: var(--muted); }
.tag.open { background: rgba(var(--info-a), .13); color: var(--info); }
.tag.warn { background: rgba(var(--warn-a), .14); color: var(--warn); }

/* ---------- 6. models row ---------- */
.models { display: grid; gap: 16px 20px; padding-top: 12px; scroll-margin-top: 76px; }
.mcol { min-width: 0; }
.mswitch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.mswitch button { position: relative; z-index: 1; min-height: 44px; padding: 9px 8px; border-radius: 9px; text-align: center; font: 700 15px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.mswitch button[aria-pressed="true"] { color: var(--ink); }
.mswitch .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: linear-gradient(180deg, var(--win), var(--accent-deep)); transition: transform .28s var(--ease); }
[data-show="expert"] > .mswitch .thumb { transform: translateX(100%); }
.sec > .mswitch { margin-bottom: 14px; }
/* one model at a time on a phone: its picks, and under the slate its record */
@media (max-width: 959px) {
  .models[data-show="edge"] #col-expert, .models[data-show="expert"] #col-edge { display: none; }
  #record[data-show="edge"] #p-expert, #record[data-show="expert"] #p-record, #record[data-show="expert"] #p-score { display: none; }
  #record[data-show="expert"] #p-expert { grid-column: 1 / -1; }
}
@media (min-width: 960px) { .models { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; } .mswitch { display: none; } }
.mhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.mico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; flex: none; }
.mico.edge { background: rgba(var(--win-a), .14); color: var(--win); }
.mico.expert { background: rgba(var(--info-a), .15); color: var(--info); }
.mhead h2 { margin: 0; font: 800 34px/1 var(--f-display); letter-spacing: .025em; text-transform: uppercase; }
.mhead p { margin: 0; font-size: 14px; color: var(--muted); }
.mhead .rec { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font: 700 13px/1.4 var(--f-label); letter-spacing: .05em; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mhead .rec:empty { display: none; }
/* wide screens: both column heads take the same two rows (title and record,
   then the line under them), so the first cards start level */
@media (min-width: 1100px) { .mhead p { order: 3; flex-basis: 100%; } }
#edge-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
#expert-list { display: grid; gap: 14px; }
/* the link under a column's cards (the full Expert Model record) */
.mcol > .more { margin-top: 14px; }
/* a label over a group of cards inside a column ("Yesterday", "Last slate") */
.grp { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 -2px; font: 700 12.5px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.grp span { letter-spacing: .05em; color: var(--dim); font-variant-numeric: tabular-nums; }

/* pick card (Edge Model) */
.pick { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.pick > *:not(.wm) { position: relative; z-index: 1; }
.pick.feat { grid-column: 1 / -1; background: radial-gradient(560px 280px at 100% 0%, rgba(var(--glow), .13), transparent 72%), var(--card); }
.wm { position: absolute; z-index: 0; right: -44px; bottom: -58px; width: 250px; height: 250px; object-fit: contain; opacity: .07; pointer-events: none; }
.pk-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.feat .pk-top { gap: 14px; padding: 18px 20px 14px; }
.pick .face { width: 48px; height: 48px; }
.feat .face { width: 72px; height: 72px; font-size: 27px; }
.pick.t-green .face { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px rgba(var(--win-a), .7); border-color: transparent; }
.pick.t-gold .face { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px rgba(var(--gold-a), .8); border-color: transparent; }
.who { min-width: 0; }
.who h3 { margin: 0; font: 800 26px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.feat .who h3 { font-size: 42px; }
.who p { margin: 5px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font: 500 13.5px/1.3 var(--f-label); letter-spacing: .04em; color: var(--muted); }
/* a team's name with its logo in front of it (pick cards, the player panel) */
.club { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.club img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.club img.gone { display: none; }
/* the player's name is a control: it opens that player on the slate */
.who-btn { position: relative; display: inline; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; border-radius: 4px; transition: color .15s; }
.who-btn::after { content: ""; position: absolute; inset: -9px -6px; }
.who-btn:hover { color: var(--win-hi); }
.pk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; padding: 0 16px 14px; }
.feat .pk-body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 0 20px 18px; align-items: start; }
.feat .pk-body.solo { grid-template-columns: minmax(0, 1fr); }
.pk-bet { min-width: 0; }
.betline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bet { margin: 0; min-width: 0; font: 800 25px/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.feat .bet { font-size: 32px; }
/* the price was moved to a better book by line shopping */
.moved { margin: 8px 0 0; font: 500 13px/1.35 var(--f-label); letter-spacing: .03em; color: var(--muted); }
.moved b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.note { margin: 12px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.5; color: var(--muted); }
.result { position: relative; margin-top: auto; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px 6px 16px; border-top: 1px solid var(--line); background: rgba(var(--bg-a), .4); font: 600 14px/1.25 var(--f-label); letter-spacing: .04em; color: var(--muted); }
.feat .result { padding-left: 20px; }
.result.won { background: var(--win-bg); color: var(--win); border-top-color: rgba(var(--win-a), .28); }
.result.lost { background: var(--loss-bg); color: var(--loss); border-top-color: rgba(var(--loss-a), .28); }
.result.live { background: rgba(var(--info-a), .1); color: var(--info); border-top-color: rgba(var(--info-a), .26); }
.result.void { color: var(--warn); border-top-color: rgba(var(--warn-a), .28); }
.r-ic { display: grid; place-items: center; min-width: 14px; font-size: 16px; flex: none; }
.r-tx { min-width: 0; font-variant-numeric: tabular-nums; }
.togame { margin: -6px 0 -6px auto; display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 4px 8px; border-radius: 6px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .15s, background-color .15s; }
.togame:hover { color: var(--text); background: rgba(var(--text-a), .08); }
/* settle: a pick that finishes shows its result with one short highlight */
.result.settle::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; pointer-events: none; animation: settle 1.1s var(--ease) both; }
@keyframes settle { 0% { opacity: .3; } 100% { opacity: 0; } }
.pick.locked .pk-body { gap: 12px; flex: 1; align-content: stretch; }
.pick.locked .pk-bet { display: flex; flex-direction: column; gap: 12px; }
.pick.locked .lockbox { flex: 1; align-items: center; }
.who h3 .redact, .bet .redact { height: .62em; }

/* expert card (Expert Model) */
.xp { display: grid; gap: 12px; padding: 14px 16px; min-width: 0; overflow: hidden; }
.xp-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.xp .face { width: 48px; height: 48px; }
.prog { display: grid; gap: 7px; }
.prog-tx { font: 600 14px/1.2 var(--f-label); letter-spacing: .04em; color: var(--info); }
.pips { display: flex; gap: 4px; }
.pips i { flex: 1 1 0; height: 6px; border-radius: 3px; background: rgba(var(--text-a), .1); }
.pips i.on { background: var(--info); }
.xp-meta { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font: 500 13px/1.35 var(--f-label); letter-spacing: .03em; color: var(--muted); }
.xp .result { margin: 0 -16px; }
.xp > .result:last-child { margin-bottom: -14px; }
.why { margin: 0 -16px -14px; border-top: 1px solid var(--line); }
.xp > .result + .why { margin-top: -12px; }
.why summary { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 16px; list-style: none; cursor: pointer; font: 700 13px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--info); }
.why summary::-webkit-details-marker { display: none; }
.why summary:focus-visible { outline-offset: -3px; }
.why summary svg { transition: transform .2s var(--ease); }
.why[open] summary svg { transform: rotate(90deg); }
.why p { margin: 0; padding: 0 16px 12px; max-width: 64ch; font-size: 14.5px; line-height: 1.55; }
.why .src { font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
.why .src a { display: inline-block; padding-block: 3px; color: var(--info); text-decoration: underline; text-decoration-color: rgba(var(--info-a), .45); text-underline-offset: 3px; }
.why .src a:hover { color: var(--text); }
.xp.locked .lockbox { margin-top: 2px; }
.ghost-rows { display: grid; gap: 11px; margin-bottom: 12px; }
.ghost-rows p { display: flex; gap: 12px; margin: 0; font-size: 14px; }
.ghost-rows .redact:first-child { margin-right: auto; }

/* ---------- 7. slate ---------- */
/* Built by slate.js. The section, its heading and three mounts are in the
   template: #slate-state, #slate-mount and #player-panel. All three ship
   empty, all three are slate.js's, and each is hidden while it is empty.
   Until slate.js registers itself the whole section is hidden (section 9). */
.sec { padding-top: 42px; scroll-margin-top: 64px; }
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.sec-head h2 { margin: 0; font: 800 38px/1 var(--f-display); letter-spacing: .025em; text-transform: uppercase; }
.sec-head p { margin: 0; font-size: 14px; color: var(--muted); white-space: nowrap; }
.sec-head p:empty { display: none; }
.sec-head::after { content: ""; flex: 1; height: 1px; align-self: center; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec-link { order: 1; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; padding: 0 4px; border-radius: 6px; font: 700 13px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--info); white-space: nowrap; transition: color .15s; }
.sec-link:hover { color: var(--text); }
#slate-state:empty, #slate-mount:empty, #player-panel:empty { display: none; }
#slate-state + #slate-mount:not(:empty), #slate-mount + #player-panel:not(:empty) { margin-top: 12px; }

/* game tiles: a tab list. A wrapping grid on wide screens, one strip that
   scrolls sideways on a phone (section 11). */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; }
.tile { position: relative; display: grid; gap: 6px; min-width: 0; padding: 10px 12px 9px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(var(--text-a), .05); }
.tile[aria-selected="true"] { background: var(--card-2); }
.tile[aria-selected="true"] .t-foot { color: var(--muted); }
.tile .sel { position: absolute; inset: -1px; border-radius: 12px; border: 2px solid var(--win); box-shadow: 0 0 0 4px rgba(var(--win-a), .13), 0 14px 30px -18px rgba(var(--win-a), .8); opacity: 0; pointer-events: none; }
.tile[aria-selected="true"] .sel { opacity: 1; view-transition-name: tile-sel; }
.t-state { display: flex; align-items: center; min-height: 16px; }
.t-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; font: 800 23px/1 var(--f-display); letter-spacing: .04em; }
.t-row img { width: 26px; height: 26px; object-fit: contain; }
.t-row .face { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; font-size: 12px; }
.t-row .face img { padding: 0; }
.t-row.lose { color: var(--dim); }
.t-runs { font-variant-numeric: tabular-nums; }
.t-foot { display: flex; align-items: center; gap: 5px; margin-top: 1px; font: 500 12.5px/1.2 var(--f-label); letter-spacing: .05em; color: var(--dim); }
.t-foot b { font-weight: 800; font-variant-numeric: tabular-nums; }
.t-lock { display: grid; font-size: 12px; }

/* game board */
.gp { margin-top: 12px; overflow: hidden; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(var(--text-a), .05); view-transition-name: game-panel; }
.sb { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 22px; padding: 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--card-2), var(--card)); }
.sb > *:not(.sb-wm) { position: relative; z-index: 1; }
.sb-wm { position: absolute; z-index: 0; top: 50%; width: 250px; height: 250px; object-fit: contain; opacity: .08; transform: translateY(-50%); pointer-events: none; }
.sb-wm.away { left: -60px; } .sb-wm.home { right: -60px; }
.sb-team { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo name runs"; align-items: center; gap: 14px; min-width: 0; }
.sb-team.home { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "runs name logo"; }
.sb-team.home .sb-name { text-align: right; justify-items: end; }
.sb-logo { grid-area: logo; width: 58px; height: 58px; object-fit: contain; }
.sb-name { grid-area: name; display: grid; min-width: 0; }
.sb-name b { font: 800 36px/1 var(--f-display); letter-spacing: .025em; text-transform: uppercase; overflow-wrap: anywhere; }
.sb-prob { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font: 500 13.5px/1.2 var(--f-label); letter-spacing: .03em; color: var(--muted); }
.sb-prob img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--card-2); border: 1px solid var(--line-2); flex: none; }
.sb-prob .face { width: 26px; height: 26px; font-size: 11px; }
.sb-prob i { font-style: normal; color: var(--dim); }
.sb-runs { grid-area: runs; min-width: 36px; text-align: center; font: 800 56px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.sb-mid { display: grid; justify-items: center; gap: 5px; text-align: center; }
.sb-mid .state { font-size: 15px; }
.sb-mid .s1 { font: 600 12.5px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sb-mid .s2 { font-size: 13px; line-height: 1.3; color: var(--dim); }
.blk { padding: 16px 20px 18px; }
.blk + .blk { border-top: 1px solid var(--line); }
.blk-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.blk-head h3 { margin: 0; font: 800 23px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.blk-head p { margin: 0; font-size: 13px; color: var(--dim); }
.blk-head p svg { vertical-align: -2px; margin-right: 5px; }
.closed { margin: 0; font-size: 14px; color: var(--muted); }

/* team bets */
.tm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tm-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.tm-col h4 { margin: 0; font: 600 11.5px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tm-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px 7px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.tm-bet { min-width: 0; font: 700 16px/1.15 var(--f-label); letter-spacing: .02em; }

/* player rows */
.pl-group + .pl-group { margin-top: 16px; }
.pl-group > h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font: 800 19px/1 var(--f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pl-group > h4 img { width: 22px; height: 22px; object-fit: contain; }
.pl-group > h4 span { font: 500 12.5px/1 var(--f-label); letter-spacing: .04em; text-transform: none; color: var(--dim); }
.pl-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pl { overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); scroll-margin-top: 78px; transition: border-color .18s; }
.pl.open { border-color: var(--line-2); }
.pl-row { width: 100%; display: grid; grid-template-columns: 44px minmax(130px, 230px) minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 8px 12px; transition: background-color .15s; }
.pl-row:hover { background: rgba(var(--text-a), .04); }
.pl-row:focus-visible { outline-offset: -3px; }
.pl-row .face { width: 44px; height: 44px; font-size: 17px; }
.pl-who { display: grid; gap: 3px; min-width: 0; }
.pl-who b { font: 800 22px/1 var(--f-display); letter-spacing: .025em; text-transform: uppercase; overflow-wrap: anywhere; }
.pl-who i { font: 500 12.5px/1.25 var(--f-label); letter-spacing: .03em; color: var(--muted); font-style: normal; }
/* the stat line runs on from the line before it: a block would drop the space ahead of its dot */
.pl-who i .tick { display: inline; }
.pl-props { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* chip: one prop and its price. A posted pick is .is-pick (never .pick). */
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); font: 600 13.5px/1.25 var(--f-label); letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.chip b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.chip svg { font-size: 13px; }
.chip.cashed { border-color: rgba(var(--win-a), .42); color: var(--win); }
.chip.missed { color: var(--dim); } .chip.missed b { color: var(--muted); }
.chip.is-pick { border-color: rgba(var(--win-a), .6); background: rgba(var(--win-a), .09); color: var(--text); }
.chip.tick { display: inline-flex; }
/* an extra market (odds only): no score or pick behind it */
.chip.more { border-style: dashed; background: transparent; color: var(--dim); }
.chip.more b { color: var(--muted); }
.chev { display: grid; font-size: 18px; color: var(--dim); transition: transform .2s var(--ease); }
.pl-row[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* player panel (research) */
.res { display: grid; gap: 10px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: rgba(var(--bg-a), .4); }
#player-panel > .res { border: 1px solid var(--line); border-radius: 12px; }
/* the player's team and the opponent, above the boxes */
.res-teams { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin: 0; font: 600 13.5px/1.3 var(--f-label); letter-spacing: .05em; color: var(--muted); }
.res-teams:empty { display: none; }
.res-teams .club img { width: 20px; height: 20px; }
.res-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.box { min-width: 0; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.box h5 { margin: 0 0 9px; font: 700 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.pr-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px 12px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.pr-main { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; min-width: 0; }
.pr-bet { font: 800 21px/1.05 var(--f-display); letter-spacing: .035em; text-transform: uppercase; }
.pr-nums { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 0; font: 500 13px/1.3 var(--f-label); letter-spacing: .03em; }
.pr-nums div { display: flex; align-items: center; gap: 6px; }
.pr-nums dt { color: var(--dim); }
.pr-nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
/* extra markets: the books' prices only (no score, no pick), so quieter than a prop */
.mm-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 14px 0 8px; font: 700 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.mm-h span { font-weight: 500; letter-spacing: .04em; text-transform: none; }
.mm-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 7px 8px 7px 12px; border-radius: 10px; border: 1px dashed var(--line-2); }
.mm-name { min-width: 0; font: 700 15px/1.25 var(--f-label); letter-spacing: .03em; }
.mm-name i { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.mm-sides { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.mm-side { display: inline-flex; align-items: center; gap: 6px; }
.mm-sel { font: 600 12px/1 var(--f-label); letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.mm .odds { padding: 4px 8px; }
.mm .odds b { font-size: 16px; }
.mm .odds i { font-size: 10.5px; }
.seg { display: flex; flex-wrap: wrap; gap: 10px 6px; margin-bottom: 12px; }
.seg button { position: relative; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font: 700 12.5px/1.3 var(--f-label); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: color .15s, border-color .15s, background-color .15s; }
.seg button::after { content: ""; position: absolute; inset: -5px 0; }
.seg button:hover { color: var(--text); border-color: var(--line-2); }
.seg button[aria-pressed="true"] { background: rgba(var(--win-a), .14); border-color: rgba(var(--win-a), .5); color: var(--win); }
.sts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.st { min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.st b { display: block; font: 800 27px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.st span { display: block; margin-top: 3px; font: 600 11px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.st i { display: block; margin-top: 2px; font: 500 11.5px/1.2 var(--f-label); font-style: normal; color: var(--dim); }
.detail { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 9px 0 0; font: 500 13px/1.4 var(--f-label); letter-spacing: .03em; color: var(--muted); }
.detail b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.detail span { white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font: 500 13.5px/1.3 var(--f-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 5px 6px; text-align: right; white-space: nowrap; }
.tbl thead th { font: 600 11px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tbl th:first-child { text-align: left; padding-left: 0; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl tbody th { font-weight: 500; color: var(--muted); }
.tbl tbody td { color: var(--muted); }
.tbl tbody tr > * { border-top: 1px solid var(--line); }
.tbl tbody th small { margin-left: 6px; font-size: 12px; color: var(--dim); font-weight: 500; }
.tbl tr.hl > * { color: var(--text); font-weight: 700; }
.tbl tr.hl th::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--win); vertical-align: 1px; }
.cap { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); }
.vs { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.vs b { color: var(--text); }
.vs i { font-style: normal; color: var(--dim); }

/* ---------- 8. record and score ---------- */
.rs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.panel { min-width: 0; padding: 18px 20px 20px; }
.panel h3 { margin: 0; font: 800 26px/1 var(--f-display); letter-spacing: .045em; text-transform: uppercase; }
.panel .sub { margin: 5px 0 14px; font-size: 14px; color: var(--muted); }
.panel h4 { margin: 20px 0 9px; font: 700 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.tbl.rec { margin-top: 12px; font-size: 16px; }
.tbl.rec th, .tbl.rec td { padding: 8px 6px; }
.tbl.rec th:first-child { padding-left: 0; }
.tbl.rec tbody th, .tbl.rec tbody td { color: var(--text); font-weight: 600; }
.tbl.rec tbody td.neg { color: var(--muted); }
.tbl.rec tbody td.pos { color: var(--win); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.kpis div { min-width: 0; padding: 9px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.kpis dt { font: 600 11px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.kpis dd { margin: 4px 0 0; font: 800 25px/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.kpis dd small { display: block; margin-top: 4px; font: 500 12.5px/1.2 var(--f-label); letter-spacing: .02em; color: var(--muted); }
/* band table: record by score */
.bands { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.bands li { display: grid; grid-template-columns: 54px 66px 62px minmax(0, 1fr) 56px; align-items: center; gap: 10px; font: 600 14px/1.2 var(--f-label); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--muted); }
.bands .bd { font-weight: 800; color: var(--text); }
.bands .roi { text-align: right; color: var(--text); }
.bands .roi.neg { color: var(--muted); } .bands .roi.pos, .bands .u.pos { color: var(--win); }
.dv { position: relative; height: 10px; border-radius: 5px; background: rgba(var(--text-a), .06); }
.dv::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.dv i { position: absolute; top: 0; bottom: 0; width: calc(var(--w) * 50%); }
.dv i.p { left: 50%; border-radius: 0 5px 5px 0; background: var(--win); }
.dv i.n { right: 50%; border-radius: 5px 0 0 5px; background: var(--loss); }
.fine { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* wide screens show both records side by side, the score panel under them */
@media (min-width: 960px) {
  #record #p-score { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  #record #p-score .sp-b > h4:first-child { margin-top: 2px; }
}

/* the 0 to 100 scale with today's picks marked on it */
.scale { position: relative; margin: 10px 0 0; padding-top: 62px; }
/* no pick to mark today: the room above the track for the markers is not needed */
.scale.bare { padding-top: 8px; }
.track { display: flex; height: 12px; overflow: hidden; border-radius: 6px; }
.track i { display: block; }
.track .mute { width: 50%; background: var(--line-2); }
.track .green { width: 40%; background: linear-gradient(90deg, var(--accent-deep), var(--win)); }
.track .gold { width: 10%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.pin { position: absolute; left: calc(var(--x) * 1%); top: 30px; height: 32px; width: 0; }
.pin.hi { top: 4px; height: 58px; }
.pin::after { content: ""; position: absolute; left: -.5px; top: 22px; bottom: 0; width: 1px; background: currentColor; opacity: .6; }
.pin b { position: absolute; left: 0; top: 0; transform: translateX(-50%); padding: 2px 6px; border-radius: 6px; background: var(--bg-2); border: 1px solid currentColor; font: 800 15px/1.15 var(--f-label); font-variant-numeric: tabular-nums; }
.ticks { position: relative; height: 22px; margin-top: 5px; font: 600 12px/1 var(--f-label); font-variant-numeric: tabular-nums; color: var(--dim); }
.ticks span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); }
.ticks span:first-child { transform: none; } .ticks span:last-child { transform: translateX(-100%); }
.today { margin: 2px 0 0; font: 600 13.5px/1.4 var(--f-label); letter-spacing: .03em; color: var(--muted); }
.zones { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: var(--muted); }
.zones li { display: grid; grid-template-columns: 12px 92px minmax(0, 1fr); align-items: baseline; gap: 9px; }
.zones li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--line-2); align-self: center; }
.zones li.green::before { background: var(--win); } .zones li.gold::before { background: var(--gold); }
.zones b { font: 700 14px/1.3 var(--f-label); letter-spacing: .04em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.best { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: radial-gradient(300px 160px at 0% 50%, rgba(var(--gold-a), .12), transparent 75%), var(--bg-2); border: 1px solid var(--line); }
.best p { margin: 0; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.best p b { color: var(--text); }
.lbl { display: block; margin-bottom: 3px; font: 700 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.ing { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ing li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font: 600 13.5px/1.3 var(--f-label); letter-spacing: .04em; }
/* terms: each one defined once */
.terms { display: grid; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.terms div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 9px; align-items: baseline; }
.terms dt { font: 700 14px/1.3 var(--f-label); letter-spacing: .04em; color: var(--text); }
.terms dd { margin: 0; }

/* ---------- 9. states ---------- */
/* empty state: one plain line where content would be */
.empty { grid-column: 1 / -1; display: grid; gap: 4px; padding: 18px 16px; border: 1px dashed var(--line-2); border-radius: 12px; background: rgba(var(--bg-a), .45); color: var(--muted); }
.empty p { margin: 0; max-width: 64ch; font-size: 14.5px; line-height: 1.45; }
.empty strong { color: var(--text); font-weight: 600; }
.empty .btn { justify-self: start; margin-top: 8px; }
/* notice: one page-level line under the date line (stale data, load error) */
.notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; padding: 10px 14px; border: 1px solid rgba(var(--warn-a), .4); border-radius: 12px; background: rgba(var(--warn-a), .08); color: var(--text); font-size: 14.5px; line-height: 1.4; }
.notice p { margin: 0; flex: 1 1 220px; min-width: 0; }
.notice svg { color: var(--warn); font-size: 18px; flex: none; }
/* loading: a block where a card will be */
.skel { min-height: 148px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); opacity: .7; }
.skel.tall { min-height: 320px; grid-column: 1 / -1; }
.skel.line { min-height: 22px; border-radius: 6px; }
html.anim .skel { animation: breathe 1.4s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .45; } to { opacity: .85; } }
/* a list of games from the schedule, shown when there is no slate */
.sched { display: grid; gap: 12px; }
.sched + .sched, .empty + .sched { margin-top: 14px; }
.sched .grp { margin: 0; }
/* league page with no slate script: the slate section, the header search and
   the Slate link stay out of sight (slate.js adds has-slate when it starts) */
body[data-page="league"]:not(.has-slate) :is(#slate, .find, .secs a[href="#slate"]) { display: none; }
/* an image that failed outside a face keeps its box and shows nothing */
img.gone { visibility: hidden; }

/* ---------- 10. footer ---------- */
.foot { margin-top: 48px; border-top: 1px solid var(--line); background: rgba(var(--bg-a), .6); }
.foot-in { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding-block: 20px 28px; }
.foot .brand { font-size: 22px; }
.foot .brand img { width: 28px; height: 28px; border-radius: 7px; }
.foot p { margin: 0; flex: 1 1 320px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
.foot-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border-radius: 6px; font: 700 13px/1.2 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--info); white-space: nowrap; transition: color .15s; }
.foot-link:hover { color: var(--text); }

/* ---------- 11. small screens ---------- */
@media (max-width: 860px) {
  .res-grid, .rs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* the game tiles become one strip that scrolls sideways */
  .tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(148px, 44%); overflow-x: auto; margin: -6px -16px; padding: 6px 16px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
  /* a schedule with a handful of games wraps instead */
  .sched .tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .sb { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .sb-mid { order: -1; justify-items: start; text-align: left; }
  .sb-team.home { grid-template-areas: "logo name runs"; }
  .sb-team.home .sb-name { text-align: left; justify-items: start; }
  .sb-logo { width: 44px; height: 44px; }
  .sb-name b { font-size: 30px; }
  .sb-runs { font-size: 44px; }
  .sb-wm { width: 190px; height: 190px; }
  .sb-wm.away { left: auto; right: -50px; top: 30%; } .sb-wm.home { top: 82%; right: -50px; }
  .blk { padding: 14px 14px 16px; }
  .tm { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tm-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .tm-col h4 { grid-column: 1 / -1; }
  .tm-cell { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 8px 8px 10px; }
  .tm-cell .tm-bet { grid-column: 1 / -1; }
  .tm-cell .odds { justify-self: start; }
  .pl-row { grid-template-columns: 44px minmax(0, 1fr) auto 16px; grid-template-areas: "face who dial chev" "props props props props"; gap: 8px 10px; padding: 9px 10px; }
  .pl-row .face { grid-area: face; } .pl-who { grid-area: who; } .pl-props { grid-area: props; } .pl-row .dial { grid-area: dial; } .chev { grid-area: chev; }
  .res { padding: 10px; }
  .sts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .feat .pk-body { grid-template-columns: minmax(0, 1fr); padding: 0 16px 14px; }
  .feat .pk-top { gap: 11px; padding: 14px 16px 12px; }
  .feat .face { width: 56px; height: 56px; font-size: 22px; }
  .feat .who h3 { font-size: 31px; }
  .feat .bet { font-size: 28px; }
  .feat .result { padding-left: 16px; }
  .dial.xl { --d: 78px; }
  .sec { padding-top: 34px; }
  .sec-head h2 { font-size: 34px; }
  .mhead h2 { font-size: 31px; }
  .plot ol { gap: 4px; }
  .panel { padding: 16px 14px 18px; }
  .bands li { grid-template-columns: 50px 62px minmax(0, 1fr) 52px; gap: 8px; }
  .bands .u { display: none; }
  .kpis dd { font-size: 22px; }
  .zones li { grid-template-columns: 12px minmax(0, 1fr); }
  .zones li b { grid-column: 2; }
  .zones li span { grid-column: 2; }
  .terms div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
}
@media (max-width: 400px) {
  .pk-top { gap: 10px; }
  .stats > div { padding: 8px 7px; }
  .stats dd { font-size: 17px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis div:last-child { grid-column: 1 / -1; }
}

/* ---------- 12. motion ---------- */
/* board change: the game board slides and cross-fades (slate.js sets --dir) */
::view-transition-group(game-panel) { animation-duration: 320ms; animation-timing-function: var(--ease); }
::view-transition-old(game-panel) { animation: vt-out 180ms ease-in both; }
::view-transition-new(game-panel) { animation: vt-in 320ms var(--ease) both; }
::view-transition-group(tile-sel) { animation-duration: 300ms; animation-timing-function: var(--ease); }
@keyframes vt-out { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -28px)); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); } }

/* reduce motion: every effect is instant and the pulse is off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .on > .dot::after, .dial.t-gold.on::after { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}