@font-face {
  font-family: 'Axis Extrabold';
  src: url('/assets/fonts/AxisExtrabold.otf') format('opentype');
  font-weight: 400 700;
  font-display: swap;
}

/* Shared styling for the GGGG (Gridiron Grand Gambit Gala) dashboards.
   v10 redesign: boxy (4px), system-font body + mono accents, mobile-first.
   Mobile nav = bottom tab bar + More sheet. Desktop nav = sidebar. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #1a120c;
  --surface:   #221812;
  --surface2:  #2a1e16;
  --border:    #3d2c1f;
  --text:      #ffffff;
  --muted:     #7a7570;
  --accent:    #d9a066;
  --accent-dim:#a3703a;
  --green:     #4caf82;
  --red:       #c0544a;
  --amber:     #c9893a;
  --purple:    #8a7fb5;
  --radius:    0;
  --radius-sm: 0;
  --sb-w:      236px;
  --tabbar-h:  54px;
  --dur:       0.18s;
  --ease:      cubic-bezier(0.2, 0, 0, 1);
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Axis Extrabold', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* Basketball section — red accent theme (football keeps the blue defaults).
   Team pages still override --accent per manager via inline style. */
body[data-sport="nba"] {
  --accent:     #ef4d45;
  --accent-dim: #a5312b;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100svh;
}

a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Mono accents: stats, labels, badges, numbers, brand */
.eyebrow, .section-label, .stat-label, .stat-value, .updated, .sb-brand, .sb-foot,
.pos-pill, .slot-badge, .slot-pill, .inj-badge, .tx-badge, .seed-badge, .result-badge,
.rank-cell, td.num, th, .bs-score, .bs-pt, .bs-slot, .cl-tag, .cl-date, .rq-l,
.round-label, .dp-no, .dp-meta, .ctrl label, .tab-item, .sheet-label, .rp-val, .rp-tag {
  font-family: var(--font-mono);
}

/* ── Accessibility ───────────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent);
  color: #1a120c; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Sidebar (desktop) ───────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w);
  background: #18110b; border-right: 2px solid var(--border);
  padding: 22px 14px; overflow-y: auto; z-index: 40;
  display: flex; flex-direction: column; gap: 4px;
  transition: width var(--dur) var(--ease);
}
.sb-brand { display: block; padding: 6px 12px 18px; text-decoration: none; color: inherit; }
.sb-brand .b1 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sb-brand .b2 { font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.sb-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius); text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 700;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sb-link:hover { background: var(--surface); color: var(--text); }
.sb-link.active { background: var(--accent); color: #1a120c; }
.sb-link .ico { width: 18px; text-align: center; font-size: 15px; opacity: 0.95; }
.sb-section { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-dim); padding: 14px 12px 6px; font-weight: 700; font-family: var(--font-mono); }
.sb-team {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 22px;
  border-radius: var(--radius); text-decoration: none; color: var(--muted); font-size: 13px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sb-team:hover { background: var(--surface); color: var(--text); }
.sb-team.active { color: var(--accent); }
.sb-team .savatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: var(--surface2); object-fit: cover; }
.sb-team .stxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-spacer { flex: 1; }
.sb-foot { padding: 12px; font-size: 11px; color: var(--muted); border-top: 2px solid var(--border); margin-top: 8px; }

/* Sidebar dropdown groups */
.sb-grouphead { display: flex; align-items: center; }
.sb-grouphead .sb-link { flex: 1; }
.sb-caret { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px;
  padding: 10px 12px; border-radius: var(--radius); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.sb-caret:hover { color: var(--text); }
.sb-group.open > .sb-grouphead .sb-caret { transform: rotate(90deg); }
/* Accordion via grid-template-rows 0fr->1fr: animates to the exact content
   height, so it never clips no matter how many teams. */
.sb-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.sb-group.open > .sb-sub { grid-template-rows: 1fr; }
.sb-sub-inner { min-height: 0; overflow: hidden; padding: 2px 0 6px; }
.sb-subitem { display: block; padding: 7px 12px 7px 34px; font-size: 13px; color: var(--muted);
  text-decoration: none; border-radius: var(--radius); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sb-subitem:hover { background: var(--surface); color: var(--text); }
.sb-subitem.active { color: var(--accent); }

section[id] { scroll-margin-top: 24px; }

/* Legacy drawer chrome — retired (bottom tab bar replaces it on mobile) */
.nav-toggle { display: none !important; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 65;
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.scrim.show { opacity: 1; pointer-events: auto; }

/* ── Content ─────────────────────────────────────────────────────────── */
.content { margin-left: var(--sb-w); padding: 0 30px 80px; position: relative; z-index: 1; transition: margin-left var(--dur) var(--ease); }
.page { max-width: 1000px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────────────────────────── */
header { padding: 44px 0 22px; display: flex; align-items: center; gap: 20px; }
header .htext { flex: 1; min-width: 0; }
.head-avatar { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface2); object-fit: cover; border: 2px solid var(--border); }
.eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px; font-weight: 700; }
h1 { font-size: clamp(28px, 5vw, 46px); font-weight: 800; line-height: 1.06;
  letter-spacing: -0.02em; color: var(--text); }
.subtitle { margin-top: 10px; font-size: 15px; color: var(--muted); }

/* ── Sections ────────────────────────────────────────────────────────── */
section { margin-bottom: 40px; }

.section-label {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-dim); margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border); font-weight: 700;
}
.section-label .sub { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; font-family: var(--font-body); }

