/* The High Council - "Hardwood" theme
   Borderless sections separated by hairline rules; cards only for things you click.
   Warm neutrals, one leather-orange accent, a muted color per fantasy team.
   Geist for text, Geist Mono (tabular) for numbers. */

:root {
    --bg: oklch(0.975 0.004 70);
    --surface: oklch(0.995 0.002 70);
    --surface-2: oklch(0.945 0.006 70);
    --ink: oklch(0.2 0.01 60);
    --ink-2: oklch(0.45 0.01 60);
    --ink-3: oklch(0.6 0.008 60);
    --line: oklch(0.9 0.006 70);
    --accent: oklch(0.6 0.16 45);
    --accent-soft: oklch(0.93 0.04 50);
    --accent-ink: oklch(0.45 0.13 45);
    --on-accent: oklch(0.99 0 0);
    --pos: oklch(0.52 0.12 155);
    --neg: oklch(0.55 0.17 25);
    --warn: oklch(0.6 0.13 75);
    --scrim: oklch(0.2 0.01 60 / 0.35);
    /* team chip: background lightness/chroma, ink lightness/chroma */
    --tl: 0.92; --tc: 0.05; --tli: 0.4; --tci: 0.11;
    --font: 'Geist', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
    --num: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --r: 8px;
    --shadow: 0 20px 50px -20px oklch(0.2 0.02 60 / 0.35);
    --ease: cubic-bezier(.2, .75, .2, 1);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: oklch(0.165 0.006 60); --surface: oklch(0.2 0.007 60); --surface-2: oklch(0.24 0.008 60);
        --ink: oklch(0.95 0.005 70); --ink-2: oklch(0.74 0.008 70); --ink-3: oklch(0.56 0.008 70);
        --line: oklch(0.28 0.008 60);
        --accent: oklch(0.72 0.15 50); --accent-soft: oklch(0.3 0.06 50); --accent-ink: oklch(0.8 0.12 55); --on-accent: oklch(0.18 0.01 60);
        --pos: oklch(0.76 0.13 155); --neg: oklch(0.72 0.15 25); --warn: oklch(0.8 0.13 80);
        --scrim: oklch(0.05 0 0 / 0.6);
        --tl: 0.32; --tc: 0.06; --tli: 0.86; --tci: 0.08;
        --shadow: 0 24px 60px -20px oklch(0 0 0 / 0.7);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: oklch(0.165 0.006 60); --surface: oklch(0.2 0.007 60); --surface-2: oklch(0.24 0.008 60);
    --ink: oklch(0.95 0.005 70); --ink-2: oklch(0.74 0.008 70); --ink-3: oklch(0.56 0.008 70);
    --line: oklch(0.28 0.008 60);
    --accent: oklch(0.72 0.15 50); --accent-soft: oklch(0.3 0.06 50); --accent-ink: oklch(0.8 0.12 55); --on-accent: oklch(0.18 0.01 60);
    --pos: oklch(0.76 0.13 155); --neg: oklch(0.72 0.15 25); --warn: oklch(0.8 0.13 80);
    --scrim: oklch(0.05 0 0 / 0.6);
    --tl: 0.32; --tc: 0.06; --tli: 0.86; --tci: 0.08;
    --shadow: 0 24px 60px -20px oklch(0 0 0 / 0.7);
    color-scheme: dark;
}

/* ============================================================================
   BASE
   ============================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--bg); color: var(--ink);
    font-family: var(--font); font-size: 14px; line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    transition: background-color .25s, color .25s;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4, h5 { text-wrap: balance; }

.num, .points, .games, .games-rem, .margin, .score-current, .score-proj, .standing-record,
td.proj, td.actual, .col-proj, .col-avg, .col-margin, .col-fpts {
    font-family: var(--num); font-variant-numeric: tabular-nums;
}
.wrap {
    max-width: 1360px; margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.positive, .pos, .margin-positive { color: var(--pos); }
.negative, .neg, .margin-negative { color: var(--neg); }
.margin-neutral { color: var(--ink-3); }
.clickable { cursor: pointer; }

/* ============================================================================
   HEADER & NAVIGATION
   ============================================================================ */

