/* The look: a rink at night. A cool blue-slate base ("bench"), cards a step lighter ("boards"), ice-white
   text. What each color means, everywhere: --live (goal-light red) is something that needs you or went against you
   (a lineup violation, keepers to pick, a trade offer, an error, a loss, a player out) and live games; --hint (amber)
   is a suggestion or caution (a bench player who could start, day-to-day); --me (your team's color) is yours and the
   main action on a screen; gray is information. Type: Barlow
   Condensed for team names, scores and section titles (jersey lettering), Barlow for everything else, with
   even-width digits so columns line up. Cards are fills, not outlines. --me / --opp are the two fantasy
   teams' own colors (set from the data), with --me-ink / --opp-ink the text color that reads on each.
   Zero and negative points are gray. */
:root {
  --bg: #0E141B; --panel: #151D27; --panel-2: #121921; --raised: #1D2733; --mark: #19222D; --line: #283342; --line-2: #1D2631;
  --text: #E8EEF4; --text-2: #C3CDD8; --muted: #8E9BAA; --dim: #566374;
  --me: #8ED8F8; --opp: #A9B4C1; --me-ink: #07090C; --opp-ink: #07090C; --live: #FF4B55; --hint: #FFC56B; --win: #3DDC84;
  --sans: 'Barlow', system-ui, sans-serif; --display: 'Barlow Condensed', 'Barlow', sans-serif; --mono: var(--sans);
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
}
:root { --total-bg: #1D2733; --total-edge: #2E3B4C; --me-tc: var(--me); --opp-tc: var(--opp); --me-edge: transparent; --opp-edge: transparent; --faint: #2E3A49; --scrim: rgba(6,9,13,0.72); --soft: #A9B4C1; --none: #4C5867; --lead: #FFFFFF;
  --cmp-a: #E8EEF4; --cmp-b: #7F9CB8; }  /* Compare's two players: A bright, B slate (light mode: A dark) */
/* Light mode (the header button switches and saves it; dark is the default): the same rink in daylight. Team colors are
   darkened where they're used as text so light colors (gold, lime, silver) still read on white. */
:root[data-theme="light"] {
  --bg: #EEF2F6; --panel: #FFFFFF; --panel-2: #F6F8FA; --raised: #E6EBF1; --mark: #E9EEF4; --line: #D6DDE5; --line-2: #E6EBF0;
  --text: #0F1720; --text-2: #364352; --muted: #66727F; --dim: #A2ACB7; --hint: #9A6200;
  --faint: #C5CDD7; --scrim: rgba(15,23,32,0.35); --soft: #4A5663; --none: #A2ACB7; --lead: #0F1720;
  --total-bg: #E6EBF1; --total-edge: #C5CDD7; --cmp-a: #2F3B48; --cmp-b: #6E8DAB;
}
:root[data-theme="light"] .src.rw { background: #FFE9D9; color: #B4541A; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-variant-numeric: tabular-nums; }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:active:not(:disabled) { transform: scale(0.97); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--me); outline-offset: 2px; }
.mono { font-family: var(--mono); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } button:active { transform: none; } }
.loading, .error { padding: 40px 20px; color: var(--muted); text-align: center; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; padding-top: env(safe-area-inset-top); padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* Header and scoreboard */
.top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.theme-btn { flex: none; width: 44px; height: 44px; border-radius: var(--r-m); border: 0; background: var(--panel);
  color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.top select { flex: 1; min-height: 44px; background: var(--panel); color: var(--text); border: 0;
  border-radius: var(--r-m); padding: 0 12px; font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 0.01em; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); margin-right: 6px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.others { display: flex; gap: 6px; padding: 8px 12px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.others::-webkit-scrollbar { display: none; }
.others button { flex: none; min-height: 34px; display: flex; align-items: center; padding: 0 10px; border: 0;
  border-radius: var(--r-s); background: var(--panel); font-size: 12px; font-weight: 600; color: var(--muted); gap: 6px; }
.others .badge.xs { width: 20px; height: 23px; }
.others .badge.xs svg { filter: none; }
.others .dot { color: var(--dim); }
.others button.on { color: var(--text); background: var(--raised); }
.board { padding: 8px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.board-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bt.right { align-items: flex-end; text-align: right; }
.bt-score { display: flex; align-items: center; gap: 10px; }
.bt.right .bt-score { flex-direction: row-reverse; }
/* Team crest: a shield in the team's color with a darker stripe and its monogram (crest() in app.js). */
.badge { flex: none; width: 44px; height: 50px; padding: 0; border: 0; background: none !important; display: block; }
.badge svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
.badge .crest-txt { font-family: var(--display); font-weight: 800; letter-spacing: 0.02em; }
.bt-pts { font-family: var(--display); font-weight: 700; font-size: 44px; letter-spacing: -0.01em; line-height: 1; }
.bt-name { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; }
/* Names stay on one line (fitNames shrinks a long one, then it ends in an ellipsis). */
.bt-name, .chero-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.25; padding-bottom: 1px; }
.bt > div, .chero .grow { min-width: 0; max-width: 100%; }
.bt-rec { font-size: 12px; color: var(--muted); font-weight: 500; }
.bt-limits { display: flex; gap: 10px; margin-top: 6px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-2); }
.bt.right .bt-limits { justify-content: flex-end; }
.bt-limits small { font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); margin-right: 4px; }
.bt-limits .maxed { color: var(--live); }

/* Day navigation and roster grid */
.daynav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line-2); }
.daynav button { width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; }
.daynav button:disabled { color: var(--faint); cursor: default; }
.daynav .label { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: 0.01em; }
.daynav .label .mono { font-family: var(--sans); font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.rows { display: flex; flex-direction: column; gap: 1px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 1px; }
.tot-cell { background: var(--total-bg); min-height: 40px; padding: 10px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tot-cell.opp .tot-top { flex-direction: row-reverse; }
.tline { display: flex; justify-content: space-between; gap: 3px; font-family: var(--mono);
  font-size: 10px; letter-spacing: -0.04em; font-weight: 700; color: var(--text-2); text-align: center; }
.tline span { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.tline small { font-family: var(--sans); font-size: 8px; font-weight: 800; letter-spacing: 0; color: var(--muted); }
.tline .zero { color: var(--dim); }
/* Team-colored badge with the number cut out (dark or white text, whichever reads on the color). */
.pill { border-radius: 5px; padding: 1px 5px; font-weight: 800; line-height: 1.2; }
/* score boxes: the one place team colors show (applyColors) */
.pill.me, .tline.me .pill { background: var(--pill-me, var(--me)); color: var(--pill-me-ink, var(--me-ink)); box-shadow: inset 0 0 0 1px var(--pill-me-edge, transparent); }
.pill.opp, .tline.opp .pill { background: var(--pill-opp, var(--opp)); color: var(--pill-opp-ink, var(--opp-ink)); box-shadow: inset 0 0 0 1px var(--pill-opp-edge, transparent); }
.tline .pill { align-self: center; padding: 0 4px; border-radius: 4px; min-width: 9px; font-size: 10px; line-height: 12px; }
.tline span { line-height: 12px; }
.cell.bench .tline { color: var(--muted); }
.tline.blank { visibility: hidden; }
.cell.bench:not(.wk) .tline .pill { background: var(--line); color: var(--text-2); }  /* week view keeps bench players' counted stats in color */
.cell .tline { margin-top: 1px; }
.tot-top > span { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.tot-cell.opp .tot-top > span { align-items: flex-end; }
.tot-top > span em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.tot-top b { font-size: 16px; font-weight: 700; }
.total-row { border-top: 2px solid var(--total-edge); border-bottom: 2px solid var(--total-edge); margin: 6px 0; }
.total-row .slot { background: var(--total-bg); }
.slot { background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800;
  letter-spacing: 0.02em; color: var(--muted); }
.cell { all: unset; box-sizing: border-box; cursor: pointer; background: var(--panel); padding: 6px 7px; min-width: 0;
  display: flex; gap: 7px; align-items: flex-start; }
.cell.bench { background: var(--panel-2); }
.cell.empty { cursor: default; background: var(--panel-2); }
.cell.right { flex-direction: row-reverse; text-align: right; }
.face { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--raised); overflow: hidden; position: relative; }
.face img.head { position: relative; width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); transform-origin: 50% 22%; }  /* NHL mugs are chest-up: zoom to the face */
.face-init { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display);
  font-size: 13px; font-weight: 700; color: var(--muted); }
.face-wrap { position: relative; flex: none; }
.face-wrap img.logo { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; background: var(--bg); padding: 1px; }
.cell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cell-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cell.right .cell-top { flex-direction: row-reverse; }
.cell-name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0 5px; }  /* position and tags wrap under a long name (fitNames) */
.nmg { flex: none; max-width: 100%; display: flex; align-items: center; gap: 5px; min-width: 0; }  /* logo + name, never apart */
.cell.right .nmg { flex-direction: row-reverse; }
.nmg > .fit { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cell.right .cell-name { flex-direction: row-reverse; }
.cell-name .elig { flex: none; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.tlogo { flex: none; display: block; width: 26px; height: 26px; object-fit: contain; margin: -3px 0; }
.cell.bench .cell-name { color: var(--muted); }
.cell-pts { flex: none; font-family: var(--display); font-size: 17px; font-weight: 700; }
.cell-pts.pill { font-size: 14px; padding: 0 6px; letter-spacing: -0.02em; }
.cell-top { min-height: 20px; }
.tot-top .pill { font-size: 15px; padding: 2px 7px; }
.cell-meta { line-height: 1.25; font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-name .tag { flex: none; overflow: visible; margin: 0; }  /* tags never shrink; the name gives way */
.cell-meta .live { color: var(--live); }
.chips { display: flex; flex-wrap: wrap; gap: 2px; }
.cell.right .chips { justify-content: flex-end; }
.chip { font-size: 10px; font-weight: 600; color: var(--text-2); background: var(--line-2); border-radius: 3px; padding: 1px 4px; white-space: nowrap; }
.chip.hot { background: var(--me); color: var(--me-ink); font-weight: 700; }
.chip.hot.opp { background: var(--opp); color: var(--opp-ink); }
.tag { display: inline-block; font-size: 9px; font-weight: 800; padding: 1px 4px; border-radius: 4px; margin: 0 3px; vertical-align: 1px; }
.tag.out { background: var(--live); color: #fff; }
.tag.dtd { background: var(--hint); color: var(--bg); }
.tag.keep { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--muted); }
.tag.start.me { background: var(--me); color: var(--me-ink); }
.tag.start.opp { background: var(--opp); color: var(--opp-ink); }
/* Likely starter (P): filled in the team color with the letter cut out, like the confirmed starter (S). */
.tag.likely.me { background: var(--me); color: var(--me-ink); }
.tag.likely.opp { background: var(--opp); color: var(--opp-ink); }

/* Bottom bar: League, Clubhouse, Matchup, Roster, Free Agency, NHL scores */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; z-index: 5;
  display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding-bottom: env(safe-area-inset-bottom); }
.tabbar button { min-height: 58px; border: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 600; padding: 6px 0 4px; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-top: 2px solid transparent; }
.ticon { position: relative; display: block; width: 22px; height: 22px; }
.ticon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.on { color: var(--text); border-top-color: var(--me); font-weight: 700; }
.tabbar small { font-family: var(--mono); font-size: 10px; color: var(--muted); background: var(--line); border-radius: 6px; padding: 1px 5px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 20; width: calc(100% - 32px); max-width: 448px;
  padding: 12px 14px; border-radius: var(--r-m); background: var(--raised); box-shadow: 0 10px 30px rgba(0,0,0,0.4); font-size: 14px; font-weight: 600; line-height: 1.35; }

/* Roster screen: one row per slot (slot pill, player, season AVG and FPTS). Picking a player to move
   lights up the slots he can go to and dims the rest. */
.rhead { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.rhead .grow { flex: 1; min-width: 0; }
.autoset { flex: none; min-height: 34px; padding: 0 12px; border-radius: var(--r-m); border: 0; background: var(--me);
  color: var(--me-ink); font-size: 13px; font-weight: 700; }
.rwarn { padding: 9px 16px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--line); }
.rwarn.red { color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); }
.rwarn.amber { color: var(--hint); background: color-mix(in srgb, var(--hint) 10%, transparent); }
.kbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700;
  color: var(--live); background: color-mix(in srgb, var(--live) 12%, transparent); }