.card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }

/* ── Champion banner ─────────────────────────────────────────────────── */
.champ-banner {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface);
  border: 2px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 20px 22px;
}
.champ-trophy { font-size: 36px; line-height: 1; }
.champ-meta .label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 700; font-family: var(--font-mono); }
.champ-meta .name { font-size: clamp(20px, 4vw, 28px); font-weight: 800; margin: 3px 0; }
.champ-meta .sub { font-size: 13px; color: var(--muted); }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 9px 11px; border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: 10px 11px; border-bottom: 2px solid var(--border); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rank-cell { color: var(--muted); font-weight: 700; width: 28px; }
.team-cell { display: flex; align-items: center; gap: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--surface2); object-fit: cover; border: 2px solid var(--border); }
.avatar.ph { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.team-name { font-weight: 700; }
.muted { color: var(--muted); }
.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }
a.team-link { color: inherit; text-decoration: none; }
a.team-link:hover .team-name { color: var(--accent); }

.pos-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--radius-sm); color: var(--bg); }
.pos-QB { background: var(--red); } .pos-RB { background: var(--green); }
.pos-WR { background: var(--accent); } .pos-TE { background: var(--amber); }
.pos-K  { background: var(--purple); } .pos-DEF { background: var(--muted); }

.w { color: var(--green); font-weight: 700; } .l { color: var(--red); font-weight: 700; } .t { color: var(--amber); font-weight: 700; }
.pos-val { color: var(--green); font-weight: 700; } .neg-val { color: var(--red); font-weight: 700; }

/* ── Headshots / roster ──────────────────────────────────────────────── */
.headshot { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--surface2);
  border: 2px solid var(--border); flex-shrink: 0; }
.headshot.logo { object-fit: contain; padding: 2px; background: #150e09; }
.player-cell { display: flex; align-items: center; gap: 10px; }
.player-cell .pmeta { min-width: 0; }
.player-cell .pname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-cell .psub { font-size: 12px; color: var(--muted); }
.slot-badge { display: inline-block; min-width: 40px; text-align: center; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--surface2); color: var(--muted); border: 2px solid var(--border); }
.slot-badge.start { color: var(--accent); border-color: var(--accent-dim); }