body::before {
    content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
    z-index: 21; background: var(--bg);
}
.hdr {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    view-transition-name: hdr;
}
.hdr-inner { display: flex; align-items: center; gap: 12px 28px; padding-block: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.mark {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    background: var(--accent); color: var(--on-accent); border-radius: var(--r);
    font: 700 12px/1 var(--font); letter-spacing: .02em;
}
.brand-text { display: grid; min-width: 0; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; line-height: 1.15; }
.brand-sub { font-size: 11.5px; color: var(--ink-3); }
.brand-sub:empty { display: none; }

.nav { display: flex; gap: 4px; }
.nav .nav-link {
    padding: 7px 12px; color: var(--ink-2); font-weight: 500; text-decoration: none;
    border-radius: 0; box-shadow: inset 0 -2px 0 transparent;
    transition: color .15s, box-shadow .2s var(--ease);
}
.nav .nav-link:hover { color: var(--ink); }
.nav .nav-link.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.live-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--neg); margin-left: 6px; vertical-align: 1px; animation: pulse 1.6s infinite; }
.live-dot.on { display: inline-block; }

.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.week-badge {
    font-weight: 600; font-size: 13px; padding: 5px 10px; border-radius: var(--r);
    background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap;
}
.updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.spin { display: none; width: 10px; height: 10px; border: 1.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.updated.busy .spin { display: inline-block; }
.theme-toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.theme-toggle button { background: none; border: 0; padding: 4px 9px; border-radius: 999px; font-size: 12px; color: var(--ink-3); }
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }

.tabbar { display: none; }