.kbar span { flex: 1; }
.g-signin { margin-top: 10px; }
.del-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.del-box b { font-size: 14px; font-weight: 800; color: var(--live); }
.del-box span { font-size: 12px; font-weight: 600; color: var(--muted); }
.del-box input { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 15px; }
.cdel { margin-top: 28px; }
.cdel .del-box { border: 1px solid color-mix(in srgb, var(--live) 35%, transparent); border-radius: 14px; }
.test-card { padding-bottom: 0; }
.test-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 8px; }
.test-head b { font-size: 14px; font-weight: 800; }
.test-head span { font-size: 12px; font-weight: 600; color: var(--muted); }
.test-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.test-acts .act { flex: 1 1 auto; }
.test-busy { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 0 14px 12px; }
.keepers { display: flex; flex-direction: column; gap: 10px; }
.khead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.khead b { font-size: 15px; font-weight: 800; }
.kteam { font-size: 12px; font-weight: 800; color: var(--text-2); padding: 8px 12px 2px; }
.krow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
.krow:first-child, .kteam + .krow { border-top: 0; }
.kplayer { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.kwho { display: flex; flex-direction: column; min-width: 0; }
.kname { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kyrs { font-size: 11px; font-weight: 600; color: var(--muted); }
.kpts { font-size: 12px; color: var(--muted); min-width: 40px; text-align: right; }
.krow .act { min-width: 84px; }
.kcell { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 12px; }
.kcell .act { min-width: 84px; }
.daynav button.label { width: auto; height: auto; min-height: 44px; flex-direction: row; flex-wrap: wrap; color: var(--text); font-size: 15px; font-weight: 700; }
.daynav .today { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 5px; border-radius: 4px; background: var(--me); color: var(--me-ink); }
.rhint { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; font-size: 12px; font-weight: 600;
  color: var(--muted); border-bottom: 1px solid var(--line); }
.rhint.on { background: var(--mark); color: var(--text-2); }
.rhint b { color: var(--text); }
.rhint button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--raised); font-size: 13px; font-weight: 600; }
.rbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; background: var(--bg);
  border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.rbar .seg { flex: none; width: 150px; }
.rbar select { min-width: 0; flex: 1; min-height: 34px; max-width: 170px; background: var(--panel); color: var(--text); border: 0;
  border-radius: var(--r-s); padding: 0 8px; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0; }  /* 16px: iPhones zoom in on smaller selects */
.rdir { flex: none; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: var(--panel);
  font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--text-2); }
/* The slot and name stay put (sticky) while the stats scroll sideways under them. */
.rlist { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rinner { width: max-content; min-width: 100%; }
.rrow { display: flex; align-items: stretch; min-height: 52px; background: var(--panel); border-bottom: 1px solid var(--line-2); transition: opacity .12s; }
.rrow.bench { background: var(--panel-2); }
/* The pinned column; translateZ gives it its own layer, so iPhone Safari repaints it (and its Draft buttons) whole as
   rows grow, rather than leaving part of it clipped until the list is touched. */
.rfix { position: sticky; left: 0; z-index: 1; flex: none; width: 214px; transform: translateZ(0); display: flex; align-items: center; gap: 6px;
  padding: 0 6px 0 8px; background: inherit; border-right: 1px solid var(--line-2); }
.rslot { flex: none; width: 44px; height: 32px; border-radius: var(--r-s); border: 1px solid transparent; background: var(--raised); color: var(--text-2);
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; gap: 3px; }
.rslot:disabled { cursor: default; }
.rslot.locked { color: var(--dim); background: transparent; border: 1px dashed var(--line); }
.rrow.moving .rslot { background: var(--me); border-color: var(--me); color: var(--me-ink); }
.rrow.moving { background: var(--mark); }
.rrow.target { background: var(--mark); }
.rrow.target .rfix { box-shadow: inset 3px 0 var(--me); }
.rrow.target .rslot { border-color: var(--me); color: var(--me-tc); }
.rrow.dimmed { opacity: 0.4; }
.rplayer { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; padding: 7px 0; display: flex; flex-direction: column; gap: 3px; }
.rplayer:disabled { cursor: default; }
.rname { font-size: 14px; font-weight: 600; white-space: nowrap; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; }
.rname > span { overflow: hidden; text-overflow: ellipsis; }
.rname .elig { flex: none; font-size: 10px; font-weight: 700; color: var(--muted); }
.rname .tag { flex: none; overflow: visible; }  /* tags never shrink; the name gives way */
.rrow.empty .rname { color: var(--dim); font-weight: 600; }
.rmeta { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmeta .live { color: var(--live); }
.rstats { display: flex; align-items: center; gap: 2px; padding: 0 12px 0 6px; }
.rc { width: 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--mono); font-size: 12px;
  font-weight: 600; color: var(--text-2); }
.rc small { font-family: var(--sans); font-size: 8px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); }
.rc.b { width: 46px; font-weight: 700; color: var(--text); }
.rc.w { width: 44px; }
.rc.z { color: var(--dim); }
.rc { cursor: pointer; }
.rc.on { color: var(--text); }
.rc.on small { color: var(--me-tc); }
.rgap { height: 10px; background: var(--bg); }

/* Sheets */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 10; display: flex; justify-content: center; }
.sheet { position: absolute; top: calc(48px + env(safe-area-inset-top)); bottom: 0; width: 100%; max-width: 480px; background: var(--panel);
  border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -12px 40px rgba(0,0,0,0.35); }
/* A sheet slides up when it opens (only then: the app re-renders often). */
.scrim.enter { animation: fade-in .2s ease-out; }
.scrim.enter .sheet { animation: sheet-up .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.sheet-scroll { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.grab { display: flex; justify-content: center; padding-top: 8px; }
.grab div { width: 36px; height: 4px; border-radius: 2px; background: var(--faint); }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; border-bottom: 1px solid var(--line-2); }
.sheet-head .face, .sheet-head .face-wrap .face { width: 52px; height: 52px; }
.sheet-head .grow { flex: 1; min-width: 0; }
.sheet-title { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.1; }
.sheet-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.sheet-pts { text-align: right; }
.sheet-pts .mono { font-family: var(--display); font-size: 32px; font-weight: 700; }
.sheet-pts small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.close { flex: none; width: 44px; height: 44px; border-radius: var(--r-m); border: 0; background: var(--raised);
  display: flex; align-items: center; justify-content: center; }
/* Segmented control: switches between two or three modes of the same view (Day / Week, Lineup / Depth chart). */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px; background: var(--panel-2);
  border-radius: var(--r-m); }
.sheet .seg { background: var(--bg); }
.seg button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; }
.seg button.on { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.seg.small { border-radius: 10px; padding: 3px; }
.seg.small button { min-height: 34px; font-size: 13px; border-radius: 7px; white-space: nowrap; padding: 0 4px; }
.pad { padding: 16px; display: flex; flex-direction: column; gap: 22px; }
.pad-top { padding: 12px 16px 0; }
/* Section title: sentence case in the display face, with an optional muted note (em.since). */
.h { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 0.01em; color: var(--text); margin-bottom: 10px; line-height: 1.15; }
.card { background: var(--panel); border-radius: var(--r-l); overflow: hidden; }
.sheet .card { background: var(--bg); }

/* Player tab */
.bd { display: grid; grid-template-columns: 1fr 40px 56px 56px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.bd .mono { text-align: right; }
.bd-total { display: grid; grid-template-columns: 1fr 56px; padding: 10px 12px; background: var(--panel-2); font-weight: 800; font-size: 13px; }
.bd-total .mono { text-align: right; color: var(--text); }
.play { display: grid; grid-template-columns: 70px 1fr 48px; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-2); align-items: center; font-size: 13px; }
.play .when { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.play .pts { font-family: var(--mono); font-size: 12px; font-weight: 700; text-align: right; }

/* Game view */
.scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.sl-team { display: flex; align-items: center; gap: 8px; }
.sl-team.home { justify-content: flex-end; }
.sl-team img { width: 34px; height: 34px; }
.sl-team b { font-family: var(--display); font-size: 22px; font-weight: 700; }
.sl-team .mono { font-family: var(--display); font-size: 36px; font-weight: 700; }
.sl-state { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); text-align: center; }
.sl-state.live { color: var(--live); }
.pbox { padding: 4px 12px; }
.pbox-row { display: flex; align-items: center; padding: 7px 0; font-family: var(--mono); font-size: 13px; }
.pbox-row + .pbox-row { border-top: 1px solid var(--line-2); }
.pbox-row.head { font-family: inherit; font-size: 11px; font-weight: 700; color: var(--muted); }
.pbox-row .t { flex: 1; font-family: var(--sans); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pbox-row .t img { width: 20px; height: 20px; }
.pbox-row span.c { width: 30px; text-align: center; }
.pbox-row span.tot { width: 34px; text-align: center; font-weight: 700; }
.pbox-row span.sog { width: 40px; text-align: right; color: var(--muted); }
.ts { display: flex; flex-direction: column; gap: 10px; }
.ts-line { display: grid; grid-template-columns: 56px 1fr 56px; font-size: 13px; align-items: center; }
.ts-line .mono { font-weight: 700; }
.ts-line .mono:last-child { text-align: right; }
.ts-line .lbl { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.ts-bar { display: flex; gap: 2px; height: 3px; margin-top: 4px; }
.ts-bar div { border-radius: 2px; }
.goal { display: grid; grid-template-columns: 54px 1fr auto; gap: 8px; padding: 9px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line-2); align-items: center; }
.goal.mine { background: var(--mark); }
.goal .when { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.goal .what { display: flex; gap: 8px; align-items: center; min-width: 0; }
.goal .what img { width: 22px; height: 22px; flex: none; }
.goal .line1 { font-size: 13px; font-weight: 700; }
.goal .line2 { font-size: 11px; color: var(--muted); margin-top: 2px; }
.goal .line2 b { color: var(--text); }
.goal .score { font-family: var(--mono); font-size: 12px; font-weight: 700; }
/* A goal's highlight: the play button on its row, and the player over everything (openClip) */
.goal .score { display: flex; align-items: center; gap: 8px; }
.clipbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%;
  background: var(--raised); color: var(--text); vertical-align: middle; margin-left: 6px; }
.goal .clipbtn { margin-left: 0; }
.clipbtn.none { visibility: hidden; }
.clipbtn svg { margin-left: 2px; }
.clipview { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .86); display: flex; align-items: center; justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
.clip-in { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 10px; }
.clip-head { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; font-weight: 700; }
.clip-head span { flex: 1; min-width: 0; }
.clip-x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; }
.clipview video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
.clip-err { margin: 0; color: rgba(255, 255, 255, .75); font-size: 13px; line-height: 1.4; }
.clip-err:empty { display: none; }
.ftag { display: inline-block; padding: 1px 4px; border-radius: 4px; color: var(--bg); font-size: 9px; font-weight: 800; margin-right: 4px; vertical-align: 1px; }
.btab { display: grid; gap: 2px; align-items: center; padding: 7px 10px; font-family: var(--mono); font-size: 12px; }
.btab.sk { grid-template-columns: minmax(0, 1fr) repeat(6, 26px) 40px; }
.btab.gk { grid-template-columns: minmax(0, 1fr) 30px 30px 30px 48px 40px; }
.btab + .btab { border-top: 1px solid var(--line-2); }
.btab.head { font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); background: var(--panel-2); }
.btab span { text-align: center; color: var(--text-2); }
.btab span:last-child { text-align: right; color: var(--muted); }
.btab .nm { text-align: left; display: flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--sans); color: var(--text); }
.btab .nm i { flex: none; width: 3px; height: 16px; border-radius: 2px; }
.btab .nm em { font-style: normal; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btab .nm small { flex: none; font-size: 10px; font-weight: 700; color: var(--muted); }
.btab.mine { background: var(--mark); }
.btab.mine .nm em { font-weight: 700; }
.btab .zero { color: var(--dim); }
.legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 3px; height: 12px; border-radius: 2px; }