/* ── Stat / record grids ─────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; }
.stat-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  transition: border-color var(--dur) var(--ease); }
.stat-card:hover { border-color: var(--accent-dim); }
.stat-label { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stat-value { font-size: 22px; font-weight: 700; line-height: 1.1; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; }
.record-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  transition: border-color var(--dur) var(--ease); }
.record-card:hover { border-color: var(--accent-dim); }
.record-card .rlabel { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 7px; font-family: var(--font-mono); }
.record-card .rval { font-size: 20px; font-weight: 700; }
.record-card .rsub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Scoreboard ──────────────────────────────────────────────────────── */
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 10px; }
.score-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.score-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 14px; }
.score-row.win { color: var(--text); font-weight: 700; } .score-row.lose { color: var(--muted); }
.score-row .pts { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ── Transactions ────────────────────────────────────────────────────── */
.tx-list { display: flex; flex-direction: column; gap: 7px; }
.tx-item { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 11px 15px; font-size: 14px; }
.tx-badge { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); flex-shrink: 0; margin-top: 2px; }
.tx-trade { background: var(--accent); color: var(--bg); }
.tx-waiver { background: var(--amber); color: var(--bg); }
.tx-free_agent { background: var(--surface2); color: var(--muted); border: 2px solid var(--border); }
.tx-body { flex: 1; } .tx-date { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tx-add { color: var(--green); font-weight: 700; } .tx-drop { color: var(--red); }
.load-more { display: block; margin: 14px auto 0; background: var(--surface); color: var(--text); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 11px 24px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 44px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.load-more:hover { border-color: var(--accent); color: var(--accent); }

/* ── Ledger (transaction feed) ──────────────────────────────────────── */
.lg-filters { position: sticky; top: 0; z-index: 20; background: var(--bg);
  padding: 10px 0 11px; margin-bottom: 6px; border-bottom: 2px solid var(--border); }
.lg-frow { display: flex; gap: 8px; align-items: stretch; }
.lg-frow + .lg-frow { margin-top: 8px; }
.lg-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-chip { font-size: 12px; font-weight: 700; padding: 7px 12px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--muted); cursor: pointer; font-family: inherit; min-height: 38px; white-space: nowrap; }
.lg-chip .n { opacity: .6; font-weight: 700; margin-left: 5px; font-size: 11px; }
.lg-chip:hover { color: var(--text); border-color: var(--accent-dim); }
.lg-chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.lg-chip.active .n { opacity: .8; }
.lg-sel { flex: 1; min-width: 0; }
.lg-sel select { width: 100%; box-sizing: border-box; padding: 9px 10px; min-height: 40px; background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size: 13px; font-weight: 700; -webkit-appearance: none; appearance: none; }
.lg-deadline-note { font-size: 12px; color: var(--amber); font-weight: 700; margin-top: 9px; display: flex; align-items: center; gap: 6px; }

.lg-weekhead { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 16px 0 7px; padding-bottom: 4px; border-bottom: 2px solid var(--border); display: flex; justify-content: space-between; align-items: baseline; }
.lg-weekhead .c { color: var(--accent-dim); }
.lg-ddiv { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; color: var(--amber);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lg-ddiv::before, .lg-ddiv::after { content: ""; flex: 1; height: 2px; background: var(--amber); opacity: .35; }

.lg-list { display: flex; flex-direction: column; gap: 6px; }
.lg-dot { width: 9px; height: 9px; flex-shrink: 0; display: inline-block; }

/* add/drop row — dense, wraps on narrow screens */
.lg-move { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 2px solid var(--border);
  border-left-width: 5px; padding: 8px 12px; font-size: 13.5px; }
.lg-move .lg-team { display: flex; align-items: center; gap: 6px; font-weight: 700; flex-shrink: 0; width: 34%; max-width: 150px; min-width: 0; }
.lg-move .lg-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-players { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: center; }
.lg-mv { display: inline-flex; align-items: center; gap: 5px; }
.lg-bid { margin-left: auto; font-weight: 700; color: var(--amber); font-size: 12px; white-space: nowrap; padding-left: 6px; }
.lg-when { color: var(--muted); font-size: 11px; white-space: nowrap; flex-shrink: 0; padding-left: 6px; }
.lg-bid + .lg-when, .lg-when + .lg-bid { padding-left: 6px; }

/* trade card */
.lg-trade { background: var(--surface); border: 2px solid var(--accent-dim); overflow: hidden; }
.lg-trade-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--surface2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lg-side { display: flex; gap: 9px; padding: 8px 12px; border-top: 2px solid var(--border); align-items: flex-start; }
.lg-side .lg-team { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-shrink: 0; width: 38%; max-width: 150px; min-width: 0; }
.lg-side .lg-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-gets { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lg-asset { font-size: 12.5px; background: var(--surface2); border: 2px solid var(--border); padding: 2px 7px; display: inline-flex; align-items: center; gap: 5px; }
.lg-asset.faab { color: var(--amber); font-weight: 700; } .lg-asset.pick { color: var(--accent); font-weight: 700; }
.lg-empty { text-align: center; color: var(--muted); padding: 46px 16px; }
/* clickable players/teams — keep add/drop green/red, add hover affordance */
.lg-move a, .lg-trade a { text-decoration: none; }
a.lg-team { color: var(--text); }
a.lg-team span { text-decoration: none; }
a.lg-team:hover span { color: var(--accent); text-decoration: underline; }
a.lg-asset { color: inherit; }
a.lg-asset:hover { border-color: var(--accent); color: var(--accent); }
.lg-mv a.pl { color: inherit; }
.lg-mv a.pl:hover { text-decoration: underline; }

/* ── Bracket ─────────────────────────────────────────────────────────── */
.bracket { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.bracket-round { display: flex; flex-direction: column; justify-content: space-around; gap: 14px; min-width: 190px; }
.bracket-round h4 { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; text-align: center; font-family: var(--font-mono); }
.bracket-match { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bracket-team { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 13px; }
.bracket-team + .bracket-team { border-top: 2px solid var(--border); }
.bracket-team.winner { color: var(--text); font-weight: 700; background: rgba(217,160,102,0.1); }
.bracket-team.winner::before { content: '▸ '; color: var(--accent); }
.bracket-team.loser { color: var(--muted); }
.bracket-place { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); text-align: center; padding: 4px; background: var(--surface2); font-family: var(--font-mono); }

/* ── H2H ─────────────────────────────────────────────────────────────── */
.h2h-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.h2h { border-collapse: collapse; font-size: 12px; }
.h2h th, .h2h td { border: 2px solid var(--border); padding: 6px 8px; text-align: center; min-width: 44px; }
.h2h th.corner { background: var(--surface); position: sticky; left: 0; z-index: 2; }
.h2h th.rowhead { text-align: right; position: sticky; left: 0; background: var(--surface); z-index: 1; white-space: nowrap; font-weight: 700; color: var(--text); }
.h2h td.self { background: var(--surface2); color: var(--border); }
.h2h td.pos { color: var(--green); } .h2h td.neg { color: var(--red); } .h2h td.even { color: var(--muted); }
.h2h th.colhead { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: var(--muted); font-weight: 700; height: 80px; }

/* ── Draft board ─────────────────────────────────────────────────────── */
.draft-board { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.draft-grid { display: grid; gap: 5px; }
.draft-pick { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 7px 8px; min-width: 120px;
  font-size: 11px; line-height: 1.3; border-left: 3px solid var(--border); }
.draft-pick .dp-no { font-size: 9px; color: var(--muted); }
.draft-pick .dp-name { font-weight: 700; font-size: 12px; margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); }
.draft-pick .dp-meta { font-size: 10px; color: var(--muted); }
.draft-pick.bl-QB { border-left-color: var(--red); } .draft-pick.bl-RB { border-left-color: var(--green); }
.draft-pick.bl-WR { border-left-color: var(--accent); } .draft-pick.bl-TE { border-left-color: var(--amber); }
.draft-pick.bl-K { border-left-color: var(--purple); } .draft-pick.bl-DEF { border-left-color: var(--muted); }
.round-label { font-size: 10px; color: var(--muted); font-weight: 700; padding: 4px 0; letter-spacing: .1em; }

/* ── Teams index grid ────────────────────────────────────────────────── */
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.team-tile { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--text);
  transition: border-color var(--dur) var(--ease); }
.team-tile:hover { border-color: var(--accent); }
.team-tile .tt-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--surface2); object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; }
.team-tile .tt-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-tile .tt-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.team-tile .tt-rings { color: var(--amber); font-size: 12px; }

/* ── Season accordion (team page) ────────────────────────────────────── */
.season-block { border: 2px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--surface); }
.season-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none;
  transition: background var(--dur) var(--ease); }