@media (max-width: 640px) {
    .hdr .nav { display: none; }
    .hdr-inner { gap: 10px; }
    .hdr-right { gap: 10px; }
    .updated { display: none; }
    .tabbar {
        display: grid; grid-template-columns: repeat(3, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        background: color-mix(in oklab, var(--bg) 88%, transparent);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--line); view-transition-name: tabbar;
        padding: 6px max(16px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    }
    .tabbar .nav-link {
        position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px;
        font-size: 11px; font-weight: 500; color: var(--ink-3); text-decoration: none;
    }
    .tabbar .nav-link.active { color: var(--ink); }
    .tabbar .nav-link.active svg { color: var(--accent); }
    .tabbar .live-dot { position: absolute; top: 6px; left: calc(50% + 8px); margin: 0; }
    .main-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */

.main-content { padding-block: 28px 64px; }
.page { display: grid; gap: 32px; animation: rise .35s var(--ease) both; }
.grid3 { display: grid; gap: 32px 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid2 { display: grid; gap: 32px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1050px) { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid3, .grid2 { grid-template-columns: minmax(0, 1fr); } }

.panel { border-top: 1.5px solid var(--ink); padding-top: 14px; min-width: 0; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-h h2, .panel-h h3 { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.panel-aside { font-size: 12px; color: var(--ink-3); }

.loading, .empty-state {
    padding: 20px 0; color: var(--ink-3); font-size: 13px;
}
.main-content > .loading, .main-content > .empty-state { text-align: center; padding: 64px 0; }
.error-message { padding: 16px; border-radius: var(--r); color: var(--neg); background: color-mix(in oklab, var(--neg) 10%, transparent); }

/* page headings */
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pg-head h1 { font-size: 26px; letter-spacing: -.02em; font-weight: 600; }
.eyebrow { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

/* ============================================================================
   BUTTONS, CHIPS, BADGES
   ============================================================================ */

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 8px 14px; font-weight: 500; color: var(--ink); text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.btn:hover:not(:disabled) { border-color: var(--ink-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.icon-btn {
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
}
.icon-btn:hover:not(:disabled) { border-color: var(--ink-3); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* team chip + name */
.tn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tn > span:last-child { overflow-wrap: anywhere; }
.tm {
    flex: none; display: inline-grid; place-items: center; width: 24px; height: 18px;
    font: 700 9.5px/1 var(--font); letter-spacing: .03em; border-radius: 4px;
    background: oklch(var(--tl) var(--tc) var(--h)); color: oklch(var(--tli) var(--tci) var(--h));
    transition: transform .15s var(--ease);
}

/* team highlighting */
.r, .aw, .tx { padding-inline: 6px; margin-inline: -6px; border-radius: 4px; }
.r, .aw, .tx, .mu-t, .inj, .tn, .mside, .side, .mu-f, [data-t] { transition: background-color .15s, box-shadow .15s; }
.t-on { background-color: oklch(var(--tl) var(--tc) var(--th) / .6); box-shadow: 0 0 0 3px oklch(var(--tl) var(--tc) var(--th) / .6); border-radius: 4px; }
.t-on .tm { transform: scale(1.08); }
tr.t-on { background: none; box-shadow: none; }
tr.t-on td:first-child { background-color: oklch(var(--tl) var(--tc) var(--th) / .6); }

.tag {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.tag.out { background: color-mix(in oklab, var(--neg) 14%, transparent); color: var(--neg); }
.tag.day-to-day, .tag.questionable, .tag.probable { background: color-mix(in oklab, var(--warn) 16%, transparent); color: var(--warn); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.streak-indicator { font-size: 9px; margin-left: 5px; vertical-align: 1px; }
.streak-indicator.hot { color: var(--pos); }
.streak-indicator.cold { color: var(--neg); }

.status-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: 2px; background: var(--pos); }
.status-dot.day-to-day, .status-dot.questionable, .status-dot.probable, .status-dot.scheduled { background: var(--warn); }
.status-dot.out { background: var(--neg); }
.status-dot.dropped, .status-dot.final { background: var(--ink-3); }
.status-dot.in-progress { background: var(--pos); animation: pulse 1.6s infinite; }

.status-text { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.status-text.active { color: var(--pos); }
.status-text.day-to-day, .status-text.questionable, .status-text.probable { color: var(--warn); }
.status-text.out { color: var(--neg); }
.status-text.dropped { color: var(--ink-3); font-style: italic; font-weight: 500; }

/* ============================================================================
   HOMEPAGE
   ============================================================================ */

.hero { display: grid; gap: 16px; }
.hero-top { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hero h1 { margin-top: 4px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; }
.hl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .hl-grid { grid-template-columns: minmax(0, 1fr); } }
.hl {
    background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
    padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: end;
    text-align: left; color: inherit; font: inherit; width: 100%;
    transition: transform .2s var(--ease), border-color .2s;
}
.hl:not(.hl-empty):hover { transform: translateY(-2px); border-color: var(--ink-3); }
.hl-empty { cursor: default; }
.hl-label { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.hl-teams { display: grid; gap: 8px; font-weight: 500; font-size: 15px; min-width: 0; }
.hl-vs { font-size: 11px; color: var(--ink-3); padding-left: 32px; }
.hl-n { text-align: right; }
.hl-n .num { display: block; font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.hl-n .u { font-size: 12px; color: var(--ink-3); }
@media (max-width: 520px) { .hl-n .num { font-size: 34px; } .hl { padding: 16px; } }

/* list rows (standings, rankings, performers, deltas) */
.rows { display: grid; }
.r {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding-block: 8px; border-bottom: 1px solid var(--line);
}
.r:last-child { border-bottom: 0; }
.r.two { grid-template-columns: minmax(0, 1fr) auto; }
.r.clickable:hover { background-color: var(--surface-2); }
.r .rk { color: var(--ink-3); font-size: 12px; font-family: var(--num); }
.r .v { text-align: right; white-space: nowrap; font-family: var(--num); font-variant-numeric: tabular-nums; }
.r .v.big { font-size: 15px; font-weight: 600; }
.r .sub { display: block; color: var(--ink-3); font-size: 12px; font-family: var(--num); font-weight: 400; }
.r .nm { font-weight: 500; min-width: 0; }
.rank-move { font-size: 10.5px; font-family: var(--num); color: var(--ink-3); margin-left: 6px; }
.rank-move.up { color: var(--pos); }
.rank-move.down { color: var(--neg); }

/* awards */
.aw { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.aw:last-child { border-bottom: 0; }
.aw-e { font-size: 16px; line-height: 1.3; }
.aw-t { color: var(--ink-2); font-size: 12.5px; }
.aw-t b { color: var(--ink); font-weight: 600; }
.aw-d { display: block; color: var(--ink-3); font-size: 12px; }

/* injuries */
.inj { padding: 10px 6px; margin-inline: -6px; border-bottom: 1px solid var(--line); display: grid; gap: 5px; border-radius: 4px; cursor: pointer; }
.inj:last-child { border-bottom: 0; }
.inj:hover { background-color: var(--surface-2); }
.inj-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.inj p { font-size: 12.5px; color: var(--ink-3); max-width: 65ch; }
.injuries-scroll { max-height: 420px; overflow-y: auto; padding-right: 4px; }

/* transactions */
.tx { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--line); }
.tx:last-child { border-bottom: 0; }
.tx.clickable:hover { background-color: var(--surface-2); }
.tx-s { font-weight: 700; text-align: center; font-family: var(--num); }
.tx-s.add { color: var(--pos); }
.tx-s.drop { color: var(--neg); }
.tx-s.trade { color: var(--accent-ink); }

/* streamers */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }
.st {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 14px; display: grid; gap: 6px; cursor: pointer;
    transition: transform .2s var(--ease), border-color .2s;
}
.st:hover { transform: translateY(-2px); border-color: var(--ink-3); }
.st-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.st-name { font-weight: 600; }
.games-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.st-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12.5px; }
.st-meta .num.strong { color: var(--ink); }
.game-badges { display: flex; gap: 4px; flex-wrap: wrap; padding-top: 2px; }
.game-badge { font-size: 11px; font-family: var(--num); padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); }

/* ============================================================================
   MATCHUPS PAGE
   ============================================================================ */

.wk-nav { display: flex; align-items: center; gap: 12px; }
.mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.mu {
    background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px);
    display: grid; align-content: start; cursor: pointer; color: inherit;
    transition: transform .2s var(--ease), border-color .2s;
}
.mu:hover { transform: translateY(-2px); border-color: var(--ink-3); }
.mu-h { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.mu-t { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; }
.mu-t + .mu-t { border-top: 1px solid var(--line); }
.mu-t .nm { font-weight: 500; }
.mu-t.fav .nm { font-weight: 650; }
.mu-t .sc { text-align: right; }
.mu-t .sc .num { display: block; font-size: 20px; font-weight: 600; line-height: 1.1; }
.mu-t .sc .p { font-size: 11.5px; color: var(--ink-3); font-family: var(--num); }
.mu-f { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mu-f b { color: var(--ink); font-weight: 600; }
.fav-flag { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* legend */
.legend-container { display: grid; justify-items: start; gap: 10px; }
.legend-toggle {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12.5px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2);
}
.legend-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.legend-panel {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 28px; width: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px);
    padding: 0 18px; max-height: 0; overflow: hidden; opacity: 0; border-width: 0;
    transition: max-height .35s var(--ease), opacity .25s, padding .35s var(--ease);
}
.legend-panel.open { max-height: 600px; opacity: 1; padding: 16px 18px; border-width: 1px; }
.legend-section h4 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.legend-items { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-item .status-dot { margin: 0; }
.legend-color { font-family: var(--num); font-weight: 600; }
.legend-color.positive { color: var(--pos); }
.legend-color.negative { color: var(--neg); }
.legend-badge { width: 12px; height: 12px; border-radius: 3px; }
.legend-badge.consistent { background: var(--pos); }
.legend-badge.average { background: var(--warn); }
.legend-badge.volatile { background: var(--neg); }
.legend-cal { display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: 3px; font-family: var(--num); font-size: 11px; font-weight: 600; }
.legend-cal.future { background: var(--accent-soft); color: var(--accent-ink); }
.legend-cal.past { background: var(--surface-2); color: var(--ink-2); }
.legend-cal.none { color: var(--ink-3); border: 1px solid var(--line); }

/* ============================================================================
   MATCHUP DETAIL
   ============================================================================ */

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

.mhead {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 24px; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); padding: 20px 22px;
}
.mside { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.mside.r2 { justify-items: end; text-align: right; }
.mside .tn { font-weight: 600; font-size: 16px; }
.msc { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.mside .small { font-family: var(--num); }
.mmid { display: grid; gap: 10px; justify-items: center; text-align: center; min-width: 0; }
.mlead { font-size: 13px; color: var(--ink-2); }
.mlead b { color: var(--ink); font-weight: 600; }
.tug { position: relative; display: flex; gap: 2px; width: 100%; max-width: 380px; height: 8px; }
.tug > span { border-radius: 2px; background: oklch(var(--tli) var(--tci) var(--h)); min-width: 2px; transition: flex-grow .6s var(--ease); }
.tug::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--ink-3); }
.tug .proj { position: absolute; top: -5px; width: 2px; height: 18px; margin-left: -1px; background: var(--accent); border-radius: 1px; }
.tug .proj span { position: absolute; top: 21px; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); font-style: normal; }
.mfoot { display: flex; gap: 4px 14px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.mfoot b { color: var(--ink-2); font-weight: 600; }
.mfoot .num { color: var(--ink-2); }
@media (max-width: 720px) {
    .mhead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px; }
    .mmid { grid-column: 1 / -1; order: 3; padding-top: 6px; }
    .msc { font-size: 28px; }
}

/* segmented control (detail tabs, day tabs) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); padding: 3px; gap: 2px; background: var(--surface); max-width: 100%; overflow-x: auto; }
.seg button {
    background: none; border: 0; padding: 6px 12px; border-radius: calc(var(--r) - 2px);
    color: var(--ink-2); font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s;
}
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--ink); color: var(--bg); }

/* schedule comparison */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sched { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 640px; }
.sched th { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 4px; text-align: center; }
.sched th .dt { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sched th.today { color: var(--accent-ink); }
.sched td { text-align: center; padding: 8px 4px; border-radius: calc(var(--r) - 2px); font-weight: 600; font-family: var(--num); font-variant-numeric: tabular-nums; }
.sched td.team-c { text-align: left; font-weight: 500; font-family: var(--font); white-space: nowrap; padding-right: 10px; }
.sched td.past { background: var(--surface-2); color: var(--ink-2); }
.sched td.fut { background: var(--accent-soft); color: var(--accent-ink); }
.sched td.none { color: var(--ink-3); }
.sched td.past.none { background: var(--surface-2); }
.sched td.fut.none { background: transparent; border: 1px dashed var(--line); }
.sched td.tot { border: 1px solid var(--line); }
.potential-ok { color: var(--pos); }
.potential-overflow { color: var(--warn); }
.sched-legend { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.sched-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sched-legend b { font-family: var(--num); }
.sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.sw.past { background: var(--surface-2); border: 1px solid var(--line); }
.sw.fut { background: var(--accent-soft); }

/* rosters */
.rost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (max-width: 1100px) { .rost-grid { grid-template-columns: minmax(0, 1fr); } }
.rost-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rost-h .tn { font-weight: 600; font-size: 15px; }
.rost-meta { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; }
.rost-meta b { color: var(--ink); font-weight: 600; font-family: var(--num); }

table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.roster-t { min-width: 600px; }
.t th {
    font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em;
    text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.t td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; transition: background-color .15s; }
.t th.l, .t td.l { text-align: left; }
.t tbody tr { cursor: pointer; }
.t tbody tr:hover td { background-color: var(--surface-2); }
.t tr.overperforming td { background-color: color-mix(in oklab, var(--pos) 6%, transparent); }
.t tr.underperforming td { background-color: color-mix(in oklab, var(--neg) 6%, transparent); }
.t tr.bench-player td, .t tr.ir-player td { color: var(--ink-3); }
.t tr.dropped td { color: var(--ink-3); font-style: italic; }
.t tfoot td, .t tr.totals-row td { font-weight: 650; border-bottom: 0; border-top: 1.5px solid var(--ink); cursor: default; background: none !important; }
.t .pl { font-weight: 500; }
.t .pos-c { color: var(--ink-3); }
.t .total { color: var(--accent-ink); font-weight: 650; }
.t .games { color: var(--ink-3); }
.t .games-rem { color: var(--warn); font-weight: 600; }

.winner { text-align: center; display: grid; gap: 4px; padding-block: 18px 0; }
.winner .tn { justify-content: center; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.winner .num { color: var(--ink); font-weight: 600; }

/* daily breakdown */
.daily-view { display: grid; gap: 18px; }
.daily-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.completed-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.daily-schedule { display: grid; gap: 16px; animation: rise .3s var(--ease) both; }
.lineup-notice { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r); font-size: 13px; }
.lineup-notice.warning { background: color-mix(in oklab, var(--warn) 12%, transparent); color: var(--ink); }
.lineup-notice.override { background: color-mix(in oklab, var(--pos) 12%, transparent); color: var(--ink); }
.daily-team-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.daily-team-h .tn { font-weight: 600; font-size: 15px; }
.daily-proj { font-size: 12.5px; color: var(--ink-3); font-family: var(--num); }
.daily-section { margin-top: 12px; }
.section-header { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.daily-section.bench .t td, .daily-section.ir .t td { color: var(--ink-3); }
.daily-t { min-width: 420px; }
.t td.slot.editable {
    cursor: pointer; color: var(--accent-ink); font-weight: 600;
    text-decoration: underline dotted; text-underline-offset: 3px;
}
.t td.slot.editable:hover { background-color: var(--accent-soft); }
.proj-excluded { text-decoration: line-through; color: var(--ink-3); }
.dnp { font-size: 11px; color: var(--ink-3); font-weight: 600; font-family: var(--font); }
.inferred-icon { margin-right: 4px; font-size: 11px; }

/* ============================================================================
   LIVE PAGE
   ============================================================================ */

.live-head { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; }
.live-head h1 { font-size: 26px; letter-spacing: -.02em; font-weight: 600; }
.live-select { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; max-width: 100%; }
.live-status { margin-left: auto; font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.ldot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); animation: pulse 1.6s infinite; }
.board {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center;
    padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
}
.side { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.side.r2 { text-align: right; justify-items: end; }
.side .tn { font-weight: 600; font-size: 15px; }
.side .score { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -.03em; border-radius: 6px; padding-inline: 4px; margin-inline: -4px; }
.side .pj { font-size: 12.5px; color: var(--ink-3); font-family: var(--num); }
.mid { text-align: center; font-size: 12px; color: var(--ink-3); }
@media (max-width: 560px) { .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px; } .mid { display: none; } .side .score { font-size: 36px; } }
.live-t { min-width: 460px; }
.live-t .player-pos { font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.opp-team { display: block; font-weight: 600; font-family: var(--num); }
.opp-time { display: block; font-size: 11px; color: var(--warn); }
.opp-time.status-live { color: var(--pos); font-weight: 600; }
.opp-time.status-final { color: var(--ink-3); }
.col-fpts { color: var(--accent-ink); font-weight: 650; }
.no-players { padding: 20px 0; color: var(--ink-3); }
.live-legend { display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--ink-2); }
.live-legend span { display: inline-flex; align-items: center; }

/* rolling digits + change flash */
.dg { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: -.22em; }
.strip { display: block; line-height: 1.15em; transition: transform .7s var(--ease); }
.flash { animation: flash 1.2s ease-out; }

/* ============================================================================
   SKELETONS & ENTRANCE
   ============================================================================ */

.sk {
    display: block; max-width: 100%; height: .8em; border-radius: 3px;
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 40%, var(--surface-2) 80%);
    background-size: 300% 100%; animation: shimmer 1.4s linear infinite;
}
.enter .panel-h, .enter .rows > *, .enter .aw, .enter .inj, .enter .tx, .enter .st, .enter .hl,
.enter .mu, .enter .mhead, .enter .board, .enter tbody tr {
    animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms);
}

/* ============================================================================
   MODALS - player card
   ============================================================================ */

.modal {
    position: fixed; inset: 0; z-index: 50; display: none;
    align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal.active { display: flex; animation: fadeIn .2s ease both; }
.modal.active .modal-content { animation: cardIn .32s var(--ease) both; }
.modal.closing { animation: fadeOut .18s ease both; }
.modal.closing .modal-content { animation: cardOut .18s ease both; }
.modal-content {
    width: min(640px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.modal-content.modal-large { width: min(860px, 100%); }
.modal-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.modal-title-block { display: grid; gap: 6px; min-width: 0; }
.modal-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-title-row h3, .modal-header > h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.modal-sub { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-2); }
.modal-sub:empty { display: none; }
.position-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.position-badge:empty, .status-badge:empty { display: none; }
.status-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--pos) 14%, transparent); color: var(--pos); }
.status-badge.out { background: color-mix(in oklab, var(--neg) 14%, transparent); color: var(--neg); }
.status-badge.day-to-day, .status-badge.questionable, .status-badge.probable { background: color-mix(in oklab, var(--warn) 16%, transparent); color: var(--warn); }
.modal-close {
    flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
    font-size: 20px; line-height: 1; color: var(--ink-2); display: grid; place-items: center;
}
.modal-close:hover { color: var(--ink); border-color: var(--ink-3); }
.modal-body { padding: 18px 22px 24px; overflow-y: auto; overscroll-behavior: contain; }

.pc { display: grid; gap: 24px; }
.pc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px); overflow: hidden; }
.tile { display: grid; gap: 2px; padding: 12px 14px; background: var(--surface); }
.tile + .tile { border-left: 1px solid var(--line); }
.tile-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tile-value { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.tile.first .tile-value { color: var(--accent-ink); }
@media (max-width: 520px) {
    .pc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile:nth-child(3) { border-left: 0; }
    .tile:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.cons { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.cons-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.cons-pill.consistent { background: color-mix(in oklab, var(--pos) 14%, transparent); color: var(--pos); }
.cons-pill.average { background: color-mix(in oklab, var(--warn) 16%, transparent); color: var(--warn); }
.cons-pill.volatile { background: color-mix(in oklab, var(--neg) 14%, transparent); color: var(--neg); }
.cons .num { color: var(--ink); }
.pc-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 720px) { .pc-cols { grid-template-columns: minmax(0, 1fr); } }
.pc-section { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pc-section h4 { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; border-top: 1.5px solid var(--ink); padding-top: 10px; }
.chart-box { position: relative; height: 220px; }
.gamelog-t td, .gamelog-t th { padding-block: 5px; }
.gamelog-t tbody tr { cursor: default; }
.news-item { padding-block: 8px; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-headline { font-size: 13px; max-width: 65ch; }
.news-date { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.schedule-item { display: flex; justify-content: space-between; gap: 10px; padding-block: 7px; border-bottom: 1px solid var(--line); font-size: 13px; }
.schedule-item:last-child { border-bottom: 0; }
.schedule-date { color: var(--ink-3); }
.schedule-opponent { font-family: var(--num); font-weight: 600; }

@media (max-width: 640px) {
    .modal { align-items: end; padding: 0; }
    .modal-content, .modal-content.modal-large { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
    .modal.active .modal-content { animation: sheetIn .36s var(--ease) both; }
    .modal.closing .modal-content { animation: sheetOut .2s ease both; }
    .modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
   SLOT OVERRIDE POPUP
   ============================================================================ */

.slot-popup {
    position: fixed; z-index: 60; width: 190px;
    background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px);
    box-shadow: var(--shadow); overflow: hidden; animation: popIn .18s var(--ease) both;
}
.slot-popup-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.slot-popup-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-popup-close { background: none; border: 0; font-size: 18px; line-height: 1; color: var(--ink-3); }
.slot-popup-close:hover { color: var(--ink); }
.slot-popup-options { display: grid; padding: 4px; }
.slot-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: none; border: 0; border-radius: 6px; text-align: left; font-size: 13px; }
.slot-option:hover { background: var(--surface-2); }
.slot-icon { width: 18px; text-align: center; }
.active-option .slot-icon { color: var(--pos); font-weight: 700; }

/* ============================================================================
   VIEW TRANSITIONS
   ============================================================================ */

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(morph) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .75, .2, 1); }

/* ============================================================================
   KEYFRAMES & MOTION PREFERENCES
   ============================================================================ */

@keyframes rise { from { transform: translateY(6px); } to { transform: none; } }
@keyframes rowIn { from { opacity: .15; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { from { background-color: var(--accent-soft); } to { background-color: transparent; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetOut { from { transform: none; } to { transform: translateY(100%); } }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}