/* Scores list */
.gcards { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.gcard { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-l); border: 0;
  background: var(--panel); text-align: left; width: 100%; }
.gc-main { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.gc-teams { display: flex; flex-direction: column; gap: 6px; }
.gc-team { display: flex; align-items: center; gap: 8px; }
.gc-team img { width: 24px; height: 24px; }
.gc-team b { flex: 1; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.gc-team .sog { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.gc-team .rec { margin-left: 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.gc-team .sc { width: 28px; text-align: right; font-family: var(--display); font-size: 24px; font-weight: 700; }
.gc-team.lost { color: var(--muted); }
.gc-state { padding-left: 12px; border-left: 1px solid var(--line-2); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); min-width: 64px; text-align: center; }
.gc-state.live { color: var(--live); }
.gc-mine { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.gc-mine span { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--r-s); background: var(--raised); font-size: 12px; font-weight: 600; }
.gc-mine i { width: 3px; height: 10px; border-radius: 2px; }

/* Research tab */
.stat4, .stat3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat3 { grid-template-columns: repeat(3, 1fr); }
.stat4 div, .stat3 div { background: var(--panel); border-radius: var(--r-m); padding: 10px 8px; text-align: center; }
.sheet .stat4 div, .sheet .stat3 div { background: var(--bg); }
.stat4 .mono, .stat3 .mono { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat4 small, .stat3 small { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; font-size: 13px; }
.fact + .fact { border-top: 1px solid var(--line-2); }
.fact span { color: var(--muted); font-weight: 600; flex: none; }
.fact b { text-align: right; font-weight: 600; }
.news { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.news-top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.src { padding: 1px 6px; border-radius: 4px; background: var(--line); color: var(--text-2); font-weight: 800; font-size: 10px; letter-spacing: 0.04em; }
.src.rw { background: #2A1B12; color: #FFB27A; }
.news-h { font-size: 14px; font-weight: 700; line-height: 1.35; }
.news-s { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 6px; }
.tbl { overflow-x: auto; margin: 0 -16px; padding: 0 16px; -webkit-overflow-scrolling: touch; }
.tbl table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.tbl th { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
  text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.tbl td { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line-2); color: var(--text-2); }
.tbl th:first-child, .tbl td:first-child, .tbl .team { text-align: left; }
.tbl td.team { font-family: var(--sans); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.tbl td.fp { color: var(--me-tc); font-weight: 700; }
.tbl td.fp.zero { color: var(--dim); }
.tbl tr.total td { color: var(--text); font-weight: 700; background: var(--panel-2); }
.tbl tr.minor td { color: var(--muted); }
.toggle { align-self: flex-start; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px 0 8px;
  border: 0; border-radius: 999px; background: var(--bg); color: var(--text-2); font-size: 13px; font-weight: 700; }
.toggle i { width: 30px; height: 18px; border-radius: 9px; background: var(--line); position: relative; transition: background .15s; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.toggle.on { color: var(--text); }
.toggle.on i { background: var(--me); }
.toggle.on i::after { transform: translateX(12px); background: var(--me-ink); }


/* Points-per-game box plot (research → Analytics): neutral colors for every player */
.box { background: var(--bg); border-radius: var(--r-m); padding: 12px 16px; }
.box-plot { position: relative; height: 26px; margin: 4px 4px; }
.box-plot i { position: absolute; top: 50%; transform: translateY(-50%); }
.box-plot .wh { height: 2px; background: var(--muted); }
.box-plot .cap { width: 2px; height: 14px; margin-left: -1px; background: var(--muted); }
.box-plot .iqr { height: 24px; border-radius: 5px; background: var(--line); border: 2px solid var(--text-2); box-sizing: border-box; }
.box-plot .med { width: 3px; height: 24px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.box-lbl { position: relative; height: 30px; margin: 0 4px; }
.box-lbl span { position: absolute; display: flex; flex-direction: column; font-family: var(--mono); font-size: 13px;
  font-weight: 700; color: var(--text); white-space: nowrap; }
.box-lbl .mid { transform: translateX(-50%); align-items: center; }
.box-lbl .start { transform: translateX(-2px); align-items: flex-start; }
.box-lbl .end { transform: translateX(calc(-100% + 2px)); align-items: flex-end; }
.box-lbl small { font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }

/* Points trend line chart (research → Analytics) */
svg.trend { display: block; width: 100%; height: auto; margin-top: 10px; background: var(--bg); border-radius: var(--r-m); }
svg.trend polyline { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.trend circle { fill: var(--text); }
svg.trend .grid { stroke: var(--line); stroke-width: 1; }
svg.trend .avg { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 4 3; }
svg.trend .ax { fill: var(--muted); font-family: var(--sans); font-size: 9px; }
svg.trend .avgl { fill: var(--text-2); }
.trend-key { margin-top: 8px; }
.trend-key i { width: 14px; height: 2px; border-radius: 1px; }
.trend-key i.pts { background: var(--text); }
.trend-key i.avg { background: repeating-linear-gradient(90deg, var(--dim) 0 4px, transparent 4px 7px); }
.pctcmp { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.pctcmp div { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pctcmp div + div { border-left: 1px solid var(--line-2); }
.pctcmp small { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
.pctcmp b { font-size: 15px; font-weight: 700; }

/* Upcoming Game tab */
.up-head { display: flex; align-items: center; gap: 12px; }
.up-head img { width: 40px; height: 40px; }
.up-head div { display: flex; flex-direction: column; gap: 2px; }
.up-head b { font-family: var(--display); font-size: 24px; font-weight: 700; }
.up-head span { font-size: 12px; color: var(--muted); font-weight: 600; }
.proj { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--bg); border-radius: var(--r-m); }
.proj small { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.proj b { font-family: var(--display); font-size: 26px; padding: 2px 10px; }
.fact em, .h em.since { font-style: normal; font-weight: 500; color: var(--muted); }
.h em.since { font-family: var(--sans); font-size: 13px; letter-spacing: 0; margin-left: 6px; }
.rank { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg); border-radius: var(--r-m); }
.rank b { font-family: var(--display); font-size: 28px; font-weight: 700; }
.rank span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.rank em { font-style: normal; color: var(--muted); font-weight: 500; }

/* Free Agency: search, position filter, the list (same rows as the roster, without slot pills) */
.fahead { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.fahead input, .panel input { width: 100%; min-height: 44px; border-radius: var(--r-m); border: 0; background: var(--panel);
  color: var(--text); padding: 0 12px; font: inherit; font-size: 16px; }  /* 16px: iPhones zoom in on smaller inputs */
.rbar .count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.rfix.fa { width: 190px; padding-left: 12px; }
.wbtn { flex: none; width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 50%; background: none; color: var(--dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }  /* the watch list, from the row */
.wbtn.on { color: var(--hint); }
.wbtn .ic { width: 18px; height: 18px; }
.wv { font-size: 8px; font-weight: 800; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 3px; margin-right: 5px;
  background: color-mix(in srgb, var(--hint) 18%, transparent); color: var(--hint); }
.more { display: block; width: calc(100% - 24px); margin: 12px; min-height: 44px; border-radius: var(--r-m); border: 0;
  background: var(--panel); color: var(--text-2); font-size: 14px; font-weight: 600; }

/* Player sheet actions and panels (add / drop / compare) */
.acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px 0; }
.panel .acts { padding: 0; }
/* Buttons: filled. Primary in your team color, destructive tinted red, the rest neutral. */
.act { min-height: 40px; padding: 0 16px; border-radius: var(--r-m); border: 0; background: var(--raised);
  color: var(--text); font-size: 14px; font-weight: 600; }
.act.go { background: var(--me); color: var(--me-ink); font-weight: 700; }
.act.warn { background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--live); }
.act.on { color: var(--hint); background: color-mix(in srgb, var(--hint) 14%, transparent); }
/* Not possible right now: grey, whatever its kind, so it reads as unavailable before it's pressed. */
.act:disabled { background: var(--raised); color: var(--muted); opacity: .5; cursor: default; }
.g-why { margin: -4px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; }  /* why the button next to it is grey */
.cfield.bad input { box-shadow: inset 0 0 0 1px var(--live); }
.acts-note { padding: 6px 16px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-l); background: var(--bg); }
.panel > b { font-size: 16px; }
.panel > span { font-size: 13px; color: var(--text-2); }
.drop-pick { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  font-size: 13px; font-weight: 700; }
.drop-pick + .drop-pick { border-top: 1px solid var(--line-2); }
.drop-pick.on { background: color-mix(in srgb, var(--live) 14%, transparent); box-shadow: inset 3px 0 var(--live); }
.drop-pick .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.drop-pick .elig { flex: none; font-size: 10px; color: var(--muted); }
.drop-pick .mono { margin-left: auto; font-size: 12px; color: var(--text-2); }
.slotp { flex: none; width: 34px; font-size: 10px; font-weight: 800; color: var(--muted); }

/* Compare */
/* Compare: player A light, B slate (CMP in app.js) */
.cmp-head { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: start; gap: 6px; }
.cmp-p { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; min-width: 0; }
.cmp-p .face { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--c); }
.cmp-p.a { --c: var(--cmp-a); } .cmp-p.b { --c: var(--cmp-b); }
.cmp-p b { font-family: var(--display); font-size: 20px; margin-top: 6px; line-height: 1.1; }
.cmp-p span { font-size: 11px; color: var(--muted); font-weight: 600; }
.cmp-vs { align-self: center; margin-top: -24px; text-align: center; font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--dim); }
.cmp-verdict { margin: 16px 0 6px; padding: 14px; border-radius: var(--r-l); background: var(--panel); }
.cv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cv-top b { font-family: var(--display); font-size: 20px; font-weight: 700; }
.cv-top span { font-size: 12px; color: var(--muted); font-weight: 600; }
.cv-bar { display: flex; gap: 3px; height: 10px; margin: 10px 0; }
.cv-bar i { border-radius: 5px; min-width: 4px; }
.cv-nums { display: flex; justify-content: space-between; }
.cv-nums span:last-child { text-align: right; }
.cv-nums b { display: block; font-size: 24px; font-weight: 800; }
.cv-nums small { font-size: 11px; color: var(--muted); font-weight: 600; }
.cmp-radar { margin: 6px 0 4px; text-align: center; }
.cmp-radar svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; overflow: visible; }
.cmp-radar .rg { fill: none; stroke: var(--line); stroke-width: 1; }
.cmp-radar .rg.mid { stroke-dasharray: 3 3; }
.cmp-radar .rl { font: 700 10px var(--sans); fill: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cmp-radar .rv { font: 700 11px var(--sans); font-variant-numeric: tabular-nums; }
.cmp-radar .rs { fill: var(--dim); }
.cmp-radar .sheet-sub { margin-top: 2px; }
/* A stat: both values, with bars growing outward from the label in the middle; the better side bright */
.cmp-row { display: grid; grid-template-columns: 1fr 84px 1fr; align-items: center; padding: 8px 12px; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line-2); }
.cmp-row em { font-style: normal; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.cb { display: flex; flex-direction: column; gap: 4px; }
.cb.a { align-items: flex-end; }   /* left player's bar grows from the middle toward the left */
.cb.b { align-items: flex-start; }
.cb .mono { font-size: 14px; color: var(--text-2); }
.cb i { display: block; height: 5px; border-radius: 3px; opacity: .3; max-width: 100%; }
.cb.win .mono { color: var(--text); font-weight: 800; }
.cb.win i { opacity: 1; }
.drop-pick:disabled { opacity: 0.35; cursor: default; }
.panel-err { color: var(--live) !important; font-weight: 700; }
.rc.w2 { width: 76px; }
.fact.mine-row { background: var(--mark); box-shadow: inset 3px 0 var(--me); }
.fact.mine-row b { font-weight: 800; }
.fact .mono { color: var(--muted); }

/* Depth chart: LW · C · RW columns, then D and G; badge = league-wide rank at his position, tier-colored */
.depthchart { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.depthchart .h { margin: 6px 0 6px 2px; }
.dlegend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.dlegend span { display: flex; align-items: center; gap: 5px; }
.dlegend i { width: 10px; height: 10px; border-radius: 3px; }
.dgrid { display: grid; gap: 6px; }
.dgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dcol { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 8px 8px 6px; border-radius: var(--r-m); background: var(--panel); }
.dhead b { font-family: var(--display); font-size: 20px; font-weight: 700; }
.dhead .drk { font-family: var(--mono); font-size: 11px; font-weight: 800; padding: 1px 5px; border-radius: 5px; background: var(--line); color: var(--text-2); }
.dhead .drk.good { background: color-mix(in srgb, #3DDC84 22%, transparent); color: #3DDC84; }
.dhead .drk.bad { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--live); }
.dhead small { width: 100%; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.dcard { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 7px; row-gap: 2px; align-items: center; padding: 7px 8px; border-radius: var(--r-m); background: var(--panel); border: 0;
  border-left: 3px solid var(--tier); --tier: var(--faint); }
.dcard.elite { --tier: #3DDC84; }
.dcard.starter { --tier: #5BC8FF; }
.dcard.depth { --tier: var(--dim); }
.dcard.off { opacity: 0.55; }
.drank { grid-row: span 2; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--tier); min-width: 30px; }
.dname { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; }
.dname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dname .tag { margin: 0; }
.dlogo { flex: none; width: 16px; height: 16px; object-fit: contain; }
.dmeta { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.dslot { font-style: normal; font-family: var(--sans); font-size: 9px; font-weight: 800; padding: 0 4px; border-radius: 3px; background: var(--line); color: var(--text-2); }
.dempty { font-size: 11px; color: var(--muted); padding: 6px 8px; }
.dlegend i.t-elite { background: #3DDC84; } .dlegend i.t-starter { background: #5BC8FF; } .dlegend i.t-depth { background: var(--dim); }
.dcard.prospect { --tier: #A66CFF; box-shadow: inset 0 0 0 1px color-mix(in srgb, #A66CFF 35%, transparent); }
.dlegend i.t-prospect { background: #A66CFF; }
.dmeta { white-space: nowrap; }
.dmulti { grid-column: 2; justify-self: start; margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; padding: 1px 5px;
  border-radius: 4px; border: 1px dashed var(--muted); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.dmulti.on { border-style: solid; border-color: var(--me); color: var(--me-tc); }
.dcard { grid-template-rows: auto auto auto; }
.acts.dpos { padding: 0; }
.drank { grid-row: span 3; }

/* Clubhouse */
.chero { display: flex; align-items: center; gap: 16px; padding: 18px 16px 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--me) 26%, transparent), transparent 75%); }
.badge.big { width: 68px; height: 78px; }
.badge.sm { width: 32px; height: 37px; }
.chero-name { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.05; }
.chero-rec { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.chero-run { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 3px; }
.club { gap: 20px; }
.cstars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cstar { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 12px 6px 10px; border-radius: var(--r-l); background: var(--panel); min-width: 0; }
.cstar .face { width: 48px; height: 48px; }
.cstar b { font-size: 13px; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cstar .mono { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.cstar small { font-size: 10px; color: var(--muted); font-weight: 600; }
.cprospect { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 12px; background: color-mix(in srgb, #A66CFF 12%, var(--panel)); border: 1px dashed #A66CFF; }
.cprospect b { display: block; font-size: 15px; }
.cprospect span { font-size: 12px; color: var(--text-2); }
.cprospect i { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: #A66CFF; color: #fff; }
.trophies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.trophy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px; border-radius: var(--r-l);
  background: var(--panel); border: 0; color: inherit; }
.trophy .trophy-art { width: 96px; height: 112px; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35)); }
.trophy:first-child .trophy-art { width: 132px; height: 154px; }
.trophy:first-child { grid-column: span 2; }
.trophy b { font-family: var(--display); font-size: 17px; font-weight: 700; }
.trophy span { font-size: 11px; color: var(--text-2); font-weight: 600; }
.trophy em { font-style: normal; font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.chips { display: flex; gap: 6px; margin-bottom: 8px; }
.chipx { display: flex; align-items: baseline; gap: 5px; padding: 6px 10px; border-radius: var(--r-s); background: var(--panel);
  font-size: 11px; font-weight: 700; color: var(--muted); }
.chipx b { font-family: var(--display); font-size: 18px; color: var(--text); }
.fact.gone b { color: var(--muted); }
.fact b em { font-style: normal; font-size: 10px; color: var(--muted); font-weight: 700; }
.fact b .mono { margin-left: 6px; color: var(--text-2); }
.fact b em.txdrop { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; }
/* Section tabs (Clubhouse, League): a row of words, the open one underlined in your team color. */
/* Section tabs: a horizontal rail. No vertical play (the active underline overlaps the bottom border by a
   pixel, which would otherwise make the strip scroll up and down), and a sideways fling stops at its ends. */
.csubs { position: relative; display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 0 16px; scrollbar-width: none; border-bottom: 1px solid var(--line-2); }
.csubs::-webkit-scrollbar { display: none; }
.csubs button { flex: none; min-height: 40px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  color: var(--muted); font-size: 15px; font-weight: 600; }
.csubs button.on { color: var(--text); border-bottom-color: var(--me); }
.csubs button:active:not(:disabled) { transform: none; }
.sched { display: grid; grid-template-columns: 30px 106px minmax(0, 1fr) auto 26px; gap: 8px; align-items: center; padding: 10px 12px; font-size: 12px; }
.sched + .sched { border-top: 1px solid var(--line-2); }
.sched.now { background: var(--mark); box-shadow: inset 3px 0 var(--me); }
.sched .wk { color: var(--muted); font-size: 11px; }
.sched .dates { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.sched .vs { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; }
.sched .sc { font-size: 11px; color: var(--text-2); }
.sched .res { text-align: center; font-size: 11px; font-weight: 800; border-radius: 4px; padding: 1px 0; }
.sched .res.W { background: color-mix(in srgb, #3DDC84 20%, transparent); color: #3DDC84; }
.sched .res.L { background: color-mix(in srgb, var(--live) 18%, transparent); color: var(--live); }
.sched .res.T { background: var(--line); color: var(--text-2); }

/* League */
.lhead { padding: 14px 16px 2px; }
.h.gap, .gap { margin-top: 22px; }
.tlink { all: unset; cursor: pointer; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.badge.xs { width: 18px; height: 21px; }
.badge.xs svg { filter: none; }
.trade-side .badge.xs, .dpick .badge.xs { display: inline-block; vertical-align: -5px; margin-right: 6px; }
.tbl.stand td.team { max-width: 120px; }
.tbl.stand tr.me td { background: var(--mark); }
.tbl.stand tr.me td:first-child { box-shadow: inset 3px 0 var(--me); }
.tbl.stand td { padding: 11px 6px; border-bottom-color: var(--line-2); }
.tbl.stand th { text-transform: none; font-size: 12px; }
.tbl.stand td:first-child { color: var(--muted); }
.tbl.stand td.team .tlink span { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 0.01em; }
.tbl.stand tr.cutline td { position: sticky; left: 0; padding: 4px 16px; border-bottom: 0; background: var(--bg); min-width: 0; max-width: none; box-shadow: none; }
.tbl.stand tr.cutline span { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted); }
.tbl.stand tr.cutline span::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.tbl.stand td.zero, .dpick .pts.zero { color: var(--dim); }
.tbl.stand td.po { color: var(--text); font-family: var(--display); font-size: 16px; font-weight: 700; }
/* Playoff odds: the number over a thin bar of the same share (neutral, not a team color). */
.po-bar { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.po-bar i { display: block; height: 100%; border-radius: 2px; background: var(--text-2); }
.tbl.stand td.strk.W { color: var(--win); }
.tbl.stand td.strk.L { color: var(--live); }
.tdir { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.tdir + .tdir { border-top: 1px solid var(--line-2); }
.tdir.me { background: var(--mark); box-shadow: inset 3px 0 var(--me); }
/* Name and GM take the room that's left (cut off with … if long), so the buttons line up on every row. */
.tdir .grow { flex: 1; min-width: 0; }
.tdir b, .tdir .grow span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdir b { font-family: var(--display); font-size: 18px; font-weight: 700; }
.tdir .grow span { font-size: 12px; color: var(--muted); font-weight: 600; }
.tdir .act { flex: none; width: 40px; min-height: 36px; padding: 0; display: grid; place-items: center; }  /* Clubhouse / Roster, as their tab icons */
.tdir .act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tdir { gap: 8px; }
.trade { background: var(--panel); border-radius: var(--r-l); padding: 12px 14px 14px; margin-bottom: 8px; }
.trade-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.trade-head b { flex: none; }
.trade-head span { color: var(--muted); font-weight: 600; text-align: right; }
.trade-side { font-size: 14px; color: var(--text-2); padding: 3px 0; }
.trade-side b { color: var(--text); }
.trade .acts { padding: 8px 0 0; }
.dpick { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) 46px 38px 48px; align-items: center; gap: 4px; padding: 7px 12px; font-size: 12px; }
.dpick + .dpick { border-top: 1px solid var(--line-2); }
.dpick.me { background: var(--mark); }
.dpick .mono { color: var(--muted); font-size: 11px; }
.dpick .who { min-width: 0; }
.dpick .who b, .dpick .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpick .who small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.dpick .pts { text-align: right; color: var(--text-2); }
.rules { margin: 0 0 18px; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.rules li + li { margin-top: 6px; }
.top.peek { gap: 8px; }
.top.peek b { flex: 1; min-width: 0; font-family: var(--display); font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 8px 0 2px; border: 0; background: none;
  color: var(--text-2); font-size: 14px; font-weight: 600; }
.back svg { width: 18px; height: 18px; }
.act.wide { width: 100%; min-height: 44px; }
.drop-pick .tick { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line); font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--text); }
.drop-pick.pick { background: var(--mark); box-shadow: inset 3px 0 var(--text-2); }
.drop-pick.pick .tick { border-color: var(--text-2); }
.drop-pick .mono small { color: var(--muted); font-size: 10px; }
.fact b.bad { color: var(--live); }
.dpick .rk { text-align: right; }
.mono.vs { text-align: right; color: var(--dim); }
.mono.vs.up { color: var(--text); font-weight: 700; }
.fact b .mono.vs { margin-left: 6px; }
.delig { grid-column: 2; justify-self: start; margin-top: 2px; font-size: 9px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.sched button.vs { all: unset; cursor: pointer; justify-self: start; max-width: 100%; display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; }
.feed { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.feed + .feed { border-top: 1px solid var(--line-2); }
.feed b { color: var(--text); font-weight: 600; }
.fk { flex: none; width: 56px; margin-top: 2px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 0;
  border-radius: 6px; background: var(--raised); color: var(--text-2); }
.fk.trade { background: var(--text-2); color: var(--bg); }
.fk.vetoed { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); text-decoration: line-through; }
.fwhen { flex: none; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; white-space: nowrap; }
/* Feed filters: small pills (they filter one list, unlike the section tabs). */
.fsubs { gap: 6px; border-bottom: 0; margin-bottom: 10px; }
.fsubs button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--panel); font-size: 13px; }
.fsubs button.on { background: var(--text); color: var(--bg); }

/* Loading placeholders */
.skel { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sk-row { display: grid; grid-template-columns: 36px 1fr 48px; gap: 10px; align-items: center; }
.sk-row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--panel) 0%, var(--raised) 50%, var(--panel) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.sk-row .sk-a { height: 36px; border-radius: 50%; }
.sk-row .sk-b { width: 70%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* A player's name that opens his card */
.plink { all: unset; cursor: pointer; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 3px; }
.dpick .who .plink { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; text-decoration: none; }
.fact span .plink, .trophy .plink { font-weight: 600; }

/* Your team, the same everywhere: a tinted row with a bar in your color */
.dpick.me, .feed.me, .trade.mine { background: var(--mark); box-shadow: inset 3px 0 var(--me); }

/* Standings: rank, team, record and playoff % stay put while the rest scrolls */
.tbl.stand { padding: 0; margin: 0 -16px; }
.tbl.stand th:nth-child(-n+4), .tbl.stand td:nth-child(-n+4) { position: sticky; z-index: 1; background: var(--bg); }
.tbl.stand tr.me td:nth-child(-n+4) { background: var(--mark); }
.tbl.stand th:nth-child(1), .tbl.stand td:nth-child(1) { left: 0; min-width: 36px; max-width: 36px; padding-left: 16px; box-sizing: border-box; width: 36px; }
.tbl.stand th:nth-child(2), .tbl.stand td:nth-child(2) { left: 36px; min-width: 112px; max-width: 112px; box-sizing: border-box; }
.tbl.stand th:nth-child(3), .tbl.stand td:nth-child(3) { left: 148px; min-width: 54px; box-sizing: border-box; }
.tbl.stand th:nth-child(4), .tbl.stand td:nth-child(4) { left: 202px; min-width: 56px; box-sizing: border-box; box-shadow: 6px 0 6px -6px rgba(0,0,0,0.6); }
.tbl.stand td:last-child, .tbl.stand th:last-child { padding-right: 16px; }

/* Trade builder: the deal so far, pinned under the top bar */
.tsum { position: sticky; top: 0; z-index: 3; background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.trow { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: start; font-size: 12px; }
.trow > b { padding-top: 5px; color: var(--muted); font-weight: 600; font-size: 13px; }
.trow > div { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; align-items: center; }
.tchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 0;
  background: var(--raised); color: var(--text); font-size: 13px; font-weight: 600; }
.tchip i { font-style: normal; color: var(--muted); }
.tnone { color: var(--muted); font-size: 12px; }
.tfit { font-size: 11px; color: var(--muted); font-weight: 600; display: flex; gap: 10px; flex-wrap: wrap; }
.tfit span { color: var(--text-2); }
.tfit span.bad { color: var(--live); }
.terr { font-size: 12px; font-weight: 700; color: var(--live); }
.tacts { display: flex; gap: 8px; }
.tacts .act { flex: 1; min-height: 40px; }

/* League scoreboard: matchup stepper, then the games two to a row */
.sbnav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 12px; }
.sbnav button { width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; }
.sbnav button:disabled { color: var(--faint); cursor: default; }
.sbnav div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sbnav b { font-family: var(--display); font-size: 22px; font-weight: 700; }
.sbnav span { font-size: 13px; color: var(--muted); }
.sbnav em { font-style: normal; font-weight: 600; }
.sbnav em.live { color: var(--live); }
.sbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sb-game { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 0; border-radius: var(--r-l); background: var(--panel); text-align: left; min-width: 0; }
.sb-game.me { background: var(--mark); box-shadow: inset 0 0 0 1.5px var(--me); }
.sb-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sb-team .badge.sm { width: 24px; height: 28px; }
.sb-team .grow { flex: 1; min-width: 0; }
.sb-team b { display: block; font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-team small { font-size: 11px; color: var(--muted); }
.sb-pts { flex: none; font-family: var(--display); font-size: 20px; font-weight: 700; }
.sb-team.behind b, .sb-team.behind .sb-pts { color: var(--muted); }
.sb-w { flex: none; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: var(--text); color: var(--bg); }
.stat3 small.of { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* Advanced stats explain themselves: a dotted label means tap for what it is. */
.stat3 button.tip-t { border: 0; color: inherit; background: var(--panel); border-radius: var(--r-m); padding: 10px 8px; text-align: center; }
.sheet .stat3 button.tip-t { background: var(--bg); }
.tip-t small, small.tip-l, span.tip-l { text-decoration: underline dotted; text-decoration-color: var(--dim); text-underline-offset: 3px; cursor: pointer; }
button.fact.tip-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; font-size: 13px; }
.tip-scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fade-in .15s ease-out; }
.tip-card { width: 100%; max-width: 360px; background: var(--raised); border-radius: var(--r-l); padding: 18px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.tip-card > b { font-family: var(--display); font-size: 22px; font-weight: 700; }
.tip-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.tip-card .act { align-self: flex-end; background: var(--panel); }

/* Standings: Standings / Team stats switch, sortable headers; team stats keep only rank and team in place */
.seg.sview { margin-bottom: 12px; }
.tbl.stand th { cursor: pointer; user-select: none; background: var(--bg); }
.tbl.stand th.on { color: var(--text); }
.tbl.stand th i { font-style: normal; font-size: 9px; margin-left: 3px; }
.tbl.stand.st th:nth-child(n+3), .tbl.stand.st td:nth-child(n+3) { position: static; box-shadow: none; min-width: 0; }
.tbl.stand.st th:nth-child(2), .tbl.stand.st td:nth-child(2) { box-shadow: 6px 0 6px -6px rgba(0,0,0,0.6); }
.tbl.stand.st td:nth-child(3) { color: var(--text); font-family: var(--display); font-size: 16px; font-weight: 700; }

/* Clubhouse team rating: overall and each depth-chart position group's league rank */
.rating { width: 100%; display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: 1px; padding: 0; border: 0;
  border-radius: var(--r-l); overflow: hidden; background: var(--line-2); }
.rt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 2px 10px; background: var(--panel); }
.rt .mono { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1; }
.rt.all .mono { font-size: 30px; }
.rt small { font-size: 11px; font-weight: 600; color: var(--muted); }
.rt.good .mono { color: var(--win); }
.rt.bad .mono { color: var(--live); }
.h .hicon { display: inline-block; width: 22px; height: 22px; vertical-align: -4px; margin-left: 2px; color: var(--text); }
.h .hicon.aces { width: 28px; }
.hicon text { font-family: var(--display); }

/* Matchup: projected score under each team, and the chance to win as a split bar */
.bt-proj { all: unset; cursor: pointer; margin-top: 4px; font-size: 12px; color: var(--muted); }
.bt-proj b { font-family: var(--display); font-size: 16px; color: var(--text-2); margin-left: 2px; }
.wp { all: unset; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 17px; font-weight: 700; }
.wp span:last-child { text-align: right; }
.wp-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.wp-bar i { display: block; height: 100%; flex: 1; }
.wp-bar i:first-child { flex: none; border-radius: 4px 0 0 4px; }
.wp-bar i:last-child { border-radius: 0 4px 4px 0; }
/* Games left this week: in bold so it stands out in the stats */
.rc.lft { color: var(--text); font-weight: 700; }

/* A trophy's card: big art, what it's for, the race, past winners */
.trophy-card { max-height: 85vh; overflow-y: auto; }
.tc-art { display: flex; justify-content: center; padding: 4px 0 2px; }
.tc-art .trophy-art { width: 180px; height: 210px; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4)); }
.trophy-card > b { text-align: center; }
.tc-race { font-size: 14px; font-weight: 600; color: var(--text); }
.tc-h { font-family: var(--display); font-size: 17px; font-weight: 700; margin-top: 4px; }
.trophy-card .card { background: var(--panel); }

/* The Cup's champions, engraved on a band of polished silver: brushed lines, a curved sheen, ridged edges,
   letters cut into the metal (dark, with a light lip below). Two rows of panels; more champions scroll sideways
   and the sheen stays put while the names pass under it, like turning the Cup. */
.engrave { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto;
  flex-shrink: 0; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 14px 0; border-radius: 10px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.03) 1px 2px),
    linear-gradient(90deg, #6f757d 0%, #c9ced4 14%, #f3f5f7 30%, #b4bac1 52%, #e9ecef 72%, #9aa0a8 88%, #6a7078 100%);
  box-shadow: inset 0 3px 0 #f6f8fa, inset 0 5px 0 #7a8088, inset 0 -3px 0 #5d636b, inset 0 -5px 0 #dfe3e7, 0 6px 14px rgba(0,0,0,.35); }
.engrave::-webkit-scrollbar { display: none; }
.eng-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; min-height: 104px; text-align: center;
  scroll-snap-align: start; font-family: "Times New Roman", Georgia, serif; text-transform: uppercase; letter-spacing: .02em;
  font-size: 10px; white-space: nowrap; line-height: 1.4; color: #2b3036; text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(0,0,0,.2);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.28), inset -2px 0 0 rgba(255,255,255,.5); }
.eng-cell:nth-child(odd) { border-bottom: 1px solid rgba(0,0,0,.22); }
.eng-cell:nth-child(even) { border-top: 1px solid rgba(255,255,255,.5); }
.eng-cell i { font-style: normal; font-size: 11.5px; letter-spacing: .12em; }
/* the team: a long name (24 characters at most) wraps to two balanced lines inside its panel */
.eng-cell b { font-size: 12px; font-weight: 700; margin-bottom: 2px; max-width: 100%; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; line-height: 1.2; }
.cupview { margin-bottom: 10px; }
.cup-tbl { margin: 0; padding: 0; flex-shrink: 0; }
.cup-tbl table { font-size: 12px; }
.cup-tbl th, .cup-tbl td { padding: 8px 3px; }
.cup-tbl td.team small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.cup-tbl td.team { color: var(--text); font-family: var(--sans); font-weight: 600; }

/* A trophy picture: the image fills a 480x560-shaped box. The Presidents' plaque (brushed silver, x 29-71%,
   y 84-91.8%): the winner's name in serif capitals over a fine rule and the season, cut into the metal. */
.trophy-art { position: relative; display: block; container-type: inline-size; }
.trophy-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.trophy-art .plaque { position: absolute; left: 31%; width: 38%; top: 84.4%; height: 7%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .9cqw; font-style: normal; white-space: nowrap; line-height: 1;
  font-family: "Times New Roman", Georgia, serif; text-transform: uppercase; color: #2e3237;
  text-shadow: 0 .06em 0 rgba(255,255,255,.7), 0 -.04em 0 rgba(0,0,0,.25); }
.trophy-art .plaque b { font-weight: 600; letter-spacing: .08em; }

/* The trophy room: a mahogany cabinet (grain over a red-brown wood), warm spotlights above each shelf, glass
   shelves on a brass-edged wood lip, and brass name plates. Dark and warm in either theme. */
.tr-room { position: relative; border-radius: var(--r-l); padding: 18px 12px 14px; overflow: hidden;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 196, 120, .22), transparent 70%),
    repeating-linear-gradient(91deg, rgba(255, 220, 190, .025) 0 2px, transparent 2px 6px, rgba(0, 0, 0, .07) 6px 8px, transparent 8px 15px),
    repeating-linear-gradient(89deg, transparent 0 40px, rgba(0, 0, 0, .12) 40px 42px, transparent 42px 90px),
    linear-gradient(90deg, #2e130c, #4b2117 18%, #3d1a11 40%, #552619 64%, #3a180f 86%, #2a110a);
  box-shadow: inset 0 0 0 6px #2a120b, inset 0 0 0 8px #8a5a2b, inset 0 0 40px rgba(0, 0, 0, .7), 0 10px 24px rgba(0, 0, 0, .4); }
.tr-head { text-align: center; font-family: "Times New Roman", Georgia, serif; text-transform: uppercase; letter-spacing: .14em;
  font-size: 15px; color: #e9c98c; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); margin-bottom: 4px; }
.tr-head small { display: block; font-size: 10px; letter-spacing: .3em; color: #b8915a; margin-top: 2px; }
.tr-shelf { position: relative; padding-top: 14px; }
.tr-shelf::before { content: ""; position: absolute; inset: 0 8% auto; height: 100%; pointer-events: none;   /* the spotlight */
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 205, 135, .28), transparent 70%); }
.tr-items { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; min-height: 150px; gap: 4px; padding: 0 4px; }
.tr-shelf::after { content: ""; display: block; height: 14px; margin: 0 -4px 6px; border-radius: 2px;   /* glass top, wood lip, brass edge */
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .08) 3px, transparent 4px),
    linear-gradient(#6b3420, #43200f 70%, #2c140a); box-shadow: inset 0 -2px 0 #9a6a32, 0 8px 14px rgba(0, 0, 0, .55); }
.tr-item { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0 0 6px; color: inherit; min-width: 0;
  container-type: inline-size; }
.tr-item .trophy-art { width: 92px; height: 107px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(255, 190, 110, .18)); }
.brass { display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: 3px 7px; border-radius: 2px;
  font-family: "Times New Roman", Georgia, serif; text-transform: uppercase; line-height: 1.25; color: #3b2608;
  background: linear-gradient(#f1d58f, #c99b4a 55%, #e6c477); box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
/* on a shelf, the plate spans its slot and the lettering scales with it, so the longest word fits */
.tr-item .brass { width: 92%; box-sizing: border-box; padding: 3px 4px; text-align: center; }
.tr-item .brass b { font-size: min(9.5px, 8.4cqw); letter-spacing: .02em; font-weight: 700; overflow-wrap: anywhere; }
.tr-item .brass i { font-style: normal; font-size: min(8.5px, 7.6cqw); letter-spacing: .03em; overflow-wrap: anywhere; }

/* A section title with the season picker beside it (Standings, Playoffs) */
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spick { min-height: 34px; padding: 0 10px; background: var(--panel); color: var(--text); border: 0; border-radius: var(--r-s);
  font: 600 14px var(--sans); }

/* The bracket: one column a round, scrolling sideways on a phone. Grid rows are slots: a first-round game
   takes two, the next round's four, so each game sits centered between the two that feed it. Lines: out of
   a game's right side, then a bracket joining the pair (from a quarter to three quarters of the next
   game's height, its two feeders' middles) and into the game. */
.bwrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.bwrap::-webkit-scrollbar { display: none; }
.bracket { display: grid; grid-template-columns: repeat(var(--cols), 150px); grid-template-rows: auto repeat(var(--rows), minmax(36px, auto)); row-gap: 0;
  column-gap: 16px; width: max-content; }
.bhead { grid-row: 1; padding: 4px 2px 10px; }
.bhead b { display: block; font-family: var(--display); font-size: 16px; font-weight: 700; }
.bhead span { font-size: 11px; color: var(--muted); font-weight: 600; }
.bcell { position: relative; display: flex; align-items: center; --ln: var(--line); }
.bcell.out::after { content: ""; position: absolute; left: 100%; top: 50%; width: 8px; border-top: 1.5px solid var(--ln); }
.bcell.in::before { content: ""; position: absolute; right: 100%; top: 25%; bottom: 25%; width: 8px; border-left: 1.5px solid var(--ln);
  background: linear-gradient(var(--ln), var(--ln)) 0 50% / 100% 1.5px no-repeat; }
.bgame { width: 100%; background: var(--panel); border-radius: 10px; padding: 2px 0; }
.bside { display: flex; align-items: center; gap: 6px; padding: 4px 8px; min-height: 30px; }
.bside + .bside { border-top: 1px solid var(--line-2); }
.bseed { width: 12px; flex: none; text-align: center; color: var(--muted); font-size: 11px; }
.bside .tlink { min-width: 0; max-width: 92px; }   /* only the logo and name open the team */
.bside .tlink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bpts { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text-2); }
.bside.win .tlink span, .bside.win .bpts { color: var(--text); }
.bside.lose { opacity: .45; }
.bgame.open .tbd { color: var(--dim); font-size: 12px; font-weight: 600; padding-left: 18px; }
.bchamp { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 4px; border-radius: var(--r-l); background: var(--panel); }
.bchamp .trophy-art { width: 56px; height: 66px; flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.bchamp small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bchamp b { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; }
.bchamp span { font-size: 12px; color: var(--muted); font-weight: 600; }
/* the third-place game, under the final with its label; no lines into it */
.bcell.third { flex-direction: column; align-items: stretch; justify-content: flex-end; }
.blabel { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 0 2px 4px; }
.podium { display: flex; gap: 12px; margin-top: 4px; }
.podium i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-2); }
.podium em { font-style: normal; color: var(--muted); margin-right: 4px; }

/* Signed in: your team's name where the commissioner has his team picker. Signed out: how to sign in. */
.top-team { flex: 1; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: var(--r-m); background: var(--panel);
  font-family: var(--display); font-size: 19px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Team settings: the gear on your Clubhouse banner, and its sheet (crest preview, name fields, colors) */
.chero-edit { align-self: flex-start; width: 38px; height: 38px; border: 0; border-radius: var(--r-s); display: grid; place-items: center;
  background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--text-2); }
.chero-edit svg { width: 20px; height: 20px; }
.tset { display: flex; flex-direction: column; gap: 14px; }
.tprev { display: flex; align-items: center; gap: 14px; }
.tprev b { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; }
.tprev span { font-size: 13px; color: var(--muted); font-weight: 600; }
.tset label, .tlabel { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tset input { min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--panel); color: var(--text); font: 600 16px var(--sans); }
.tcolors { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.tcol { aspect-ratio: 1; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tcol.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.tcol.none { background: linear-gradient(135deg, transparent 47%, var(--muted) 47% 53%, transparent 53%); box-shadow: inset 0 0 0 2px var(--muted); }
.tset label.tcol.add { position: relative; display: grid; place-items: center; gap: 0; box-shadow: inset 0 0 0 2px var(--muted);
  color: var(--muted); font: 600 22px var(--sans); cursor: pointer; }
.tset .tcol.add input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; padding: 0; }
.tlogo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tlogo-row label.act { flex-direction: row; align-items: center; justify-content: center; color: inherit; font-size: inherit; cursor: pointer; }
.crop { align-items: center; }
.crop-view { position: relative; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; touch-action: none; cursor: grab;
  background: var(--panel); box-shadow: 0 0 0 2px var(--line); }
.crop-view.clear { background: repeating-conic-gradient(var(--panel) 0 25%, var(--raised) 0 50%) 0 0 / 20px 20px; }
.crop-view img { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none; pointer-events: none; }
.tset .crop-zoom { width: 260px; min-height: 0; padding: 0; background: none; accent-color: var(--text); }
.crop .tlogo-row, .crop .seg { width: 100%; }
.crop .tlogo-row .act { flex: 1; }
/* a logo photo: a circle as tall as the shield it replaces */
.badge.logo { width: auto !important; aspect-ratio: 1;  /* as wide as it is tall, whatever size a screen gives the badge */
  border-radius: 50%; overflow: hidden; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.badge.xs.logo { filter: none; }
.badge.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Commissioner settings: grouped fields (label, control, a line of help), locked ones greyed with a lock */
.cset-open { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; }
.cset-open svg { width: 18px; height: 18px; }
.cgroup { padding: 2px 0; }
.cfield { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 14px; }
.cfield + .cfield { border-top: 1px solid var(--line-2); }
.cfield > span { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.cfield > span svg { width: 12px; height: 12px; color: var(--dim); }
.cfield small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.cfield input, .cfield select { min-height: 38px; max-width: 190px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: var(--raised);
  color: var(--text); font: 600 14px var(--sans); }
.cfield input[type="number"] { width: 64px; text-align: right; }
.cfield input:not([type]) { width: 170px; }
.cnum { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--muted); }
.cfield.locked > span { color: var(--muted); }
.cfield.locked input, .cfield.locked select { opacity: .55; }
.csave { position: sticky; bottom: 0; padding: 12px 0 4px; background: linear-gradient(transparent, var(--bg) 30%); }

/* The draft room (draftRoom in app.js): the clock card on top, the picks coming up, then the tabs. */
.dr-entry { display: flex; gap: 8px; margin-bottom: 14px; }
.dr-entry .act { flex: 1; }
.droom { padding-bottom: 20px; }
.dr-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; }
.dr-top .grow { flex: 1; display: flex; flex-direction: column; }
.dr-top .grow b { white-space: nowrap; }
.dr-top .act { min-height: 36px; padding: 0 12px; }
.dr-top .grow b { font-family: var(--display); font-size: 22px; font-weight: 700; }
.dr-top .grow > span { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: center; }
.dr-clockcard { display: flex; align-items: center; gap: 12px; margin: 4px 14px 0; padding: 12px 14px; border-radius: var(--r-l); background: var(--panel); }
.dr-clockcard .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dr-clockcard b { font-family: var(--display); font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-clockcard .grow > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.dr-clockcard.mine { background: var(--me); color: var(--me-ink); }
.dr-clockcard.mine .grow > span { color: inherit; opacity: .75; }
.dr-clockcard.done { flex-direction: column; align-items: flex-start; }
.dr-clock { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; min-width: 86px; text-align: right; }
.dr-clock.low { color: var(--live); }
.dr-clockcard.mine .dr-clock.low { color: inherit; animation: pulse 1s infinite; }
.dr-clockcard .badge.xs { width: 32px; height: 37px; }
.dr-next { display: flex; gap: 6px; padding: 10px 14px 4px; overflow-x: auto; scrollbar-width: none; }
.dr-next::-webkit-scrollbar { display: none; }
.dr-next > span { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border-radius: var(--r-s); background: var(--panel); }
.dr-next > span > span { display: flex; flex-direction: column; line-height: 1.15; }
.dr-next em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.dr-next small { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.dr-next > span.done { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.dr-next > span.done small { color: var(--text-2); font-weight: 600; }
.dr-next > span.now { background: var(--raised); box-shadow: inset 0 0 0 2px var(--text); }
.dr-next > span.me:not(.now) { box-shadow: inset 0 0 0 2px var(--me); }
.dr-next > span.next small:empty { display: none; }
.dr-who small, .dr-cell small { color: var(--muted); font-weight: 600; }
.dr-body { padding: 10px 0 0; }
.dr-filter { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 10px; }
.dr-filter input, .dr-filter select { min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--r-m); background: var(--panel); color: var(--text); font: 600 15px var(--sans); }
.dr-list { display: flex; flex-direction: column; }
.dr-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line-2); }
.dr-row.gone { opacity: .35; }
.dr-rank { width: 24px; flex: none; text-align: right; font-size: 12px; font-weight: 700; color: var(--dim); }
.dr-row .face-wrap { flex: none; }
.dr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dr-who b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-who small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-proj { flex: none; display: flex; flex-direction: column; align-items: flex-end; max-width: 120px; }
.dr-proj b { font-size: 15px; font-weight: 700; }
.dr-proj small { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.dr-star { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; }
.dr-star.on { color: var(--text); }
.dr-go { flex: none; min-height: 36px; padding: 0 12px; }
.rfix.dr { width: 214px; padding-left: 4px; padding-right: 6px; gap: 2px; }
.rfix.dr .dr-star { width: 32px; height: 40px; }
.rfix.dr + .rstats .rc.w2 { width: 86px; white-space: nowrap; }
.rfix.dr .dr-go { min-height: 32px; padding: 0 10px; font-size: 13px; }
/* The queue's drag grip, and the row being dragged (lifted). */
.dr-grip { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; color: var(--muted);
  touch-action: none; cursor: grab; font-size: 20px; }
.dr-grip .ic { fill: currentColor; }
.dr-row.dragging { position: relative; z-index: 2; background: var(--raised); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dr-list.sorting .dr-row:not(.dragging) { transition: transform .15s ease; }
.dr-list.sorting { user-select: none; -webkit-user-select: none; }
.dr-board { overflow: auto; max-height: calc(100vh - 290px); padding: 0 0 12px 0; }
.dr-bhead, .dr-brow { display: grid; grid-template-columns: 34px repeat(var(--cols), 104px); gap: 4px; padding: 0 12px; width: max-content; }
.dr-bhead { position: sticky; top: 0; z-index: 1; background: var(--bg); padding-bottom: 6px; padding-left: 50px; grid-template-columns: repeat(var(--cols), 104px); }
.dr-bhead div { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; font-weight: 700; color: var(--muted); }
.dr-bhead div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-bhead div.me { color: var(--text); }
.dr-brow { margin-bottom: 4px; }
.dr-brow em { position: sticky; left: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); }
.dr-cell { height: 48px; padding: 5px 7px; border-radius: var(--r-s); background: var(--panel); box-shadow: inset 3px 0 var(--tc); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.dr-cell b { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-cell small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-cell.me { background: var(--raised); }
.dr-cell.now { box-shadow: inset 3px 0 var(--tc), inset 0 0 0 2px var(--text); }
.dr-slots { margin: 0 14px; padding: 0; overflow: hidden; }
.dr-slot { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px; border-bottom: 1px solid var(--line-2); }
.dr-slot:last-child { border-bottom: 0; }
.dr-slot .rslot { flex: none; }
.dr-slot.open .dr-who small { color: var(--dim); }
.dr-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--panel); }
.dr-auto > span { display: flex; flex-direction: column; }
.dr-auto small { font-size: 12px; color: var(--muted); }
.dr-auto input { width: 22px; height: 22px; accent-color: var(--me); }

/* List filters (Free Agents, draft room): a button, and the panel it opens */
.fbtn { align-self: flex-start; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 700; }
.fbtn.on { color: var(--text); background: var(--raised); }
.fpanel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; }
.fpanel label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); min-width: 0; }
.fpanel select { min-height: 38px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: var(--panel); color: var(--text); font: 600 14px var(--sans); }
.fpanel .act { grid-column: 1 / -1; min-height: 34px; }
/* a seg whose labels differ in length (All, Skaters, C...): each button as wide as its label needs */
.seg.fit { display: flex; }
.seg.fit button { flex: 1 1 auto; padding: 0 6px; }
/* the draft room's player card: names open it; a player's two seasons at a glance above his research */
button.dr-who { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dr-card-sum { padding-bottom: 0; }
/* search box with its controls on one line (Free Agents, draft room) */
.qrow { display: flex; gap: 6px; align-items: stretch; }
.qrow input { flex: 1; min-width: 0; }
.qrow .fbtn, .qrow .qsel { flex: none; align-self: stretch; min-height: 0; }
.fbtn.open { box-shadow: inset 0 0 0 1.5px var(--line); }
.qsel { max-width: 46%; padding: 0 8px; border: 0; border-radius: var(--r-m); background: var(--panel); color: var(--text); font: 700 13px var(--sans); }
.dr-filter { gap: 6px; padding-bottom: 8px; }
.dr-filter .qrow input { min-height: 40px; }
/* the draft board: each cell's pick number in its corner; each round's direction under its number */
.dr-cell { position: relative; }
.dr-no { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 9px; font-weight: 700; color: var(--dim); }
.dr-brow em { flex-direction: column; gap: 1px; }
.dr-brow em i { font-style: normal; font-size: 12px; color: var(--dim); }
/* the first advanced-stat column: a rule before it, setting the group apart */
.rc.adv1 { border-left: 1px solid var(--line); margin-left: 4px; padding-left: 4px; box-sizing: content-box; }

/* Before the app: welcome, a new league's steps, its invites, an invite opened (gateView in app.js) */
.gate { max-width: 440px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 18px 40px; display: flex; flex-direction: column; gap: 14px; }
.gate h1 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 800; text-align: center; }
.gate h2 { margin: 6px 0 0; font-family: var(--display); font-size: 26px; font-weight: 700; }
.g-logo { width: 88px; margin: 18px auto 0; }
.g-logo svg { display: block; width: 100%; }
.g-sub { margin: 0; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.45; }
.g-sub b { color: var(--text); }
.g-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.g-card { background: var(--panel); border-radius: var(--r-l); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.g-card.tset input, .g-card.tset select, .gate .qrow input { background: var(--raised); }
.tset select { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: var(--raised); color: var(--text); font: 600 15px var(--sans); }
.tset label small { font-weight: 500; color: var(--dim); }
.tset label em { font-style: normal; font-weight: 500; color: var(--dim); }
.g-league { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border-radius: var(--r-m); background: var(--raised); }
.g-league b { font-size: 15px; }
.g-league span { font-size: 12px; font-weight: 700; color: var(--muted); }
.g-league.on { box-shadow: inset 0 0 0 2px var(--me); }
.g-steps { display: flex; justify-content: space-between; gap: 6px; }
.g-steps span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 800 13px var(--sans); color: var(--dim);
  padding-top: 8px; border-top: 3px solid var(--line); }
.g-steps span em { font-style: normal; font-size: 11px; font-weight: 700; }
.g-steps span.on { color: var(--text); border-color: var(--me); }
.g-steps span.done { color: var(--muted); border-color: var(--muted); }
.g-nav { display: flex; gap: 10px; margin-top: 4px; }
.g-nav .act { flex: 1; min-height: 48px; }
.act.wide { min-height: 48px; }
.g-gap { margin-top: 4px; }
.g-card.g-fields { padding: 2px 0; gap: 0; }  /* the new league's settings: League settings' rows (.cfield) */
.g-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.g-slot { display: flex; align-items: center; gap: 8px; }
.g-slot span { flex: 1; font-size: 14px; font-weight: 700; }
.g-slot b { width: 18px; text-align: center; font-size: 15px; }
.g-slot button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--raised); font-size: 18px; font-weight: 700; }
.g-slot button:disabled { opacity: .35; cursor: default; }
.g-team { display: grid; grid-template-columns: 22px 1fr; gap: 6px 8px; align-items: center; }
.g-team + .g-team { border-top: 1px solid var(--line-2); padding-top: 12px; }
.g-team > b { grid-row: span 2; font-size: 13px; color: var(--muted); text-align: center; }
.g-inv { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.g-inv + .g-inv { border-top: 1px solid var(--line-2); padding-top: 10px; }
.g-inv .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-inv b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-inv span { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act.sm { min-height: 32px; padding: 0 10px; font-size: 13px; display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.act.sm.go { color: var(--me-ink); }
.g-you { font-size: 11px; font-weight: 800; color: var(--muted); }
.lobby { display: flex; flex-direction: column; gap: 12px; }  /* the draft card and teams before the draft (Matchup, League → Draft) */
.lb-draft { display: flex; align-items: center; gap: 10px; }
.lb-draft .grow { display: flex; flex-direction: column; gap: 2px; }
.lb-draft b { font-family: var(--display); font-size: 21px; }
.lb-draft span { font-size: 12px; color: var(--muted); font-weight: 600; }
.lobby .dr-entry { margin-bottom: 0; }
.lh-switch { all: unset; cursor: pointer; color: var(--text-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* The commissioner's log (League → Commish log) and the draft order's pick numbers. */
.clog { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.clog + .clog { border-top: 1px solid var(--line-2); }
.clog-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.clog-top b { font-size: 14px; }
.clog-top span, .clog small { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.clog-d { font-size: 13px; color: var(--text-2); }
.g-num { width: 22px; color: var(--muted); }
/* The period switch every player view carries (this season / last / the one before / projected). */
/* Compact toolbars: the period picker in a row with sorting and the view toggle. */
.daynav.with-view { grid-template-columns: 40px 1fr 40px 112px; gap: 4px; padding-right: 12px; }
.rbar .seg.rmode { width: 128px; margin-left: auto; }
.rbar .rdir { min-width: 34px; }
.hrow .qsel { min-height: 32px; font-size: 12px; }
/* In a sheet's header the period picker is a clear button: filled, with its own arrow. */
.sheet-head .qsel { min-height: 40px; max-width: 46%; padding: 0 30px 0 12px; background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378859A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 11px center;
  -webkit-appearance: none; appearance: none; border: 1px solid var(--line); font-size: 14px; }
.pick-row { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.pick-row .qsel { min-height: 34px; max-width: 60%; }
/* The last hour before the draft: a live countdown in red. */
.countdown, .lb-draft .countdown { font: inherit; color: var(--live); font-variant-numeric: tabular-nums; }
/* Inline icons in text and buttons (the watch eye, the queue pin). */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.22em; }
.act .ic { margin-right: 4px; }
/* The commissioner's new-team row (League → Draft, before the draft). */
.g-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.g-add input { min-width: 0; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-m); background: var(--raised); color: var(--text); font: 600 14px var(--sans); }
/* A player sheet's (or draft card's) actions: one compact row of small buttons, the note under them tight. */
.sheet-acts { gap: 6px; padding: 8px 16px 0; }
.sheet-acts .act { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-s, 8px); }
.sheet-acts + .acts-note { padding-top: 4px; font-size: 11px; }
/* A player card's hero (hero()): his photo large on the right, his team's logo big and faded behind, his name
   and lines on the left. The close button floats over it (.hero-close). */
.phero { position: relative; overflow: hidden; min-height: 196px; padding: 26px 16px 14px; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, var(--raised), var(--panel)); border-bottom: 1px solid var(--line-2); }
.phero-logo { position: absolute; left: 34%; top: 54%; width: 300px; height: 300px; transform: translate(-50%, -50%); object-fit: contain;
  opacity: .13; pointer-events: none; }
.phero-shot { position: absolute; right: -8px; bottom: 0; height: 204px; width: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.phero-info { position: relative; z-index: 1; width: 58%; display: flex; flex-direction: column; gap: 6px; }
.hero-name { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phero-sub { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.phero-team { width: 22px; height: 22px; object-fit: contain; }
.phero-line { font-size: 13px; font-weight: 600; color: var(--muted); min-height: 16px; line-height: 1.6; }  /* inline: a tag follows the team name, whole */
.phero-line .tag { vertical-align: 1px; }
.ktag { display: inline-block; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); background: var(--raised); border-radius: 999px; padding: 2px 8px; vertical-align: 1px; }
.phero-inj { font-size: 12px; font-weight: 700; color: var(--live); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phero-pts { display: flex; align-items: baseline; gap: 6px; }
.phero-pts b { font-size: 26px; font-weight: 800; }
.phero-pts small { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.hero-close { position: absolute; top: 22px; right: 12px; z-index: 3; }
.hero-close .close { background: color-mix(in srgb, var(--panel) 70%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.klock { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
.klock .hicon { width: 14px; height: 14px; }
/* Badges: red where something needs you (tabs, League sections); gray for unread news (the bell). */
.tbadge { position: absolute; top: -4px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-style: normal;
  font-size: 9.5px; font-weight: 800; line-height: 16px; text-align: center; background: var(--live); color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.tbadge.info { background: var(--text-2); color: var(--bg); top: 4px; right: 4px; }
.bell { position: relative; }
.csubs button { position: relative; }
.sbadge { display: inline-block; min-width: 15px; height: 15px; margin-left: 5px; padding: 0 4px; border-radius: 8px; font-style: normal;
  font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center; vertical-align: 1px; background: var(--live); color: #fff; }
.kbar.hint { color: var(--hint); background: color-mix(in srgb, var(--hint) 10%, transparent); }
.nrow { padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); }
.nrow:last-child { border-bottom: 0; }
.nrow.new { color: var(--text); box-shadow: inset 3px 0 var(--me); }
.nrow-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; font-size: 11px; color: var(--muted); }
.nrow-top b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.csubs-more { gap: 16px; margin-top: -14px; border-bottom: 0; }
.csubs-more button { min-height: 34px; font-size: 13px; }
.now { padding-top: 6px; padding-bottom: 4px; }
.now-card { flex-direction: row; align-items: center; }
.now-card > .grow { display: flex; flex-direction: column; gap: 2px; }
.now-card > .grow b { font-family: var(--display); font-size: 21px; }
.now-card > .grow span { font-size: 12px; color: var(--muted); font-weight: 600; }
.now .dr-entry { margin-bottom: 0; }
.rhead-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rhead-acts .toggle { align-self: flex-end; min-height: 30px; font-size: 12px; font-weight: 700; padding: 0 2px 0 4px; background: none; }
.toast { display: flex; align-items: center; gap: 12px; }
.toast button { margin-left: auto; flex: none; border: 0; background: none; color: var(--me-tc); font-weight: 800; font-size: 14px; padding: 4px 2px; }
/* The player card's actions (add, drop, trade, watch, compare) stay in reach: they stick to the top as the card scrolls. */
.sheet-scroll > .sheet-acts { position: sticky; top: 0; z-index: 3; background: var(--panel); padding-bottom: 8px; }
/* The opening screen: a photo from above the crease behind it, darkened toward the bottom so the cards read. */
/* Pinned to the screen and centered: no scrolling or rubber-banding (it scrolls inside only if a long league list
   doesn't fit). Its own layer, so the photo sits under the cards but over the page. */
.gate.welcome { position: fixed; inset: 0; z-index: 1; isolation: isolate; justify-content: safe center; overflow-y: auto; overscroll-behavior: none;
  padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
html:has(.gate.welcome), body:has(.gate.welcome) { overflow: hidden; overscroll-behavior: none; }
.gate.welcome::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--bg) 25%, transparent), color-mix(in srgb, var(--bg) 60%, transparent) 35%, color-mix(in srgb, var(--bg) 62%, transparent) 60%, color-mix(in srgb, var(--bg) 82%, transparent)),
    url("gate.jpg") 58% top / cover no-repeat; }  /* the screen's full height, framed on the goalie and the shooter */
.gate.welcome h1 { margin-top: 36px; }
/* The title in the app icon's stencil lettering and colors: white, with the last word in ice blue. */
@font-face { font-family: "Black Ops One"; src: url("fonts/black-ops-one.woff2") format("woff2"); font-display: swap; }
.gate h1.efh { font-family: "Black Ops One", var(--display); font-weight: 400; font-size: min(31px, 6.4vw); white-space: nowrap; letter-spacing: .02em; color: var(--text); }
.gate h1.efh b { font-weight: 400; color: #8ED8F8; }
:root[data-theme="light"] .gate h1.efh b { color: #1F86B5; }
.gate.welcome .g-sub { color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 8px var(--bg); }
.g-profile { display: flex; justify-content: center; gap: 14px; }
.g-profile button, .g-link { align-self: center; border: 0; background: none; padding: 4px 6px; color: var(--text); font-size: 13px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 8px var(--bg); }
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 44px; }
.pw button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.pw button:active:not(:disabled) { transform: translateY(-50%) scale(0.95); }
.pw .ic { width: 20px; height: 20px; }
.g-err { margin-top: -4px; font-size: 12px; font-weight: 700; color: var(--live); }

/* ---------- contracts and the Cup ---------- */
.h.sub { font-size: 15px; margin-top: 14px; }
.fk.sign { background: color-mix(in srgb, var(--me) 22%, transparent); color: var(--text); }
.fk.buyout { background: none; box-shadow: inset 0 0 0 1px var(--live); color: var(--live); }
.dr-cell .dr-lost { color: var(--dim); font-style: italic; }
/* League settings: each contract kind on its own row (age, length, how many), then Add */
.cfield.wide { grid-template-columns: 1fr; }
.ccons { display: flex; flex-direction: column; gap: 8px; }
.ccon { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.ccon select { min-width: 0; }
.ccon-x { width: 32px; height: 32px; border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 18px; }
.ccons > .act { align-self: flex-start; }
/* The Matchup's Cup line, and the Cup's play-in list */
.cupline { border: 0; display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 4px 16px 8px; padding: 8px 12px; border-radius: var(--r-l);
  background: var(--panel); text-align: left; font-size: 13px; color: var(--text-2); }
.cupline .trophy-art { width: 26px; height: 30px; flex: none; }
.cupline b { color: var(--text); margin-right: 4px; }
.cup-playin { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.bsudden { padding: 6px 10px; border-top: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* No pinch or double-tap zoom: the app is laid out for the phone's width (iOS ignores the viewport's no-zoom, so this
   and the gesture handlers in app.js do it). Scrolling still works; the photo cropper keeps its own gestures. */
html { touch-action: pan-x pan-y; }

/* Bot-run teams: the switch on a team's row (new league, Teams and invites, League → Teams) */
.g-team { grid-template-columns: 22px 1fr auto; }
.g-team > input[data-k="email"], .g-team > .g-botnote { grid-column: 2; }
.g-team > .toggle { grid-column: 3; grid-row: 1; }
.g-botnote { font-size: 13px; color: var(--muted); padding: 4px 2px; }
.toggle.sm { font-size: 12px; min-height: 32px; padding: 0 8px 0 6px; gap: 6px; }
.tdir .toggle.sm { flex: none; }
.fact .cnt { display: inline-block; min-width: 28px; margin-right: 6px; padding: 1px 6px; border-radius: 6px; text-align: center;
  font-family: var(--mono); font-weight: 800; color: var(--me-ink); background: var(--me); }  /* how many of a contract you hold */

/* The league wizard's season bar: a cell per matchup (as wide as its weeks), colored by what it is */
.sbar-wrap { background: var(--panel); border-radius: var(--r-l); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.sbar { display: flex; gap: 2px; height: 30px; }
.sbar i { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-style: normal;
  font-size: 8px; font-weight: 800; letter-spacing: -0.03em; color: #07090C; min-width: 0; overflow: hidden; }
.sbar-months { display: flex; gap: 2px; font-size: 10px; color: var(--muted); font-weight: 600; }
.sbar-months span { min-width: 0; white-space: nowrap; overflow: visible; }
.sb-regular { background: color-mix(in srgb, var(--me) 55%, var(--panel-2)); }
.sb-cup { background: #E3B341; }
.sb-playoff { background: var(--live); }
.sb-before { background: repeating-linear-gradient(135deg, var(--panel-2) 0 3px, transparent 3px 6px); }
.sb-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.sb-line i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sb-line b { color: var(--text); font-weight: 700; }
.sbar-wrap .g-why { margin: 0; }
/* The Cup's lane over the season bar: its rounds, and the regular matchups they can move to (cupDrag) */
.sbar-cup { height: 22px; }
.sbar-cup .sb-cup { cursor: grab; touch-action: none; }
.sbar-cup .sb-slot { background: transparent; }
.sbar-cup .sb-slot.open { box-shadow: inset 0 0 0 1px color-mix(in srgb, #E3B341 22%, transparent); }
.sbar-wrap.dragging .sb-slot.open { background: color-mix(in srgb, #E3B341 12%, transparent); }
.sbar-wrap.dragging .sb-cup { cursor: grabbing; }
.sbar-cup .sb-cup.held { box-shadow: 0 0 0 2px var(--text); }
.sbar-wrap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.noselect { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sb-hint { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.sb-hint .g-link { display: inline; padding: 0; margin-left: 4px; font-size: inherit; }