.season-head:hover { background: var(--surface2); }
.season-head .syr { font-size: 20px; font-weight: 700; font-family: var(--font-mono); }
.season-head .sfin { font-size: 13px; color: var(--muted); }
.season-head .schev { margin-left: auto; color: var(--muted); transition: transform var(--dur) var(--ease); font-size: 13px; }
.season-block.open .schev { transform: rotate(90deg); }
.season-body { display: none; padding: 0 20px 20px; }
.season-block.open .season-body { display: block; }
/* Collapsible sub-sections within a season (Roster / Game Log / Draft / Transactions) */
.season-sub { border-top: 2px solid var(--border); }
.season-sub:first-of-type { border-top: none; }
.season-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 2px; cursor: pointer; user-select: none; min-height: 44px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.season-subhead:hover { color: var(--text); }
.season-subhead .subchev { transition: transform var(--dur) var(--ease); font-size: 11px; }
.season-sub.open .season-subhead { color: var(--text); }
.season-sub.open .subchev { transform: rotate(90deg); }
.season-subbody { display: none; padding-bottom: 12px; }
.season-sub.open .season-subbody { display: block; }
.season-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dim); font-weight: 700; margin: 18px 0 10px; font-family: var(--font-mono); }

/* ── What-if ─────────────────────────────────────────────────────────── */
.wi-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.wi-tab { font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: var(--radius); border: 2px solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer; font-family: inherit; transition: all var(--dur) var(--ease); min-height: 44px; }
.wi-tab:hover { color: var(--text); border-color: var(--accent-dim); }
.wi-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.wi-note { font-size: 13px; color: var(--muted); background: var(--surface); border: 2px solid var(--border);
  border-left: 3px solid var(--accent-dim); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; line-height: 1.5; }
