/* Franchise · ALL-22 PRO, Look B ("Site"): the site's broadcast look (broadcast.css and fantasy.css: Roboto Condensed
   caps for labels and numbers that should pop, Inter for reading, near-black sheets with hairlines, gold for the main
   action, gold / blue / violet for offense / defense / special teams) composed like Madden's franchise menus: a team-
   colored hero for the next game, cards you can scan, tables you can sort. PRO's pixel styling only where a moment
   leads into a game (the evolution moment, the draft's on-the-clock bug). Desktop: header, side menu, content. Phones
   (under 900 px): one column, a bottom tab bar; sideways phones keep the tab bar and a shorter header. */
:root {
  --bg: #080b0f; --panel: #0e1319; --tag: #090d11; --sheet: #0b1016; --hover: #141a22; --raise: #121922;
  --line: rgba(255, 255, 255, 0.09); --tag-border: rgba(255, 255, 255, 0.22); --ghost-border: rgba(255, 255, 255, 0.12); --hover-border: rgba(255, 255, 255, 0.3);
  --text: #f3f5f8; --muted: #9aa3af; --subtle: #7d8794; --nav: #d5dae1;
  --gold: #f2c230; --gold-hover: #f7d35c; --on-gold: #1c1303; --on-gold-2: #5c4500; --off: #f2c230; --def: #5bc0f8; --st: #c4b5fd;
  --red: #f87171; --red-fill: #dc2626; --win: #4ade80; --teal: #2dd4bf; --orange: #fdba74;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rc: "Roboto Condensed", "Arial Narrow", sans-serif; --px: "Press Start 2P", monospace;
  --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --headh: 60px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--headh) + 8px); scroll-padding-bottom: var(--tabh, 8px); }
body { min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button[disabled] { cursor: default; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.pad :focus { outline: 3px solid var(--gold); outline-offset: 2px; }
img { image-rendering: pixelated; image-rendering: crisp-edges; }
.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; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 6px; background: var(--gold); color: var(--on-gold); font-weight: 700; }
.skip:focus { left: 8px; }
.noscript { padding: 24px; }
.spr24 { width: 24px; height: 24px; flex: none; } .spr32 { width: 32px; height: 32px; flex: none; } .spr40 { width: 40px; height: 40px; flex: none; } .spr48 { width: 48px; height: 48px; flex: none; }
.spr64 { width: 64px; height: 64px; flex: none; } .spr96 { width: 96px; height: 96px; flex: none; } .spr128 { width: 128px; height: 128px; flex: none; } .spr160 { width: 160px; height: 160px; flex: none; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.fill { fill: currentColor; stroke: none; }
.ic.xs { width: 14px; height: 14px; }
.ic.sm { width: 16px; height: 16px; }
.mut { color: var(--muted); font-size: 12.5px; }
.neg { color: var(--red); } .posv { color: var(--win); } .goldt { color: var(--gold); }
.boot { color: var(--muted); padding: 40px 0; }
body.loading .app { visibility: hidden; }

/* ---------- layout: desktop ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: var(--headh) 1fr auto; grid-template-areas: "head head" "side view" "side foot"; min-height: 100vh; }
body.bare .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "view" "foot"; }
body.bare .side, body.bare .tabbar { display: none !important; }
.head { grid-area: head; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 0 24px; background: rgba(8, 11, 15, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); min-width: 0; }
.wordmark { font: 800 21px/1 var(--rc); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--gold); }
.mode { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--tag-border); border-radius: 6px; background: var(--tag); font: 800 13px/1 var(--rc); text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; }
.mode b { color: var(--teal); }
.hweek { display: grid; gap: 3px; margin-left: 10px; min-width: 0; }
.hweek b { font: 800 16px/1 var(--rc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hweek small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hteam { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hteam b { font: 800 18px/1 var(--rc); }
.hcap { display: grid; gap: 3px; padding-left: 16px; border-left: 1px solid var(--line); text-decoration: none; }
.hcap small { font: 700 11px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.hcap b { font: 800 18px/1 var(--rc); color: var(--win); white-space: nowrap; }
.hcap b.neg { color: var(--red); }
.hsave { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.hsave.err { color: var(--red); }
.side { grid-area: side; }
.side-in { position: sticky; top: var(--headh); max-height: calc(100vh - var(--headh)); overflow-y: auto; scrollbar-width: thin; padding-bottom: 16px; }
.tcard { margin: 20px 16px 14px; border-radius: 10px; overflow: hidden; background: var(--tc); color: var(--tt); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); text-decoration: none; display: block; }
.tcb { display: flex; align-items: center; gap: 12px; padding: 14px; }
.tcab { display: grid; place-items: center; width: 52px; height: 52px; flex: none; }
.tcab .tlogo { width: 52px; height: 52px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.tcn { display: grid; gap: 4px; min-width: 0; }
.tcn b { font: 800 18px/1.05 var(--rc); text-transform: uppercase; }
.tcn small { font-size: 12px; opacity: 0.85; }
.tcs { display: grid; grid-template-columns: 1fr 1fr; background: rgba(0, 0, 0, 0.3); color: #fff; }
.tcs span { display: grid; gap: 3px; padding: 10px 14px; }
.tcs span + span { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.tcs b { font: 800 22px/1 var(--rc); }
.tcs small { font: 700 11px/1.2 var(--rc); text-transform: uppercase; opacity: 0.8; }
.nav { list-style: none; margin: 0; padding: 0 16px 8px; display: grid; gap: 2px; }
.nav .sep { height: 1px; margin: 8px 12px; background: var(--line); }
.navi { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 6px; color: var(--nav); text-decoration: none; font: 700 15px/1 var(--rc); text-transform: uppercase; }
.navi .ic { color: var(--muted); }
.navi:hover { background: var(--hover); }
.navi[aria-current] { background: var(--text); color: var(--bg); }
.navi[aria-current] .ic { color: var(--bg); }
.navi .badge { margin-left: auto; }
.navi.hot { color: var(--gold); }
.navi.hot .ic { color: var(--gold); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red-fill); color: #fff; font: 800 12px/1 var(--rc); }
.badge.gold { background: var(--gold); color: var(--on-gold); }
.view { grid-area: view; min-width: 0; padding: 22px 28px 28px; outline: none; }
.foot { grid-area: foot; padding: 0 28px 26px; min-width: 0; }
.fine { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.5; color: var(--subtle); }
.tabbar { display: none; }

/* ---------- parts ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.card + .card { margin-top: 0; }
.ch { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; font: 800 16px/1.05 var(--rc); letter-spacing: 0.03em; text-transform: uppercase; }
.ch small { font: 500 12.5px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.chrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.chrow .ch { margin: 0; }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red-fill); color: #fff; font: 800 13px/1 var(--rc); }
.ptitle { margin-bottom: 16px; }
.ptitle h1 { margin: 0; font: 800 34px/1 var(--rc); text-transform: uppercase; }
.ptitle p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.ptitle.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.pt-r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 6px; font: 800 16px/1 var(--rc); text-transform: uppercase; white-space: nowrap; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn[disabled], .btn.dis, .btn[aria-disabled="true"] { opacity: 0.45; }
.btn.dis, .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn .ic { width: 18px; height: 18px; }
.btn.gold { background: var(--gold); color: var(--on-gold); }
.btn.gold:hover:not([disabled]) { background: var(--gold-hover); }
.btn.big { height: 52px; padding: 0 28px; font-size: 20px; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 14px; }
.btn.xs { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.outline { background: var(--tag); border: 1px solid var(--tag-border); color: var(--text); }
.btn.outline:hover:not([disabled]) { background: var(--hover); }
.btn.ghost { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; }
.btn.ghost:hover:not([disabled]) { background: rgba(0, 0, 0, 0.55); }
.btn.danger { background: var(--red-fill); color: #fff; }
.btn.danger:hover:not([disabled]) { background: #ef4444; }
.btn.violet { background: #7c3aed; color: #fff; }
.btn.quiet { background: none; color: var(--muted); padding: 0 8px; }
.btn.quiet:hover { color: var(--text); }
.btn.wide { width: 100%; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.btnrow.l { justify-content: flex-start; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 6px; border: 1px solid var(--ghost-border); background: var(--tag); color: var(--text); flex: none; }
.icon-btn:hover:not([disabled]) { border-color: var(--hover-border); }
.icon-btn[disabled] { opacity: 0.35; }
.plate { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--tc); color: var(--tt); font: 800 12.5px/1 var(--rc); letter-spacing: 0.04em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); flex: none; }
.plate.big { min-width: 52px; height: 30px; font-size: 16px; border-radius: 6px; }
/* (a plate's letters are always its team's text color: a list's own "span" color must not reach them) */
.plate { color: var(--tt) !important; }
/* a plate with the team's logo at its left (ui.js plate) */
.plate.lg { gap: 4px; padding: 0 6px 0 1px; justify-content: flex-start; }
.plate .tlogo { width: 20px; height: 20px; }
.plate.big .tlogo { width: 25px; height: 25px; }
/* ---------- team logos ---------- */
/* (franchise-ui/logo-art.js: the badge's rim (dark) and keyline (trim), the symbol's outline (dark), its paint (--ls),
   cut lines in the badge's main or in dark; the colors come in as variables on the svg) */
.tlogo { display: inline-block; flex: none; width: 24px; height: 24px; overflow: visible; vertical-align: middle; }
.tlogo .bo { fill: var(--lm); stroke: var(--ld); stroke-width: 6; stroke-linejoin: round; paint-order: stroke; }
.tlogo .bk { fill: none; stroke: var(--lt); stroke-width: 1.6; stroke-linejoin: round; }
.tlogo .so { fill: var(--ld); stroke: var(--ld); stroke-linejoin: round; stroke-linecap: round; }
.tlogo .ko, .tlogo .cd { fill: none; stroke: var(--ld); stroke-linejoin: round; stroke-linecap: round; }
.tlogo .sf { fill: var(--ls); }
.tlogo .sk { fill: none; stroke: var(--ls); stroke-linejoin: round; stroke-linecap: round; }
.tlogo .cm { fill: none; stroke: var(--lm); stroke-linejoin: round; stroke-linecap: round; }
.tlogo .fm { fill: var(--lm); }
.tlogo .fd { fill: var(--ld); }
/* ---------- end team logos ---------- */
.tlinkk { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.tlinkk:hover { color: var(--gold); }
.type { display: inline-block; padding: 2px 7px; border-radius: 3px; background: var(--ty); color: var(--tyt); font: 800 11.5px/1.3 var(--rc); letter-spacing: 0.02em; text-transform: uppercase; }
.pos { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 22px; padding: 0 6px; border-radius: 4px; border: 1px solid; font: 800 12.5px/1 var(--rc); }
.pos.off { color: var(--off); border-color: rgba(242, 194, 48, 0.5); background: rgba(242, 194, 48, 0.1); }
.pos.def { color: var(--def); border-color: rgba(91, 192, 248, 0.5); background: rgba(91, 192, 248, 0.1); }
.pos.st { color: var(--st); border-color: rgba(196, 181, 253, 0.5); background: rgba(196, 181, 253, 0.1); }
.ovr { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 6px; font: 800 16px/1 var(--rc); color: #0b0f14; font-variant-numeric: tabular-nums; }
.ovr.big { min-width: 42px; height: 34px; font-size: 20px; }
.ovr.sm { min-width: 28px; height: 22px; font-size: 14px; }
.g90 { background: #4ade80; } .g80 { background: #a3e635; } .g70 { background: #facc15; } .g60 { background: #fdba74; } .g50 { background: #3a424d; color: var(--text); }
/* a Poké Ball for the development tier (Poké, Great, Ultra, Master) */
.ball { position: relative; display: inline-block; width: 13px; height: 13px; border-radius: 50%; flex: none; background: linear-gradient(to bottom, var(--b1) 0 44%, #111 44% 56%, #f3f5f8 56% 100%); box-shadow: inset 0 0 0 1.5px #111; }
.ball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #f3f5f8; box-shadow: 0 0 0 1.5px #111; }
.ball.poke { --b1: #e3350d; } .ball.great { --b1: #3b6fd8; } .ball.ultra { --b1: #262626; } .ball.master { --b1: #8e44ad; } .ball.hidden { --b1: #4b5563; }
.ball.ultra::before { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 2px; background: var(--gold); border-radius: 1px; }
.tier { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font); white-space: nowrap; }
.tier.unknown { color: var(--subtle); }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--ghost-border); color: var(--muted); font: 700 12px/1 var(--font); white-space: nowrap; }
.pill.green { color: var(--win); border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.08); }
.pill.red { color: var(--red); border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.08); }
.pill.gold { color: var(--gold); border-color: rgba(242, 194, 48, 0.5); background: rgba(242, 194, 48, 0.08); }
.pill.blue { color: var(--def); border-color: rgba(91, 192, 248, 0.5); background: rgba(91, 192, 248, 0.08); }
.pill.violet { color: var(--st); border-color: rgba(196, 181, 253, 0.5); background: rgba(196, 181, 253, 0.08); }
.opts { display: flex; flex-wrap: wrap; gap: 4px; }
.o { height: 36px; min-width: 44px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--ghost-border); background: var(--tag); color: var(--muted); font: 800 14px/1 var(--rc); text-transform: uppercase; white-space: nowrap; }
.o:hover { color: var(--text); border-color: var(--hover-border); }
.o[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.opts.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.opts.scroll .o { flex: none; }
.seg { display: inline-flex; border: 1px solid var(--tag-border); border-radius: 6px; overflow: hidden; background: var(--tag); flex: none; max-width: 100%; }
.seg button { height: 32px; padding: 0 12px; border: 0; background: none; color: var(--muted); font: 800 13px/1 var(--rc); text-transform: uppercase; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--tag-border); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg.wrap { flex-wrap: wrap; }
/* four long tabs on a phone: two rows of two, nothing cut off */
@media (max-width: 599px) {
  .seg.grid-s { display: grid; grid-template-columns: 1fr 1fr; width: 100%; overflow: visible; }
  .pt-r:has(> .seg.grid-s) { width: 100%; }
  .seg.grid-s button { padding: 0 8px; }
  .seg.grid-s button + button { border-left: 0; }
  .seg.grid-s button:nth-child(even) { border-left: 1px solid var(--tag-border); }
  .seg.grid-s button:nth-child(n+3) { border-top: 1px solid var(--tag-border); }
}
.sel { height: 36px; padding: 0 30px 0 10px; border-radius: 6px; border: 1px solid var(--tag-border); background: var(--tag) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px; color: var(--text); font: 600 14px/1 var(--font); -webkit-appearance: none; appearance: none; max-width: 100%; }
.inp { height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--tag-border); background: var(--tag); color: var(--text); font: 500 15px/1 var(--font); min-width: 0; }
.inp:focus { border-color: var(--gold); outline: none; }
.inp.err { border-color: var(--red); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, .lbl { font: 700 12px/1.2 var(--rc); text-transform: uppercase; letter-spacing: 0.04em; color: var(--subtle); }
.field small { color: var(--muted); font-size: 12.5px; }
.ferr { color: var(--red); font-size: 13px; margin: 4px 0 0; min-height: 1em; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tbl th { padding: 0; border-bottom: 1px solid var(--line); font: 700 12px/1 var(--rc); letter-spacing: 0.04em; text-transform: uppercase; color: var(--subtle); text-align: right; white-space: nowrap; }
.tbl th .th, .tbl th .sort { display: flex; align-items: center; justify-content: flex-end; gap: 3px; width: 100%; padding: 9px 8px; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.tbl th.l .th, .tbl th.l .sort { justify-content: flex-start; }
.tbl th:hover .sort, .tbl th.on { color: var(--text); }
.sa { width: 12px; height: 12px; opacity: 0; }
.tbl th.on .sa { opacity: 1; }
.tbl td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .l { text-align: left; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--hover); }
/* the pick sound's switch (sound.js): the speaker, dimmed when off */
.sndbtn[aria-pressed="false"] { color: var(--subtle); }
.tbl tr[tabindex]:focus-visible, body.pad .tbl tr[tabindex]:focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.tbl tr[tabindex]:focus-visible td, body.pad .tbl tr[tabindex]:focus td { background: var(--hover); }
.tbl tr.me td { background: rgba(242, 194, 48, 0.08); }
.tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.tbl tr.dim td { color: var(--subtle); }
.tbl tr.none td { text-align: left; color: var(--muted); padding: 18px 10px; white-space: normal; }
.tbl tr.sum td { font-weight: 800; border-top: 1px solid var(--tag-border); }
.tbl caption { caption-side: top; }
.tw { overflow: auto; min-width: 0; }
.tw.sticky th { position: sticky; top: 0; z-index: 1; background: #0f151c; }
.pl { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; max-width: 100%; }
.pl:hover b { color: var(--gold); }
.pl-t { display: grid; gap: 1px; min-width: 0; }
.pl .sub { font-size: 12px; color: var(--muted); }
.nm { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nm b { font-weight: 700; }
.nm small { margin-left: 6px; font-size: 12.5px; color: var(--muted); }
.nm .pn { margin: 0 6px 0 0; color: var(--subtle); }
.tdots { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 1px; }
.tdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ty); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.tiles div { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--tag); min-width: 0; }
.tiles small { display: block; margin-bottom: 6px; font: 700 11.5px/1.2 var(--rc); text-transform: uppercase; color: var(--subtle); }
.tiles b { font: 800 20px/1.1 var(--rc); }
.tiles b.neg { color: var(--red); } .tiles b.posv { color: var(--win); }
.mbar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; min-width: 40px; }
.mbar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--win); }
.mbar i.md { background: var(--gold); } .mbar i.lo { background: var(--red); } .mbar i.blue { background: var(--def); } .mbar i.violet { background: var(--st); }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.empty p { margin: 0 0 12px; }
.note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.note.gold { color: var(--gold); } .note.red { color: var(--red); } .note.green { color: var(--win); }
.crumb { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 6px; margin-bottom: 12px; font: 700 13px/1 var(--rc); text-transform: uppercase; color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--text); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.stack { display: grid; gap: 18px; min-width: 0; align-content: start; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--gold); }