.delta-up { color: var(--green); font-weight: 700; } .delta-down { color: var(--red); font-weight: 700; } .delta-same { color: var(--muted); }
.scoring-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px; }
.seed-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.seed-in { background: var(--green); color: var(--bg); }
.seed-out { background: var(--red); color: var(--bg); }
.seed-hunt { background: var(--amber); color: var(--bg); }
.seed-keep { background: var(--surface2); color: var(--muted); border: 2px solid var(--border); }
tr.seed-cut td { border-bottom: 2px solid var(--accent); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--muted); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 0; display: inline-block; }

/* Injury badge */
.inj-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-sm); vertical-align: middle; }
.inj-out { background: var(--red); color: #fff; }
.inj-q { background: var(--amber); color: #1a120c; }

/* Lineup (recommended) */
.lineup { display: flex; flex-direction: column; gap: 6px; }
.lineup-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); }
.lineup-row.empty { opacity: 0.5; }
.lineup-row .slot-badge { width: 46px; }
.lineup-row .lp-name { font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lineup-row .lp-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
.lineup-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 12px;
  border-top: 2px solid var(--border); font-size: 14px; }
.lineup-total strong { color: var(--accent); font-size: 18px; font-family: var(--font-mono); }

/* Efficiency bar */
.eff-wrap { margin: 4px 0 2px; }
.eff-bar { height: 8px; background: var(--border); border-radius: 0; overflow: hidden; }
.eff-fill { height: 100%; background: var(--accent); border-radius: 0; transition: width 0.4s var(--ease); }
.eff-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 5px; }

/* FAAB / waiver order bar */
.faab-bar { height: 6px; background: var(--border); border-radius: 0; overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; }
.faab-fill { height: 100%; border-radius: 0; }
.team-dot { width: 10px; height: 10px; border-radius: 0; display: inline-block; flex-shrink: 0; }

/* Keepers matrix (teams × seasons) */
.keep-table { width: auto; border-collapse: collapse; font-size: 14px; }
.keep-table th, .keep-table td { border: 2px solid var(--border); padding: 8px 10px; vertical-align: top; }
.keep-table thead th { background: var(--surface); font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent); text-align: center; white-space: nowrap; }
.keep-table thead th.kt-team { text-align: left; }
.keep-table td.kt-teamcell { position: sticky; left: 0; z-index: 2; background: var(--bg); min-width: 150px; }
.keep-table thead th.kt-team { position: sticky; left: 0; z-index: 3; }
.keep-table td:not(.kt-teamcell) { min-width: 148px; }
.keep-table td { white-space: normal; }
.keep-cell { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.keep-txt { min-width: 0; }
.keep-name { display: block; font-weight: 700; line-height: 1.15; }
.keep-pos { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.keep-streak { display: inline-block; margin-top: 7px; font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.keep-streak.keep-final { color: var(--amber); font-weight: 700; }
.keep-table td.keep-final-cell { box-shadow: inset 0 0 0 2px var(--amber); }
.keep-table td.keep-empty { text-align: center; color: var(--muted); vertical-align: middle; }

/* Punish / Playoff Watch — probability meter */
.pw-meter { position: relative; min-width: 110px; height: 20px; background: var(--surface2); border: 2px solid var(--border); overflow: hidden; }
.pw-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); opacity: 0.55; transition: width 0.5s var(--ease); }
.pw-fill.pos { background: var(--green); }
.pw-lab { position: absolute; left: 7px; top: 0; line-height: 20px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }

/* Requirements / about */
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }
.req-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.req-card .rq-l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.req-card .rq-v { font-size: 15px; font-weight: 700; }
.slot-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-pill { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--radius-sm); background: var(--surface2); border: 2px solid var(--border); }

/* Controls (selects + week stepper) */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.ctrl { display: flex; flex-direction: column; gap: 4px; }
.ctrl label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sel { background: var(--surface); color: var(--text); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; min-height: 44px; }
.sel:hover { border-color: var(--accent-dim); }
.wk-step { display: inline-flex; align-items: center; gap: 4px; }
.wk-btn { background: var(--surface); border: 2px solid var(--border); color: var(--text); border-radius: var(--radius);
  width: 44px; height: 44px; font-size: 16px; cursor: pointer; font-family: inherit; }
.wk-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.wk-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Box score */
.bs-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 4px; }
.bs-team { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; min-width: 0; }
.bs-team.right { justify-content: flex-end; text-align: right; }
/* Team names always shown in full — wrap instead of truncating */
.bs-team .nm { min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.2; }
.bs-score { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bs-score.win { color: var(--accent); } .bs-score.lose { color: var(--muted); }
.bs-vs { text-align: center; font-size: 11px; color: var(--muted); }
.bs-row { display: grid; grid-template-columns: 1fr 50px 1fr; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 2px solid var(--border); font-size: 13px; }
.bs-row:last-child { border-bottom: none; }
.bs-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bs-side.left { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.bs-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-pt { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bs-pt.hi { color: var(--accent); }
.bs-slot { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); }
.bs-tot { display: grid; grid-template-columns: 1fr 50px 1fr; gap: 8px; padding: 10px 0 2px; border-top: 2px solid var(--border); margin-top: 2px; font-weight: 700; }
.bs-tot .l { text-align: right; } .bs-tot .r { text-align: left; }
.bs-bench { margin-top: 8px; font-size: 12px; color: var(--muted); }
.result-badge { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-sm); display: inline-block; }
.rb-w { background: var(--green); color: var(--bg); } .rb-l { background: var(--red); color: var(--bg); } .rb-t { background: var(--amber); color: var(--bg); }
.mini-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px; }
.mini-game { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 10px 14px; cursor: pointer; transition: border-color var(--dur) var(--ease); }
.mini-game:hover { border-color: var(--accent-dim); }
.mini-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.mini-row.win { font-weight: 700; } .mini-row.lose { color: var(--muted); }

/* Trade what-if */
.trade-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.swap-btn { background: var(--surface); border: 2px solid var(--border); color: var(--accent); border-radius: var(--radius);
  width: 44px; height: 44px; font-size: 17px; cursor: pointer; font-family: inherit; }