/* toast, busy overlay, dialogs */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; max-width: min(560px, 92vw); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--tag-border); background: var(--hover); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font: 600 14px/1.35 var(--font); transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.red { border-color: rgba(248, 113, 113, 0.6); } .toast.green { border-color: rgba(74, 222, 128, 0.6); }
.busy { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(4, 6, 9, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.busy-box { display: grid; justify-items: center; gap: 10px; min-width: min(360px, 88vw); padding: 24px 28px; border-radius: 12px; border: 1px solid var(--tag-border); background: var(--panel); text-align: center; }
.busy-box b { font: 800 18px/1.2 var(--rc); text-transform: uppercase; }
.busy-box small { color: var(--muted); font-size: 13px; min-height: 1em; }
.busy-bar { display: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.busy.has-bar .busy-bar { display: block; }
.busy-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--gold); transition: width 0.2s; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--gold); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
dialog.sheet { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--tag-border); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden; display: flex; flex-direction: column; }
dialog.sheet:not([open]) { display: none; }
dialog.sheet.wide { width: min(900px, calc(100vw - 24px)); }
dialog.sheet::backdrop { background: rgba(3, 5, 8, 0.7); }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.sh-title h2 { margin: 0; font: 800 20px/1.1 var(--rc); text-transform: uppercase; }
.sh-title p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.sh-body { padding: 16px 18px 18px; overflow-y: auto; min-height: 0; }
.ctext { margin: 0; font-size: 15px; line-height: 1.5; }
.confirm .btnrow { margin-top: 18px; }

/* ---------- the franchise list (the entry) ---------- */
.saves { display: grid; gap: 22px; max-width: 1100px; }
.hero-in { display: grid; gap: 10px; padding: 28px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(900px 320px at 0% 0%, rgba(242, 194, 48, 0.14), transparent 70%), radial-gradient(700px 300px at 100% 100%, rgba(91, 192, 248, 0.12), transparent 70%), var(--panel); }
.hero-in .kick { font: 800 13px/1 var(--rc); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.hero-in h1 { margin: 0; font: 800 56px/0.95 var(--rc); text-transform: uppercase; }
.hero-in h1 span { color: var(--gold); }
.hero-in p { margin: 0; max-width: 640px; color: var(--nav); font-size: 15.5px; line-height: 1.5; }
.hero-in .btnrow { justify-content: flex-start; margin-top: 8px; }
.flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fcard { display: grid; grid-template-rows: auto 1fr auto; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; min-width: 0; }
.fcard.last { border-color: rgba(242, 194, 48, 0.5); }
.fc-top { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(120deg, var(--tc) 0 55%, rgba(0, 0, 0, 0) 100%), var(--sheet); color: var(--tt); }
.fc-ab { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); font: 800 19px/1 var(--rc); flex: none; }
.fc-n { display: grid; gap: 3px; min-width: 0; }
.fc-n b { font: 800 19px/1.05 var(--rc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-n small { font-size: 12.5px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-mid { display: grid; gap: 6px; padding: 12px 14px; font-size: 13.5px; color: var(--muted); }
.fc-mid b { color: var(--text); font: 800 17px/1.1 var(--rc); text-transform: uppercase; }
.fc-acts { display: flex; gap: 6px; padding: 0 14px 14px; }
.fc-top .fc-n { flex: 1; }
.fc-ren { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.3); color: #fff; opacity: 0.85; }
.fc-ren:hover { opacity: 1; background: rgba(0, 0, 0, 0.38); }
.fc-acts .btn { height: 38px; font-size: 14px; padding: 0 12px; }
.fc-acts .btn.gold { flex: 1; }
.fc-acts .icon-btn { width: 38px; height: 38px; }
.fnew { display: grid; place-items: center; gap: 8px; min-height: 180px; border-radius: 12px; border: 1px dashed var(--tag-border); background: none; color: var(--muted); font: 800 16px/1 var(--rc); text-transform: uppercase; }
.fnew:hover:not([disabled]) { color: var(--text); border-color: var(--hover-border); background: var(--hover); }
.fnew .ic { width: 28px; height: 28px; }
.cloudc { display: grid; gap: 10px; }
.cloud-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); flex-wrap: wrap; }
.cloud-row .grow { flex: 1; min-width: 160px; display: grid; gap: 2px; }
.cloud-row small { color: var(--muted); font-size: 12.5px; }

/* ---------- the new franchise ---------- */
.newf { display: grid; gap: 18px; max-width: 1200px; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--ghost-border); color: var(--subtle); font: 800 13px/1 var(--rc); text-transform: uppercase; counter-increment: st; }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tag); border: 1px solid var(--ghost-border); font-size: 12px; }
.steps li.on { color: var(--text); border-color: var(--gold); }
.steps li.on::before { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.steps li.done { color: var(--muted); }
.steps li.done::before { content: "✓"; color: var(--win); }
.modes3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mcard { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; min-height: 180px; }
.mcard:hover { border-color: var(--hover-border); background: var(--hover); }
.mcard[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mcard .ic { width: 30px; height: 30px; color: var(--gold); }
.mcard b { font: 800 22px/1 var(--rc); text-transform: uppercase; }
.mcard p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.mcard small { color: var(--subtle); font-size: 12.5px; }
.tpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tdiv h3 { margin: 0 0 8px; font: 800 13px/1 var(--rc); letter-spacing: 0.05em; text-transform: uppercase; color: var(--subtle); }
.tdiv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tbtn { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); text-align: left; }
.tbtn .tb-logo, .lgym .lg-logo { display: grid; place-items: center; }
.tbtn:hover { border-color: var(--hover-border); background: var(--hover); }
.tbtn[aria-pressed="true"] { border-color: var(--gold); background: rgba(242, 194, 48, 0.08); }
.tbtn .tb-ab { display: grid; place-items: center; height: 32px; border-radius: 6px; background: var(--tc); color: var(--tt); font: 800 13px/1 var(--rc); }
.tbtn b { display: block; font: 700 14px/1.15 var(--font); }
.tbtn small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbtn .ovr { min-width: 30px; height: 24px; font-size: 14px; }
.tpreview { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.tp-side { position: sticky; top: calc(var(--headh) + 16px); display: grid; gap: 14px; }
.idform { display: grid; gap: 12px; }
.idform .row2 { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
/* the team's look (identity.js): swatches for the main and the trim, a grid of logos in the team's colors */
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch { position: relative; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.16); background: var(--sw); flex: none; }
.swatch:hover { border-color: rgba(255, 255, 255, 0.5); }
.swatch.own { border-style: dashed; border-color: rgba(255, 255, 255, 0.55); }
.swatch[aria-pressed="true"] { border-color: var(--bg); box-shadow: 0 0 0 2px var(--gold); }
.swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.logogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 5px; }
.lgo { display: grid; place-items: center; height: 44px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
.lgo .tlogo { width: 34px; height: 34px; }
.lgo:hover { border-color: var(--hover-border); background: var(--hover); }
.lgo[aria-pressed="true"] { border-color: var(--gold); background: rgba(242, 194, 48, 0.1); box-shadow: inset 0 0 0 1px var(--gold); }
.tprev { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--tc); color: var(--tt); }
.tprev .fc-ab { background: rgba(0, 0, 0, 0.2); }
.tp-logo, .fc-logo, .sum-logo { display: grid; place-items: center; flex: none; }
.tp-logo .tlogo { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.tp-ab { font-weight: 800; letter-spacing: 0.04em; }
.lineups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.lcardb { display: grid; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); text-align: left; }
.lcardb:hover { border-color: var(--hover-border); }
.lcardb[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.lcardb b { font: 800 15px/1.1 var(--rc); text-transform: uppercase; }
.lcardb small { color: var(--muted); font-size: 12.5px; }
.lsprites { display: flex; flex-wrap: wrap; gap: 0; }
.lsprites img { width: 30px; height: 30px; }
.lcardb.bad { opacity: 0.55; }
.setgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.setrow { display: grid; gap: 6px; align-content: start; min-width: 0; }
.setrow .lbl { display: flex; justify-content: space-between; gap: 8px; }
.setrow p { margin: 0; font-size: 12.5px; color: var(--muted); }
/* a new franchise's settings: the difficulty as three cards, the rules standard or custom, then what's about to start */
.diff3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dcard, .rulecard { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--sheet); text-align: left; min-width: 0; }
.dcard:hover, .rulecard:hover { border-color: var(--hover-border); background: var(--hover); }
.dcard[aria-pressed="true"], .rulecard[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: rgba(242, 194, 48, 0.07); }
.dcard b, .rulecard b { font: 800 22px/1 var(--rc); text-transform: uppercase; }
.dcard p, .rulecard p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.dpips { display: flex; gap: 4px; }
.dpips i { width: 22px; height: 6px; border-radius: 3px; background: var(--tag-border); }
.dpips i.on { background: var(--gold); }
.rules2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setgrid.custom, .lcustom { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.fname { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fname > span { display: grid; gap: 3px; min-width: 0; }
.fname b { font: 800 18px/1.1 var(--rc); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sumrow { display: flex; align-items: center; gap: 18px; }
.sumrow .kv { flex: 1; min-width: 0; }
.price { display: grid; gap: 6px; }
.price .prow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13.5px; }
.price .prow .pos { min-width: 36px; }
.capline { display: grid; gap: 6px; padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--tag); }
.capline .mbar { height: 10px; }
.capline .row { justify-content: space-between; font-size: 13.5px; }

/* the Fantasy Draft room */
.fdroom { display: grid; gap: 14px; }
.fdtop { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.fdgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.fdneeds { display: flex; flex-wrap: wrap; gap: 6px; }
.fdneeds span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--tag); font: 700 12.5px/1 var(--rc); }
.fdneeds span.full { opacity: 0.45; }
.ticker { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ticker li { flex: none; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 12px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.tn { font: 800 13px/1 var(--rc); color: var(--subtle); }
.tp { display: grid; gap: 2px; }
.tp b { font: 700 13.5px/1.1 var(--font); white-space: nowrap; }
.tp small, .ticker .next small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ticker .now { border-color: var(--gold); background: rgba(242, 194, 48, 0.1); }
.ticker .now b { color: var(--gold); }
.ticker .mine { border-color: rgba(242, 194, 48, 0.4); }

/* ---------- shorter and narrower desktops ---------- */
@media (min-width: 900px) and (max-height: 800px) {
  .view { padding-top: 16px; }
  .ptitle h1 { font-size: 28px; }
  .tcard { margin-top: 14px; }
  .navi { height: 36px; }
}
@media (min-width: 900px) and (max-width: 1360px) {
  .app { grid-template-columns: 212px minmax(0, 1fr); }
  .view { padding-left: 20px; padding-right: 20px; }
  .tcard { margin-left: 12px; margin-right: 12px; }
  .nav { padding-left: 12px; padding-right: 12px; }
  .navi { font-size: 14px; gap: 10px; }
  .hweek small { display: none; }
  .tpick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpreview { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .modes3 { grid-template-columns: 1fr; }
  .mcard { min-height: 0; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phones (upright and sideways) and narrow windows ---------- */
@media (max-width: 899px) {
  :root { --headh: 54px; }
  .app { display: block; padding-bottom: calc(66px + var(--sb)); }
  body.bare .app { padding-bottom: 0; }
  .head { height: var(--headh); padding: 0 calc(14px + var(--sr)) 0 calc(14px + var(--sl)); gap: 10px; }
  .wordmark, .mode, .hweek small, .hcap small, .hsave span { display: none; }
  body.bare .wordmark { display: inline; font-size: 18px; }
  body.bare .mode { display: inline-flex; }
  .hweek { margin-left: 0; order: 2; flex: 1; }
  .hweek b { font-size: 15px; }
  .hteam { margin-left: 0; order: 1; }
  .hteam b { font-size: 16px; }
  .hcap { order: 3; margin-left: auto; padding-left: 10px; }
  .hcap b { font-size: 16px; }
  .side { display: none; }
  .view { padding: 16px calc(16px + var(--sr)) 20px calc(16px + var(--sl)); }
  .foot { padding: 0 calc(16px + var(--sr)) 24px calc(16px + var(--sl)); }
  :root { --tabh: calc(70px + var(--sb)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(62px + var(--sb)); padding: 0 var(--sr) var(--sb) var(--sl); background: rgba(8, 11, 15, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; color: var(--muted); text-decoration: none; font: 700 11.5px/1 var(--rc); text-transform: uppercase; }
  .tab .ic { width: 22px; height: 22px; }
  .tab.on { color: var(--text); }
  .tab.on .ic { color: var(--gold); }
  .tab .badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; height: 16px; font-size: 10.5px; padding: 0 4px; }
  .ptitle h1 { font-size: 28px; }
  .ptitle p { font-size: 13.5px; }
  .toast { bottom: calc(78px + var(--sb)); }
  .card { padding: 14px; }
  .grid2, .grid3 { grid-template-columns: 1fr; gap: 14px; }
  .stack { gap: 14px; }
  .tbl { font-size: 13.5px; }
  .tbl td { padding: 7px 6px; }
  .tbl th .th, .tbl th .sort { padding: 8px 6px; }
  .hide-s { display: none; }
  .hero-in { padding: 20px; }
  .hero-in h1 { font-size: 40px; }
  .flist { grid-template-columns: 1fr; }
  .modes3 { grid-template-columns: 1fr; gap: 10px; }
  .mcard { min-height: 0; padding: 14px; }
  .tpick { grid-template-columns: 1fr; }
  .tpreview { grid-template-columns: 1fr; }
  .tp-side { position: static; }
  .setgrid { grid-template-columns: 1fr; }
  .diff3 { gap: 8px; }
  .dcard { padding: 12px; gap: 6px; }
  .dcard b { font-size: 18px; }
  .dcard p { font-size: 12.5px; }
  .rules2 { grid-template-columns: 1fr; gap: 8px; }
  .rulecard { padding: 12px 14px; }
  .swatch { width: 34px; height: 34px; }
  .fdgrid { grid-template-columns: 1fr; }
  dialog.sheet { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .btnrow .btn { flex: 1; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  :root { --headh: 46px; --tabh: calc(58px + var(--sb)); }
  .app { padding-bottom: calc(52px + var(--sb)); }
  .tabbar { height: calc(50px + var(--sb)); }
  .tab { grid-auto-flow: column; justify-content: center; gap: 8px; font-size: 12.5px; } /* (the icon beside its label) */
  .tab .ic { width: 20px; height: 20px; }
  .tab .badge { top: 4px; left: auto; right: 10px; }
  .view { padding-top: 12px; }
  .ptitle h1 { font-size: 24px; }
  .toast { bottom: calc(60px + var(--sb)); }
  /* the draft rooms: the pool's first rows above the tab bar */
  .fdroom, .roomv { gap: 8px; }
  .fdroom > .ptitle, .roomv > .ptitle { margin: 0; }
  .fdroom > .ptitle h1, .roomv > .ptitle h1 { font-size: 20px; }
  .fdroom > .ptitle p, .roomv > .ptitle p { font-size: 12.5px; margin-top: 2px; }
  .fdroom .pt-r .btn { height: 32px; padding: 0 12px; font-size: 13px; }
  .ticker li { height: 38px; padding: 0 10px 0 8px; gap: 6px; }
  .ticker .spr32 { width: 24px; height: 24px; }
  .fdroom .fdgrid > .card, .roomv .fdgrid > .card { padding-top: 10px; }
  .fdroom .fdgrid .sp8 { height: 4px; }
  .rclockc { padding: 8px 12px; gap: 10px; flex-wrap: nowrap; }
  .rclockc .rc-acts { width: auto; flex: none; }
  /* (the latest picks are in "Picks so far": the pool's rows come first on a landscape phone) */
  .roomv > .ticker.rt { display: none; }
  .rclockc .rc-acts small.mut { display: none; }
  .rc-who b { font-size: 18px; }
  .rclock { font-size: 20px; }
}
@media (max-width: 599px) {
  /* (the difficulty cards one under another, each its name and line side by side) */
  .diff3 { grid-template-columns: 1fr; }
  .dcard { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; }
  .dcard .dpips { grid-column: 1; grid-row: 2; }
  .dcard b { grid-column: 1; grid-row: 1; }
  .dcard p { grid-column: 2; grid-row: 1 / span 2; }
  .sumrow { align-items: flex-start; gap: 12px; }
  .sumrow .sum-logo .tlogo { width: 44px !important; height: 44px !important; }
}
@media (max-width: 420px) {
  .hcap b { font-size: 15px; }
  .hweek b { font-size: 14px; }
  .btn.big { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Home ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); grid-template-areas: "title title" "post post" "hero hero" "todo stand" "todo lead" "news lead"; gap: 18px 20px; align-items: start; }
.home.off { grid-template-areas: "title title" "post post" "hero hero" "todo news" "todo stand"; }
.home > .ptitle { grid-area: title; margin: 0; } .home > .hero { grid-area: hero; } .home > .todo { grid-area: todo; } .home > .stand { grid-area: stand; } .home > .leaders { grid-area: lead; } .home > .newsc { grid-area: news; } .home > .postc { grid-area: post; }
.hero { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #0b1016; }
.hbg { position: absolute; inset: 0; background: linear-gradient(105deg, var(--c1, #22324a) 0 49.7%, var(--c2, #1a2433) 50.3% 100%); opacity: 0.6; }
.hbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 11, 15, 0.15), rgba(8, 11, 15, 0.82)); }
.hero.bye .hbg, .hero.off .hbg { background: radial-gradient(800px 300px at 0% 0%, rgba(91, 192, 248, 0.25), transparent 70%), radial-gradient(600px 260px at 100% 100%, rgba(242, 194, 48, 0.18), transparent 70%); opacity: 1; }
.hero.champ .hbg { background: linear-gradient(120deg, var(--c1) 0 50%, var(--c2) 100%); opacity: 0.55; }
.hero > :not(.hbg) { position: relative; }
.htop { display: flex; align-items: center; gap: 12px; padding: 14px 20px 0; font: 700 13px/1.2 var(--rc); text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); flex-wrap: wrap; }
.live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.hmain { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 16px 22px 18px; }
.hs { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hs.r { flex-direction: row-reverse; text-align: right; }
.hlogo { display: grid; place-items: center; width: 88px; height: 88px; flex: none; text-decoration: none; border-radius: 14px; }
.hlogo .tlogo { width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); transition: transform 0.15s; }
.hlogo:hover .tlogo { transform: scale(1.04); }
.hsi { display: grid; gap: 6px; min-width: 0; }
.hs.r .hsi { justify-items: end; }
.hsi small { font: 700 12.5px/1 var(--rc); text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.75); }
.hsi b { font: 800 28px/1 var(--rc); text-transform: uppercase; color: #fff; }
.hrec { font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }
.hrec strong { font: 800 22px/1 var(--rc); color: #fff; margin-right: 4px; }
.dots { display: flex; gap: 5px; min-height: 10px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--subtle); }
.dots i.w { background: var(--win); } .dots i.l { background: var(--red); }
.hc { display: grid; justify-items: center; gap: 10px; min-width: 220px; }
.vs { font: 800 20px/1 var(--rc); color: rgba(255, 255, 255, 0.7); text-transform: uppercase; }
.hc .btn.big { width: 100%; }
.hc2 { display: flex; gap: 8px; width: 100%; }
.hc2 .btn { height: 40px; font-size: 15px; padding: 0 14px; flex: 1; }
.hnote { font-size: 12px; color: rgba(255, 255, 255, 0.75); text-align: center; max-width: 260px; }
.hnote.neg { color: #fecaca; }
.hwait { margin: 0; font-size: 13.5px; color: #fff; text-align: center; max-width: 240px; }
.simto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 340px; }
.simto .lbl { color: rgba(255, 255, 255, 0.6); }
.simto .btn.xs { height: 26px; font-size: 12px; background: rgba(0, 0, 0, 0.35); }
.hkeys { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 22px 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3); }
.hk { display: flex; gap: 18px; flex-wrap: wrap; min-width: 0; }
.hk.r { justify-content: flex-end; }
.hkl { font: 700 12px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.kp { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.hk.r .kp { flex-direction: row-reverse; text-align: right; }
.kp span { display: grid; gap: 2px; min-width: 0; }
.kp b { font: 700 13.5px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp small { font-size: 12px; color: var(--muted); }
a.kp:hover b { color: var(--gold); }
.hbye { display: grid; gap: 8px; justify-items: start; padding: 18px 22px 22px; }
.hbye b { font: 800 34px/1 var(--rc); text-transform: uppercase; }
.hbye p { margin: 0; color: var(--nav); }
.hbye .kick { font: 800 13px/1 var(--rc); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.hbtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.hbtns .simto { justify-content: flex-start; max-width: none; }
.osteps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; }
.osteps li { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ghost-border); font: 700 12px/1 var(--rc); text-transform: uppercase; color: var(--subtle); background: rgba(0, 0, 0, 0.3); }
.osteps li.on { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.osteps li.done { color: var(--muted); }
.postc { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-left: 4px solid var(--subtle); }
.postc.won { border-left-color: var(--win); } .postc.lost { border-left-color: var(--red); }
.pc-l { display: grid; gap: 4px; }
.pc-l small { font: 700 12px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.pc-l > b { display: flex; align-items: center; gap: 10px; font: 800 26px/1 var(--rc); }
.pc-l > b span { display: inline-flex; align-items: center; gap: 8px; }
.pc-l > b i { font-style: normal; color: var(--subtle); }
.pc-l > span { font-size: 13.5px; color: var(--muted); }
.pc-r { display: flex; gap: 8px; align-items: center; }
.todos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ti { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); overflow: hidden; --tone: var(--muted); }
.ti::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone); }
.ti.violet { --tone: var(--st); } .ti.red { --tone: var(--red); } .ti.blue { --tone: var(--def); } .ti.gold { --tone: var(--gold); } .ti.green { --tone: var(--win); }
.tlink { display: grid; grid-template-columns: 104px 64px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 10px 12px 10px 15px; text-decoration: none; }
.tlink:hover { background: var(--hover); }
.tk { display: inline-flex; align-items: center; gap: 6px; font: 800 12.5px/1 var(--rc); text-transform: uppercase; color: var(--tone); }
.tk .ic { width: 16px; height: 16px; }
.sprstack { display: flex; }
.sprstack img + img { margin-left: -28px; }
.ticon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--muted); }
.tt { display: grid; gap: 3px; min-width: 0; }
.tt b { font: 700 15px/1.25 var(--font); }
.tt small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.chev { color: var(--subtle); width: 18px; height: 18px; }
.tacts { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px 195px; }
.choose { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px 195px; }
.opt { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 8px; border: 1px solid var(--ghost-border); background: var(--tag); text-align: left; }
.opt span { display: grid; gap: 2px; }
.opt b { font: 800 15px/1 var(--rc); text-transform: uppercase; }
.opt small { font-size: 12px; color: var(--muted); }
.opt:hover, .opt.pick { border-color: var(--st); background: rgba(196, 181, 253, 0.12); }
.opt.def { border-style: dashed; }
.choose.inpage { padding: 0; }
.st .tm { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.st .tm:hover { color: var(--gold); }
.pic { display: flex; gap: 8px; align-items: baseline; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.pic b { font: 800 13px/1 var(--rc); text-transform: uppercase; padding: 3px 6px; border-radius: 4px; }
.pic.out b { color: var(--orange); background: rgba(253, 186, 116, 0.12); } .pic.in b { color: var(--win); background: rgba(74, 222, 128, 0.12); }
.lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lc { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); min-width: 0; align-content: start; }
.lcl { font: 700 11.5px/1 var(--rc); text-transform: uppercase; letter-spacing: 0.04em; color: var(--subtle); }
.lct { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
.lct span { display: grid; gap: 2px; min-width: 0; }
.lct strong { font: 800 24px/1 var(--rc); }
.lct b { font: 700 13px/1.15 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lct:hover b { color: var(--gold); }
.lct small { font-size: 11.5px; color: var(--muted); }
.lcr { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--line); display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.lcr li { display: flex; justify-content: space-between; gap: 6px; }
.lcr li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcr b { color: var(--text); font-variant-numeric: tabular-nums; }
.lcr li.me span { color: var(--gold); }
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.news li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; }
.news li:hover { background: var(--hover); }
.news li.mine { box-shadow: inset 3px 0 0 var(--gold); }
.nart, .nevo { display: flex; align-items: center; justify-content: center; min-height: 32px; }
.nevo { gap: 2px; color: var(--gold); }
.ntx { display: grid; gap: 2px; min-width: 0; }
.ntx b { font: 600 14.5px/1.3 var(--font); }
.ntx small { font-size: 12.5px; color: var(--muted); }
.digest { margin: 10px 0 0; font-size: 12.5px; color: var(--subtle); }
/* the phone menus */
.menuv { display: grid; gap: 6px; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.mitem { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font: 700 16px/1.15 var(--rc); text-transform: uppercase; text-align: left; text-decoration: none; }
.mitem:hover { background: var(--hover); }
.mitem span { flex: 1; display: grid; gap: 3px; }
.mitem span small { font: 500 12.5px/1.2 var(--font); text-transform: none; color: var(--muted); }
.simbtn { color: rgba(255, 255, 255, 0.8); }
.mitem .ic { color: var(--muted); }
.sp8 { height: 8px; }

/* ---------- the evolution moment (PRO's pixel styling: a moment that belongs to the game) ---------- */
dialog.evo-sheet { width: min(460px, calc(100vw - 24px)); background: #0a0f2c; border-color: #f2c230; }
dialog.evo-sheet .sh-body { padding: 0; }
.evomo { display: grid; }
.evo-stage { position: relative; display: grid; place-items: center; height: 220px; overflow: hidden; background: radial-gradient(circle at 50% 55%, #23306b 0, #0a0f2c 70%); }
.evo-stage img { position: absolute; width: 160px; height: 160px; }
.evo-glow { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.6); }
.evo-b { opacity: 0; }
.evomo.go .evo-a { animation: evo-flash 2.2s steps(1, end) forwards; }
.evomo.go .evo-b { animation: evo-in 2.6s steps(1, end) forwards; }
.evomo.go .evo-glow { animation: evo-glow 2.6s ease-out forwards; }
@keyframes evo-flash { 0% { opacity: 1; filter: none; } 15% { filter: brightness(0) invert(1); } 25% { filter: none; } 35% { filter: brightness(0) invert(1); } 45% { filter: none; } 55%, 100% { filter: brightness(0) invert(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes evo-in { 0%, 80% { opacity: 0; filter: brightness(0) invert(1); } 86% { opacity: 1; filter: brightness(0) invert(1); } 100% { opacity: 1; filter: none; } }
@keyframes evo-glow { 0%, 70% { opacity: 0; transform: scale(0.2); } 80% { opacity: 1; transform: scale(8); } 100% { opacity: 0; transform: scale(14); } }
.evo-card { display: grid; gap: 12px; padding: 16px 18px 18px; opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.evomo.done .evo-card { opacity: 1; transform: none; }
.evo-px { margin: 0; font: 400 11px/1.6 var(--px); color: var(--gold); text-align: center; }
.evo-who { display: grid; justify-items: center; gap: 4px; }
.evo-who b { font: 800 26px/1 var(--rc); text-transform: uppercase; }
.evo-who small { color: var(--muted); }
.evo-ovr { display: flex; align-items: center; justify-content: center; gap: 10px; }
.evo-ovr small { color: var(--muted); font-size: 12px; }
.evo-r { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.evo-r li { display: grid; grid-template-columns: 1fr 34px 16px 34px; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); font-size: 13.5px; }
.evo-r li.key span { color: var(--gold); }
.evo-r b { text-align: right; font: 800 15px/1 var(--rc); }
@media (prefers-reduced-motion: reduce) { .evo-b { opacity: 1; } .evo-a { opacity: 0; } .evo-card { opacity: 1; transform: none; } }

@media (min-width: 900px) and (max-height: 800px) {
  .home { gap: 14px 18px; }
  .hmain { padding: 12px 20px 14px; }
  .hlogo { width: 70px; height: 70px; }
  .hkeys { display: none; }
}
@media (min-width: 900px) and (max-width: 1360px) {
  .home { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); }
  .hsi b { font-size: 24px; }
  .lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlink { grid-template-columns: 92px 64px minmax(0, 1fr) 18px; }
  .choose, .tacts { padding-left: 15px; }
  .hc { min-width: 200px; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .home { grid-template-columns: 1fr; grid-template-areas: "title" "post" "hero" "todo" "stand" "lead" "news"; }
  .home.off { grid-template-areas: "title" "post" "hero" "todo" "news" "stand"; }
  .hmain { grid-template-columns: 1fr 1fr; grid-template-areas: "l r" "c c"; }
  .hs.l { grid-area: l; } .hs.r { grid-area: r; } .hc { grid-area: c; }
}
@media (max-width: 899px) {
  .home, .home.off { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "post" "hero" "todo" "stand" "lead" "news"; gap: 14px; }
  .home.off { grid-template-areas: "title" "post" "hero" "todo" "news" "stand"; }
  .htop { padding: 12px 14px 0; font-size: 11.5px; }
  .hmain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l r" "c c"; gap: 14px 10px; padding: 14px; }
  .hs { grid-area: l; flex-direction: column; align-items: flex-start; gap: 10px; }
  .hs.l { grid-area: l; }
  .hs.r { grid-area: r; flex-direction: column; align-items: flex-end; }
  .hc { grid-area: c; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 8px; min-width: 0; }
  .hc .vs, .hc.wait .vs { display: none; }
  .hc .hnote, .hc .simto, .hc .hwait { grid-column: 1 / -1; max-width: none; }
  .hlogo { width: 58px; height: 58px; border-radius: 10px; }
  .hsi b { font-size: 18px; }
  .hsi small { font-size: 11px; }
  .hrec { font-size: 0; }
  .hrec strong { font-size: 20px; }
  .hc .btn.big { height: 48px; font-size: 18px; padding: 0 12px; }
  .hc2 .btn { height: 48px; flex: 1; padding: 0 8px; font-size: 14px; }
  .hc2 .btn .ic { display: none; }
  .hkeys { display: none; }
  .hbye { padding: 14px; }
  .hbye b { font-size: 26px; }
  .tlink { grid-template-columns: 40px minmax(0, 1fr) 16px; grid-template-areas: "art tk chev" "art tt chev"; gap: 4px 12px; align-items: start; padding: 10px 12px 10px 14px; }
  .tlink > img, .tlink .sprstack, .tlink .ticon { grid-area: art; }
  .tlink .sprstack img + img { display: none; }
  .tk { grid-area: tk; font-size: 11.5px; }
  .tt { grid-area: tt; }
  .tlink .chev { grid-area: chev; align-self: center; }
  .tt b { font-size: 14.5px; }
  .tt small { font-size: 12.5px; }
  .choose, .tacts { padding: 0 12px 12px 14px; }
  .opt { flex: 1; min-width: 140px; }
  .lgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .news li { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 4px; }
  .ntx b { font-size: 14px; }
  .pc-l > b { font-size: 22px; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  .hmain { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "l c r"; }
  .hc { grid-template-columns: 1fr; }
  .hs { flex-direction: row; align-items: center; }
  .hs.r { flex-direction: row-reverse; }
}

/* ---------- Roster and depth chart ---------- */
.roster { display: grid; gap: 14px; }
.roster > .ptitle { margin: 0; }
.rgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rcard { padding: 0; overflow: hidden; }
.rcard > .tw { max-height: calc(100vh - 230px); }
.rhead { display: none; }
.rtab td { padding: 5px 7px; }
.rtab td:first-child { padding-left: 12px; }
.rtab th:first-child .sort, .rtab th:first-child .th { padding-left: 12px; }
.rtab tr.ps td { color: var(--muted); }
.rtab tr.hurt .nm b { color: var(--red); }
.lvl { display: inline-grid; justify-items: end; gap: 3px; }
.xp { display: block; width: 36px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.xp i { display: block; height: 100%; width: var(--w); background: var(--def); }
.rlist { display: none; list-style: none; margin: 0; padding: 0; }
.depth { position: sticky; top: calc(var(--headh) + 16px); }
.dg { margin-bottom: 12px; flex-wrap: nowrap; gap: 3px; }
.dg .o { flex: 1; height: 32px; min-width: 0; padding: 0 4px; font-size: 13px; }
.auto { font: 700 12.5px/1 var(--rc); text-transform: uppercase; color: var(--muted); text-decoration: none; }
.auto b { color: var(--text); }
.dss { display: grid; gap: 14px; max-height: calc(100vh - 330px); overflow: auto; }
.dss.wide { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 18px; }
.ds h3 { display: flex; justify-content: space-between; margin: 0 0 6px; font: 800 13px/1 var(--rc); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.ds h3 small { color: var(--subtle); }
.dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dl li { position: relative; display: grid; grid-template-columns: 14px 14px 32px minmax(0, 1fr) auto auto; gap: 7px; align-items: center; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--sheet); }
.dl li.first { border-color: rgba(242, 194, 48, 0.55); background: rgba(242, 194, 48, 0.06); }
.dl li.drag { z-index: 3; border-color: var(--gold); background: var(--hover); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.dl li.hurt .dname b { color: var(--red); }
.grip { display: grid; place-items: center; color: var(--subtle); cursor: grab; touch-action: none; }
.grip .ic { width: 16px; height: 16px; }
.dn { font: 800 13px/1 var(--rc); color: var(--subtle); text-align: center; }
.dl li.first .dn { color: var(--gold); }
.dname { display: grid; gap: 2px; min-width: 0; text-decoration: none; }
.dname b { font: 700 13.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dname:hover b { color: var(--gold); }
.dname small { font-size: 12px; color: var(--muted); }
.mv { display: flex; gap: 2px; }
.mv button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 4px; border: 1px solid var(--ghost-border); background: var(--tag); }
.mv button:hover:not([disabled]) { border-color: var(--hover-border); }
.mv button[disabled] { opacity: 0.3; cursor: default; }
.mv .ic { width: 14px; height: 14px; }
.dadd { margin-top: 6px; }
.dadd .sel { width: 100%; height: 32px; font-size: 13px; }
.hint { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.dscreen { display: grid; gap: 16px; }
.dgroup .ch small { text-transform: none; }
.rsort { display: flex; align-items: center; gap: 8px; }
/* ---------- the player ---------- */
.player { display: grid; }
.phero { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px; border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(700px 320px at 0% 0%, rgba(var(--tyrgb), 0.2), transparent 70%), var(--panel); }
.pcard { position: relative; height: 220px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(160deg, rgba(var(--tyrgb), 0.55), rgba(var(--tyrgb), 0.1)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pnum { position: absolute; left: 12px; top: 8px; font: 800 64px/1 var(--rc); color: rgba(255, 255, 255, 0.2); }
.pcard img { position: relative; }
.pteam { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; font: 800 13px/1 var(--rc); }
.pmain { min-width: 0; }
.pkick { font: 700 13px/1 var(--rc); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pname { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 10px; font: 800 46px/1 var(--rc); text-transform: uppercase; overflow-wrap: anywhere; }
.pname span { font: 700 20px/1 var(--font); text-transform: none; color: var(--gold); }
.ptags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bio { display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 4px 22px; margin: 14px 0; }
.bio dt { margin-bottom: 4px; font: 700 11.5px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.bio dd { margin: 0; font: 600 14.5px/1.2 var(--font); }
.pacts { display: flex; flex-wrap: wrap; gap: 8px; }
.pacts .btn { height: 38px; font-size: 14.5px; padding: 0 12px; }
.btn.danger-o { color: var(--red); border-color: rgba(248, 113, 113, 0.45); }
.pnums { display: grid; gap: 12px; min-width: 176px; }
.povr { display: grid; justify-items: center; gap: 2px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--tag); }
.povr strong { font: 800 64px/1 var(--rc); background: none; }
.povr strong.g90 { color: #4ade80; } .povr strong.g80 { color: #a3e635; } .povr strong.g70 { color: #facc15; } .povr strong.g60 { color: #fdba74; } .povr strong.g50 { color: var(--text); }
.povr small, .plv small { font: 700 12px/1.2 var(--rc); text-transform: uppercase; color: var(--muted); }
.plv { display: grid; gap: 7px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--tag); }
.plv > span:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.plv strong { font: 800 28px/1 var(--rc); }
.xpb { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.xpb i { display: block; height: 100%; width: var(--w); background: var(--def); }
.pgrid { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.5fr); gap: 20px; align-items: start; margin-top: 20px; }
.pcol { display: grid; gap: 20px; min-width: 0; }
.bars { display: grid; gap: 9px; }
.rb { display: grid; grid-template-columns: 104px minmax(0, 1fr) 34px; gap: 10px; align-items: center; opacity: 0.6; }
.rb.key { opacity: 1; }
.rl { font: 700 13px/1 var(--rc); text-transform: uppercase; color: var(--muted); }
.rb.key .rl { color: var(--gold); }
.bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--win); }
.bar i.md { background: var(--gold); } .bar i.lo { background: var(--red); }
.rb b { text-align: right; font: 800 16px/1 var(--rc); font-variant-numeric: tabular-nums; }
.palt { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.palt b { color: var(--text); }
.evo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ec { display: grid; gap: 6px; }
.ef { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
.ef figcaption { font: 700 12.5px/1 var(--rc); text-transform: uppercase; color: var(--muted); }
.ef.cur { border-color: var(--gold); background: rgba(242, 194, 48, 0.08); }
.ef.cur figcaption { color: var(--gold); }
.ea { display: grid; justify-items: center; gap: 2px; color: var(--subtle); }
.ea small { font-size: 11.5px; white-space: nowrap; }
.epend { display: grid; gap: 10px; margin-bottom: 14px; padding: 12px; border-radius: 8px; border: 1px solid rgba(196, 181, 253, 0.45); background: rgba(196, 181, 253, 0.08); }
.epend > b { display: flex; align-items: center; gap: 6px; font: 800 14px/1 var(--rc); text-transform: uppercase; color: var(--st); }
.epend > small { font-size: 12.5px; color: var(--muted); }
.goals { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.goals li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.goals .ic { color: var(--gold); }
.sg { display: grid; gap: 6px; }
.sg > span:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.sg small { color: var(--muted); }
.gbar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.gbar i { display: block; height: 100%; width: var(--w); background: var(--gold); }
.hon { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.money tr.cur td { background: rgba(242, 194, 48, 0.08); }
.money tr.past td { color: var(--subtle); }
.money tr.ext td { color: var(--def); }
.stats tr.po td { color: var(--muted); }
.stats tr.cur td { background: rgba(242, 194, 48, 0.06); }
.stats tfoot td { font-weight: 800; border-top: 1px solid var(--tag-border); border-bottom: 0; }
.posgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.posb { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
.posb:hover:not([disabled]) { border-color: var(--hover-border); }
.posb[aria-pressed="true"] { border-color: var(--gold); opacity: 0.7; }
.extform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.extform .inp, .extform .sel { width: 100%; }
.verdict { margin: 0; padding: 10px 12px; border-radius: 8px; font-weight: 700; }
.verdict.yes { color: var(--win); background: rgba(74, 222, 128, 0.08); } .verdict.no { color: var(--red); background: rgba(248, 113, 113, 0.08); } .verdict.maybe { color: var(--gold); background: rgba(242, 194, 48, 0.08); }
/* ---------- a game ---------- */
.game { display: grid; gap: 16px; }
.gtop { margin-bottom: -4px; }
.gtop .crumb { margin: 0; }
.sbug { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #0b1016; }
.sbug > :not(.hbg) { position: relative; }
.sb-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px 0; font: 700 13px/1.2 var(--rc); text-transform: uppercase; color: rgba(255, 255, 255, 0.85); flex-wrap: wrap; }
.sb-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 22px 20px; }
.sb-t { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sb-t.r { flex-direction: row-reverse; text-align: right; }
.sb-logo { display: grid; place-items: center; width: 66px; height: 66px; text-decoration: none; flex: none; border-radius: 12px; }
.sb-logo .tlogo, .th-ab .tlogo { width: 100%; height: 100%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)); }
.sb-n { display: grid; gap: 4px; min-width: 0; }
.sb-n b { font: 800 22px/1.05 var(--rc); text-transform: uppercase; color: #fff; }
.sb-n small { font: 700 12px/1 var(--rc); text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.sb-s { font: 800 56px/1 var(--rc); color: rgba(255, 255, 255, 0.55); margin: 0 6px; }
.sb-t.win .sb-s { color: #fff; }
.sb-at { font: 800 16px/1 var(--rc); color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }
.qcard { padding: 6px 12px; }
.qtbl td, .qtbl th .th { padding: 6px 8px; }
.gtabs { margin: 0; }
.ginj { margin: 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gp { text-decoration: none; white-space: nowrap; }
.gp:hover { color: var(--gold); }
.gp .pn { color: var(--subtle); margin-right: 4px; }
.box .bxsw { display: none; }
.bxg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.bx { display: grid; gap: 10px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.bxh { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 15px/1 var(--rc); text-transform: uppercase; }
.bxs { overflow-x: auto; }
.bxt th .th, .bxt td { padding: 5px 6px; font-size: 13.5px; }
.tstats { max-width: 720px; }
.tst td, .tst th { text-align: center; }
.tst td.mid, .tst th.mid { color: var(--muted); font: 700 12.5px/1.2 var(--rc); text-transform: uppercase; }
.tst td:first-child, .tst th:first-child { text-align: left; }
.tst td:last-child, .tst th:last-child { text-align: right; }
.pbpb { display: grid; gap: 6px; }
.drive { border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.drive summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.drive summary::-webkit-details-marker { display: none; }
.drive summary b { font: 800 14px/1 var(--rc); text-transform: uppercase; }
.plays { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 4px; }
.plays li { display: grid; grid-template-columns: 80px 70px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--line); }
.plays li.score .px { color: var(--gold); font-weight: 600; }
.plays li.note .px { color: var(--muted); font-style: italic; }
.pq, .pdd { color: var(--subtle); font: 700 12px/1.2 var(--rc); text-transform: uppercase; }
.psc { font: 800 13px/1 var(--rc); white-space: nowrap; }
.post { display: grid; gap: 16px; }
.pogc { display: flex; gap: 14px; align-items: center; text-decoration: none; padding: 8px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--line); }
.pogc span { display: grid; gap: 3px; }
.pogc small { font: 700 12px/1 var(--rc); text-transform: uppercase; color: var(--gold); }
.pogc b { font: 800 22px/1.05 var(--rc); text-transform: uppercase; }
.pogc em { font-style: normal; font-size: 13.5px; color: var(--nav); }
.pinjs { margin-top: 12px; }
.minih { margin: 10px 0 6px; font: 800 13px/1 var(--rc); letter-spacing: 0.05em; text-transform: uppercase; color: var(--subtle); }
.pevo1 { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--gold); }
.pevo1 span { display: grid; gap: 2px; margin-left: 6px; }
.pevo1 b { color: var(--text); }
.pevo1 small { color: var(--muted); font-size: 12px; }
.lvups { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.lvups li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.lvups a { font-weight: 700; text-decoration: none; }
.scl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.scl a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); text-decoration: none; font: 700 15px/1 var(--rc); }
.scl a:hover { border-color: var(--hover-border); }
.scl span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.scl span.w { color: var(--text); }
.scl i { font-style: normal; color: var(--subtle); }
.scl small { margin-left: auto; color: var(--subtle); font-size: 11px; }
/* ---------- schedule ---------- */
.slist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.slist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
.slist li.now { border-color: var(--gold); background: rgba(242, 194, 48, 0.07); }
.slist li.bye { color: var(--subtle); }
.slist li.w { box-shadow: inset 3px 0 0 var(--win); } .slist li.l { box-shadow: inset 3px 0 0 var(--red); } .slist li.t { box-shadow: inset 3px 0 0 var(--subtle); }
.sw { font: 800 16px/1 var(--rc); color: var(--subtle); text-align: center; }
.so { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.so b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sat { width: 20px; color: var(--subtle); font: 700 12px/1 var(--rc); text-transform: uppercase; }
.sr { font: 800 15px/1 var(--rc); text-decoration: none; white-space: nowrap; }
.sr b { margin-right: 2px; }
li.w .sr b { color: var(--win); } li.l .sr b { color: var(--red); }
.sr.next { color: var(--gold); text-transform: uppercase; }
.glist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.gl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); text-decoration: none; }
.glist li.mine .gl { border-color: rgba(242, 194, 48, 0.5); }
.gl:hover { border-color: var(--hover-border); }
.gt { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); }
.gt:last-child { flex-direction: row-reverse; text-align: right; }
.gt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt strong { font: 800 18px/1 var(--rc); margin-left: auto; }
.gt:last-child strong { margin-left: 0; margin-right: auto; }
.gt.w { color: var(--text); }
.gat { font: 700 11px/1 var(--rc); text-transform: uppercase; color: var(--subtle); text-align: center; }
/* ---------- standings ---------- */
.standings > .ptitle { margin-bottom: 14px; }
.tm { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.tm:hover span { color: var(--gold); }
.seed { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 4px; background: var(--hover); color: var(--gold); font: 800 11px/1 var(--rc); }
.st td { padding: 7px 8px; }
.tbl tr.cut td { border-bottom: 2px solid rgba(242, 194, 48, 0.45); }
ol.pic { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
ol.pic li { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
ol.pic li.me { border-color: var(--gold); }
ol.pic li a { font-weight: 700; text-decoration: none; }
ol.pic li small { color: var(--muted); font-size: 12px; }
.ps { font: 800 16px/1 var(--rc); color: var(--gold); text-align: center; }
ol.pic.hunt .ps { color: var(--subtle); }
.bracket { display: grid; gap: 16px; }
.brow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bcol { display: grid; gap: 8px; align-content: start; }
.bg { display: grid; gap: 2px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); text-decoration: none; position: relative; }
.bg:hover { border-color: var(--hover-border); }
.bt { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px; border-radius: 6px; color: var(--muted); }
.bt.w { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.bt.me span { color: var(--gold); }
.bt b { font: 800 16px/1 var(--rc); }
.bs { color: var(--subtle); font: 700 11px/1 var(--rc); }
.bot { position: absolute; right: 8px; top: -8px; font: 700 10px/1 var(--rc); color: var(--subtle); background: var(--panel); padding: 2px 4px; border-radius: 4px; }
.bfinal { max-width: 520px; }
.champ { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 800 18px/1.2 var(--rc); text-transform: uppercase; color: var(--gold); }
/* ---------- stats ---------- */
.lgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lcard .lct { margin-bottom: 6px; }
.ptab .tw, .ttab .tw { max-height: calc(100vh - 260px); }
.stt td { padding: 6px 8px; }
/* ---------- a team ---------- */
.teamv { display: grid; gap: 16px; }
.teamv .crumb { margin: 0; }
.thero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 12px; background: linear-gradient(110deg, var(--tc) 0 55%, rgba(0, 0, 0, 0.2)), var(--panel); color: var(--tt); }
.th-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.th-ab { display: grid; place-items: center; width: 76px; height: 76px; flex: none; }
.th-l small { font: 700 12.5px/1 var(--rc); text-transform: uppercase; opacity: 0.85; }
.th-l h1 { margin: 4px 0; font: 800 34px/1 var(--rc); text-transform: uppercase; }
.th-l p { margin: 0; font-size: 14px; opacity: 0.9; }
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.stg { display: grid; gap: 4px; align-content: start; }
.strow { display: grid; grid-template-columns: 46px 32px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--sheet); text-decoration: none; font-size: 13.5px; }
.strow b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl { font: 800 12px/1 var(--rc); color: var(--subtle); text-transform: uppercase; }
/* ---------- news and history ---------- */
.newsbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.newsbar .opts { min-width: 0; }
.news.big li { grid-template-columns: 80px minmax(0, 1fr); }
.news a { text-decoration: none; }
.news a:hover b { color: var(--gold); }
.pager { justify-content: center; margin-top: 12px; }
.chl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chl li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(0, 0, 0, 0) 60%, var(--tc) 160%), var(--sheet); }
.chl li.me { border-color: var(--gold); }
.cs { font: 800 14px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.ct { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct span { display: grid; gap: 2px; min-width: 0; }
.ct .ibg { justify-self: start; margin-top: 2px; }
.ct b { font: 800 17px/1.1 var(--rc); text-transform: uppercase; }
.ct small, .cm small { color: var(--muted); font-size: 12.5px; }
.cm { display: grid; gap: 2px; justify-items: end; text-align: right; }
.chab { display: inline-grid; place-items: center; min-width: 46px; height: 32px; padding: 0 6px; border-radius: 6px; background: var(--tc); color: var(--tt); font: 800 14px/1 var(--rc); flex: none; }
.chab.lg { min-width: 0; width: 40px; height: 40px; padding: 0; background: none; }
.chab.lg .tlogo { width: 40px; height: 40px; }
.awgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.aw { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); text-decoration: none; }
.aw span { display: grid; gap: 2px; min-width: 0; }
.aw small { font: 700 11.5px/1.2 var(--rc); text-transform: uppercase; color: var(--gold); }
.aw b { font: 800 17px/1.1 var(--rc); text-transform: uppercase; }
.alt { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.alt li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13.5px; }
.as { font: 800 12px/1 var(--rc); color: var(--subtle); }
.ap { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ap a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.powl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 12px; font-size: 13px; }
.powl li { display: flex; align-items: center; gap: 6px; }
.powl a { text-decoration: none; font-weight: 600; }
.hofg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.plaque { display: grid; border-radius: 12px; overflow: hidden; border: 1px solid rgba(242, 194, 48, 0.4); background: linear-gradient(180deg, #2a2312, #12100a); }
.pq-top { position: relative; display: grid; place-items: center; height: 120px; background: radial-gradient(circle at 50% 60%, var(--tc, #3a2f12) 0, rgba(0, 0, 0, 0) 70%); }
.pq-in { position: absolute; left: 10px; top: 8px; font: 700 11px/1 var(--rc); text-transform: uppercase; color: var(--gold); }
.pq-b { display: grid; gap: 6px; padding: 12px; }
.pq-b > b { font: 800 20px/1.05 var(--rc); text-transform: uppercase; color: #f7e4a8; }
.pq-b > small { color: var(--muted); font-size: 12.5px; }
.pq-l { margin: 0; font-size: 13px; }
.dht td { padding: 5px 8px; }

@media (min-width: 900px) and (max-width: 1360px) {
  .rgrid { grid-template-columns: minmax(0, 1fr) 300px; }
  .rtab .c-left, .rtab .c-age { display: none; }
  .phero { grid-template-columns: 180px minmax(0, 1fr) auto; }
  .pcard { height: 180px; }
  .bio { grid-template-columns: repeat(3, auto); }
  .tgrid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .rgrid, .pgrid, .tgrid { grid-template-columns: 1fr; }
  .depth { position: static; }
  .bxg { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .filters { margin: 0 -16px; padding: 0 16px 2px; }
  .rgrid { grid-template-columns: 1fr; gap: 14px; }
  .rcard { padding: 6px; order: 2; }
  .rcard > .tw { display: none; }
  .rhead { display: flex; justify-content: flex-end; padding: 4px 4px 8px; }
  .rlist { display: grid; gap: 2px; }
  .rrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px 6px 4px; border-radius: 6px; text-decoration: none; }
  .rrow:hover { background: var(--hover); }
  .rrow.ps { opacity: 0.8; }
  .rm { display: grid; gap: 4px; min-width: 0; }
  .rtitle { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .rn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--muted); }
  .rn b { color: var(--text); }
  .rn small { font-size: 12.5px; }
  .rs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--muted); }
  .rs .pill { height: 20px; font-size: 11px; }
  .depth { position: static; order: 1; }
  .roster[data-f="list"] .depth { display: none; }
  .roster[data-f="list"] .dpick { display: block; order: 1; margin: 0; font-size: 13px; color: var(--muted); }
  .depth .dg, .depth .hint { display: none; }
  .dss { max-height: none; overflow: visible; }
  .depth .dl li:nth-child(n+4) { display: none; }
  .dss.wide { grid-template-columns: 1fr; }
  .mv button { width: 32px; height: 32px; }
  .mv .ic { width: 16px; height: 16px; }
  .phero { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .pcard { height: 170px; }
  .pcard .spr160 { width: 128px; height: 128px; }
  .pname { font-size: 34px; margin: 4px 0 8px; }
  .pname span { font-size: 17px; }
  .bio { grid-template-columns: repeat(3, auto); gap: 8px 18px; }
  .pacts { display: grid; grid-template-columns: 1fr 1fr; }
  .pnums { grid-template-columns: 1fr 1.4fr; min-width: 0; }
  .povr strong { font-size: 48px; }
  .pgrid { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .pcol { gap: 14px; }
  .rb { grid-template-columns: 92px minmax(0, 1fr) 30px; }
  .money th .th, .money td, .stats th .th, .stats td { padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .extform { grid-template-columns: 1fr 1fr; }
  .sb-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px 14px 16px; }
  .sb-at { display: none; }
  .sb-t, .sb-t.r { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sb-t.r { align-items: flex-end; }
  .sb-logo { width: 50px; height: 50px; }
  .sb-n b { font-size: 16px; }
  .sb-s { font-size: 40px; margin: 0; }
  .box .bxsw { display: inline-flex; margin-bottom: 8px; }
  .bxg { grid-template-columns: 1fr; }
  .box[data-side="away"] .bx:nth-child(2), .box[data-side="home"] .bx:nth-child(1) { display: none; }
  .plays li { grid-template-columns: 64px minmax(0, 1fr); }
  .plays .pdd, .plays .psc { grid-column: 2; }
  .glist { grid-template-columns: 1fr; }
  .brow { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: 1fr; }
  .thero { padding: 14px; }
  .th-ab { width: 58px; height: 58px; }
  .th-l h1 { font-size: 24px; }
  .chl li { grid-template-columns: 1fr; gap: 6px; }
  .cm { justify-items: start; text-align: left; }
  .news.big li { grid-template-columns: 64px minmax(0, 1fr); }
  .scl { grid-template-columns: 1fr; }
}

.ec.many { grid-template-columns: repeat(2, auto); }
.ef figcaption { display: grid; justify-items: center; gap: 2px; }
.ef figcaption small { font: 500 10.5px/1.1 var(--font); text-transform: none; color: var(--subtle); text-align: center; }
.lcr a { text-decoration: none; color: var(--nav); }
.lcr a:hover { color: var(--gold); }
.qcard { max-width: 560px; }
.picks { display: grid; gap: 2px; }
.picks b { font-weight: 700; }
.dpick { display: none; }

/* ---------- Trades ---------- */
.trades, .fav, .capv, .draftv, .staffv, .setv, .offv { display: grid; gap: 16px; }
.trades > .ptitle, .fav > .ptitle, .capv > .ptitle, .draftv > .ptitle, .staffv > .ptitle, .setv > .ptitle, .offv > .ptitle { margin: 0; }
.closed .note { margin: 0; display: flex; align-items: center; gap: 6px; }
.tooffer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.toside { min-width: 0; }
.toside .minih { margin-top: 0; display: flex; align-items: center; gap: 6px; }
.toarrow { align-self: center; color: var(--subtle); }
.tolist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tolist li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.tolist a { font-weight: 700; text-decoration: none; }
.tolist a:hover { color: var(--gold); }
.pickchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ghost-border); font: 700 12.5px/1.4 var(--font); color: var(--nav); white-space: nowrap; }
.tcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tmid { position: sticky; top: calc(var(--headh) + 12px); }
.tside .chrow { flex-wrap: wrap; }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; max-height: 520px; overflow: auto; } /* (a long line shrinks: the row's buttons stay in view) */
.trow .nm small { overflow: hidden; text-overflow: ellipsis; }
.tlist.picks { max-height: 220px; }
.tlist li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; }
.tlist li.on { border-color: rgba(242, 194, 48, 0.5); background: rgba(242, 194, 48, 0.07); }
.trow { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.trow input { width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.trow .nm { flex: 1; display: grid; gap: 1px; min-width: 0; text-decoration: none; }
.trow .nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .nm small { margin: 0; font-size: 11.5px; }
.tsum { display: grid; gap: 12px; }
.tsum .tooffer { grid-template-columns: 1fr; }
.tsum .toarrow { justify-self: center; transform: rotate(90deg); }
.tcap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcap div { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--tag); display: grid; gap: 4px; }
.tcap small { font: 700 11px/1.2 var(--rc); text-transform: uppercase; color: var(--subtle); }
.tcap b { font: 800 16px/1 var(--rc); }
.terrs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--red); font-size: 13px; }
.terrs li { display: flex; align-items: center; gap: 6px; }
.tmeter { display: grid; gap: 6px; }
.tmeter b { font: 800 14px/1 var(--rc); text-transform: uppercase; }
.tm-bar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tm-bar i { display: block; height: 100%; border-radius: 4px; }
.tmeter.no .tm-bar i { width: 12%; background: var(--red); } .tmeter.no b { color: var(--red); }
.tmeter.far .tm-bar i { width: 40%; background: var(--orange); } .tmeter.far b { color: var(--orange); }
.tmeter.close .tm-bar i { width: 75%; background: var(--gold); } .tmeter.close b { color: var(--gold); }
.tmeter.yes .tm-bar i { width: 100%; background: var(--win); } .tmeter.yes b { color: var(--win); }
.offer .tooffer { margin-bottom: 6px; }
.shopo { padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); }
.shopo .ch { margin: 0; }
/* ---------- free agents, the cap ---------- */
.fav .ptitle .tiles, .ptitle .tiles { margin: 0; grid-template-columns: repeat(2, minmax(120px, auto)); }
.fat td { padding: 5px 8px; }
.range0 { font: 800 15px/1 var(--rc); }
.captop { display: grid; gap: 8px; }
.captop .tiles { margin: 0; }
.capbar { display: flex; align-items: center; gap: 10px; }
.capbar .mbar { flex: 1; height: 10px; }
.capt td { padding: 5px 8px; }
.exl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.exp { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
.exm { display: grid; gap: 2px; min-width: 0; }
.exm a { text-decoration: none; }
.exm small { color: var(--muted); font-size: 12.5px; }
.exa { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.futl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.futl li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; font-size: 13.5px; }
.futbar .mbar { height: 10px; }
/* ---------- scouting and the draft ---------- */
.ptsb { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(74, 222, 128, 0.4); color: var(--win); font-size: 13px; }
.ptsb b { font: 800 16px/1 var(--rc); }
.dgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr) minmax(230px, 0.7fr); gap: 18px; align-items: start; }
.draft .dgrid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
.board .tw { max-height: calc(100vh - 300px); }
.bt td { padding: 5px 6px; }
.bt tr.sel td { background: rgba(242, 194, 48, 0.08); }
.bt tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.rk { font: 800 13px/1 var(--rc); color: var(--subtle); }
.rk.mine { color: var(--gold); }
.range { display: inline-flex; align-items: center; gap: 8px; }
.range .rtrack { position: relative; display: block; width: 60px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.range .rtrack i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1% + 3px); border-radius: 3px; background: var(--def); }
.range b { min-width: 46px; text-align: right; font: 800 15px/1 var(--rc); }
.range.big { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
.range.big .rtrack { width: 100%; height: 10px; border-radius: 5px; }
.range.big b { font-size: 30px; }
.pros { display: grid; gap: 14px; position: sticky; top: calc(var(--headh) + 16px); }
.prt { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; }
.prs { display: grid; place-items: center; height: 128px; border-radius: 10px; background: linear-gradient(160deg, rgba(var(--tyrgb), 0.5), rgba(var(--tyrgb), 0.1)); }
.prh small { font: 700 12px/1 var(--rc); text-transform: uppercase; color: var(--muted); }
.prh h2 { margin: 6px 0 8px; font: 800 30px/1 var(--rc); text-transform: uppercase; }
.prh .mut { margin: 8px 0 0; }
.prr { display: grid; gap: 8px; }
.prrh { display: flex; justify-content: space-between; gap: 10px; }
.prrh small, .prevo > small, .deal small { font: 700 12px/1.3 var(--rc); text-transform: uppercase; color: var(--muted); }
.scoutb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.comb div { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--tag); }
.comb small { display: block; margin-bottom: 4px; font: 700 11px/1.2 var(--rc); text-transform: uppercase; color: var(--subtle); }
.comb b { font: 800 18px/1 var(--rc); }
.prevo .line { display: flex; align-items: center; gap: 4px; margin: 6px 0 4px; color: var(--gold); flex-wrap: wrap; }
.prevo .mut { margin: 0; }
.brow2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.brow2 small { flex: 1; }
.deal { display: grid; gap: 4px; }
.deal b { font: 800 20px/1 var(--rc); }
.dside { display: grid; gap: 18px; }
.nl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nl li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.nbar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.nbar i { display: block; height: 100%; width: var(--w); background: var(--win); }
.nbar i.md { background: var(--gold); } .nbar i.hi { background: #fb923c; }
.nl small { font-size: 12.5px; color: var(--muted); }
.mp { display: flex; flex-wrap: wrap; gap: 6px; }
.mp span { display: grid; justify-items: center; gap: 2px; min-width: 52px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--tag); }
.mp small { font: 700 11px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.mp b { font: 800 18px/1 var(--rc); }
.draft { display: grid; gap: 14px; }
.clockbar { position: sticky; top: var(--headh); z-index: 5; display: flex; align-items: center; gap: 10px; margin: -6px 0 0; padding: 8px 0; background: rgba(8, 11, 15, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); flex-wrap: wrap; }
.bug { flex: 1; display: flex; align-items: stretch; min-width: 300px; height: 56px; border: 1px solid var(--tag-border); border-radius: 6px; overflow: hidden; background: var(--tag); font-family: var(--rc); text-transform: uppercase; line-height: 1; }
.bug > span { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 14px; }
.bug small { font-size: 11px; font-weight: 700; color: var(--muted); }
.bug b { font-size: 22px; font-weight: 800; white-space: nowrap; }
.bug .cr { background: var(--gold); color: var(--on-gold); }
.bug .cr small { color: var(--on-gold-2); }
.bug .cp { border-left: 1px solid var(--tag-border); }
.bug .cp b small { font-size: 13px; }
.bug .cu { flex: 1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; border-left: 1px solid var(--tag-border); background: rgba(242, 194, 48, 0.08); min-width: 0; }
.bug .cu > span { display: grid; gap: 4px; padding: 0; min-width: 0; }
.bug .cu b { font-size: 20px; overflow: hidden; text-overflow: ellipsis; }
.bug .ct { min-width: 96px; align-items: center; border-left: 1px solid var(--tag-border); font-size: 14px; color: var(--gold); }
.bug .ct.px { font: 400 12px/1 var(--px); }
.cacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cacts .btn { height: 44px; }
.dnext { margin: 0; }
.ddone .btnrow { margin-top: 10px; }
/* ---------- staff, settings ---------- */
.coordm { display: flex; align-items: center; gap: 14px; }
.coordm b { font: 800 22px/1 var(--rc); text-transform: uppercase; }
.coordm p { margin: 6px 0 4px; }
.cav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hover); color: var(--gold); font: 800 18px/1 var(--rc); flex: none; }
.cav.big { width: 64px; height: 64px; font-size: 28px; }
.coachl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.coach { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
.cm2 { display: grid; gap: 2px; min-width: 0; }
.cm2 small { color: var(--muted); font-size: 12px; }
.stars { color: var(--gold); letter-spacing: 1px; }
.autol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.autol li { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); }
.autol .chk { align-items: flex-start; }
.autol .chk span { display: grid; gap: 2px; }
.autol .chk small { color: var(--muted); font-size: 12.5px; }
.ident { max-width: 640px; }
/* ---------- the offseason ---------- */
.osteps.big { gap: 6px; }
.osteps.big li { height: 30px; padding: 0 12px 0 4px; gap: 6px; }
.osteps.big li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 11px; }
/* a focused control scrolls clear of the sticky bars (the offseason's actions, the draft room's clock) */
html:has(.offacts) { scroll-padding-bottom: calc(var(--tabh, 0px) + 96px); }
html:has(.clockbar) { scroll-padding-top: calc(var(--headh) + 84px); }
@media (max-width: 899px) { html:has(.offacts) { scroll-padding-bottom: var(--tabh, 8px); } html:has(.clockbar) { scroll-padding-top: calc(var(--headh) + 156px); } }
.offacts { position: sticky; bottom: 0; z-index: 4; display: grid; gap: 6px; padding: 12px 0; background: linear-gradient(to top, var(--bg) 70%, rgba(8, 11, 15, 0)); }
.offacts .btnrow { margin: 0; }
.offmore summary { cursor: pointer; color: var(--muted); font: 700 13px/1 var(--rc); text-transform: uppercase; list-style: none; text-align: right; }
.offmore summary::-webkit-details-marker { display: none; }
.alt a.me { color: var(--gold); }
@media (min-width: 900px) and (max-width: 1360px) {
  .tcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tmid { grid-column: 1 / -1; grid-row: 1; position: static; }
  .dgrid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); }
  .dside { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .tooffer { grid-template-columns: 1fr; }
  .toarrow { justify-self: center; transform: rotate(90deg); }
  .tcols { grid-template-columns: 1fr; }
  .tmid { position: static; order: -1; }
  .tlist { max-height: 360px; }
  .dgrid, .draft .dgrid { grid-template-columns: 1fr; gap: 14px; }
  .pros { position: static; order: -1; }
  .prt { grid-template-columns: 96px minmax(0, 1fr); }
  .prs { height: 96px; }
  .prs .spr128 { width: 96px; height: 96px; }
  .prh h2 { font-size: 24px; }
  .comb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dside { grid-template-columns: 1fr; }
  .clockbar { top: var(--headh); flex-direction: column; align-items: stretch; margin: -8px -16px 0; padding: 8px 16px; }
  .bug { height: 50px; min-width: 0; }
  .bug > span { padding: 0 10px; }
  .bug b { font-size: 18px; }
  .bug .cu b { display: none; }
  .bug .ct { min-width: 64px; }
  .cacts .btn { flex: 1; height: 42px; }
  .ticker { margin: 0 -16px; padding: 0 16px; }
  .exp { grid-template-columns: 40px minmax(0, 1fr); }
  .exa { grid-column: 1 / -1; justify-content: flex-start; }
  .futl li { grid-template-columns: 80px minmax(0, 1fr); }
  .coach { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .coach .stars { display: none; }
  .ptitle .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.setrow .seg { justify-self: start; }
.simboard { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; max-height: 180px; overflow: hidden; width: 100%; }
.simboard:empty { display: none; }
.simboard li { display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 13px/1.3 var(--rc); color: var(--muted); }
.simboard li > span { display: inline-flex; align-items: center; gap: 5px; }
.simboard li.mine { grid-column: 1 / -1; font-size: 16px; color: var(--text); }
.simboard span.w { color: var(--text); }
.simboard i { font-style: normal; color: var(--subtle); }
.simboard small { font-size: 10px; color: var(--subtle); }
.prelist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 720px; }
.prei { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); }
.pn2 { font: 800 13px/1 var(--rc); text-transform: uppercase; color: var(--gold); }
.prei .sr.w { color: var(--win); } .prei .sr.l { color: var(--red); }
@media (max-width: 899px) { .prei { grid-template-columns: 1fr; } }
.hero.pre .hbye { justify-items: stretch; }
.hero.pre .hbye > b { font-size: 28px; }
.hero.pre .hbtns { justify-content: flex-start; }
.prei .so b { font: 700 15px/1.2 var(--font); text-transform: none; }
.prei b.sr { font: 800 16px/1 var(--rc); }
/* every screen's column can shrink to the viewport (wide tables scroll inside their cards) */
.trades, .fav, .capv, .draftv, .staffv, .setv, .offv, .game, .roster, .player, .teamv, .newsv, .statsv, .standings, .sched, .saves, .newf, .fdroom, .draft, .bracket, .post, .menuv { grid-template-columns: minmax(0, 1fr); }
.sched, .standings, .statsv, .newsv { display: grid; gap: 16px; }
.sched > .ptitle, .standings > .ptitle, .statsv > .ptitle, .newsv > .ptitle { margin: 0; }
.tstats, .qcard { overflow-x: auto; }
.seg { overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.pt-r, .pt-r > .row { min-width: 0; max-width: 100%; }
.row > .seg, .pt-r > .seg, .chrow > .seg { min-width: 0; }
@media (max-width: 899px) {
  .offacts { position: static; padding: 4px 0 0; background: none; }
  .osteps.big { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .osteps.big li { flex: none; }
}
.ticker li.fresh { animation: landed 0.35s both; animation-delay: var(--d, 0ms); }
@keyframes landed { from { opacity: 0; transform: translateX(-12px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ================= leagues with friends ================= */
/* the franchises screen: your leagues, create, join */
.leagues .chrow { flex-wrap: wrap; gap: 10px; }
.lglist { display: grid; gap: 8px; margin-top: 4px; }
.lgrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--sheet); min-width: 0; }
.lgrow.news { border-color: rgba(242, 194, 48, 0.45); }
.lgrow .grow { min-width: 0; flex: 1; display: grid; gap: 3px; }
.lgrow .grow b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 15px/1.2 var(--font); }
.lgrow .grow small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--raise); border: 1px solid var(--line); color: var(--gold); }
.lg-ic.big { width: 52px; height: 52px; }
.badge.big { min-width: 24px; height: 24px; font-size: 13px; }
.joinbox { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.joinbox label { font: 700 12px/1 var(--rc); text-transform: uppercase; letter-spacing: 0.04em; color: var(--subtle); }
input.code { height: 36px; width: 120px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--tag-border); background: var(--tag); color: var(--text); font: 800 18px/1 var(--rc); letter-spacing: 0.18em; text-transform: uppercase; }
input.code:focus { border-color: var(--gold); outline: none; }
.signin { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.signin p { margin: 0; color: var(--muted); max-width: 60ch; font-size: 14px; line-height: 1.45; }
/* create, join */
.lnew, .ljoin { display: grid; gap: 18px; max-width: 980px; }
.peek { display: grid; gap: 14px; }
.pk-top { display: flex; align-items: center; gap: 14px; }
.pk-top b { display: block; font: 800 24px/1.1 var(--rc); text-transform: uppercase; }
.pk-top small { color: var(--muted); }
.kv2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kv2 li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv2 li span { color: var(--muted); }
.kv2 li b { text-align: right; font-weight: 600; }
.taken { display: grid; gap: 8px; }
.plates { display: flex; flex-wrap: wrap; gap: 6px; }
/* the lobby and the league's pages: two columns on a desktop */
.lobby, .membersv, .commishv { display: grid; gap: 18px; }
.lobgrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ldivs { display: grid; gap: 12px; }
.ldiv .minih { margin: 0 0 6px; }
.lgyms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lgym { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); color: var(--text); text-align: left; cursor: pointer; }
.lgym:hover:not(:disabled) { border-color: var(--hover-border); background: var(--hover); }
.lgym .lg-ab { display: grid; place-items: center; height: 32px; border-radius: 6px; background: var(--tc); color: var(--tt); font: 800 13px/1 var(--rc); }
.lgym b { display: block; font: 700 14px/1.15 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgym small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgym.mine { border-color: var(--gold); background: rgba(242, 194, 48, 0.08); }
.lgym.mine small { color: var(--gold); }
.lgym.taken { opacity: 0.55; cursor: not-allowed; }
.lgym .ic.xs { color: var(--gold); }
.lgyms.pickone { max-height: 60vh; overflow: auto; padding: 2px; }
.invite { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.icode { font: 800 34px/1 var(--rc); letter-spacing: 0.2em; color: var(--gold); }
.ilink { margin: 8px 0 0; overflow-wrap: anywhere; }
.mlist2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mlist2 li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mlist2 li:last-child { border-bottom: 0; }
.mlist2 .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mlist2 .grow b { font: 700 14px/1.2 var(--font); }
.mlist2 .grow small { color: var(--muted); font-size: 12.5px; }
.plate.none { background: var(--raise); color: var(--subtle); }
/* chat */
.chatp { display: grid; gap: 10px; }
.chatl { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 10px; max-height: min(60vh, 560px); overflow-y: auto; scrollbar-width: thin; align-content: start; }
.chatp.compact .chatl { max-height: 260px; }
.chatl li { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--line); min-width: 0; }
.chatl li.mine { background: rgba(242, 194, 48, 0.06); border-color: rgba(242, 194, 48, 0.25); }
.chatl li.empty { color: var(--muted); font-size: 14px; }
.cl-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-h b { font: 700 13.5px/1.2 var(--font); }
.cl-h small { color: var(--subtle); font-size: 12px; }
.cl-h .plate { min-width: 34px; height: 18px; font-size: 11px; }
.cl-h .plate .tlogo { width: 15px; height: 15px; }
.cl-acts { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0.6; }
.chatl li:hover .cl-acts, .chatl li:focus-within .cl-acts { opacity: 1; }
.cl-t { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.chatform { display: flex; gap: 8px; }
.chatform .inp { flex: 1; }
.chatnote { margin: 0; font-size: 12px; }
.icon-btn.xs { width: 26px; height: 26px; }
.icon-btn.xs .ic { width: 14px; height: 14px; }
/* the inbox */
.inbl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.inbi { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.inbi:hover { background: var(--hover); }
.inbi > .ic { color: var(--gold); flex: none; }
.inbi .grow { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 14.5px; line-height: 1.4; }
.inbi small { color: var(--subtle); font-size: 12px; }
.inbl li.new .inbi { background: rgba(242, 194, 48, 0.06); }
.inbl .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
/* the header's chat and inbox */
.hicon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; color: var(--nav); text-decoration: none; }
.hicon:hover { background: var(--hover); color: var(--text); }
.hicon .badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
.hicon + .hicon { margin-left: -10px; }
.head .hicon:first-of-type { margin-left: auto; }
.head .hicon ~ .hteam { margin-left: 4px; }
.tcard.none { cursor: default; }
/* Home: where the league stands */
.lstop { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-left: 3px solid var(--gold); }
.lstop.ready { border-left-color: var(--win); }
.lstop.paused { border-left-color: var(--subtle); }
.ls-l { display: grid; gap: 4px; min-width: 0; }
.ls-l small { font: 700 12px/1 var(--rc); text-transform: uppercase; letter-spacing: 0.05em; color: var(--subtle); }
.ls-l b { font: 800 20px/1.1 var(--rc); text-transform: uppercase; }
.ls-l span { color: var(--muted); font-size: 13.5px; }
.ls-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hscore { font: 800 40px/1 var(--rc); }
.lnoteam .lgyms { margin-top: 6px; }
/* the commissioner */
.lgl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lgl li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line); }
.lgl li:last-child { border-bottom: 0; }
.lgl .sc { font: 800 15px/1 var(--rc); min-width: 44px; text-align: center; }
.lgl .grow { flex: 1; min-width: 140px; display: grid; gap: 2px; }
.lgl .grow small { color: var(--muted); font-size: 12.5px; }
.lgl .grow small.red { color: var(--red); }
.lgl li.flagged .sc { color: var(--orange); }
.lgl li.voided { opacity: 0.6; }
.deadl { display: grid; gap: 6px; margin-top: 12px; }
.loglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.loglist li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
.loglist small { color: var(--subtle); font-size: 12px; }
.card.danger { border-color: rgba(248, 113, 113, 0.3); }
.btn.outline.danger { background: transparent; color: var(--red); border-color: rgba(248, 113, 113, 0.5); }
.btn.outline.danger:hover { background: rgba(248, 113, 113, 0.1); }
/* the live draft room */
.roomv { display: grid; gap: 16px; }
.rclockc { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.rclockc.mine { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(242, 194, 48, 0.35) inset; }
.rc-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.rc-who small { display: block; font: 700 12px/1 var(--rc); text-transform: uppercase; letter-spacing: 0.05em; color: var(--subtle); }
.rclockc.mine .rc-who small:first-child { color: var(--gold); }
.rc-who b { display: block; font: 800 22px/1.15 var(--rc); text-transform: uppercase; }
.rc-t { display: grid; justify-items: end; gap: 4px; }
.rc-t small { font: 700 12px/1 var(--rc); text-transform: uppercase; color: var(--subtle); }
.rclock { font: 400 24px/1 var(--px); color: var(--gold); }
.rc-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.rpl, .rblist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rpl li, .rblist li { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.rpl .nm { flex: 1; min-width: 0; display: grid; text-decoration: none; color: var(--text); }
.rpl .nm b { font: 700 14px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpl .nm small { color: var(--muted); font-size: 12px; }
.rpl .icon-btn.on { color: var(--win); }
.rblist .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpool .rpl { max-height: 70vh; overflow-y: auto; scrollbar-width: thin; }
.rblist li.mine, .ticker.rt li.mine { background: rgba(242, 194, 48, 0.08); }
.rr { max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.card.rlast { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-color: rgba(242, 194, 48, 0.35); }
.card.rlast p { margin: 0; flex: 1; min-width: 220px; }
@media (max-width: 899px) {
  .lobgrid { grid-template-columns: minmax(0, 1fr); }
  .lgyms { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* (a phone: one gym a row, the names whole) */
  .icode { font-size: 28px; }
  .hicon { width: 34px; height: 34px; }
  .lstop .ls-r { width: 100%; }
  .lstop .ls-r .btn { flex: 1; }
  .rc-t { justify-items: start; }
  .loglist li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- the first-time tour (tour.js): a soft spotlight on the part it's about, a card beside it ---------- */
.tour-dim { position: fixed; inset: 0; z-index: 90; background: rgba(4, 6, 10, 0.64); }
.tour-ring { position: fixed; z-index: 90; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(4, 6, 10, 0.64), 0 0 0 2px var(--gold), 0 0 26px 6px rgba(242, 194, 48, 0.3); transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease; }
.touring-still .tour-ring { transition: none; }
dialog.tour-card { position: fixed; inset: auto; margin: 0; padding: 16px 18px 14px; width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; border-radius: 14px; border: 1px solid rgba(242, 194, 48, 0.55); background: var(--panel); color: var(--text); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65); }
dialog.tour-card::backdrop { background: transparent; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.tour-count { font: 800 12px/1 var(--rc); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.tour-skip { height: 30px; margin-right: -8px; }
.tour-t { margin: 0 0 6px; font: 800 22px/1.1 var(--rc); text-transform: uppercase; }
.tour-x { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--nav); }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-dots { display: flex; gap: 5px; align-items: center; justify-content: center; flex: 1; min-width: 0; }
.tour-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--tag-border); transition: width 0.2s; }
.tour-dots i.on { width: 18px; background: var(--gold); }
.tour-back { width: 44px; padding: 0; flex: none; }
.tour-next { min-width: 108px; flex: none; }
.tourbtn .ic { width: 16px; height: 16px; }
@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  dialog.tour-card { padding: 12px 14px 10px; }
  .tour-t { font-size: 18px; margin-bottom: 4px; }
  .tour-x { font-size: 13.5px; line-height: 1.4; }
  .tour-nav { margin-top: 10px; }
  .tour-nav .btn { height: 38px; }
}