.swap-btn:hover { border-color: var(--accent); }
.clear-btn { margin-left: auto; background: none; border: 2px solid var(--border); color: var(--muted);
  border-radius: var(--radius); padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 44px; }
.clear-btn:hover { border-color: var(--red); color: var(--red); }
.trade-summary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.ts-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 7px; font-family: var(--font-mono); }
.ts-side { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-side.right { justify-content: flex-end; }
.ts-col.right { text-align: right; }
.ts-arrow { color: var(--accent); font-size: 20px; align-self: center; padding-top: 16px; }
.ts-empty { color: var(--muted); font-size: 13px; }
.trade-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface2); border: 2px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 8px 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 32px; }
.trade-chip:hover { border-color: var(--red); }
.trade-chip .x { color: var(--muted); font-weight: 700; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 8px; }
.roster-panel { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.rp-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 2px solid var(--border); }
.rp-hint { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; }
.rp-player { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur) var(--ease); user-select: none; min-height: 44px; }
.rp-player:hover { background: var(--surface2); }
.rp-player.sending { background: rgba(192,84,74,.16); }
.rp-player.sending .rp-name { text-decoration: line-through; color: var(--muted); }
.rp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: 13px; }
.rp-val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.rp-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--surface2);
  color: var(--muted); border: 2px solid var(--border); }
.rp-tag.out { background: var(--red); color: #fff; border-color: var(--red); }
.rp-tag.st { color: var(--accent); border-color: var(--accent-dim); }
.balance-track { height: 16px; border-radius: 0; overflow: hidden; display: flex; border: 2px solid var(--border); }
.balance-seg { height: 100%; transition: width .3s var(--ease); }
.balance-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 7px; }
.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.delta-pos { color: var(--green); font-weight: 700; } .delta-neg { color: var(--red); font-weight: 700; } .delta-flat { color: var(--muted); }
.warn { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--amber); margin-top: 8px; }
@media (max-width: 720px) {
  .trade-cols { grid-template-columns: 1fr; }
  .trade-summary { grid-template-columns: 1fr; }
  .ts-side.right, .ts-col.right { justify-content: flex-start; text-align: left; }
  .ts-arrow { display: none; }
  .impact-grid { grid-template-columns: 1fr; }
}

/* Two-column lists (trending) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .two-col { grid-template-columns: 1fr; } }

/* Changelog timeline */
.timeline { position: relative; }
.cl-entry { display: flex; gap: 16px; }
.cl-rail { position: relative; width: 14px; flex-shrink: 0; }
.cl-rail::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: -8px; width: 2px; background: var(--border); }
.cl-entry:last-child .cl-rail::before { display: none; }
.cl-dot { position: absolute; left: 1px; top: 5px; width: 12px; height: 12px; border-radius: 0;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.cl-body { flex: 1; min-width: 0; padding-bottom: 32px; }
.cl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cl-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-sm); }
.tag-feature { background: var(--accent); color: var(--bg); }
.tag-fix { background: var(--amber); color: var(--bg); }
.tag-infra { background: var(--purple); color: var(--bg); }
.tag-docs { background: var(--surface2); color: var(--muted); border: 2px solid var(--border); }
.cl-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-title { font-size: 20px; font-weight: 800; line-height: 1.2; margin-bottom: 6px; }
.cl-summary { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.cl-items { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cl-items li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: #c7c2b6; }
.cl-items li::before { content: '▹'; position: absolute; left: 0; color: var(--accent-dim); }
.cl-items strong { color: var(--text); }

.updated { font-size: 12px; color: var(--muted); margin-bottom: 28px; }
footer { border-top: 2px solid var(--border); padding-top: 20px; margin-top: 22px; font-size: 13px; color: var(--muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
footer a { color: var(--accent); text-decoration: none; }

.skeleton { background: linear-gradient(90deg, var(--border) 25%, #222228 50%, var(--border) 75%); background-size: 200% 100%;
  animation: shimmer 1.2s infinite; border-radius: var(--radius-sm); height: 1em; display: inline-block; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Sections render immediately — no entrance animation. Kept for JS compat. */
section, section.visible { opacity: 1; transform: none; }

/* ── Bottom tab bar (mobile) ─────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  background: rgba(24, 17, 11, 0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 2px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); }
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabbar-h); padding: 6px 0;
  color: var(--muted); text-decoration: none;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; width: 100%;
}
.tab-item .tico { font-size: 17px; line-height: 1; }
.tab-item.active { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.tab-item:active { background: var(--surface2); }

/* ── More sheet (mobile) ─────────────────────────────────────────────── */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--surface); border-top: 2px solid var(--border);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur);
  max-height: 78svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
}
.sheet.open { transform: translateY(0); visibility: visible; }
.sheet-grab { width: 40px; height: 4px; background: var(--border); margin: 0 auto 14px; border-radius: 0; }
.sheet-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-dim);
  font-weight: 700; margin: 16px 2px 8px; }
.sheet-label:first-of-type { margin-top: 2px; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sheet-link {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 12px;
  background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600;
  min-width: 0;
}
.sheet-link:active { background: var(--surface2); }
.sheet-link.active { border-color: var(--accent); color: var(--accent); }
.sheet-link .ico { width: 18px; text-align: center; font-size: 14px; color: var(--muted); flex-shrink: 0; }
.sheet-link.active .ico { color: var(--accent); }
.sheet-link .savatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--surface2); object-fit: cover; }
.sheet-link .stxt { min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.25; }
.sheet-foot { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--border);
  font-size: 11px; color: var(--muted); font-family: var(--font-mono); }

/* ── Mobile layout ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .sidebar { display: none; }
  .content {
    margin-left: 0;
    padding: 0 max(14px, env(safe-area-inset-left)) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px) max(14px, env(safe-area-inset-right));
  }
  .tabbar { display: block; }
  header { padding: 22px 0 14px; }
  h1 { font-size: clamp(26px, 7vw, 34px); }
  .subtitle { font-size: 14px; }
  section { margin-bottom: 32px; }
  .card { padding: 14px 14px; }
  .stat-grid, .records-grid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 20px; }
  th, td { padding: 9px 8px; font-size: 13px; }
  .champ-banner { padding: 16px 16px; gap: 14px; }
  .bs-score { font-size: 22px; }
  section[id] { scroll-margin-top: 14px; }
  /* Box-score header stacks vertically so team names get the full row width
     and are never squeezed into a sliver next to the score */
  .bs-head { grid-template-columns: 1fr; gap: 4px; }
  .bs-team, .bs-team.right { justify-content: center; text-align: center; }
}
@media (max-width: 440px) {
  .stat-grid, .records-grid { grid-template-columns: 1fr; }
  .head-avatar { width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* NBA position colors (pos pills + draft-board left border). Football keeps QB/RB/WR/TE/K/DEF above. */
.pos-PG { background: #5b8dd9; } .pos-SG { background: var(--green); }
.pos-SF { background: var(--amber); } .pos-PF { background: var(--purple); } .pos-C { background: var(--red); }
.pos-G  { background: #5b8dd9; } .pos-F  { background: var(--amber); }
.draft-pick.bl-PG { border-left-color: #5b8dd9; } .draft-pick.bl-SG { border-left-color: var(--green); }
.draft-pick.bl-SF { border-left-color: var(--amber); } .draft-pick.bl-PF { border-left-color: var(--purple); }
.draft-pick.bl-C  { border-left-color: var(--red); }

/* ── Mobile top header with GGGG logo (locked to top; iOS-safe) ─────────── */
.mtopbar { display: none; }
@media (max-width: 860px) {
  .mtopbar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: calc(41px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: rgba(24, 17, 11, 0.96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 2px solid var(--border);
  }
  .mtopbar img { height: 23px; width: auto; display: block; }
  body.has-mtop .content { padding-top: calc(41px + env(safe-area-inset-top) + 4px); }
}

/* Respect users who prefer reduced motion (common on mobile). */
@media (prefers-reduced-motion: reduce) {
  .sb-sub, .sb-caret, .sb-subitem, .sb-link { transition: none !important; }
}

/* Native cross-document view transitions (same-origin nav). No-op where unsupported. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }