/* ---------- Scrim League: war-room ledger ----------
   Radiant jade vs Dire ember on warm obsidian. Stencil display type for headlines and
   scores, mono for every number, a diagonal "river" crossing the page. */

:root {
  --ink: #0c0b0a;
  --ink-rgb: 12, 11, 10;
  /* Text on a coloured chip or button: dark in both themes, where --ink is the page. */
  --on-accent: #0c0b0a;
  --hover: #262219;
  --err-bg: #2a100c;
  --bone-rgb: 239, 231, 218;
  --stone: #151310;
  --stone-2: #1d1a16;
  --seam: #2c2822;
  --seam-2: #3d372f;
  --bone: #efe7da;
  --dust: #9b9184;
  --dim: #918b83; /* 4.6:1+ on every dark surface */
  --jade: #5fd39b;
  --jade-deep: #1c5a3f;
  --ember: #ff5a36;
  --ember-deep: #6b2012;
  /* The same two colours for rgba() and the lighter/darker tints; html.cb swaps them all. */
  --jade-rgb: 95, 211, 155;
  --jade-dark: #10261c;
  --jade-soft: #9fe3c2;
  --jade-pale: #c3f0d9;
  --ember-rgb: 255, 90, 54;
  --ember-dark: #2a0f09;
  --ember-soft: #ff9a82;
  --gold: #e8b64c;
  --err: #ff6b5b;
  --warn: #e8b64c;
  /* The current league's colour: links, active tabs, buttons, highlights. Champion and the
     scrims use gold; each other league sets its own on body[data-league]. Gold that means
     something (S tier, net worth, a tied series, the gold stat bars) stays --gold. */
  --accent: var(--gold);
  --accent-rgb: 232, 182, 76;

  --display: "Big Shoulders Stencil Display", Impact, sans-serif;
  --body: "Epilogue", "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, Consolas, monospace;

  --cut: 14px; /* corner chamfer used on plates and buttons */
  color-scheme: dark;
}
/* Colour-blind mode (the settings cog): Radiant/win in blue and Dire/loss in vermilion, the
   pair red-green and blue-pink colour blindness both keep apart (Okabe–Ito). Chart series
   and the death-map pair move to the same palette. */
html.cb {
  --jade: #5aaeff; --jade-rgb: 90, 174, 255; --jade-deep: #1d4470; --jade-dark: #0e1f33;
  --jade-soft: #a9d3ff; --jade-pale: #d2e8ff;
  --ember: #f26b1d; --ember-rgb: 242, 107, 29; --ember-deep: #6b300d; --ember-dark: #2a1406;
  --ember-soft: #ffb07a;
}
html.cb figure.chart .s-c1, html.cb .chart-legend .lg-item.s-c1 { --c: #56b4e9; }
html.cb figure.chart .s-c2, html.cb .chart-legend .lg-item.s-c2 { --c: #e69f00; }
html.cb figure.chart .s-c3, html.cb .chart-legend .lg-item.s-c3 { --c: #1fb98a; }
html.cb figure.chart .s-c4, html.cb .chart-legend .lg-item.s-c4 { --c: #f0e442; }
html.cb figure.chart .s-c5, html.cb .chart-legend .lg-item.s-c5 { --c: #cc79a7; }
html.cb figure.chart .s-c6, html.cb .chart-legend .lg-item.s-c6 { --c: #3b8fd6; }
html.cb figure.chart .s-c7, html.cb .chart-legend .lg-item.s-c7 { --c: #d55e00; }
html.cb .dh-bar.k1 { fill: #56b4e9; }
html.cb .dh-bar.k2 { fill: #e69f00; }
html.cb .dm-line.k1 i { background: #56b4e9; }
html.cb .dm-line.k2 i { background: #e69f00; }

/* Grey mode (the settings cog): neutral slate between obsidian and paper. Text stays light, so
   the dark theme's league colours and chips carry over unchanged; only the neutrals move. */
html.grey {
  --ink: #2b2d31; --ink-rgb: 43, 45, 49;
  --stone: #33363b; --stone-2: #3b3e44;
  --seam: #474a51; --seam-2: #585c64;
  --bone: #eceef1; --bone-rgb: 236, 238, 241;
  --dust: #b1b5bc; --dim: #a9adb4;
  --hover: #43474e; --err-bg: #4a2a28;
  --jade-dark: #22362e; --ember-dark: #3d2622;
}
html.grey { --ember: #ff8a6e; --ember-rgb: 255, 138, 110; } /* 4.6:1 on grey panels */
html.grey .grain { opacity: .05; }
html.grey.cb { --jade-dark: #1f2d3d; --ember-dark: #3d2c20; --ember: #fb9150; --ember-rgb: 251, 145, 80; }

/* Light mode (the settings cog): paper instead of obsidian. The neutrals flip; every colour
   that doubles as text darkens until it passes 4.5:1 on the paper, and chips filled with it
   take white text (--on-accent). Maps keep their dark overlays: the minimap is dark. */
html.light {
  --ink: #efe9df; --ink-rgb: 239, 233, 223;
  --stone: #f8f4ed; --stone-2: #fffcf7;
  --seam: #ddd3c3; --seam-2: #c7bba6;
  --bone: #1d1a16; --bone-rgb: 29, 26, 22;
  --dust: #5f574c; --dim: #6b6358;
  --hover: #ece4d6; --err-bg: #fde3dd;
  /* Every colour that doubles as text clears 4.5:1 on the paper, so chips filled with them
     take white text (pale fixed fills set it back to dark, below). */
  --on-accent: #fff;
  --jade: #18754c; --jade-rgb: 24, 117, 76; --jade-deep: #b9e6cf; --jade-dark: #f3faf6;
  --jade-soft: #2a7553; --jade-pale: #17583a;
  --ember: #bc3b1a; --ember-rgb: 188, 59, 26; --ember-deep: #f7c7b8; --ember-dark: #fdf3ef;
  --ember-soft: #b54226;
  --gold: #8a600e; --accent-rgb: 138, 96, 14;
  --err: #bf3524; --warn: #8a600e;
  color-scheme: light;
}
html.light.cb {
  --jade: #236aab; --jade-rgb: 35, 106, 171; --jade-deep: #bcdaf7; --jade-dark: #f1f7fd;
  --jade-soft: #2a6fae; --jade-pale: #184d80;
  --ember: #a94d0f; --ember-rgb: 169, 77, 15; --ember-deep: #f8d3b6; --ember-dark: #fdf5ee;
  --ember-soft: #a94d0f;
}
html.light .grain { opacity: .035; }
/* Fixed pale fills keep dark text in light mode. */
html.light :is(.t-B, .ld-p2, .ld-p3, .sr-p2, .sr-p3, .sr-g-support, .ov-badge.ov-top.ov-2, .ov-badge.ov-top.ov-3, .div-badge, .div-switch a.active, .mx-s),
html.light nav a.nav-cta:hover { --on-accent: #0c0b0a; }
/* B tier's pale sage vanishes as text on paper: a deeper sage that still takes dark text. */
html.light .t-B { --tc: #6e8079; --tc-rgb: 110, 128, 121; }
html.light :is(.fx-move, .fx-form) :is(input, select) { color-scheme: light; }
html.light body[data-league] .brand-word b { color: var(--accent); }
/* Overlays on the (dark) minimap keep light text. */
html.light :is(.dm-tip, .mz-hint, .mz-ctl button) { color: #efe7da; }

* { box-sizing: border-box; }
html { scrollbar-color: var(--seam-2) var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--bone);
  font: 15px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "Skip to content": off screen until a keyboard user tabs to it. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 2px; }
.skip-link:focus { top: 12px; }
/* Page headings take focus after navigation (app.js focusPage) and from the skip link; they
   aren't controls, so no ring. */
main h1[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- atmosphere ---------- */
.river {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(135deg, transparent 44%, rgba(var(--jade-rgb), .045) 47%, rgba(120, 170, 255, .07) 50%, rgba(var(--ember-rgb), .045) 53%, transparent 56%),
    radial-gradient(60vmax 40vmax at 0% 100%, rgba(var(--jade-rgb), .09), transparent 70%),
    radial-gradient(60vmax 40vmax at 100% 0%, rgba(var(--ember-rgb), .08), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255, 255, 255, .018) 119px 120px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(255, 255, 255, .018) 119px 120px);
}
/* Grain: a small noise tile rasterised once and repeated (a full-screen SVG filter
   re-renders on every repaint). */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 48px);
  background: rgba(var(--ink-rgb), .94);
  border-bottom: 1px solid var(--seam);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--bone); }
.brand:hover { text-decoration: none; }

/* League switcher: a small button in the header's top-right tools; the brand links home. */
.switcher { position: relative; margin-left: auto; }
.league-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dust); background: none; border: 1px solid var(--seam); padding: 9px 12px; border-radius: 2px; clip-path: none;
}
.league-btn:hover, .league-btn[aria-expanded="true"] { color: var(--bone); border-color: var(--dust); }
/* In a league, the button wears that league's colour. */
body[data-league]:not([data-league="scrim"]) .league-btn { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); }
body[data-league]:not([data-league="scrim"]) .league-btn:hover, body[data-league]:not([data-league="scrim"]) .league-btn[aria-expanded="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; transition: transform .15s; }
.league-btn[aria-expanded="true"] .caret { transform: rotate(-135deg) translate(-2px, -2px); }
/* Table builder: a table icon next to the search box. */
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; color: var(--dust);
  border: 1px solid var(--seam); padding: 7px; border-radius: 2px; text-decoration: none;
}
.tb-btn:hover { color: var(--bone); border-color: var(--dust); text-decoration: none; }
/* Settings cog: the last thing in the header's tools. */
.settings { position: relative; }
.settings-btn {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--dust); background: none; border: 1px solid var(--seam); padding: 7px; border-radius: 2px; clip-path: none;
}
.settings-btn svg { transition: transform .3s; }
.settings-btn:hover, .settings-btn[aria-expanded="true"] { color: var(--bone); border-color: var(--dust); }
.settings-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.settings-pop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; z-index: 20;
  background: var(--stone-2); border: 1px solid var(--seam-2); padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  animation: rise .18s cubic-bezier(.2, .8, .2, 1);
}
.settings-pop[hidden] { display: none; }
.settings-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; color: var(--bone); font-size: 14px; white-space: nowrap; }
.settings-row:hover { background: rgba(255, 255, 255, .04); }
.settings-row input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
/* Theme: three segments, the picked one filled. */
.settings-theme { display: flex; margin: 2px 10px 6px; border: 1px solid var(--seam-2); }
.settings-theme label { flex: 1; text-align: center; padding: 7px 10px; cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.settings-theme label + label { border-left: 1px solid var(--seam-2); }
.settings-theme label:hover { color: var(--bone); }
.settings-theme input { position: absolute; opacity: 0; pointer-events: none; }
.settings-theme label:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.settings-theme label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.league-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 300px; max-width: calc(100vw - 32px); z-index: 20;
  background: var(--stone-2); border: 1px solid var(--seam-2); padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  animation: rise .18s cubic-bezier(.2, .8, .2, 1);
}
.menu-label { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 8px 10px 10px; }
/* Every entry in its own league's colour (--lc), so the menu is a key to the site's colours. */
.league-menu a { --lc: var(--gold); --lc-rgb: 232, 182, 76; display: block; padding: 11px 12px; color: var(--bone); border-left: 3px solid rgba(var(--lc-rgb), .45); margin-bottom: 2px; }
.league-menu a[data-league="scrim"], .hub-list a[data-league="scrim"] { --lc: var(--jade); --lc-rgb: var(--jade-rgb); }
.league-menu a[data-league="all"] { --lc: var(--bone); --lc-rgb: 239, 231, 218; margin-top: 8px; }
.league-menu a:hover, .league-menu a.tour-hover { background: rgba(var(--lc-rgb), .1); border-left-color: var(--lc); text-decoration: none; }
.league-menu a.current { border-left-color: var(--lc); background: rgba(var(--lc-rgb), .14); }
.league-menu b { display: block; font: 800 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--lc); }
.league-menu span { display: block; font-size: 12px; color: var(--dust); margin-top: 3px; }
/* Each AD2L division's colours (accent, brand mark, menu, search chip, both themes) come from
   public/lib/divisions.js: app.js adds them as a <style> at start. */
.div-badge {
  font: 600 12px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-accent); background: #a58bff; padding: 4px 6px; margin-left: 8px; vertical-align: middle; border-radius: 2px; white-space: nowrap;
}
/* Heroic/Aegis division switch: Division A / Division B / Combined, under the header. */
.div-switch {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--seam); background: rgba(165, 139, 255, .05);
}
.div-switch[hidden] { display: none; }
.div-label { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.div-switch a {
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dust); padding: 9px 14px; border: 1px solid var(--seam); border-radius: 2px;
}
.div-switch a:hover { color: var(--bone); border-color: #6a4fd6; text-decoration: none; }
.div-switch a.active { color: var(--on-accent); background: #a58bff; border-color: #a58bff; }
.div-note { font-size: 12px; color: var(--dust); margin-left: 8px; }
.div-tag { font: 600 12px/1 var(--mono); color: #b9a6ff; }
/* Time machine: in the settings menu (under the cog); its panel of weeks opens in place. The
   button and the cog are tinted while it narrows the page. */
.top-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tm { border-top: 1px solid var(--seam-2); margin-top: 6px; padding-top: 2px; }
.tm[hidden] { display: none; }
.tm-btn {
  display: block; width: calc(100% - 20px); margin: 0 10px 6px; text-align: left;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  color: var(--dust); background: none; border: 1px solid var(--seam-2); padding: 9px 12px; border-radius: 2px;
}
.tm-btn::before { content: "◷"; margin-right: 6px; letter-spacing: 0; }
.tm-btn:hover, .tm-btn[aria-expanded="true"] { color: var(--bone); border-color: var(--dust); }
.tm.active .tm-btn { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.settings.tm-on .settings-btn { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.tm-pop { width: min(320px, calc(100vw - 64px)); box-sizing: border-box; margin: 0 10px 6px; padding: 12px; background: var(--stone); border: 1px solid var(--seam-2); border-radius: 2px; }
.tm-pop[hidden] { display: none; }
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tm-label { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tm-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.tm-chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--dust);
  background: none; padding: 7px 8px; border: 1px solid var(--seam); border-radius: 2px;
}
.tm-chip .wd { font-weight: 400; font-size: 12px; color: var(--dim); }
.tm-chip:hover { color: var(--bone); border-color: var(--accent); }
.tm-chip.on { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.tm-chip.on .wd { color: var(--on-accent); opacity: .7; }
.tm-all { flex-direction: row; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.tm-note { font-size: 12px; color: var(--dust); margin: 10px 0 0; }
.tm-note b { color: var(--bone); }
.brand-mark { position: relative; width: 26px; height: 26px; transform: rotate(45deg); }
.brand-mark i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 0 100%); background: var(--jade); }
.brand-mark i + i { clip-path: polygon(100% 0, 100% 100%, 0 100%); background: var(--ember); transform: translate(3px, 3px); }
.brand-word { font: 800 26px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.brand-word b { font-weight: 800; color: var(--dust); margin-left: 4px; }
/* Playoffs (lib/divisions.js SEASON.phase): a stamp slapped under the "AD2L" of the name, low
   enough that the letters stay readable. */
.brand-word { position: relative; }
.po-stamp {
  position: absolute; left: 0; bottom: -18px; transform: rotate(-6deg); transform-origin: left center;
  font: 800 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent); border: 1.5px solid var(--accent); padding: 2px 5px 1px; border-radius: 2px;
  background: rgba(var(--ink-rgb), .82); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); pointer-events: none;
}
html.light .po-stamp { background: rgba(255, 252, 247, .9); }

nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a {
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dust); padding: 10px 14px; position: relative;
}
nav a:hover { color: var(--bone); text-decoration: none; }
nav a.active { color: var(--bone); }
nav a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--accent); }
nav a.nav-cta {
  color: var(--on-accent); background: var(--accent); margin-left: 10px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
nav a.nav-cta.active::after { display: none; }
nav a.nav-cta:hover { background: #f5c862; color: var(--on-accent); }
/* Tab dropdowns: one narrow list (teams, weeks, or a page's own tabs). */
.nav-item { position: relative; display: flex; }
.nav-item.open > a { color: var(--bone); }
.nav-drop {
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 6px;
  width: min(320px, calc(100vw - 16px)); padding: 6px;
  background: var(--stone-2); border: 1px solid var(--seam-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  animation: rise .14s cubic-bezier(.2, .8, .2, 1);
}
.nav-drop[hidden] { display: none; }
/* A bridge over the gap, so moving the mouse from the tab down into the menu keeps it open. */
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }
.nav-drop a {
  font: 400 13px/1.25 var(--body); letter-spacing: 0; text-transform: none;
  color: var(--bone); padding: 0; position: static;
}
.nav-drop a:hover { text-decoration: none; }
.nd-note { padding: 12px; font-size: 13px; color: var(--dust); }
.nd-list { max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.nd-group {
  position: sticky; top: 0; z-index: 1; background: var(--stone-2);
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 10px 10px 6px;
}
.nav-drop .nd-item {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: 7px 10px; border-left: 2px solid transparent;
}
.nd-item .nd-name, .nd-item .nd-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-item .nd-sub { font-size: 12px; color: var(--dust); margin-top: 2px; }
.nav-drop .nd-item.nd-child { padding: 5px 10px 5px 24px; font-size: 13px; color: var(--dust); }
.nav-drop .nd-item.nd-child:hover { color: var(--bone); }
.nav-drop .nd-item.on { background: rgba(var(--accent-rgb), .1); border-left-color: var(--accent); }
.nav-drop .nd-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
/* Header search: players and teams in every league. Each result wears its league's colour. */
.search { position: relative; }
.search input {
  width: 250px; font: 400 13px/1 var(--body); color: var(--bone); background: var(--stone);
  border: 1px solid var(--seam); border-radius: 2px; padding: 8px 30px 8px 10px;
}
.search input::placeholder { color: var(--dim); }
.search input:focus { outline: none; border-color: var(--accent); }
.search input::-webkit-search-cancel-button { display: none; }
.search-key {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 600 12px/1 var(--mono); color: var(--dim); border: 1px solid var(--seam); border-radius: 2px; padding: 3px 5px;
}
.search input:focus + .search-key, .search input:not(:placeholder-shown) + .search-key { display: none; }
.search-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(440px, calc(100vw - 32px));
  max-height: min(70vh, 520px); overflow-y: auto; padding: 4px;
  background: var(--stone); border: 1px solid var(--seam); border-radius: 2px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.search-pop[hidden] { display: none; }
.search-pop.flip { right: auto; left: 0; }
.search-note { padding: 12px; font-size: 13px; color: var(--dust); }
.search-hit {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; color: var(--bone); border-left: 2px solid transparent;
}
.search-hit:hover, .search-hit.on { text-decoration: none; background: rgba(255, 255, 255, .04); border-left-color: var(--accent); }
.sh-kind { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sh-kind.sh-team { color: var(--dust); }
.sh-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-name { font: 600 14px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-name mark, .sh-sub mark { background: none; color: var(--accent); }
.sh-sub { font-size: 12px; line-height: 1.3; color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-sub b { font-weight: 600; color: var(--bone); }
.lg-chip {
  --lc: var(--gold); font: 600 12px/1 var(--mono); letter-spacing: .06em; white-space: nowrap;
  color: var(--lc); border: 1px solid var(--lc); border-radius: 2px; padding: 4px 6px;
}
.lg-chip[data-lg="scrim"] { --lc: var(--jade); }
/* Phones: three tight rows instead of a sticky block a third of the screen tall. Brand and the
   tool buttons share the top row, search gets its own, and the tabs scroll sideways in one
   line. The header scrolls away with the page here. */
@media (max-width: 760px) {
  .top {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas: "brand search tb league fb cog" "nav nav nav nav nav nav";
    gap: 10px 4px; padding: 10px 16px 0;
  }
  .top-tools { display: contents; }
  .brand { grid-area: brand; gap: 10px; min-width: 0; }
  .brand-mark { width: 20px; height: 20px; flex: none; }
  .brand-word { font-size: 20px; white-space: nowrap; display: flex; align-items: baseline; min-width: 0; }
  .brand-word b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .brand-word .div-badge { flex: none; }
  .po-stamp { bottom: -14px; font-size: 10px; }
  /* The league menu hangs from the header itself, edge to edge, not from its 38px button. */
  .switcher { grid-area: league; margin: 0; position: static; }
  .league-menu { top: 56px; left: 16px; right: 16px; min-width: 0; max-width: none; }
  .fb-open { grid-area: fb; }
  .settings { grid-area: cog; }
  .tb-btn { grid-area: tb; width: 38px; height: 36px; padding: 0; }
  /* Six buttons beside the brand: a little narrower, so the league name keeps its room. */
  .top :is(.tb-btn, .league-btn, .settings-btn, .fb-open, .search input) { width: 34px; min-width: 34px; }
  .top .brand-word { font-size: 18px; }
  .brand-word :is(.bw-season, .bw-long) { display: none; }
  .brand-word .div-badge { margin-left: 5px; padding: 4px 4px; letter-spacing: 0; }
  /* The brand already names the league: the switcher shrinks to its caret (the word stays for
     screen readers). */
  .league-btn { font-size: 0; gap: 0; width: 38px; height: 36px; padding: 0; justify-content: center; }
  .league-btn .caret { margin: 0; }
  .settings-btn, .fb-open { min-width: 38px; height: 36px; justify-content: center; }
  /* Search folds to a magnifier button in the top row; tapping it opens the field across the
     whole row, over the brand and buttons, until it loses focus. */
  .search { grid-area: search; }
  .search-key { display: none; }
  /* 16px stops iOS zooming the page when the field takes focus. */
  .search input {
    width: 38px; height: 36px; font-size: 16px; padding: 0; cursor: pointer; color: transparent;
    background: var(--stone) no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9184' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E");
  }
  .search input::placeholder { color: transparent; }
  /* grid-area: auto, so it measures from the header, not from its own 38px grid cell. */
  .search:is(:focus-within, :has(.search-pop:not([hidden]))) { grid-area: auto; position: absolute; left: 16px; right: 16px; top: 10px; z-index: 30; }
  .search:is(:focus-within, :has(.search-pop:not([hidden]))) input {
    width: 100%; padding: 8px 10px 8px 36px; color: var(--bone); cursor: text; background-position: 10px center;
  }
  .search:focus-within input::placeholder { color: var(--dim); }
  .search-pop { left: 0; right: auto; width: calc(100vw - 32px); }
  .search-hit { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  nav {
    grid-area: nav; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 0 10px 2px; gap: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { padding: 13px 11px; font-size: 11px; white-space: nowrap; flex: none; }
  nav a.active::after { left: 11px; right: 11px; bottom: 0; }
  nav a.nav-cta { margin: 6px 6px 6px 8px; padding: 8px 11px; }
  /* The tab lists open on hover only; the sideways strip would clip them. */
  .nav-drop:not(.more-drop) { display: none !important; }
  /* Teams, Content, Players, Heroes, then More ▾ (Predict, Drafter, Upload): one line that fits,
     so no sideways scroll, and More's list hangs from the header edge to edge. */
  nav:has(.nav-more) { overflow: visible; -webkit-mask-image: none; mask-image: none; justify-content: space-between; padding: 0 6px 2px; }
  nav .nav-extra { display: none; }
  nav:has(.nav-more) a, .nav-more > button { padding-left: 8px; padding-right: 8px; letter-spacing: .1em; }
  nav:has(.nav-more) a.active::after, .nav-more > button.active::after { left: 8px; right: 8px; }
  nav .nav-more { display: flex; position: static; }
  .nav-more .more-drop { left: 16px; right: 16px; width: auto; top: 100%; margin-top: 0; }
}
/* More ▾ is the phone's; wider screens show every tab. */
.nav-more { display: none; }
.nav-more > button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; clip-path: none; position: relative;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dust); padding: 13px 11px; white-space: nowrap;
}
.nav-more > button .caret { margin: 0 0 0 2px; }
.nav-more.open > button, .nav-more > button.active { color: var(--bone); }
.nav-more > button.active::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 2px; background: var(--accent); }
.nav-more.open > button .caret { transform: rotate(-135deg) translate(-2px, -2px); }
.more-drop .nd-item[href$="/upload"], .more-drop .nd-item[href="#/upload"] { color: var(--accent); font-weight: 600; }

/* ---------- page frame ----------
   Breakpoints: 520 (small phone), 760 (phone), 1000 (tablet), 1200 (laptop), 1400 (wide).
   Phone rules use max-width: 760px; wide ones min-width: 761/1001/1201/1400px. */
main { width: 100%; max-width: 2400px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px) 72px; flex: 1; }
.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px clamp(16px, 4vw, 48px); border-top: 1px solid var(--seam);
  font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--dim); text-transform: uppercase;
}

.page-head { margin-bottom: 28px; }
.kicker { font: 600 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
h1 { font: 900 clamp(44px, 7vw, 84px)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 12px 0 0; }
/* #/ad2l: the AD2L league picker, centred in the page. Each league in its own colour. */
.hub { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 28px; padding: 32px 0; }
.hub .kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.hub-title { margin: 0; }
.hub-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 780px; }
.hub-list a { --lc: var(--gold); --lc-rgb: 232, 182, 76; flex: 0 1 180px; display: block; padding: 18px 14px; background: var(--stone-2); border: 1px solid rgba(var(--lc-rgb), .35); border-bottom: 3px solid var(--lc); color: var(--lc); transition: background .15s, transform .15s; }
.hub-list a:hover, .hub-list a.tour-hover { background: rgba(var(--lc-rgb), .12); transform: translateY(-2px); text-decoration: none; }
.hub-list b { display: block; font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.hub-list span { display: block; margin-top: 6px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
/* All divisions: full width under the picker, its underline every division's colour. */
.hub-all { display: block; width: 100%; max-width: 750px; padding: 18px 14px 21px; background: var(--stone-2); border: 1px solid var(--seam-2); color: var(--bone); position: relative; transition: background .15s, transform .15s; }
.hub-all::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: linear-gradient(90deg, #3cc6c6, #ef6b73, #9bd34a, #ff9a3c, #5aa9e6, #e8b64c, #a58bff); }
.hub-all:hover { background: rgba(var(--bone-rgb), .06); transform: translateY(-2px); text-decoration: none; }
.hub-all b { display: block; font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.hub-all span { display: block; margin-top: 6px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.page-head p { max-width: 68ch; color: var(--dust); margin: 14px 0 0; }
h2 {
  font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  margin: 40px 0 14px; display: flex; align-items: center; gap: 14px;
}
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--seam-2), transparent); }
.muted { color: var(--dust); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.panel {
  background: linear-gradient(180deg, var(--stone-2), var(--stone));
  border: 1px solid var(--seam);
  padding: 20px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.empty { text-align: center; padding: 56px 20px; color: var(--dust); }
.empty strong { display: block; font: 800 34px/1 var(--display); text-transform: uppercase; color: var(--bone); margin-bottom: 10px; }

/* ---------- buttons ---------- */
button {
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone); background: var(--stone-2); border: 1px solid var(--seam-2);
  padding: 13px 18px; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .15s, border-color .15s, transform .1s;
}
button:hover:not(:disabled) { border-color: var(--dust); background: var(--hover); }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover:not(:disabled) { background: #f5c862; border-color: #f5c862; }
button:disabled { opacity: .38; cursor: not-allowed; }

kbd {
  font: 400 12px var(--mono); color: var(--bone); background: var(--stone-2);
  border: 1px solid var(--seam-2); border-bottom-width: 2px; padding: 1px 6px; border-radius: 3px;
}
code { font: 12px var(--mono); color: var(--accent); }

/* ---------- notices ---------- */
.notice { padding: 12px 16px 12px 18px; margin: 14px 0; border-left: 3px solid; background: var(--stone); font-size: 14px; }
.notice.err { border-color: var(--err); color: #ffc2b8; }
.notice.warn { border-color: var(--warn); color: #f3dfb0; }
.notice.ok { border-color: var(--jade); color: var(--jade-pale); }
.notice b { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.notice ul { margin: 0; padding-left: 18px; }
.notice li + li { margin-top: 3px; }
.notice.names strong { color: var(--bone, #f1ead8); }
.notice.names button.small { margin-left: 8px; padding: 2px 8px; font-size: 12px; }

/* ---------- upload: evidence slots ---------- */
.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 16px; margin: 0 0 18px; }
.examples-lbl { grid-column: 1 / -1; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.example { margin: 0; }
.example img { display: block; width: 100%; height: auto; border: 1px solid var(--seam); cursor: zoom-in; }
.example figcaption { font: 12px/1.4 var(--mono); color: var(--dust); margin-top: 6px; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.slot {
  position: relative; aspect-ratio: 21 / 9; cursor: pointer;
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, .02) 10px 11px), var(--stone);
  border: 1px dashed var(--seam-2); color: var(--dust); overflow: hidden;
  transition: border-color .15s, background-color .15s;
}
.slot::before, .slot::after {
  content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent); opacity: .7; transition: all .2s;
}
.slot::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.slot::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.slot:hover::before, .slot.over::before { top: 6px; left: 6px; opacity: 1; }
.slot:hover::after, .slot.over::after { bottom: 6px; right: 6px; opacity: 1; }
.slot.over { border-color: var(--accent); background-color: rgba(var(--accent-rgb), .08); }
.slot-num { font: 900 54px/1 var(--display); color: var(--seam-2); }
.slot-label { font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.slot-hint { font-size: 12px; color: var(--dim); margin-top: 4px; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; cursor: zoom-in; }
.slot.filled { border-style: solid; border-color: var(--seam-2); }
.slot .slot-tag {
  position: absolute; left: 0; bottom: 0; z-index: 1; padding: 6px 10px;
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(var(--ink-rgb), .85); color: var(--bone);
}
.upload-actions { margin-top: 18px; }
.progress { margin: 14px 0 0; font: 400 12px/1.4 var(--mono); color: var(--accent); display: flex; align-items: center; gap: 10px; }
.progress::before { content: ""; width: 10px; height: 10px; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; transform: rotate(45deg); } }

/* ---------- review form ---------- */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.fields label { display: flex; flex-direction: column; gap: 6px; font: 600 12px/1 var(--mono); color: var(--dust); text-transform: uppercase; letter-spacing: .1em; }
.edit input, .edit select {
  background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2);
  padding: 8px 9px; font: 14px var(--body); width: 100%; border-radius: 0;
}
.edit input:focus, .edit select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.edit input::placeholder { color: var(--dim); }
.edit input.num { width: 84px; text-align: right; font: 13px var(--mono); }
.edit input.bad, .edit select.bad { border-color: var(--err); background: var(--err-bg); }
.edit td { padding: 5px 5px; }

/* ---------- tables ---------- */
/* Capped at the viewport height so the horizontal scrollbar is always on screen (not
   59 rows down); the header row sticks inside it. */
.table-wrap {
  overflow: auto; max-height: calc(100vh - 96px); border: 1px solid var(--seam); background: var(--stone);
  scrollbar-color: var(--seam-2) var(--ink); scrollbar-width: thin; overscroll-behavior-x: contain;
}
.table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.table-wrap::-webkit-scrollbar-track { background: var(--ink); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--seam-2); }
.table-wrap.edit { max-height: none; }
table { border-collapse: collapse; width: 100%; font: 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
th, td { padding: 8px 7px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--seam); }
th {
  font: 600 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--dust);
  background: var(--stone-2); position: sticky; top: 0; z-index: 2; border-bottom-color: var(--seam-2);
}
/* Sortable stat tables: the player/team name column stays put while scrolling sideways. */
.table-wrap.sticky-name tbody td:nth-child(2), .table-wrap.sticky-name thead th:nth-child(2) {
  position: sticky; left: 0; z-index: 1; background: var(--stone);
  box-shadow: inset -1px 0 var(--seam-2);
}
.table-wrap.sticky-name thead th:nth-child(2) { z-index: 3; background: var(--stone-2); }
/* Phones: every other table keeps its first column (the team or player) in view too, and the
   pinned name column stays narrow enough to leave room for the numbers. */
@media (max-width: 760px) {
  .table-wrap:not(.sticky-name) :is(tbody td, tbody th, thead th):first-child:not([colspan]) {
    position: sticky; left: 0; z-index: 1; background: var(--stone); box-shadow: inset -1px 0 var(--seam-2);
  }
  .table-wrap:not(.sticky-name) thead th:first-child { z-index: 3; background: var(--stone-2); }
  .table-wrap td.name { min-width: 96px; max-width: 132px; }
}
th.sortable { cursor: pointer; user-select: none; white-space: normal; vertical-align: bottom; line-height: 1.35; }
.sort-ico { white-space: nowrap; }
td.name { white-space: normal; min-width: 110px; max-width: 200px; }
/* Density steps a table takes before hiding columns (see sortableTable). */
.table-wrap.d1 table { font-size: 12px; }
.table-wrap.d1 th, .table-wrap.d1 td { padding: 7px 5px; }
.table-wrap.d1 td.l { font-size: 13px; }
.table-wrap.d2 table { font-size: 11px; }
.table-wrap.d2 th, .table-wrap.d2 td { padding: 6px 4px; }
.table-wrap.d2 th { font-size: 11px; letter-spacing: .02em; }
.table-wrap.d2 td.l { font-size: 12px; }
.table-wrap.d2 td.strip { min-width: 190px; }
.table-wrap.d2 .hero-strip .hero-img { width: 26px; height: 15px; }
.table-wrap.d2 td.name { min-width: 90px; }
/* Column pages, when a table is too wide for the screen (see sortableTable). */
.col-pager { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; margin: 0 0 8px; }
.col-pager button {
  background: var(--stone); border: 1px solid var(--seam-2); color: var(--dust); cursor: pointer;
  padding: 6px 10px; font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.col-pager button:hover:not(:disabled) { color: var(--bone); border-color: var(--dust); }
.col-pager .cp-page.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.col-pager .cp-step { padding: 6px 11px; font-size: 14px; line-height: 1; }
.col-pager .cp-step:disabled { opacity: .35; cursor: default; }
/* Row pages for long lists and tables (pageList in core.js). */
.pg-off { display: none !important; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 10px 0 4px; }
.pager button {
  background: var(--stone); border: 1px solid var(--seam-2); color: var(--dust); cursor: pointer;
  min-width: 36px; padding: 7px 10px; font: 600 12px/1.2 var(--mono); letter-spacing: .06em;
}
.pager button:hover:not(:disabled) { color: var(--bone); border-color: var(--dust); }
.pager button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .pg-step, .pager .pg-all { text-transform: uppercase; }
.pager .pg-gap { color: var(--dim); padding: 0 2px; }
.pager .pg-range { margin-left: auto; color: var(--dim); font: 12px var(--mono); }
@media (max-width: 760px) { .pager .pg-range { margin-left: 0; width: 100%; order: -1; } }
td.strip { white-space: normal; min-width: 232px; max-width: 280px; }
.hero-strip { display: flex; flex-wrap: wrap; gap: 2px; }
.hero-strip a { position: relative; display: block; line-height: 0; }
.hero-strip .hero-img { width: 32px; height: 18px; }
.hero-strip a:hover .hero-img { filter: brightness(1.25); outline: 1px solid var(--accent); }
.hero-strip b {
  position: absolute; right: 0; bottom: 0; padding: 1px 3px; background: rgba(0, 0, 0, .78);
  font: 700 12px/1 var(--mono); color: var(--bone);
}
td.wrap { white-space: normal; min-width: 200px; max-width: 300px; font-size: 13px; line-height: 1.4; }
th.sortable:hover, th.sorted { color: var(--accent); }
td.l, th.l { text-align: left; }
td.l { font-family: var(--body); font-size: 14px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255, 255, 255, .025); }
tr:last-child td { border-bottom: 0; }
tr.team-a td:first-child { box-shadow: inset 3px 0 var(--jade); }
tr.team-b td:first-child { box-shadow: inset 3px 0 var(--ember); }
tr.sep td {
  background: var(--ink); color: var(--dust); text-align: left; padding: 9px 12px;
  font: 800 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
tr.sep.a td { color: var(--jade); }
tr.sep.b td { color: var(--ember); }
/* A header row repeated mid-table: styled like the top one, but it scrolls with its team. */
tr.head-repeat th { position: static; }
td.best { color: var(--accent); font-weight: 600; }
td.best::before { content: "▲ "; font-size: 8px; vertical-align: 2px; }
.rank { color: var(--dim); width: 1%; }
.rank.lead { color: var(--accent); }
.tag { color: var(--dim); font-size: 12px; }
/* In-cell bar: a quick visual of how a value compares with the column's best. */
td.bar { position: relative; }
td.bar::after {
  content: ""; position: absolute; right: 12px; bottom: 5px; height: 2px;
  width: calc((100% - 24px) * var(--w, 0)); background: var(--bar, var(--seam-2));
}
td.bar.gold { --bar: rgba(232, 182, 76, .55); }
td.bar.jade { --bar: rgba(var(--jade-rgb), .55); }
td.bar.ember { --bar: rgba(var(--ember-rgb), .55); }
.table-note { font: 400 12px/1.6 var(--mono); color: var(--dim); margin: 12px 0 0; }
/* Explainer prose is off site-wide: the (i) bubbles carry the explanations. Still shown: notes
   marked `keep` (data, empty states, warnings) and grey notes holding a button. */
.table-note:not(.keep):not(:has(button)), .wm-intro:not(.keep):not(:has(button)), .wm-note:not(.keep), .po-lead:not(.keep), .sort-hint, .explain { display: none !important; }

/* ---------- match list: fixtures ---------- */
.fixtures { display: grid; gap: 10px; }
.fixture {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  padding: 18px 22px; color: var(--bone); background: var(--stone); border: 1px solid var(--seam);
  position: relative; overflow: hidden; transition: border-color .15s, transform .15s;
}
.fixture:hover { text-decoration: none; border-color: var(--seam-2); transform: translateX(3px); }
.fixture::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--side, var(--seam-2)); }
.fixture.win-a { --side: var(--jade); }
.fixture.win-b { --side: var(--ember); }
.fx-team { font: 800 clamp(18px, 2.4vw, 26px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.fx-team.b { text-align: right; }
.fx-team.lost { color: var(--dim); }
.fx-team small { display: block; font: 600 12px/1 var(--mono); letter-spacing: .1em; margin-top: 6px; color: var(--accent); }
.fx-score { text-align: center; }
.fx-score .n { font: 900 38px/1 var(--display); letter-spacing: .02em; }
.fx-score .n i { font-style: normal; color: var(--dim); margin: 0 8px; }
.fx-score .meta { font: 400 12px/1 var(--mono); color: var(--dim); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }

/* ---------- match page: split banner ---------- */
.banner { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 220px; margin-bottom: 8px; }
.plate { position: relative; padding: 30px clamp(18px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; overflow: hidden; }
.plate.a {
  background: linear-gradient(120deg, var(--jade-deep), var(--jade-dark) 70%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  padding-right: 90px;
}
.plate.b {
  background: linear-gradient(240deg, var(--ember-deep), var(--ember-dark) 70%);
  clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -48px; padding-left: 96px; text-align: right; align-items: flex-end;
}
.plate .side { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--bone-rgb), .6); }
.plate .team { font: 800 clamp(24px, 3.4vw, 42px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.plate .n { font: 900 clamp(72px, 11vw, 136px)/.8 var(--display); letter-spacing: -.01em; }
.plate.a .n { color: var(--jade); }
.plate.b .n { color: var(--ember); }
.plate.lost .n, .plate.lost .team { opacity: .72; }
.win-badge {
  display: inline-block; font: 600 12px/1 var(--mono); letter-spacing: .2em; padding: 6px 9px;
  background: var(--accent); color: var(--on-accent); vertical-align: middle; text-transform: uppercase;
}
.plate .top-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.plate.b .top-line { justify-content: flex-end; }
.banner-meta {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); border: 1px solid var(--seam-2); padding: 9px 14px; white-space: nowrap;
}
.banner-meta b { color: var(--accent); font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--stone); border: 1px solid var(--seam); padding: 18px; position: relative; }
/* The corner flag marks a card that opens something (a game, a breakdown); plain stat cards go without. */
:is(a, button).card::after { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: linear-gradient(225deg, var(--accent) 50%, transparent 50%); opacity: .8; }
.card .k { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.card .v { font: 900 40px/1 var(--display); margin: 12px 0 8px; }
.card .v.pair { font-size: 30px; white-space: nowrap; }
.card .s { font-size: 13px; color: var(--dust); }
.card .s b { color: var(--bone); font-weight: 600; }
/* Phones: highlight cards (standings, the week's highlights) become one swipeable row, so the
   table or games below start on the first screen instead of after a stack of cards. */
@media (max-width: 760px) {
  .cards:not(.player-cards) {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; gap: 10px;
  }
  .cards:not(.player-cards)::-webkit-scrollbar { display: none; }
  .cards:not(.player-cards) > .card { flex: 0 0 min(78%, 280px); scroll-snap-align: start; padding: 14px; }
  .cards:not(.player-cards) .card .v { font-size: 30px; margin: 8px 0 6px; }
}

/* ---------- weekly recap ---------- */
.week-nav { display: flex; gap: 10px; margin: -8px 0 8px; }
.week-btn { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--seam-2); color: var(--bone); }
.week-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.week-btn.off { color: var(--dim); border-color: var(--seam); }
/* charts (lib/charts.js): team A jade, team B ember, the subject gold, averages dashed */
figure.chart { margin: 0 0 6px; padding: 14px 14px 10px; background: var(--stone); border: 1px solid var(--seam); }
figure.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
figure.chart .grid { stroke: var(--seam); stroke-width: 1; }
figure.chart .zero { stroke: var(--seam-2); stroke-width: 1.5; }
figure.chart .tick { font: 500 11px var(--mono); fill: var(--dim); }
figure.chart .side-label { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
figure.chart .s-a { color: var(--jade); fill: var(--jade); stroke: var(--jade); }
figure.chart .s-b { color: var(--ember); fill: var(--ember); stroke: var(--ember); }
figure.chart text.s-a, figure.chart text.s-b { stroke: none; }
figure.chart .area { stroke: none; }
figure.chart .lead-line { fill: none; stroke: var(--bone); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
figure.chart .xp-line { fill: none; stroke: var(--dust); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .55; }
figure.chart .peak { stroke: var(--ink); stroke-width: 2; }
figure.chart .peak-label { font: 600 11px var(--mono); stroke: var(--stone) !important; stroke-width: 4px; paint-order: stroke; }
figure.chart .cross { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
figure.chart path.line { fill: none; stroke-width: 1.6; opacity: .8; transition: opacity .15s, stroke-width .15s; }
figure.chart path.line.s-a { stroke: var(--jade); }
figure.chart path.line.s-b { stroke: var(--ember); }
figure.chart path.line.s-mine { stroke: var(--accent); }
figure.chart path.line.s-ref { stroke: var(--bone); }
figure.chart path.line.s-ref2 { stroke: var(--dust); }
figure.chart path.line.dash { stroke-dasharray: 6 5; opacity: .6; }
figure.chart path.line.strong { stroke-width: 3; opacity: 1; }
figure.chart.focus path.line { opacity: .12; }
/* per-player colours (gold by player): categorical, validated against --stone; the hero name at
   each line's end carries identity too, since five hues can't all be told apart where lines cross */
figure.chart .s-c1, .chart-legend .lg-item.s-c1 { --c: #3987e5; }
figure.chart .s-c2, .chart-legend .lg-item.s-c2 { --c: #d95926; }
figure.chart .s-c3, .chart-legend .lg-item.s-c3 { --c: #199e70; }
figure.chart .s-c4, .chart-legend .lg-item.s-c4 { --c: #c98500; }
figure.chart .s-c5, .chart-legend .lg-item.s-c5 { --c: #d55181; }
/* six to ten: the standings race draws a line per team */
figure.chart .s-c6, .chart-legend .lg-item.s-c6 { --c: #8f7ce6; }
figure.chart .s-c7, .chart-legend .lg-item.s-c7 { --c: #2fb5c4; }
figure.chart .s-c8, .chart-legend .lg-item.s-c8 { --c: #a3b53a; }
figure.chart .s-c9, .chart-legend .lg-item.s-c9 { --c: #e08a5b; }
figure.chart .s-c10, .chart-legend .lg-item.s-c10 { --c: #9b9184; }
figure.chart path.line[class*="s-c"] { stroke: var(--c); stroke-width: 2; }
figure.chart path.line[class*="s-c"].dash { stroke-dasharray: 7 4; opacity: .8; }
.chart-legend .lg-item[class*="s-c"] { color: var(--dust); }
.chart-legend .lg-item[class*="s-c"] i { background: var(--c); }
.chart-legend .lg-item[class*="s-c"].dash i { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
figure.chart .end-label { transition: opacity .15s; }
figure.chart .end-label text { font: 500 11px var(--mono); fill: var(--dust); stroke: none; }
figure.chart .end-frame { fill: var(--stone-2); stroke: var(--c); stroke-width: 2; }
figure.chart .end-swatch { fill: var(--c); }
figure.chart .dash .end-frame { stroke-dasharray: 4 2; }
figure.chart .hover-tag { pointer-events: none; }
figure.chart .hover-tag text { font: 600 11px var(--mono); fill: var(--bone); stroke: var(--ink); stroke-width: 3px; paint-order: stroke; }
figure.chart .hover-tag .end-frame { fill: var(--ink); }
figure.chart .hover-lead { fill: none; stroke: var(--c); stroke-width: 1; opacity: .7; pointer-events: none; }
figure.chart .hover-dot { fill: var(--c); stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
figure.chart:has(.hover-tag) .end-label { opacity: .3; }
figure.chart.focus .end-label { opacity: .25; }
figure.chart.focus .end-label.on { opacity: 1; }
figure.chart .end-label.on text { fill: var(--bone); }
figure.chart.focus path.line.on { opacity: 1; stroke-width: 3; }
.chart-read { font: 500 12px/1.6 var(--mono); color: var(--dust); margin-top: 8px; min-height: 1.6em; }
.chart-read b { color: var(--bone); }
.chart-read b.s-a { color: var(--jade); }
.chart-read b.s-b { color: var(--ember); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font: 500 12px var(--mono); color: var(--dust); }
.chart-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.chart-legend .lg-item i { width: 14px; height: 3px; background: currentColor; }
.chart-legend .lg-item.dash i { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.chart-legend .lg-item.s-a { color: var(--jade); }
.chart-legend .lg-item.s-b { color: var(--ember); }
.chart-legend .lg-item.s-mine { color: var(--accent); }
.chart-legend .lg-item.s-ref { color: var(--bone); }
.chart-legend .lg-item.s-ref2 { color: var(--dust); }
.chart-legend .lg-item:hover { text-decoration: underline; }
.swing-story { margin: 8px 0 0; color: var(--dust); }
figure.chart .obj-stem { stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }
figure.chart .obj-dot { stroke: var(--ink); stroke-width: 1; }
figure.chart .obj { cursor: default; }
figure.chart .obj circle { stroke: var(--ink); stroke-width: 1.5; }
figure.chart .obj text { font: 700 10px var(--mono); fill: var(--ink); stroke: none; }
.obj-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.obj-chip { font: 500 12px var(--mono); padding: 5px 9px; border: 1px solid var(--seam-2); background: var(--stone); }
.obj-chip b { font-weight: 700; margin-right: 4px; }
.obj-chip.s-a { border-left: 3px solid var(--jade); }
.obj-chip.s-b { border-left: 3px solid var(--ember); }
tr.total td { font-weight: 600; color: var(--dust); border-top: 1px solid var(--seam-2); }
.swing-story b { color: var(--bone); }

/* hero names that open the hero page */
a.hero-link, span.hero-link { color: inherit; cursor: pointer; text-decoration: none; }
a.hero-link:hover, span.hero-link:hover, span.hero-link:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a.draft-step { display: block; color: inherit; text-decoration: none; }
a.draft-step:hover .hero-img { filter: brightness(1.25); }

/* hero page */
.hero-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.hero-banner { width: 192px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--seam-2); box-shadow: 0 18px 40px -18px #000; }
.card .v.small { font-size: 26px; line-height: 1.05; }
.card .v.small a { color: inherit; }
/* Teams page: the league leader is the headline, so its card is twice as wide and louder. */
/* Hero page: its Record card gets the same treatment (same width: that grid counts its columns). */
:is(.st-cards, .lead-first) > .card:first-child { border-color: rgba(var(--accent-rgb), .5); box-shadow: inset 3px 0 var(--accent); background: linear-gradient(120deg, rgba(var(--accent-rgb), .1), transparent 60%), var(--stone); }
.st-cards > .card:first-child .v.small { font-size: clamp(30px, 3.4vw, 44px); }
.lead-first > .card:first-child .k { color: var(--accent); }
@media (min-width: 761px) { .st-cards > .card:first-child { grid-column: span 2; } }
@media (max-width: 760px) { .hero-banner { width: 128px; } }

/* player names that open the player page */
a.player-link, span.player-link { color: inherit; cursor: pointer; text-decoration: none; }
a.player-link:hover, span.player-link:hover, span.player-link:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* sortable tables: every header shows it can be sorted */
th.sortable .sort-ico { display: inline-block; margin-left: 5px; font-size: 12px; color: var(--dim); opacity: .7; }
th.sortable:hover .sort-ico { color: var(--accent); opacity: 1; }
th.sorted .sort-ico { color: var(--accent); opacity: 1; }
.sort-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 10px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.sort-bar label { display: flex; align-items: center; gap: 8px; }
.sort-bar select { font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: none; padding: 7px 8px; }
.sort-bar .sort-dir { padding: 7px 12px; font-size: 12px; }
.sort-hint { color: var(--dim); letter-spacing: .06em; }

/* player page */
.hero-cell { display: inline-flex; align-items: center; gap: 8px; }
.hero-cell .hero-img { width: 36px; height: 20px; }
.res { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.res.w { color: var(--jade); }
.res.l { color: var(--ember); }
a.best-game { color: inherit; text-decoration: none; }
a.best-game:hover { border-color: var(--accent); text-decoration: none; }

/* team names that open the team page */
a.team-link, span.team-link { color: inherit; cursor: pointer; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); }
a.team-link:hover, span.team-link:hover, span.team-link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }

/* strength of schedule: one square per series played */
.sos-faced { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.sos-sq {
  display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 3px;
  font: 600 12px/1 var(--mono); letter-spacing: .04em; color: var(--on-accent); text-decoration: none;
}
.sos-sq.w { background: var(--jade); }
.sos-sq.l { background: var(--ember); }
.sos-sq.t { background: var(--gold); }
.sos-sq:hover { outline: 1px solid var(--accent); outline-offset: 1px; text-decoration: none; }
.st-form { flex-wrap: nowrap; }
.st-form .sos-sq { min-width: 26px; }
.sos-sq.e { background: none; outline: 1px dashed var(--seam-2); outline-offset: -1px; }
.sos-sq.bye { background: rgba(var(--jade-rgb), .22); color: var(--jade-soft); outline: 1px dashed rgba(var(--jade-rgb), .7); outline-offset: -1px; font-size: 10px; cursor: default; }
.sos-sq.bye:hover { outline: 1px dashed rgba(var(--jade-rgb), .7); outline-offset: -1px; }

/* standings: highlight cards, tabs, model rating, up-next odds */
.st-cards { margin-bottom: 26px; }
.st-rating { display: inline-flex; align-items: center; gap: 8px; }
.st-track { width: 48px; height: 6px; background: var(--seam); position: relative; }
.st-track i { position: absolute; top: 0; bottom: 0; }
.st-track i.up { left: 50%; background: var(--jade); }
.st-track i.down { right: 50%; background: var(--ember); }
.st-next .fx-score { min-width: min(300px, 100%); }
.st-next .fx-score .meta a { color: var(--accent); }
.st-odds { display: flex; height: 22px; margin: 8px 0; font: 600 12px/22px var(--mono); color: var(--on-accent); white-space: nowrap; }
.st-odds span { overflow: hidden; text-align: center; min-width: 0; }
.st-odds .h { background: var(--jade); }
.st-odds .t { background: var(--gold); }
.st-odds .a { background: var(--ember); }
@media (max-width: 760px) { .st-next { grid-template-columns: 1fr; text-align: center; } .st-next .fx-team { text-align: center; } }

/* week picker: every week, top right of the Weekly page */
.week-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 28px; }
.week-top .page-head { margin-bottom: 0; }
.week-pick { max-width: min(100%, 760px); }
.week-pick-label { font: 600 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; text-align: right; }
.week-chips { display: grid; grid-template-columns: repeat(var(--week-cols, 8), minmax(72px, 1fr)); gap: 6px; }
.week-chip {
  display: grid; grid-template-rows: auto auto; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline;
  padding: 7px 10px 6px; min-width: 64px; border: 1px solid var(--seam-2); color: var(--bone); background: var(--stone);
  transition: border-color .15s, color .15s, transform .15s;
}
.week-chip .wn { grid-row: span 2; font: 800 24px/1 var(--display); }
.week-chip .wd { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.week-chip .wc { font: 400 12px/1.2 var(--mono); color: var(--dim); }
.week-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.week-chip.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.week-chip.on .wd, .week-chip.on .wc { color: var(--on-accent); }
@media (max-width: 760px) {
  .week-pick { max-width: 100%; }
  .week-pick-label { text-align: left; }
  .week-chips { display: flex; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .week-chip { flex: none; }
}
.hero-img { width: 48px; height: 27px; object-fit: cover; display: inline-block; vertical-align: middle; background: var(--stone-2); }
.hero-img.missing { display: inline-grid; place-items: center; font: 600 12px var(--mono); color: var(--dust); }
.card.hl { overflow: hidden; }
.card.hl .card-hero { position: absolute; right: -8px; bottom: -6px; width: 120px; height: 68px; opacity: .22; filter: saturate(.6); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.series { margin-top: 26px; animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
/* Content page: the open series is the page's headline. */
.series-head { font-size: clamp(28px, 3vw, 40px); margin-top: 0; }
/* Weekly page series picker: a grid of match cards, one series shown below at a time. */
h2 .h-note { font: 400 12px/1 var(--mono); letter-spacing: .12em; color: var(--dim); }
.sp-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.sp-tabs button {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 12px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--seam-2); background: var(--stone); color: var(--dust); clip-path: none;
  font: 600 13px/1.25 var(--body); text-transform: none; letter-spacing: 0; transition: border-color .15s, color .15s;
}
.sp-tabs .sp-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tabs .sp-team.w { color: var(--bone); }
.sp-tabs .sp-score { font: 800 18px/1 var(--display); color: var(--dim); text-align: right; }
.sp-tabs .sp-score.w { color: var(--bone); }
.sp-tabs .sp-sub { grid-column: 1 / -1; margin-top: 2px; font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sp-tabs button:hover { border-color: var(--accent); }
.sp-tabs button[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); background: var(--stone-2); }
.sp-tabs button[aria-selected="true"] .sp-score.w { color: var(--accent); }
.sp-tabs button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
/* All divisions: a series chip in its division's colour (--lc from lib/divisions.js). */
.sp-tabs button[data-lg] { border-left: 3px solid var(--lc); }
.sp-tabs button[data-lg] .sp-sub { color: var(--lc); }
.sp-tabs button[data-lg]:hover, .sp-tabs button[data-lg][aria-selected="true"] { border-color: var(--lc); }
.sp-tabs button[data-lg][aria-selected="true"] { box-shadow: inset 0 -2px var(--lc); }
.sp-next {
  display: block; margin: 14px 0 0 auto; padding: 10px 14px; cursor: pointer; clip-path: none;
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: none; border: 1px solid var(--seam-2);
}
.sp-next:hover { border-color: var(--accent); }
@media (max-width: 760px) {
  .sp-tabs { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .sp-tabs button { flex: none; width: 230px; }
}
.series-head .series-score { color: var(--accent); margin: 0 6px; }
.game-panel { background: var(--stone); border: 1px solid var(--seam); padding: 16px 18px; margin-top: 10px; }
.gp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 12px; }
.gp-label { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.gp-result { font: 800 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.gp-result b { font-weight: 800; color: var(--dust); }
.gp-result b.w { color: var(--bone); }
.gp-score { color: var(--accent); margin: 0 4px; }
.gp-meta { font: 400 12px/1 var(--mono); color: var(--dust); margin-left: auto; }
.draft { display: grid; gap: 6px; }
.draft-bans, .draft-picks { display: flex; gap: 4px; }
.draft-bans .draft-step, .draft-picks .draft-step { flex: 1 1 0; min-width: 0; }
.draft-gap { flex: 0 0 14px; }
.draft-step { position: relative; }
.draft-step .hero-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.draft-step.pick .hero-img { outline: 2px solid var(--side); outline-offset: -2px; }
.draft-step.ban .hero-img { filter: grayscale(1) brightness(.8); }
.draft-rows { display: grid; gap: 6px; }
.draft-rows.draft-bottom { margin-top: 12px; }
.draft-step.side-a { --side: var(--jade); }
.draft-step.side-b { --side: var(--ember); }
.draft-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; text-align: center; font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ember); background: #000; pointer-events: none; }
.draft-step.pick .draft-tag { color: var(--jade); }
.draft-n { position: absolute; left: 2px; top: 1px; font: 600 10px/1 var(--mono); color: var(--bone); text-shadow: 0 1px 2px #000; }
.draft-step.side-a .draft-n { color: var(--jade); }
.draft-step.side-b .draft-n { color: var(--ember-soft); }
.draft-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 12px; font: 400 12px/1 var(--mono); color: var(--dust); text-transform: uppercase; letter-spacing: .1em; }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.lg.a::before { background: var(--jade); }
.lg.b::before { background: var(--ember); }
.lg.ban::before { background: #333; box-shadow: inset 0 0 0 1px var(--seam-2); }
.lg.pick::before { background: transparent; box-shadow: inset 0 0 0 2px var(--dust); }
.draft-none { font: 400 12px/1.4 var(--mono); color: var(--dim); margin: 0 0 12px; }
.hist-drafts { margin: -2px 0 8px; padding: 0 14px 2px; border: 1px solid var(--seam); border-top: 0; background: var(--stone); }
.sd-game { border-top: 1px solid var(--seam); padding-top: 10px; }

/* ---------- draft model (parts/cmdraft.js, pages/drafter.js) ---------- */
.cm-summary { font: 400 13px/1.6 var(--mono); color: var(--dust); margin: 0 0 12px; }
.cm-summary b { color: var(--bone); font-weight: 600; }
.cm-tab .gm-h3 { margin-top: 22px; }
.cm-side { display: inline-block; padding-left: 8px; border-left: 3px solid var(--side, var(--seam-2)); }
.cm-side.s-a { --side: var(--jade); }
.cm-side.s-b { --side: var(--ember); }
.cm-steps tr.cm-ban td { color: var(--dust); }
.cm-steps tr.cm-ban .cm-hero .hero-img { filter: grayscale(1) brightness(.55); }
.cm-hero .hero-img, .cm-alt .hero-img { width: 40px; height: 22px; }
.cm-alts { display: flex; gap: 6px; }
.cm-alt { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font: 400 12px/1 var(--mono); color: var(--dust); }
.cm-alt.is-chosen .hero-img { outline: 2px solid var(--gold); outline-offset: -2px; }
.cm-good { color: var(--jade); }
.cm-off { color: var(--ember-soft); }
.cm-up { color: var(--jade); }
.cm-down { color: var(--ember-soft); }
.dchart { margin: 0 0 12px; }
.td-series { margin: 34px 0 0; }
.td-shead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--seam); font: 400 15px/1.2 var(--body); color: var(--dust); }
.td-shead b { font: 700 20px/1.1 var(--display); color: var(--bone); letter-spacing: .02em; }
.td-sdate { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.td-sscore { margin-left: auto; font: 800 20px/1 var(--display); color: var(--bone); }
.td-sscore.w { color: var(--jade); }
.td-sscore.l { color: var(--ember-soft); }
.td-game { margin: 0 0 16px; padding: 16px 18px 6px; background: var(--stone-2); border: 1px solid var(--seam); }
.td-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; font: 400 12px/1.4 var(--mono); color: var(--dust); }
.td-head a { margin-left: auto; }
/* A result-coloured edge and wash on each game, so a list of them reads at a glance. */
.td-game { position: relative; --res: var(--seam-2); border-left: 3px solid var(--res); background: linear-gradient(90deg, color-mix(in srgb, var(--res) 9%, var(--stone-2)) 0, var(--stone-2) 340px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(var(--bone-rgb), .03); transition: border-color .15s, box-shadow .15s; }
.td-game.won { --res: var(--jade); }
.td-game.lost { --res: var(--ember); }
.td-game:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(var(--bone-rgb), .05); }
.td-head .gp-label { font: 800 16px/1 var(--display); letter-spacing: .06em; color: var(--bone); }
.td-head a { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 6px 10px; border: 1px solid var(--seam-2); text-decoration: none; transition: border-color .15s, background .15s; }
.td-head a:hover { border-color: var(--accent); background: rgba(var(--bone-rgb), .04); }
.td-tile { position: relative; overflow: hidden; border-top: 2px solid var(--gold); }
.td-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0, rgba(var(--bone-rgb), .05), transparent 60%); pointer-events: none; }
.td-track { border-radius: 2px; overflow: hidden; }
.td-track i { background: linear-gradient(90deg, var(--jade), color-mix(in srgb, var(--jade) 70%, white)); transition: width .4s ease; }
.td-head b { color: var(--bone); }
.td-w { color: var(--jade); font-weight: 600; }
.td-l { color: var(--ember-soft); font-weight: 600; }
.td-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 4px; }
.td-tile { background: var(--stone-2); border: 1px solid var(--seam); padding: 10px 12px; display: grid; gap: 3px; }
.td-tile small { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.td-tile b { font: 800 26px/1.05 var(--display); color: var(--bone); }
.td-tile span { font: 400 12px/1.4 var(--mono); color: var(--dust); }
.td-chip { font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; }
.td-chip.w { background: var(--jade); color: var(--ink); }
.td-chip.l { background: var(--ember); color: var(--ink); }
.td-call { font: 400 12px/1.3 var(--mono); }
.td-call.right { color: var(--jade); }
.td-call.wrong { color: var(--ember-soft); }
.td-odds { display: grid; gap: 8px; margin: 0 0 18px; max-width: 760px; }
.td-orow { display: grid; grid-template-columns: 136px minmax(110px, auto) 1fr minmax(110px, auto); align-items: center; gap: 10px; font: 400 12px/1.2 var(--mono); color: var(--dust); }
.td-orow small { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.td-us { color: var(--jade); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-them { color: var(--ember-soft); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-orow b { font-weight: 700; }
/* Draft model rows: only the team name shortens, so the % always shows. */
.td-orow:has(.td-fit) { grid-template-columns: 136px minmax(0, 1fr) minmax(60px, 1fr) minmax(0, 1fr); }
.td-fit { display: flex; align-items: baseline; gap: .6ch; min-width: 0; white-space: normal; }
.td-them.td-fit { justify-content: flex-end; }
.td-fit b { flex: none; }
.td-nm { min-width: 0; overflow-wrap: anywhere; }
.td-track { position: relative; height: 10px; background: var(--ember-deep); }
.td-track i { position: absolute; inset: 0 auto 0 0; background: var(--jade); }
.td-track em { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--bone); opacity: .5; }
.pcm-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4px 10px; font: 400 12px/1.2 var(--mono); color: var(--dust); }
.pcm-line .td-track { grid-column: 1 / -1; order: 3; }
.pcm-line .td-us, .pcm-line .td-them { align-self: end; }
.pcm-line small { grid-column: 1 / -1; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pcm-dr summary { cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 4px 0; }
.pcm-dr .pd-toggle { margin: 8px 0; }
.pcm-lineups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pcm-team { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-left: 8px; border-left: 3px solid var(--side); margin-bottom: 6px; }
.pcm-team.s-a { --side: var(--jade); color: var(--jade); }
.pcm-team.s-b { --side: var(--ember); color: var(--ember-soft); }
.pcm-picks { display: grid; gap: 4px; }
.pcm-pick { display: flex; align-items: center; gap: 8px; font: 600 12px/1.2 var(--body); color: var(--bone); }
.pcm-pick .hero-img { width: 40px; height: 22px; }
.pcm-pick small { display: block; font: 400 12px/1.2 var(--mono); color: var(--dust); }
.pcm-bans { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.pcm-ban { width: 32px; height: 18px; filter: grayscale(1) brightness(.55); }
.td-delta { margin-top: 2px; font: 400 12px/1.3 var(--mono); color: var(--dust); }
@media (max-width: 760px) { .td-orow { grid-template-columns: 1fr 1fr; } .td-orow small, .td-track { grid-column: 1 / -1; } .td-track { order: 3; } .td-them { text-align: right; } }
/* Team page, side and pick order: same columns on both rows so the bars line up. */
.sp-odds .td-orow { grid-template-columns: 110px 190px 1fr 190px; }
@media (max-width: 760px) { .sp-odds .td-orow { grid-template-columns: 1fr 1fr; } }
.dchart svg { width: 100%; height: auto; display: block; font-family: var(--mono); }
.dchart .dc-x { fill: rgba(var(--jade-rgb), .07); }
.dchart .dc-y { fill: rgba(var(--ember-rgb), .07); }
.dchart .dc-ban-col { fill: rgba(0, 0, 0, .18); }
.dchart .dc-now { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.dchart .dc-mid { stroke: var(--seam-2); stroke-width: 1; }
.dchart .dc-tick { fill: var(--dim); font-size: 12px; }
.dchart .dc-name { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dchart .dc-name-x { fill: var(--jade); }
.dchart .dc-name-y { fill: var(--ember-soft); }
.dchart .dc-line { fill: none; stroke: var(--gold); stroke-width: 2; }
.dchart .dc-dot { fill: var(--gold); }
.dchart .dc-frame { fill: var(--stone); stroke-width: 2; }
.dchart .dc-sx .dc-frame { stroke: var(--jade); }
.dchart .dc-sy .dc-frame { stroke: var(--ember); }
.dchart .dc-step.ban image { filter: grayscale(1) brightness(.55); }
.dchart .dc-slash { stroke: var(--ember); stroke-width: 2.5; stroke-linecap: round; }
.dchart .dc-pill rect { fill: var(--stone-2); stroke-width: 1; }
.dchart .dc-pill text { font-size: 13px; font-weight: 600; }
.dchart .dc-pill.good rect { stroke: var(--jade); }
.dchart .dc-pill.good text { fill: var(--jade); }
.dchart .dc-pill.bad rect { stroke: var(--ember); }
.dchart .dc-pill.bad text { fill: var(--ember-soft); }
.dchart .dc-hit { fill: transparent; }
.dchart .dc-next { fill: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.dchart .dc-cell rect { fill: var(--stone-2); stroke-width: 1.5; }
.dchart .dc-cell.dc-sx rect { stroke: var(--jade); }
.dchart .dc-cell.dc-sy rect { stroke: var(--ember); }
.dchart .dc-cell.ban rect { stroke-dasharray: 3 2; }
.dchart .dc-cell text { font-size: 11px; letter-spacing: .06em; }
.dchart .dc-cell .dc-cn { font-weight: 600; }
.dchart .dc-cell.dc-sx text { fill: var(--jade); }
.dchart .dc-cell.dc-sy text { fill: var(--ember-soft); }
.dchart .dc-cell.done { opacity: .45; }
.dchart .dc-cell.now rect { fill: var(--accent); stroke: var(--accent); stroke-dasharray: none; }
.dchart .dc-cell.now text { fill: var(--on-accent); }
.dchart .dc-hit { cursor: pointer; }
.dchart .dc-hit:hover { fill: rgba(var(--bone-rgb), .05); }
.dx-setup { margin: 0 0 18px; }
.dx-modes { margin-bottom: 12px; }
.dx-mode, .dx-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 10px; }
.dx-mode .table-note { flex-basis: 100%; margin: 0; }
.dx-mode[hidden] { display: none; }
.dx-setup label { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.dx-setup select { background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 8px 10px; font: 14px var(--body); max-width: min(100%, 520px); text-transform: none; letter-spacing: 0; }
.dx-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 6px 0 14px; font: 600 13px/1.2 var(--mono); }
.dx-bar b { font: 800 22px/1 var(--display); }
.dx-bar-x b { color: var(--jade); }
.dx-bar-y { text-align: right; }
.dx-bar-y b { color: var(--ember); }
.dx-bar-track { height: 10px; background: var(--ember-deep); position: relative; }
.dx-bar-track i { position: absolute; inset: 0 auto 0 0; background: var(--jade); transition: width .25s; }
.dx-steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 4px; }
.dx-slot { position: relative; aspect-ratio: 16 / 9; background: var(--stone-2); border-bottom: 2px solid var(--side); display: grid; place-items: center; }
.dx-slot.s-a { --side: var(--jade); }
.dx-slot.s-b { --side: var(--ember); }
.dx-slot .hero-img { width: 100%; height: 100%; }
.dx-slot.ban.filled .hero-img { filter: grayscale(1) brightness(.5); }
.dx-slot.filled { cursor: pointer; }
.dx-slot.filled:hover { outline: 1px solid var(--dust); }
.dx-slot.now { outline: 2px solid var(--accent); outline-offset: 1px; }
.dx-n { position: absolute; left: 2px; top: 1px; z-index: 1; font: 600 10px/1 var(--mono); color: var(--bone); text-shadow: 0 1px 2px #000; }
.dx-empty { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dx-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 16px; font-size: 14px; color: var(--dust); }
.dx-now b { color: var(--bone); }
.dx-next { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 5px 8px; }
.dx-then { font: 400 12px/1.4 var(--mono); color: var(--dim); }
.dx-team { display: grid; grid-template-columns: minmax(140px, 200px) 5fr 4fr; gap: 6px 14px; align-items: center; padding: 8px 0 8px 10px; border-left: 3px solid var(--side); }
.dx-team.s-a { --side: var(--jade); }
.dx-team.s-b { --side: var(--ember); }
.dx-team + .dx-team { margin-top: 6px; }
.dx-tname b { display: block; font: 800 16px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.dx-tname small { font: 400 12px/1.4 var(--mono); color: var(--dust); }
.dx-picks, .dx-bans { display: grid; gap: 5px; }
.dx-picks { grid-template-columns: repeat(5, 1fr); }
.dx-bans { grid-template-columns: repeat(7, 1fr); }
.dx-bslot { position: relative; padding: 0; clip-path: none; background: var(--stone-2); border: 1px solid var(--seam-2); aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: visible; text-transform: none; letter-spacing: 0; }
.dx-bslot.ban { border-style: dashed; }
.dx-bslot:disabled { opacity: 1; cursor: default; }
.dx-bslot .hero-img { width: 100%; height: 100%; }
.dx-bslot.ban.filled .hero-img { filter: grayscale(1) brightness(.5); }
.dx-bslot.filled { border-color: var(--side); border-style: solid; cursor: pointer; }
.dx-bslot.filled:hover:not(:disabled) { outline: 1px solid var(--bone); background: var(--stone-2); }
.dx-bslot.now { border: 2px solid var(--accent); background: rgba(232, 182, 76, .12); }
.dx-bn { position: absolute; left: 3px; top: 2px; z-index: 1; font: 600 10px/1 var(--mono); color: var(--bone); text-shadow: 0 1px 2px #000; }
.dx-bempty { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dx-bslot.now .dx-bempty { color: var(--accent); }
.dx-bslot small { position: absolute; left: 0; right: 0; bottom: -15px; font: 400 12px/1.2 var(--mono); color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-picks { padding-bottom: 14px; }
.dx-board-wrap { margin: 0 0 14px; }
@media (max-width: 760px) { .dx-team { grid-template-columns: 1fr; } }
.dx-then .s-a { color: var(--jade); }
.dx-then .s-b { color: var(--ember-soft); }
.dx-real { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--mono); }
.dx-real .hero-img { width: 40px; height: 22px; }
.dx-btns { margin-left: auto; display: flex; gap: 8px; }
.dx-btns button { padding: 8px 12px; font-size: 12px; }
.dx-cols { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; align-items: start; }
.dx-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.dx-pickbtn { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 10px 6px 6px; text-align: left; text-transform: none; letter-spacing: 0; clip-path: none; }
.dx-pickbtn .hero-img { grid-row: span 2; }
.dx-hn { font: 600 13px/1.2 var(--body); color: var(--bone); }
.dx-pickbtn b { grid-row: span 2; font: 700 15px/1 var(--mono); color: var(--accent); }
.dx-pickbtn small { font: 400 12px/1.2 var(--mono); color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-heroes input[type=search] { width: 100%; max-width: 280px; margin: 0 0 8px; background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 8px 10px; font: 14px var(--body); }
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.dx-tile { padding: 0; clip-path: none; border: 0; background: none; display: grid; position: relative; }
.dx-tile .hero-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.dx-tile small { position: absolute; right: 2px; bottom: 1px; font: 600 10px/1 var(--mono); color: var(--bone); text-shadow: 0 1px 2px #000, 0 0 4px #000; text-transform: none; letter-spacing: 0; }
.dx-tile:hover:not(:disabled) { background: none; outline: 2px solid var(--accent); }
.dx-tile.gone { opacity: .2; }
.dx-cards { margin: 4px 0 10px; }
.dx-card.s-a .v { color: var(--jade); }
.dx-card.s-b .v { color: var(--ember); }
.dx-card.s-a { border-top: 2px solid var(--jade); }
.dx-card.s-b { border-top: 2px solid var(--ember); }
.dx-meter { display: block; height: 8px; margin: 0 0 6px; }
#dx-board h2 { margin-top: 26px; }
.dx-sugg h2, .dx-heroes h2 { margin-top: 0; }
/* Hero grid by primary attribute, in Dota's colours. */
.dx-attr { --attr: var(--dust); margin: 0 0 12px; }
.dx-attr.attr-str { --attr: #e2523a; }
.dx-attr.attr-agi { --attr: #37c95c; }
.dx-attr.attr-int { --attr: #3fb7e8; }
.dx-attr.attr-all { --attr: var(--gold); }
.dx-attr[hidden] { display: none; }
.dx-attr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--attr); }
.dx-attr-h i { width: 12px; height: 12px; border-radius: 50%; background: var(--attr); box-shadow: 0 0 8px var(--attr); }
.dx-attr-h small { margin-left: auto; font-weight: 400; letter-spacing: .06em; color: var(--dim); }
.dx-attr .dx-tile:hover:not(:disabled) { outline-color: var(--attr); }
.dx-attr .dx-grid { padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--attr) 45%, transparent); }
.dx-tile.off { opacity: .45; filter: grayscale(.8); }
.dx-pos { font-style: normal; font-weight: 600; color: var(--accent); }
.dx-for { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; }
.dx-for-l { flex-basis: 100%; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); margin-bottom: 2px; }
.dx-forbtn { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; padding: 5px 8px; clip-path: none; text-transform: none; letter-spacing: 0; text-align: left; max-width: 100%; }
.dx-forbtn .hero-img { grid-row: span 2; width: 32px; height: 18px; }
.dx-forbtn span { font: 600 12px/1.2 var(--body); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.dx-forbtn small { font: 400 12px/1.2 var(--mono); color: var(--dust); }
.dx-forbtn.on { border-color: var(--accent); background: rgba(232, 182, 76, .14); }
.dx-forbtn:disabled { opacity: .5; }
.dx-forpos { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.dx-forpos select { background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 5px 6px; font: 13px var(--body); }
.dx-rolefilter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 8px; font: 600 12px/1.3 var(--mono); color: var(--bone); cursor: pointer; }
.dx-rolefilter small { flex-basis: 100%; font-weight: 400; color: var(--dust); }
.dx-tile[hidden] { display: none; }
.dx-rosters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-top: 22px; }
.dx-roster .gm-h3 small { letter-spacing: .08em; }
.dx-five { margin-top: 8px; font: 400 12px/1.4 var(--mono); color: var(--dust); }
.dx-five summary { cursor: pointer; }
.dx-five label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 14px 0 0; color: var(--bone); }
@media (max-width: 760px) { .dx-cols { grid-template-columns: 1fr; } .dx-btns { margin-left: 0; } }
.sd-game-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.sd-win { font: 600 12px/1 var(--mono); color: var(--bone); }
.lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lineup { list-style: none; margin: 0; padding: 0; }
.lineup li { display: grid; grid-template-columns: 53px 1fr auto auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--seam); font-size: 13px; }
.lineup li:last-child { border-bottom: 0; }
.lineup .hero-img { width: 53px; height: 30px; }
.lineup .lu-head { display: block; font: 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 0 0 8px; }
.lineup.a .lu-head { color: var(--jade); }
.lineup.b .lu-head { color: var(--ember); }
.lu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-kda, .lu-nw { font: 400 12px var(--mono); color: var(--dust); }
.lu-nw { color: var(--gold); min-width: 52px; text-align: right; }
.lineup li.mvp { background: linear-gradient(90deg, rgba(var(--accent-rgb), .10), transparent 70%); }
.mvp-tag { font: 600 10px/1 var(--mono); letter-spacing: .14em; padding: 3px 5px; background: var(--accent); color: var(--on-accent); vertical-align: 1px; }
@media (max-width: 760px) {
  .lineups { grid-template-columns: 1fr; }
  .gp-meta { margin-left: 0; }
}

/* ---------- teams ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.team-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px 12px; padding: 16px 18px; color: var(--bone);
  background: var(--stone); border: 1px solid var(--seam); border-left: 3px solid var(--accent);
  transition: transform .12s, border-color .12s;
}
.team-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--seam-2); border-left-color: var(--accent); }
.tc-rank { font: 600 12px/1 var(--mono); color: var(--dim); }
.tc-name { font: 800 20px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; min-width: 0; overflow-wrap: anywhere; }
.tc-rec { font: 900 26px/1 var(--display); color: var(--dust); }
.tc-rec b { color: var(--jade); font-weight: 900; }
.tc-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 400 12px/1 var(--mono); color: var(--dim); }
.tc-roster { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--dust); padding-top: 8px; border-top: 1px solid var(--seam); }
.tc-roster b { color: var(--bone); font-weight: 600; }
.tc-roster .sep { color: var(--dim); }
.tc-heroes { grid-column: 1 / -1; display: flex; gap: 4px; }
.tc-heroes .hero-img { width: 40px; height: 22px; }
.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.form i { font: 700 12px/1 var(--mono); font-style: normal; width: 18px; height: 18px; display: grid; place-items: center; color: var(--on-accent); }
.form i.w { background: var(--jade); }
.form i.l { background: var(--ember); }
.card .v .form { gap: 5px; }
.card .v .form i { width: 30px; height: 30px; font-size: 13px; }
.team-picker { display: flex; align-items: center; gap: 10px; margin: -12px 0 22px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.team-picker select { background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 9px 10px; font: 14px var(--body); max-width: 100%; }
.pp-head .team-picker { margin: 0 0 0 auto; letter-spacing: 0; text-transform: none; }
.pp-head .team-picker select { padding: 6px 8px; font-size: 13px; max-width: 260px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; letter-spacing: inherit; text-transform: none; }
button.link-btn:hover:not(:disabled) { background: none; text-decoration: underline; }
.team-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.team-cols > section { min-width: 0; }
.history { display: grid; gap: 6px; }
.hist-row {
  display: grid; grid-template-columns: 34px 1fr auto auto auto; gap: 14px; align-items: center;
  padding: 10px 14px; background: var(--stone); border: 1px solid var(--seam); color: var(--bone);
  animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms);
}
a.hist-row:hover { text-decoration: none; border-color: var(--seam-2); }
.hist-res { font: 900 20px/1 var(--display); text-align: center; }
.hist-row.win .hist-res { color: var(--jade); }
.hist-row.loss .hist-res { color: var(--ember); }
.hist-row.tie .hist-res { color: var(--gold); }
.hist-row.upcoming { opacity: .7; }
.hist-row.upcoming .hist-res { color: var(--dust); font-size: 14px; }
.hist-vs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dust); }
.hist-vs b { color: var(--bone); font-weight: 600; }
.hist-score { font: 600 14px var(--mono); color: var(--accent); }
.hist-games { display: flex; gap: 6px; font: 400 12px var(--mono); color: var(--dust); }
.hist-games a { padding: 3px 6px; border: 1px solid var(--seam-2); }
.hist-games a.w { color: var(--jade); }
.hist-games a.l { color: var(--ember-soft); }
.hist-date { font: 400 12px var(--mono); color: var(--dim); min-width: 52px; text-align: right; }
.roster { list-style: none; margin: 0; padding: 0; background: var(--stone); border: 1px solid var(--seam); }
.roster li { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--seam); }
.roster li:last-child { border-bottom: 0; }
.roster a { color: var(--bone); font-weight: 600; }
.roster .tag { margin-left: auto; }
.cap { font: 600 10px/1 var(--mono); background: var(--accent); color: var(--on-accent); padding: 3px 5px; }
.rs-pos { font: 700 12px/1 var(--mono); color: var(--dust); width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--seam-2); flex: none; }
.roster li.rs-more { display: block; font-size: 13px; color: var(--dust); }
.roster li.rs-more a { font-weight: 400; }
.rc-tier { font: 900 14px/1 var(--display); width: 22px; height: 22px; display: grid; place-items: center; color: var(--on-accent); background: var(--tc, var(--dust)); flex: none; }

/* Roster cards (team page, Roster tab) */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rc {
  display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--stone); border: 1px solid var(--seam); border-top: 3px solid var(--accent);
  animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms);
}
.rc.idle { border-top-color: var(--seam-2); }
.rc-top { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.rc-pos { font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); margin-right: auto; }
.rc-name { font: 800 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.rc-name a { color: var(--bone); }
.rc-rank { font: 400 12px/1 var(--mono); color: var(--dim); }
.rc-line { font-size: 13px; color: var(--dust); padding-top: 8px; border-top: 1px solid var(--seam); }
.rc-line b { color: var(--bone); font-weight: 600; }
.rc-heroes { display: flex; gap: 4px; flex-wrap: wrap; }
.rc-heroes a:hover .hero-img { filter: brightness(1.25); outline: 1px solid var(--accent); }

/* Head to head (team page overview) */
.h2h { display: grid; gap: 4px; }
.h2h-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 56px 56px; gap: 14px; align-items: center;
  padding: 8px 14px; background: var(--stone); border: 1px solid var(--seam); border-left: 3px solid var(--seam-2);
  animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms);
}
.h2h-row.up { border-left-color: var(--jade); }
.h2h-row.down { border-left-color: var(--ember); }
.h2h-row.even { border-left-color: var(--gold); }
.h2h-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.h2h-name a { color: var(--bone); }
.h2h-bar { height: 6px; background: var(--ember-deep); }
.h2h-bar i { display: block; height: 100%; background: var(--jade); }
.h2h-rec { font: 600 13px var(--mono); color: var(--dust); text-align: right; }
.h2h-rec b { color: var(--bone); }
.h2h-last { font: 400 12px var(--mono); color: var(--dim); text-align: right; }
@media (max-width: 520px) {
  .h2h-row { grid-template-columns: minmax(0, 1fr) 50px; }
  .h2h-bar { grid-column: 1 / -1; grid-row: 2; }
  .h2h-last { display: none; }
  .pp-head .team-picker { margin-left: 0; width: 100%; }
  .pp-head .team-picker select { max-width: 100%; width: 100%; }
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--stone); border: 1px solid var(--seam); font-size: 13px; }
.hero-chip b { font: 600 12px var(--mono); color: var(--accent); margin-left: 4px; }
.priv { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.how-steps { margin: 0 0 16px; padding-left: 22px; color: var(--dust); font-size: 14px; max-width: 80ch; }
.how-steps li { margin: 0 0 6px; padding-left: 4px; }
.how-steps b { color: var(--bone); }
.how-steps code { font: 13px var(--mono); color: var(--accent); }
.private-hint { margin-top: 14px; }
.fields select { background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 8px; font: 14px var(--body); text-transform: none; letter-spacing: 0; }
.private-toggle { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; background: var(--stone); border: 1px solid var(--seam-2); cursor: pointer; }
.private-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.private-toggle span { color: var(--dust); font-size: 14px; }
.series-pick { display: grid; gap: 6px; margin-top: 14px; padding: 14px 16px; background: var(--stone); border: 1px solid var(--seam-2); font-weight: 600; }
.series-pick select { max-width: 100%; }
.series-pick .muted { font-size: 13px; font-weight: 400; }
.admin-login { margin-top: 18px; font-size: 13px; color: var(--dust); }
.admin-login summary { cursor: pointer; width: max-content; }
.admin-login form { margin-top: 8px; flex-wrap: wrap; }
.admin-login input { min-width: 0; flex: 1 1 180px; }
.private-toggle b { color: var(--bone); }
button.danger { color: var(--err); border-color: rgba(255, 107, 91, .5); }
button.danger:hover:not(:disabled) { background: var(--err-bg); border-color: var(--err); }
@media (max-width: 1000px) {
  .team-cols { grid-template-columns: 1fr; }
  .hist-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 12px; }
  .hist-games { grid-column: 2; flex-wrap: wrap; }
  .hist-date { grid-column: 3; }
}

/* ---------- tier list ---------- */
.segs { margin-bottom: 18px; gap: 0; }
button.seg { clip-path: none; margin-right: -1px; padding: 10px 16px; }
button.seg.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tier-board { display: grid; gap: 8px; }
.tier-band { display: grid; grid-template-columns: 92px minmax(0, 1fr); background: var(--stone); border: 1px solid var(--seam); min-height: 108px; }
.tier-letter {
  display: grid; place-items: center; font: 900 64px/1 var(--display); color: var(--on-accent);
  background: var(--tc); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.t-S { --tc: var(--gold); }
.t-A { --tc: var(--jade); }
.t-B { --tc: #b9c6c0; }
.t-C { --tc: #8a8074; }
.t-D { --tc: var(--ember); }
.tier-band.t-S { border-color: rgba(232, 182, 76, .45); box-shadow: inset 0 0 60px rgba(232, 182, 76, .06); }
.tier-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 12px 18px; align-content: flex-start; }
.tier-empty { color: var(--dim); align-self: center; font: 12px var(--mono); }
/* An empty tier is a slim line, not a full-height row. */
.tier-band:has(.tier-empty) { min-height: 0; }
.tier-band:has(.tier-empty) .tier-letter { font-size: 28px; padding: 6px 0; }
.tier-band:has(.tier-empty) .tier-chips { padding-top: 8px; padding-bottom: 8px; }
.chip {
  width: 188px; padding: 10px 12px; background: var(--stone-2); border: 1px solid var(--seam-2);
  border-left: 3px solid var(--tc); transition: transform .12s, border-color .12s; cursor: default;
}
.tier-band .chip { border-left-color: var(--tc); }
.chip:hover { transform: translateY(-2px); border-color: var(--dust); border-left-color: var(--tc); }
.chip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chip-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-name a { color: var(--bone); }
.chip-rating { font: 900 22px/1 var(--display); color: var(--tc); }
.chip-meta { font-size: 12px; color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 3px 0 7px; min-height: 14px; }
.chip-foot { display: flex; gap: 8px; font: 400 12px/1 var(--mono); color: var(--dust); letter-spacing: .04em; }
.role-tag { text-transform: uppercase; letter-spacing: .1em; color: var(--bone); white-space: nowrap; }
.chip.support .role-tag { color: var(--jade); }
.chip.core .role-tag { color: var(--accent); }
/* Heroes tab: sub-tabs and the hero tier lists */
.hpow .chip-name a { color: var(--bone); }
.hchip-bar { flex-wrap: wrap; align-items: center; gap: 8px 0; }
.hchip-bar .min-bar { margin: 0 0 0 18px; }
.chip.hchip { display: flex; gap: 10px; width: 236px; }
.hchip-img { flex: none; align-self: center; }
.hchip-img .hero-img { width: 54px; height: 30px; display: block; }
.hchip-img:hover .hero-img { filter: brightness(1.25); }
.hchip-body { min-width: 0; flex: 1; }
.hchip .chip-foot { white-space: nowrap; }
.hchip .chip-meta a { color: var(--dust); }
.hchip .chip-meta a:hover { color: var(--bone); }
button.hchip-more { align-self: center; clip-path: none; padding: 8px 14px; }
.chip.hchip { flex-wrap: wrap; cursor: pointer; }
.chip.hchip > .chip-caret { flex-basis: calc(100% + 24px); }
/* Open: the card's head stays one row; the breakdown takes the full width under it (the
   player tier list's grid layout expects its own children, so it's switched off here). */
.chip.hchip.open { display: flex; }
.chip.hchip.open > .hchip-body { flex: 1; }
.chip.hchip.open > .bd, .chip.hchip.open > .hbd-lead { flex-basis: 100%; min-width: 0; }
.chip.hchip.open > .bd { display: grid; }
.chip.hchip.open .bd-left, .chip.hchip.open .bd-right { grid-row: auto; grid-column: auto; margin-top: 0; padding-top: 0; border-top: 0; }
.chip.hchip.open > .chip-caret { order: 3; margin-top: 16px; }
.hpow .chip-foot { white-space: normal; flex-wrap: wrap; row-gap: 4px; }
.hbd-lead { margin: 12px 0 -6px; }
.hbd-why { font-size: 13px; margin-top: 4px; }
.hbd .bd-100 b small { font-size: 12px; }
@media (max-width: 760px) { .hchip-bar .min-bar { margin: 4px 12px 0 0; } }
/* expandable tier card: the rating breakdown */
.tier-band .chip { cursor: pointer; }
.chip:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
.chip-caret { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px -12px -10px; padding: 7px 0; border-top: 1px solid var(--seam); background: rgba(0, 0, 0, .18); color: var(--dust); font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: color .15s, background .15s; }
.chip:hover .chip-caret, .chip:focus-visible .chip-caret { color: var(--tc); background: rgba(0, 0, 0, .3); }
.chip.open .chip-caret { color: var(--tc); }
.chip-caret b { font-size: 14px; font-weight: 400; letter-spacing: 0; }
@media (pointer: coarse) { .chip-caret { padding: 11px 0; font-size: 12px; } }
.chip.open { flex-basis: 100%; width: 100%; min-width: 0; cursor: default; border-color: var(--seam-2); border-left-color: var(--tc); }
.chip.open:hover { transform: none; }
.chip.open > .chip-top, .chip.open > .chip-meta, .chip.open > .chip-foot { cursor: pointer; }
.chip.open .chip-name { font-size: 16px; }
.bd { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--seam); cursor: default; font-size: 13px; color: var(--dust); }
.bd h4 { margin: 18px 0 8px; font: 600 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.bd h4 small { margin-left: 8px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--dim); }
/* Wide: rating, score and series on the left, the stat table on the right. */
.bd { display: grid; gap: 0 32px; align-items: start; }
@media (min-width: 1201px) { .bd { grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); } .bd-right > h4:first-child { margin-top: 0; } }
.bd-left, .bd-right { min-width: 0; }
.bd-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.bd-total { display: grid; justify-items: center; }
.bd-total b { font: 900 44px/1 var(--display); color: var(--tc); }
.bd-total small, .bd-eq small { font: 12px var(--mono); color: var(--dim); letter-spacing: .06em; }
.bd-eq { font: 12px/1.6 var(--mono); color: var(--bone); min-width: 0; overflow-wrap: anywhere; }
.bd-meter { display: block; height: 4px; background: var(--seam); }
.bd-meter i { display: block; height: 100%; background: var(--tc); }
.bd-table { font-size: 12px; }
.bd-table th { font-size: 12px; }
.bd-table td, .bd-table th { padding: 5px 6px; }
.bd-table td.l { font-size: 13px; }
.bd-dim { color: var(--dim); }
.bd-note { font: 12px var(--mono); color: var(--dim); }
.bd-pts { color: var(--bone); font-weight: 600; }
.bd-total-row td { border-top: 1px solid var(--seam-2); color: var(--tc); font-weight: 700; }
.bd-table tbody td { vertical-align: middle; }
.bd-raw { display: block; font-size: 12px; color: var(--dim); font-weight: 400; white-space: normal; }
/* Labels and raw numbers wrap, so the table fits whatever width the card has. */
.bd-table td.l { white-space: normal; }
.bd-pts small { color: var(--dim); font-weight: 400; }
.bd-100 { width: 22%; min-width: 80px; }
.bd-100 b { display: block; font-weight: 600; color: var(--bone); margin-bottom: 3px; }
.bd-100 .bd-meter { height: 3px; }
.bd-role td { padding-top: 12px; color: var(--tc); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bd-sub td { border-top: 1px solid var(--seam-2); color: var(--bone); }
.bd-mult td { border-top: 1px solid var(--seam-2); }
.bd-mult td.l { color: var(--bone); font-weight: 600; }
.bd-mult .bd-pts small { display: block; }
.bd-part td { color: var(--dust); border-bottom-color: transparent; }
.bd-part td.l { padding-left: 18px; font-size: 12px; }
.bd-table .info { vertical-align: 1px; }
/* The bubble's 8px tap area would stick out past the table's right edge and make it scroll. */
.bd-table th:last-child .info::before { right: 0; }
.bd-serieslist { display: grid; gap: 4px; }
.bd-series { display: grid; grid-template-columns: 48px minmax(0, 1fr) 30px minmax(30px, 110px) 36px 40px 40px; gap: 8px; align-items: center; font-size: 13px; }
.bd-spts, .bd-opp { text-align: right; font: 12px var(--mono); color: var(--dust); }
.bd-series-head span { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-align: right; }
.bd-series-avg { border-top: 1px solid var(--seam-2); padding-top: 5px; margin-top: 2px; }
.bd-series-avg .bd-vs { color: var(--dust); font-size: 12px; }
.bd-series-avg b { color: var(--tc); }
.bd-date, .bd-wl { font: 12px var(--mono); color: var(--dim); }
.bd-vs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); }
.bd-vs em { font-style: normal; color: var(--dim); font-size: 12px; }
/* A series' games (G1 G2), each opening on that game's Ratings tab. */
.bd-games { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.bd-games a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 1px 4px; border: 1px solid var(--seam-2); border-radius: 2px; color: var(--dust); text-decoration: none; }
.bd-games a:hover, .bd-games a:focus-visible { color: var(--accent); border-color: var(--accent); }
.bd-series b { text-align: right; color: var(--bone); font: 600 12px var(--mono); }
/* Keep the tier breakdown's season history dense: one line per series, with long opponent
   names ellipsized and the game links tucked beside the name. */
@media (min-width: 761px) {
  .fantasy-tier-chip.open .bd-serieslist { gap: 1px; }
  .fantasy-tier-chip.open .bd-series {
    grid-template-columns: 38px minmax(0, 1fr) 26px minmax(56px, 78px) 34px 34px 38px;
    gap: 4px; min-height: 27px; font-size: 11px;
  }
  .fantasy-tier-chip.open .bd-date, .fantasy-tier-chip.open .bd-wl,
  .fantasy-tier-chip.open .bd-spts, .fantasy-tier-chip.open .bd-opp,
  .fantasy-tier-chip.open .bd-series b { font-size: 11px; }
  .fantasy-tier-chip.open .bd-vs { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; white-space: nowrap; }
  .fantasy-tier-chip.open .bd-vs .team-link { flex: 0 1 auto; overflow: hidden; }
  .fantasy-tier-chip.open .bd-vs .team-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fantasy-tier-chip.open .bd-vs .inline-team-logo { width: 12px; height: 12px; padding: 1px; }
  .fantasy-tier-chip.open .bd-games { flex: none; gap: 2px; margin-left: 2px; }
  .fantasy-tier-chip.open .bd-games a { padding: 1px 3px; font-size: 10px; }
  .fantasy-tier-chip.open .bd-series-avg { margin-top: 4px; padding-top: 5px; }
}
/* the same breakdown on a player's own page */
/* Collapsed: tier, role, record and rating on one line; open, the breakdown's own big rating takes over. */
.tier-detail-letter { display: grid; place-items: center; width: 34px; height: 34px; background: var(--tc); color: var(--on-accent); font: 900 24px/1 var(--display); }
/* An open card: the breakdown's big rating replaces the corner one. On wide screens the name,
   team and record head the left column (rating, score, series) and the stat table runs down the
   right from the top of the card. */
.chip.open .chip-rating { display: none; }
.fantasy-tier-chip.open { position: relative; isolation: isolate; overflow: hidden; background: var(--stone-2); cursor: pointer; }
.fantasy-tier-chip.open .bd { cursor: pointer; }
.fantasy-tier-chip.open::before {
  content: ""; position: absolute; z-index: 0; inset: -18px; pointer-events: none;
  background: var(--tier-art) center 24% / cover no-repeat;
  opacity: .24; filter: saturate(.82) contrast(1.08); transform: scale(1.025);
}
.fantasy-tier-chip.open::after {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 16, 13, .34), rgba(18, 16, 13, .50) 44%, rgba(18, 16, 13, .66));
}
.fantasy-tier-chip.open > * { position: relative; z-index: 1; }
.fantasy-tier-chip.open .bd-left, .fantasy-tier-chip.open .bd-right { position: relative; z-index: 1; }
.fantasy-tier-chip.open .bd-x { z-index: 2; }
.fantasy-tier-chip.open > .tier-card-main { display: none; }
.tier-open-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--seam); }
.tier-open-head b { font-size: 16px; }
.tier-open-head b a { color: var(--bone); }
.tier-open-head span, .tier-open-head small { color: var(--dust); font: 12px/1.35 var(--mono); }
@media (min-width: 1201px) {
  .chip.open { display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
  .chip.open > .tier-open-head { grid-column: 1; grid-row: 1; }
  .chip.open > .chip-top, .chip.open > .chip-meta, .chip.open > .chip-foot { grid-column: 1; }
  .chip.open > .bd { display: contents; }
  .chip.open .bd-left { grid-column: 1; grid-row: 2; margin-top: 12px; padding-top: 0; border-top: 0; }
  .chip.open .bd-right { grid-column: 2; grid-row: 1 / span 2; }
  .chip.open > .chip-caret { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
}
/* how it's scored */
@media (min-width: 1201px) {
  details.how-tiers .how-body { columns: 2; column-gap: 44px; }
  details.how-tiers .how-body > * { break-inside: avoid; }
  details.how-tiers .how-body > h3 { break-after: avoid; }
  details.how-tiers .how-body p, details.how-tiers .how-body .how-list { max-width: none; }
  details.how-tiers .how-tables { grid-template-columns: 1fr; }
}
details.how h3 { margin: 26px 0 0; font: 700 18px/1.2 var(--display); letter-spacing: .04em; color: var(--bone); }
details.how h4 { margin: 0 0 6px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.how-formula { font: 13px var(--mono) !important; color: var(--bone) !important; padding: 10px 12px; background: var(--stone-2); border-left: 3px solid var(--accent); }
.how-list { color: var(--dust); font-size: 14px; max-width: 80ch; margin: 10px 0 0; padding-left: 22px; }
.how-list li { margin: 0 0 6px; }
.how-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 14px; }
.how-table { font-size: 12px; }
.how-table td, .how-table th { padding: 5px 7px; }
.how-table td.wrap { font-size: 12px; min-width: 0; color: var(--dust); }
.how-curve { width: auto; margin-top: 10px; }
.how-curve td, .how-curve th { padding: 4px 14px; }
@media (max-width: 760px) {
  .bd-wide { display: none; }
  .bd-series { grid-template-columns: 40px minmax(0, 1fr) auto auto auto auto; gap: 6px; }
  .bd-series .bd-meter, .bd-series > span:nth-child(4) { display: none; }
  .bd { overflow-x: clip; } /* every card fits (checked at 375px); this only hides a 1px rounding sliver */
  .tier-chips:has(.chip.open) { padding: 8px 6px 8px 8px; }
  .chip.open { padding: 10px 8px; }
  .chip.open > .chip-caret { margin-inline: -8px; }
  .bd-100 { min-width: 44px; width: auto; }
  .bd-raw { white-space: normal; line-height: 1.25; }
  .bd-table .bd-note { display: none; }
  .bd-pts small { display: block; font-size: 11px; }
  .bd-table th, .bd-table td { padding: 4px 2px; }
  .bd-table { font-size: 11px; }
  .bd-table th { letter-spacing: 0; font-size: 11px; }
  .bd-table td.l { white-space: normal; font-size: 12px; }
  .how-table td.l { white-space: normal; }
  .how-table th { white-space: normal; letter-spacing: 0; }
  .how-table td, .how-table th { padding: 5px 4px; }
  details.how { padding: 12px; }
}
details.how { margin-top: 22px; background: var(--stone); border: 1px solid var(--seam); padding: 14px 18px; }
details.how summary { cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
details.how p { color: var(--dust); font-size: 14px; max-width: 80ch; margin: 12px 0 0; }
details.how b { color: var(--bone); }
@media (max-width: 760px) {
  .tier-band { grid-template-columns: 56px minmax(0, 1fr); }
  .tier-letter { font-size: 40px; }
  .chip { width: 100%; }
}

/* ---------- misc ---------- */
dialog { background: var(--stone); border: 1px solid var(--seam-2); padding: 6px; max-width: 95vw; }
dialog img { max-width: 92vw; max-height: 88vh; display: block; }
dialog::backdrop { background: rgba(0, 0, 0, .85); }

/* One orchestrated entrance per page: children rise in sequence. */
.reveal > * { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.plate.a { animation: slide-a .6s cubic-bezier(.2, .8, .2, 1) both; }
.plate.b { animation: slide-b .6s cubic-bezier(.2, .8, .2, 1) both; }
/* After the first page of a visit (app.js), pages appear at once: no stagger, no slide. */
html.calm :is(.reveal > *, .plate.a, .plate.b, .series, .hist-row, .rc, .h2h-row) { animation: none; }
@keyframes slide-a { from { transform: translateX(-24px); opacity: 0; } }
@keyframes slide-b { from { transform: translateX(24px); opacity: 0; } }

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

@media (max-width: 760px) {
  .banner { grid-template-columns: 1fr; }
  .plate.a, .plate.b { clip-path: none; margin-left: 0; padding: 22px 18px; }
  .plate.b { text-align: left; align-items: flex-start; }
  .plate.b .top-line { justify-content: flex-start; }
  .banner-meta { position: static; transform: none; display: block; margin-top: 8px; text-align: center; }
  .fixture { grid-template-columns: 1fr; text-align: left; gap: 8px; }
  .fx-team.b { text-align: left; }
  .fx-score { text-align: left; }
  nav a.nav-cta { margin-left: 0; }
}

/* ---------- ward maps ---------- */
.wm-intro { margin: -4px 0 12px; }
figure.wardmap { margin: 0 0 8px; padding: 14px; background: var(--stone); border: 1px solid var(--seam); }
.wm-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.wm-seg { display: inline-flex; border: 1px solid var(--seam-2); }
.wm-seg button {
  background: transparent; color: var(--dust); border: 0; border-right: 1px solid var(--seam-2);
  padding: 7px 11px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.wm-seg button:last-child { border-right: 0; }
.wm-seg button:hover { color: var(--bone); }
.wm-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.wm-player {
  background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 6px 8px; max-width: 260px;
  font: 600 12px/1 var(--mono); letter-spacing: .04em; cursor: pointer;
}
.wm-player:focus { outline: none; border-color: var(--accent); }
.wm-body { display: grid; grid-template-columns: minmax(0, 560px) minmax(200px, 1fr); gap: 20px; align-items: start; }
.wm-map svg { width: 100%; height: auto; display: block; border: 1px solid var(--seam-2); }
.wm-dim { fill: rgba(8, 8, 6, .2); }
figure.wardmap[data-mode="dots"] .wm-dim, figure.wardmap[data-mode="vision"] .wm-dim { fill: rgba(8, 8, 6, .3); }
.wm-vis .ward { opacity: .75; }
.wm-lbl { paint-order: stroke; stroke: rgba(0,0,0,.8); stroke-width: .8px; font: 600 4px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--dim); }
.wm-lbl.a { fill: var(--jade); }
.wm-lbl.b { fill: var(--ember); }
.wm-dots .ward circle { fill: rgba(8, 8, 6, .75); stroke: var(--ring, var(--accent)); stroke-width: .6; }
.wm-dots.s-a { --ring: var(--jade); }
.wm-dots.s-b { --ring: var(--ember); }
.wm-dots.s-mine { --ring: var(--accent); }
.wm-dots .ward.killed circle { stroke: var(--dim); stroke-opacity: .5; fill-opacity: .4; }
.wm-dots .ward.killed image { filter: grayscale(1) brightness(.45); opacity: .35; }
.wm-dots .ward:hover circle { stroke: var(--bone); stroke-width: .9; }
.wm-dots .ward:hover image { opacity: 1; filter: none; }
.wm-side { display: grid; gap: 12px; font: 12px/1.6 var(--mono); color: var(--dust); }
.wm-stat { padding: 10px 12px; border-left: 3px solid var(--seam-2); background: var(--stone-2); }
.wm-stat.s-a { border-left-color: var(--jade); }
.wm-stat.s-b { border-left-color: var(--ember); }
.wm-stat.s-mine { border-left-color: var(--accent); }
.wm-stat b { color: var(--bone); }
.wm-who { font: 800 15px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); margin-bottom: 4px; }
.wm-note { margin: 0; font-size: 12px; color: var(--dim); }
/* Vision map (lib/visionmap.js): play button, time slider and clock above the map. */
.vm-time { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; max-width: 560px; }
.vm-play {
  flex: none; width: 34px; height: 30px; background: var(--ink); color: var(--bone);
  border: 1px solid var(--seam-2); font: 600 12px/1 var(--mono); cursor: pointer;
}
.vm-play:hover, .vm-play:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.vm-track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vm-slider { width: 100%; margin: 0; accent-color: var(--accent); }
/* Day / night bands under the slider. */
.vm-cycle { --vm-day: var(--seam-2); --vm-night: #2a3a66; height: 4px; }
.vm-clock { flex: none; min-width: 5ch; text-align: right; font: 600 13px/1 var(--mono); color: var(--bone); }
.vm-phase { flex: none; min-width: 7ch; font: 600 12px/1 var(--mono); color: var(--dust); }
/* Range view: From and To sliders, with the day / night bands under both. */
.vm-range { display: grid; grid-template-columns: 1fr; gap: 6px; margin: -4px 0 14px; max-width: 560px; }
.vm-range[hidden], .vm-time[hidden] { display: none; }
.vm-end { display: grid; grid-template-columns: 4ch 1fr 5ch; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); color: var(--dust); text-transform: uppercase; letter-spacing: .1em; }
.vm-end input { width: 100%; margin: 0; accent-color: var(--accent); }
.vm-end output { text-align: right; font-size: 13px; color: var(--bone); letter-spacing: 0; }
.vm-range .vm-track { margin-left: calc(4ch + 10px); margin-right: calc(5ch + 10px); }
.vm-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; padding: 6px 12px; border: 1px solid var(--seam-2); }
.vm-layers legend { float: left; padding: 0; margin-right: 2px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.vm-layers label { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--body); color: var(--dust); cursor: pointer; white-space: nowrap; }
.vm-layers label:has(input:checked) { color: var(--bone); }
.vm-layers input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.vm-tower rect { fill: rgba(8, 8, 6, .8); stroke: var(--ring); stroke-width: .7; }
.vm-towers.s-a { --ring: var(--jade); }
.vm-towers.s-b { --ring: var(--ember); }
.vm-tower:hover rect { stroke: var(--bone); }
.vm-sentries .vm-sight { fill: var(--ring); fill-opacity: .07; stroke: var(--ring); stroke-width: .35; stroke-dasharray: 1.2 .8; }
.vm-sentries .ward circle { stroke-dasharray: none; }
/* Map tab overlays (lib/maplayers.js): the checkboxes reuse .vm-layers; marks on every map. */
.ml-note { margin-top: 6px; }
/* In the zoom box: hung below it, so the zoom buttons stay on the map. */
.mz-wrap:has(> .ml-note) { margin-bottom: 30px; }
.mz-wrap > .ml-note { position: absolute; top: 100%; left: 0; right: 0; }
.ml-overlay { --ml: var(--bone); }
.ml-overlay .ml-a { --ml: var(--jade); }
.ml-overlay .ml-b { --ml: var(--ember); }
.ml-overlay .ml-n { --ml: var(--dust); }
.ml-kill circle { fill: var(--ink); stroke: var(--ml); stroke-width: .7; }
.ml-kill path { stroke: var(--ml); stroke-width: .7; stroke-linecap: round; }
.ml-fight circle { fill: var(--ml); fill-opacity: .18; stroke: var(--ml); stroke-width: .5; }
.ml-fight text, .ml-boss text { font: 700 3px var(--mono); text-anchor: middle; fill: var(--bone); paint-order: stroke; stroke: rgba(0, 0, 0, .8); stroke-width: .6px; }
.ml-obj rect { fill: rgba(8, 8, 6, .8); stroke: var(--ml); stroke-width: .5; }
.ml-obj path { stroke: var(--ml); stroke-width: .5; }
.ml-boss circle { fill: rgba(8, 8, 6, .85); stroke: var(--ml); stroke-width: .6; }
.ml-ward circle, .ml-ward rect { fill: rgba(8, 8, 6, .6); stroke: var(--ml); stroke-width: .45; }
.ml-ward path { stroke: var(--bone); stroke-width: .45; }
.ml-ward.ml-dead circle, .ml-ward.ml-dead rect { stroke-opacity: .5; }
.ml-overlay g:hover { filter: brightness(1.4); }
@media (max-width: 760px) { .wm-body { grid-template-columns: 1fr; } }
/* tower maps reuse the ward map frame */
.tm-b circle, .tm-b rect { stroke-width: .45; stroke: rgba(8, 8, 6, .9); }
.tm-b.s-a circle, .tm-b.s-a rect { fill: var(--jade); }
.tm-b.s-b circle, .tm-b.s-b rect { fill: var(--ember); }
.tm-b.new circle, .tm-b.new rect, .tm-b.old circle, .tm-b.old rect { fill: rgba(8, 8, 6, .75); }
.tm-b.s-a.new circle, .tm-b.s-a.new rect { stroke: var(--jade); }
.tm-b.s-b.new circle, .tm-b.s-b.new rect { stroke: var(--ember); }
.tm-x { stroke-width: .5; fill: none; }
.tm-b.s-a .tm-x { stroke: var(--jade); }
.tm-b.s-b .tm-x { stroke: var(--ember); }
.tm-b.old { opacity: .35; }
.tm-b circle.tm-mine { fill: none; stroke: var(--accent); stroke-width: .5; }
.tm-b:hover circle, .tm-b:hover rect { stroke: var(--bone); stroke-width: .8; }
.tm-t { paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: .7px; font: 600 3.2px var(--mono); fill: var(--bone); pointer-events: none; }
.tm-list { margin: 6px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 12px; }
.tm-list li { break-inside: avoid; }

/* ---------- min-games filter, draft phases ---------- */
.min-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.min-bar select { background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 6px 8px; font: 13px var(--mono); margin: 0 4px; }
.min-note { color: var(--dim); letter-spacing: .08em; }
.phase-grid { display: grid; gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
.ph-row { display: grid; grid-template-columns: 160px repeat(3, minmax(0, 1fr)); gap: 1px; }
.ph-row > div { background: var(--stone); padding: 12px; }
.ph-label { font: 800 15px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ph-label small { font: 400 12px/1.35 var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
.ph-top > div { padding: 10px 12px; }
.ph-head { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); display: flex; flex-direction: column; gap: 5px; }
.ph-head small { letter-spacing: .04em; text-transform: none; font-size: 12px; color: var(--dim); }
.ph-sum { font: 12px/1.3 var(--mono); color: var(--dust); margin-bottom: 8px; }
.ph-cell .hero-chips { gap: 6px; }
.ph-chip .pv small { font-size: 12px; color: var(--dim); margin-left: 5px; font-weight: 400; }
.ph-chip .pv-w.up { color: var(--jade); }
.ph-chip .pv-w.down { color: var(--ember); }
.phase-grid[data-view="n"] .pv:not(.pv-n), .phase-grid[data-view="r"] .pv:not(.pv-r), .phase-grid[data-view="w"] .pv:not(.pv-w) { display: none; }
.ph-cell:not(.open) .ph-extra { display: none; }
.ph-more { margin-top: 8px; font: 12px var(--mono); }
.ph-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.ph-bar .segs { margin-bottom: 0; }
.ph-note { font: 12px var(--mono); color: var(--dust); }
.ph-mob { display: none; color: var(--bone); }
@media (max-width: 1000px) { .ph-top { display: none; } .ph-mob { display: inline; } }
tr.muted td { color: var(--dim); }
@media (max-width: 1000px) { .ph-row { grid-template-columns: 1fr; } }

/* ---------- predictions ---------- */
.pred-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 8px; font-size: 14px; color: var(--dust); }
.pred-name b { color: var(--bone); }
.pred-name-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pred-name-form[hidden] { display: none; }
.pred-name label { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.pred-name input { background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 9px 10px; font: 15px var(--body); width: 220px; max-width: 60vw; }
.pred-name .muted { font-size: 13px; }
button.linkish { background: none; border: 0; padding: 0 0 0 6px; color: var(--accent); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; clip-path: none; }
button.linkish:hover { text-decoration: underline; }
.pred-time { font: 600 12px/1 var(--mono); letter-spacing: .1em; color: var(--dim); vertical-align: middle; margin-left: 6px; }
.pred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; }
.pred-card { background: var(--stone); border: 1px solid var(--seam); padding: 14px; display: grid; gap: 12px; align-content: start; }
.pred-head { display: flex; align-items: center; gap: 10px; }
.pred-head .pred-teams { flex: 1; }
.pred-lock { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ember); border: 1px solid var(--ember); padding: 4px 6px; }
.pred-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font: 800 17px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.pred-teams .a { color: var(--jade); }
.pred-teams .b { color: var(--ember); text-align: right; }
.pred-teams .a a, .pred-teams .b a { color: inherit; }
.pred-teams i { font: 600 12px var(--mono); color: var(--dim); font-style: normal; letter-spacing: .1em; }
.fx-model { margin-top: 8px; font-size: 13px; color: var(--dust); }
.pred-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pred-picks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pred-round, .st-round { font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pred-round { margin: -2px 0 8px; }
.pred-picks button {
  display: grid; gap: 5px; align-content: start; text-align: left;
  background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); border-top: 3px solid var(--seam-2); padding: 9px 9px 8px; cursor: pointer;
}
.pred-picks button.home { border-top-color: var(--jade); }
.pred-picks button.tie { border-top-color: var(--gold); }
.pred-picks button.away { border-top-color: var(--ember); }
.pk-main { font: 600 13px/1.25 var(--body); overflow-wrap: anywhere; }
.pk-sub { font: 12px/1.3 var(--mono); color: var(--dim); }
.pk-sub b { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.pred-picks button:hover:not(:disabled) { border-color: var(--accent); }
.pred-picks button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pred-picks button[aria-pressed="true"] .pk-sub, .pred-picks button[aria-pressed="true"] .pk-sub b { color: var(--on-accent); }
.pred-picks button:disabled { opacity: .55; cursor: not-allowed; }
.pred-picks button[aria-pressed="true"]:disabled { opacity: 1; }
/* Sized to its columns, not the page: on a wide screen the scores sit next to the names. */
.pred-board { width: auto; }
.table-wrap:has(> .pred-board) { width: fit-content; max-width: 100%; }
@media (min-width: 761px) { .pred-board :is(td, th) { padding: 10px 14px; } .pred-board td.l:nth-child(2) { min-width: 180px; } }
/* Phones: last week's change goes above the score, so Points and Correct both fit on screen. */
@media (max-width: 760px) {
  .pred-board .pb-delta { display: block; margin: 0 0 2px; font-size: 11px; }
  .pred-board td.l:nth-child(2) { white-space: normal; }
  .pred-board :is(td, th) { padding-left: 6px; padding-right: 6px; }
}
.pred-board .rank { width: auto; } /* .rank's 1% would stretch the table to the page again */
.pred-board tr:has(> td.rank.lead) td:nth-child(2) { font-weight: 600; }
.pred-board td.num { text-align: right; }
.pb-delta { display: inline-block; margin-right: 10px; font: 500 12px var(--mono); color: var(--dust); }
.pb-delta.up { color: var(--jade); }
.pb-delta.down { color: var(--ember); }
.pred-board tr.me td { background: rgba(var(--accent-rgb), .08); }
.pred-board th.pb-series { white-space: normal; min-width: 120px; max-width: 170px; vertical-align: bottom; font-size: 12px; line-height: 1.35; }
.pred-board th.pb-series span { display: block; }
.pred-board th.pb-series .a { color: var(--jade); }
.pred-board th.pb-series .b { color: var(--ember); }
.pred-board th.pb-series .b::before { content: "vs "; color: var(--dim); }
.pred-board td:has(> .pk-chip) { white-space: normal; }
.pred-board .pb-who { font: inherit; color: inherit; text-align: left; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.pred-board .pb-who:hover { color: var(--accent); }
.pred-board .pb-who[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.pb-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dim); box-sizing: border-box; }
.pb-who:hover .pb-dot { border-color: var(--accent); }
.pb-who[aria-pressed="true"] .pb-dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 40%, transparent 45%); }
.pred-board tr:has(.pb-who[aria-pressed="true"]) td { background: rgba(var(--accent-rgb), .12); }
.pb-view { margin: 22px 0 8px; scroll-margin-top: 70px; }
.pb-fold { margin-top: 18px; }
/* Player Heroes: recent pubs, pub practice and all-time totals, folded under one header. */
details.pubs-fold { margin-top: 28px; }
details.pubs-fold > summary { font-size: 12px; }
details.pubs-fold[open] > summary { margin-bottom: 4px; }
.pb-fold .pb-view { margin-top: 14px; }
.pb-view-h { margin: 0 0 10px; }
.pb-view-h2 { margin-top: 26px; }
.pb-hist-sum { margin: 0 0 10px; font-size: 14px; }
.pb-hist-sum b { font: 700 18px var(--mono); color: var(--accent); }
.pb-hist { min-width: 0; }
.pb-hist td { vertical-align: middle; }
.pb-hist td.l { white-space: normal; }
.pb-hist td:first-child { min-width: 140px; }
.pb-hist td:has(> .pk-chip) { min-width: 110px; }
.pb-hist tr.pb-hist-night th { text-align: left; padding-top: 14px; font: 800 13px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--dust); border-bottom: 1px solid var(--seam); }
.pb-hist tr.pb-hist-night th span { float: right; font: 600 12px var(--mono); letter-spacing: 0; color: var(--dim); }
.pb-hist tbody:first-of-type tr.pb-hist-night th { padding-top: 6px; }
.pred-lw { margin-top: 30px; }
.pred-lw-scores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.pred-lw-lbl { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pred-lw-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--stone-2); border: 1px solid var(--seam); padding: 3px 9px; font-size: 13px; }
.pred-lw-chip b { font: 600 13px var(--mono); color: var(--accent); }
.pred-lw-chip .linkish { font: inherit; color: inherit; }
.pred-lw-chip .linkish:hover { color: var(--accent); }
.pk-chip { display: inline-block; max-width: 170px; overflow-wrap: anywhere; vertical-align: middle; font-size: 13px; line-height: 1.3; padding-left: 7px; border-left: 3px solid var(--seam-2); }
.pk-chip.home { border-left-color: var(--jade); }
.pk-chip.tie { border-left-color: var(--gold); }
.pk-chip.away { border-left-color: var(--ember); }
details.how > h3.pred-night:first-of-type { margin-top: 14px; }
details.dr summary { cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 4px 0; }
.dr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.dr-col h4 { margin: 0 0 8px; font: 800 14px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.dr-sub { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 10px 0 6px; }
.dr-bans, .dr-heroes { display: flex; flex-wrap: wrap; gap: 4px; }
.dr-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--stone-2); border: 1px solid var(--seam); padding: 2px 6px 2px 2px; font-size: 12px; }
.dr-chip img { width: 28px; height: 16px; object-fit: cover; }
.dr-chip b { font: 600 12px var(--mono); color: var(--accent); }
.dr-player { margin-bottom: 8px; }
.dr-name { font-size: 13px; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.dr-name .muted { font: 12px var(--mono); }
h3.pred-night { font: 800 16px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--dust); margin: 20px 0 8px; }
@media (max-width: 760px) { .dr-cols { grid-template-columns: 1fr; } .pred-teams { font-size: 16px; } }

/* predicted draft */
.pd-toggles { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pd-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.pd-lbl { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.pd-toggle button { background: var(--ink); color: var(--dust); border: 1px solid var(--seam-2); padding: 6px 10px; font: 600 12px var(--body); cursor: pointer; }
.pd-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pd { display: grid; gap: 8px; }
.pd[hidden] { display: none; }
.pd-row { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 10px; align-items: start; }
.pd-sides { border-bottom: 1px solid var(--seam); padding-bottom: 6px; }
.pd-side { font: 800 13px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pd-side.a { color: var(--jade); }
.pd-side.b { color: var(--ember); }
.pd-title { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-top: 6px; }
.pd-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-step { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 2px; background: var(--stone-2); border: 1px solid var(--seam); border-left: 3px solid var(--seam-2); font-size: 12px; max-width: 100%; }
.pd-step.a { border-left-color: var(--jade); }
.pd-step.b { border-left-color: var(--ember); }
.pd-step img { width: 40px; height: 22px; object-fit: cover; }
.pd-step.ban { padding-right: 2px; }
.pd-step.ban img { filter: grayscale(1) brightness(.6); }
.pd-step.ban::after { content: ""; position: absolute; right: 2px; top: 2px; width: 40px; bottom: 2px; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(var(--ember-rgb), .8) 50%, transparent calc(50% + 1px)); pointer-events: none; }
.pd-step.ban .pd-hero { color: var(--dust); text-decoration: line-through; text-decoration-color: rgba(var(--ember-rgb), .6); }
.pd-step.pick { flex-direction: row; }
.pd-n { font: 600 12px var(--mono); color: var(--dim); min-width: 14px; text-align: right; }
.pd-player { font: 12px var(--mono); color: var(--accent); }
@media (max-width: 760px) { .pd-row { grid-template-columns: 1fr 1fr; gap: 4px 8px; } .pd-title { grid-column: 1 / -1; padding-top: 4px; } .pd-sides > div:first-child { display: none; } }

/* ---------- scrim schedule (Predict) ---------- */
.pred-picks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-meta { font: 12px/1.4 var(--mono); color: var(--dim); }
.fx-meta b { color: var(--bone); font-weight: 600; }
.fx-sofar { color: var(--accent); }
.fx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-actions > button { padding: 8px 12px; }
.fx-game { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fx-manage { margin-left: auto; display: flex; gap: 10px; }
.fx-manage button.linkish { padding: 4px 0; line-height: 1.2; }
.fx-move[hidden] { display: none; }
.fx-move, .fx-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.fx-move input, .fx-move select, .fx-form input, .fx-form select {
  background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); padding: 9px 10px; font: 14px var(--body); color-scheme: dark;
}
.fx-form label { display: grid; gap: 6px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.fx-form input:not([type]), .fx-form input[list] { width: 200px; max-width: 80vw; }
details.fx-add { margin: 18px 0 8px; background: var(--stone); border: 1px solid var(--seam); padding: 14px 18px; }
details.fx-add summary { cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
details.fx-add[open] summary { margin-bottom: 14px; }
.notice.fx-banner b { display: inline; font: 600 14px var(--body); letter-spacing: 0; text-transform: none; margin: 0; color: var(--bone); }
.fx-sides { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 520px) { .fx-manage { margin-left: 0; } }

/* ---------- info bubbles (lib/glossary.js) ---------- */
button.info {
  display: inline-grid; place-items: center; position: relative;
  width: 15px; height: 15px; margin: 0 0 0 5px; padding: 0; vertical-align: 1px;
  border: 1px solid var(--seam-2); border-radius: 50%; clip-path: none;
  background: transparent; color: var(--dust);
  font: 600 12px/1 var(--mono); letter-spacing: 0; text-transform: none; font-style: normal;
  cursor: help; transition: color .15s, background .15s, border-color .15s;
}
/* A finger-sized hit area around the small dot. */
button.info::before { content: ""; position: absolute; inset: -8px; }
button.info:hover:not(:disabled), button.info[aria-expanded="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
button.info:active:not(:disabled) { transform: none; }
h2 > button.info { margin-left: -8px; }
.info-pop {
  position: fixed; z-index: 100; max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px; background: var(--stone-2); border: 1px solid var(--seam-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  font: 400 13px/1.45 var(--body); color: var(--bone); letter-spacing: normal; text-transform: none; white-space: normal;
  pointer-events: auto;
}
.info-pop[hidden] { display: none; }

/* ---------- Ranks: stat leaders, stat/hero places, hero top 3 ---------- */
/* Stat leaders: two bands like the tier board (accent TOP, ember BOTTOM), each holding up to
   three plates: big stencil place number, their most-played hero as faded art, the value, and a
   meter from the league's worst (empty) to best (full). */
.ld-lists { display: grid; gap: 8px; }
.ld-band { --bc: var(--accent); --bc-rgb: var(--accent-rgb); display: grid; grid-template-columns: 92px minmax(0, 1fr); background: var(--stone); border: 1px solid var(--seam); }
.ld-band-bottom { --bc: var(--ember); --bc-rgb: var(--ember-rgb); }
.ld-band-top { border-color: rgba(var(--bc-rgb), .4); box-shadow: inset 0 0 60px rgba(var(--bc-rgb), .05); }
.ld-tag {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px 10px 6px;
  background: var(--bc); color: var(--on-accent); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  font: 700 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center;
}
.ld-arrow { font: 900 44px/1 var(--display); }
.ld-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 12px 18px; }
.ld-plate {
  position: relative; overflow: hidden; isolation: isolate; min-height: 150px; padding: 12px 14px 16px;
  background: linear-gradient(160deg, rgba(var(--bc-rgb), .07), transparent 55%), var(--stone-2);
  border: 1px solid var(--seam-2); border-top: 3px solid var(--bc); transition: transform .12s, border-color .12s;
}
.ld-plate:hover { transform: translateY(-2px); border-color: var(--dust); border-top-color: var(--bc); }
.ld-p1 { --bc: var(--gold); --bc-rgb: 232, 182, 76; }
.ld-p2 { --bc: #c9ced6; --bc-rgb: 201, 206, 214; }
.ld-p3 { --bc: #cd8a55; --bc-rgb: 205, 138, 85; }
.ld-plate.ov { box-shadow: 0 0 0 1px rgba(var(--bc-rgb), .5), 0 0 28px rgba(var(--bc-rgb), .18); }
.ld-art {
  position: absolute; z-index: -1; right: -10px; bottom: 0; width: 62%; height: 100%; object-fit: cover; opacity: .2;
  filter: saturate(.5); mask-image: linear-gradient(100deg, transparent 5%, #000 70%); -webkit-mask-image: linear-gradient(100deg, transparent 5%, #000 70%);
}
.ld-num {
  position: absolute; z-index: -1; right: 8px; top: -14px; font: 900 110px/1 var(--display);
  color: transparent; -webkit-text-stroke: 1px rgba(var(--bc-rgb), .45); pointer-events: none;
}
.ld-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 20px; }
.ld-place { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bc); }
.ld-name { margin-top: 10px; font: 900 22px/1.05 var(--display); letter-spacing: .01em; overflow-wrap: anywhere; }
.ld-name a { color: var(--bone); }
.ld-name a:hover { color: var(--bc); text-decoration: none; }
.ld-meta { margin-top: 4px; font-size: 12px; color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-val { margin-top: 12px; font: 900 34px/1 var(--display); color: var(--bc); display: flex; align-items: baseline; gap: 8px; }
.ld-val small { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.ld-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .05); }
.ld-meter i { display: block; height: 100%; width: calc(var(--m) * 100%); background: var(--bc); box-shadow: 0 0 10px rgba(var(--bc-rgb), .6); }
.ld-spill { border-style: dashed; border-top-style: solid; background: var(--stone-2); }
.ld-spill .ld-name { color: var(--dust); }
@media (max-width: 1000px) {
  .ld-band { grid-template-columns: 56px minmax(0, 1fr); }
  .ld-arrow { font-size: 30px; }
  .ld-tag { font-size: 10px; padding: 8px 12px 8px 4px; }
  .ld-plates { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .ld-plate { min-height: 0; }
  .ld-num { font-size: 84px; }
}

.ov-badge { display: inline-block; padding: 3px 7px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; }
.ov-badge.ov-top { color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.ov-badge.ov-top.ov-1 { color: var(--on-accent); background: var(--gold); border-color: var(--gold); }
.ov-badge.ov-top.ov-2 { color: var(--on-accent); background: #c9ced6; border-color: #c9ced6; }
.ov-badge.ov-top.ov-3 { color: var(--on-accent); background: #cd8a55; border-color: #cd8a55; }
.ov-badge.ov-bottom { color: var(--ember); background: rgba(var(--ember-rgb), .08); }
td .ov-badge { margin-left: 8px; }


.top-card .k { color: var(--bone); }
.top-card.top-1 .k { color: var(--gold); }
.top-card.top-2 .k { color: #c9ced6; }
.top-card.top-3 .k { color: #cd8a55; }
.top-card.ov-top { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 24px rgba(var(--accent-rgb), .12); }
.top-card .top-ov { margin-top: 10px; min-height: 18px; }

/* Player page stat ranks: the leaders' bands, one per stat group, holding compact tiles. */
.sr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 0 0 10px; }
.sr-summary > div { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--stone); border: 1px solid var(--seam); }
.sr-summary b { font: 900 34px/1 var(--display); }
.sr-summary small { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.sr-sum-top { color: var(--accent); }
.sr-sum-bottom { color: var(--ember); }
.sr-sum-ov { color: var(--gold); }
.sr-band .ld-tag span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; letter-spacing: .2em; }
.sr-band { --bc: #8a8074; --bc-rgb: 138, 128, 116; grid-template-columns: 44px minmax(0, 1fr); }
/* A colour per group, so the bands read at a glance. */
.sr-g-results { --bc: var(--jade); --bc-rgb: var(--jade-rgb); }
.sr-g-economy { --bc: var(--gold); --bc-rgb: 232, 182, 76; }
.sr-g-damage { --bc: var(--ember); --bc-rgb: var(--ember-rgb); }
.sr-g-support { --bc: #6fb7ff; --bc-rgb: 111, 183, 255; }
.sr-g-objectives { --bc: #a58bff; --bc-rgb: 165, 139, 255; }
.sr-g-draft { --bc: #ff7eb6; --bc-rgb: 255, 126, 182; }
.sr-band { border-left: 0; background: linear-gradient(90deg, rgba(var(--bc-rgb), .06), transparent 40%), var(--stone); }
.sr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 10px 12px 10px 16px; }
.sr-tile {
  --tc: var(--seam-2); --tc-rgb: 255, 255, 255;
  position: relative; overflow: hidden; padding: 10px 12px 14px; background: var(--stone-2);
  border: 1px solid var(--seam-2); border-top: 3px solid var(--tc); transition: transform .12s, border-color .12s;
}
.sr-tile:hover { transform: translateY(-2px); border-color: var(--dust); border-top-color: var(--tc); }
.sr-top { --tc: var(--accent); --tc-rgb: var(--accent-rgb); background: linear-gradient(160deg, rgba(var(--tc-rgb), .1), transparent 60%), var(--stone-2); }
.sr-p1 { --tc: var(--gold); --tc-rgb: 232, 182, 76; }
.sr-p2 { --tc: #c9ced6; --tc-rgb: 201, 206, 214; }
.sr-p3 { --tc: #cd8a55; --tc-rgb: 205, 138, 85; }
/* Top 10 and top 25 in the league: green, strong then soft. */
.sr-t10 { --tc: var(--jade); --tc-rgb: var(--jade-rgb); }
.sr-t25 { --tc: rgba(var(--jade-rgb), .45); --tc-rgb: var(--jade-rgb); }
.sr-tile.sr-t10 { background: linear-gradient(160deg, rgba(var(--jade-rgb), .08), transparent 60%), var(--stone-2); }
.sr-bottom { --tc: var(--ember); --tc-rgb: var(--ember-rgb); background: linear-gradient(160deg, rgba(var(--ember-rgb), .08), transparent 60%), var(--stone-2); }
.sr-tile.ov { box-shadow: 0 0 0 1px rgba(var(--tc-rgb), .5), 0 0 24px rgba(var(--tc-rgb), .18); }
.sr-label { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.sr-label small { display: block; letter-spacing: .06em; color: var(--dim); text-transform: none; }
.sr-val { font: 900 30px/1 var(--display); margin: 8px 0 6px; }
.sr-place { display: flex; align-items: baseline; gap: 6px; }
.sr-place b { font: 900 22px/1 var(--display); color: var(--bone); }
.sr-top .sr-place b, .sr-bottom .sr-place b, .sr-t10 .sr-place b { color: var(--tc); }
.sr-t25 .sr-place b { color: var(--jade-soft); }
.sr-place small, .sr-ov small { font: 400 12px var(--mono); color: var(--dim); }
.sr-ov-place { white-space: nowrap; }
.sr-ov-place b { color: var(--bone); }
.sr-ov-place.sr-p1 b { color: var(--gold); }
.sr-ov-place.sr-p2 b { color: #c9ced6; }
.sr-ov-place.sr-p3 b { color: #cd8a55; }
.sr-ov-place.sr-t10 b { color: var(--jade); }
.sr-ov-place.sr-t25 b { color: var(--jade-soft); }
.sr-ov { margin-top: 6px; font: 600 12px var(--mono); color: var(--dust); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sr-tile .ld-meter i { background: var(--tc); box-shadow: 0 0 8px rgba(var(--tc-rgb), .5); }
.sr-tile:not(.sr-top):not(.sr-bottom):not(.sr-t10):not(.sr-t25) .ld-meter i { background: var(--dust); box-shadow: none; }
@media (max-width: 1000px) {
  .sr-band { grid-template-columns: 32px minmax(0, 1fr); }
  .sr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .sr-val { font-size: 24px; }
}

/* Player page hero pool: a card per hero. Banner art with the tier letter of their hero
   rating (tier-list colours), the rating in stencil, league / all-league places (medal colours
   for a top 3), and a meter for the rating out of 100. */
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hp-card {
  --tc: #8a8074; --tc-rgb: 138, 128, 116;
  position: relative; overflow: hidden; background: var(--stone); border: 1px solid var(--seam);
  border-top: 3px solid var(--tc); transition: transform .12s, border-color .12s;
}
.hp-card:hover { transform: translateY(-2px); border-color: var(--seam-2); border-top-color: var(--tc); }
.hp-card.t-S { --tc: var(--gold); --tc-rgb: 232, 182, 76; }
.hp-card.t-A { --tc: var(--jade); --tc-rgb: var(--jade-rgb); }
.hp-card.t-B { --tc: #b9c6c0; --tc-rgb: 185, 198, 192; }
.hp-card.t-D { --tc: var(--ember); --tc-rgb: var(--ember-rgb); }
.hp-card.ov { box-shadow: 0 0 0 1px rgba(var(--tc-rgb), .5), 0 0 26px rgba(var(--tc-rgb), .2); }
.hp-banner { position: relative; height: 92px; overflow: hidden; }
.hp-banner .hp-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; filter: saturate(.85); }
.hp-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--stone) 100%); }
.hp-tier {
  position: absolute; z-index: 1; top: 0; left: 0; min-width: 40px; padding: 6px 14px 6px 8px; text-align: center;
  font: 900 26px/1 var(--display); color: var(--on-accent); background: var(--tc); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.hp-body { position: relative; margin-top: -26px; padding: 0 14px 16px; }
.hp-name { font: 900 22px/1.05 var(--display); }
.hp-name a { color: var(--bone); }
.hp-name a:hover { color: var(--tc); text-decoration: none; }
.hp-rec { margin-top: 4px; font: 400 12px var(--mono); color: var(--dust); }
.hp-rec .res { font-weight: 600; }
.hp-rating { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
.hp-rating b { font: 900 44px/.9 var(--display); color: var(--tc); }
.hp-rating small { font: 600 12px/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.hp-places { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; }
.hp-place { display: flex; align-items: baseline; gap: 4px; }
.hp-place b { font: 900 18px/1 var(--display); color: var(--bone); }
.hp-place small { font: 400 12px var(--mono); color: var(--dim); }
.hp-p1 b { color: var(--gold); }
.hp-p2 b { color: #c9ced6; }
.hp-p3 b { color: #cd8a55; }
.hp-card .ld-meter i { background: var(--tc); box-shadow: 0 0 8px rgba(var(--tc-rgb), .5); }

/* By draft pick: five slot columns, a meter for each slot's win rate. */
.dp-compare { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dp-compare > div:not(.dp-verdict) b { color: var(--bone); }
.dp-verdict { align-items: center; font: 900 20px/1.1 var(--display); letter-spacing: .02em; }
.dp-verdict.good { color: var(--jade); border-color: rgba(var(--jade-rgb), .4) !important; background: rgba(var(--jade-rgb), .06) !important; }
.dp-verdict.bad { color: var(--ember); border-color: rgba(var(--ember-rgb), .4) !important; background: rgba(var(--ember-rgb), .06) !important; }
.dp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dp-slot {
  --sc: var(--dust); --sc-rgb: 155, 145, 132;
  position: relative; overflow: hidden; padding: 12px 12px 16px; background: var(--stone);
  border: 1px solid var(--seam); border-top: 3px solid var(--sc);
}
.dp-good { --sc: var(--jade); --sc-rgb: var(--jade-rgb); background: linear-gradient(170deg, rgba(var(--jade-rgb), .08), transparent 60%), var(--stone); }
.dp-bad { --sc: var(--ember); --sc-rgb: var(--ember-rgb); background: linear-gradient(170deg, rgba(var(--ember-rgb), .07), transparent 60%), var(--stone); }
.dp-last { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .15); }
.dp-empty { opacity: .45; border-top-color: var(--seam-2); }
.dp-head { display: flex; align-items: center; gap: 10px; }
.dp-num {
  display: grid; place-items: center; width: 30px; height: 30px; font: 900 18px/1 var(--display); color: var(--on-accent);
  background: var(--sc); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.dp-empty .dp-num { background: var(--seam-2); color: var(--dust); }
.dp-name { font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dp-name small { display: block; color: var(--dim); letter-spacing: .08em; }
.dp-wl { font: 900 36px/1 var(--display); margin: 12px 0 4px; }
.dp-wr { font: 600 14px var(--mono); color: var(--sc); display: flex; align-items: baseline; gap: 8px; }
.dp-wr small { font-size: 12px; color: var(--dim); }
.dp-heroes { margin-top: 10px; min-height: 20px; }
/* Impact from that slot: game rating, then KDA / GPM / damage / KP, green or red against the
   average across every slot. */
.dp-impact { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--seam-2); }
.dp-rating { display: flex; align-items: baseline; gap: 8px; }
.dp-rating b { font: 900 24px/1 var(--display); color: var(--bone); }
.dp-rating small { font: 400 12px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.dp-rating em { font-style: normal; color: var(--dust); }
.dp-rating.up b, .dp-rating.up em { color: var(--jade); }
.dp-rating.down b, .dp-rating.down em { color: var(--ember); }
.dp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 8px 0 0; }
.dp-stats div { display: flex; justify-content: space-between; gap: 6px; font: 400 12px var(--mono); }
.dp-stats dt { color: var(--dim); }
.dp-stats dd { margin: 0; color: var(--bone); }
.dp-stats .up dd { color: var(--jade); }
.dp-stats .down dd { color: var(--ember); }
.dp-slot .ld-meter i { background: var(--sc); box-shadow: 0 0 8px rgba(var(--sc-rgb), .5); }
.dp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-bans { margin-top: 10px; font: 400 12px var(--mono); color: var(--dust); }
.dp-bans b { font: 900 18px/1 var(--display); color: var(--ember); margin-right: 2px; }
.dp-bans small { color: var(--dim); }
@media (max-width: 1000px) {
  .dp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .dp-last { grid-column: 1 / -1; }
  .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-name { font-size: 18px; }
  .hp-rating b { font-size: 36px; }
}

/* Recent pubs: summary strip, a form row (every game, win/loss bar), and hero cards. */
.pub-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pub-summary .res-w { color: var(--jade); }
.pub-summary .res-l { color: var(--ember); }
.pub-form { display: grid; grid-template-columns: 92px minmax(0, 1fr); background: var(--stone); border: 1px solid var(--seam); margin-bottom: 10px; }
.pub-form-label {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 16px 10px 10px;
  background: var(--seam-2); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  font: 900 22px/1 var(--display); text-transform: uppercase;
}
.pub-form-label small { font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: none; color: var(--dust); }
.pub-form-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 14px 12px 16px; align-items: center; }
.pf { position: relative; display: block; line-height: 0; padding-bottom: 4px; transition: transform .12s; }
.pf .hero-img { width: 44px; height: 25px; }
.pf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.pf-w::after { background: var(--jade); box-shadow: 0 0 6px rgba(var(--jade-rgb), .6); }
.pf-l::after { background: var(--ember); box-shadow: 0 0 6px rgba(var(--ember-rgb), .5); }
.pf-l .hero-img { filter: saturate(.35) brightness(.75); }
.pf:hover { transform: translateY(-2px); }
.pf:hover .hero-img { filter: none; outline: 1px solid var(--accent); }
.pf-r { position: absolute; top: 0; right: 0; padding: 1px 3px; font: 700 10px/1 var(--mono); color: var(--on-accent); background: var(--gold); }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ph-card {
  --pc: var(--jade); --pc-rgb: var(--jade-rgb);
  position: relative; overflow: hidden; background: var(--stone); border: 1px solid var(--seam); border-top: 3px solid var(--pc);
  transition: transform .12s, border-color .12s;
}
.ph-l { --pc: var(--ember); --pc-rgb: var(--ember-rgb); }
.ph-card:hover { transform: translateY(-2px); border-color: var(--seam-2); border-top-color: var(--pc); }
.ph-banner { position: relative; height: 58px; overflow: hidden; }
.ph-banner .ph-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.ph-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, var(--stone) 100%); }
.ph-body { position: relative; margin-top: -18px; padding: 0 12px 14px; }
.ph-name { font: 900 17px/1.05 var(--display); }
.ph-name a { color: var(--bone); }
.ph-name a:hover { color: var(--pc); text-decoration: none; }
.ph-wl { font: 900 30px/1 var(--display); color: var(--pc); margin-top: 6px; }
.ph-sub { font: 400 12px var(--mono); color: var(--dust); margin-top: 3px; }
/* Hero page cards: no banner (every card would show the same hero). */
.ph-plain .ph-body { margin-top: 0; padding-top: 12px; }
.hp-player .hp-body { margin-top: 0; padding-top: 44px; }
.ph-card .ld-meter i { background: var(--pc); box-shadow: 0 0 8px rgba(var(--pc-rgb), .5); }
@media (max-width: 1000px) {
  .pub-form { grid-template-columns: minmax(0, 1fr); }
  .pub-form-label { flex-direction: row; align-items: baseline; gap: 10px; clip-path: none; font-size: 18px; }
  .pub-form-row { padding: 10px; }
  .pf .hero-img { width: 36px; height: 20px; }
  .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* deaths card (lib/deathmap.js): where (teamfight deaths on the minimap) beside when (timeline or
   histogram), linked on hover. The chart is drawn at its real pixel width, so sizes here are true. */
.dm-read { min-height: 40px; margin: 0 0 14px; padding: 10px 14px; background: var(--stone-2); border-left: 3px solid var(--seam-2);
  font: 12px/1.5 var(--mono); color: var(--dust); }
.dm-read.on { border-left-color: var(--accent); color: var(--bone); }
.dm-body { display: grid; grid-template-columns: minmax(300px, 560px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1000px) { .dm-body { grid-template-columns: 1fr; } }
.dm-col { min-width: 0; }
.dm-h { margin-bottom: 10px; font: 800 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); }
.dm-fights { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font: 12px/1.4 var(--mono); color: var(--dust); }
.dm-lab { color: var(--dim); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.dm-chip { padding: 4px 9px; background: var(--stone-2); border: 1px solid var(--seam); font: inherit; color: inherit; }
button.dm-chip { cursor: pointer; }
.dm-chip b { color: var(--bone); }
.dm-chip.hl, button.dm-chip:hover { border-color: var(--accent); }
.dm-n.s-a { color: var(--jade); font-weight: 600; }
.dm-n.s-b { color: var(--ember); font-weight: 600; }
.dm-sub { font: 500 12px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
.dm-note { margin-top: 14px; }
.dm-cover { margin: -4px 0 10px; padding: 7px 10px; border-left: 3px solid var(--accent); background: var(--stone-2); font: 12px/1.5 var(--mono); color: var(--dust); }
.dm-cover b { color: var(--bone); }
.dm-how { margin-top: 10px; border: 1px solid var(--seam); background: var(--stone-2); font-size: 13px; color: var(--dust); }
.dm-how summary { cursor: pointer; padding: 9px 12px; font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.dm-how[open] summary { border-bottom: 1px solid var(--seam); }
.dm-how p, .dm-how ul { margin: 10px 14px; max-width: 82ch; line-height: 1.55; }
.dm-how ul { padding-left: 18px; }
.dm-how li { margin: 4px 0; }
.dm-how b { color: var(--bone); }
/* map crosses */
.dm-x { cursor: pointer; transition: opacity .12s; }
.dm-x circle { fill: rgba(8, 8, 6, .8); stroke-width: .4; }
.dm-x path { stroke-width: .7; stroke-linecap: round; fill: none; }
.dm-x.s-a circle, .dm-x.s-a path { stroke: var(--jade); }
.dm-x.s-b circle, .dm-x.s-b path { stroke: var(--ember); }
.dm-x.s-mine circle, .dm-x.s-mine path { stroke: var(--accent); }
.dm-x.hl circle { stroke: var(--bone); stroke-width: 1; fill: rgba(8, 8, 6, .95); }
.hl-on .dm-x:not(.hl) { opacity: .25; }
/* timeline */
.dt-chart { min-width: 0; }
.dt-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.dt-chart .grid { stroke: var(--seam); stroke-width: 1; }
.dt-chart .tick { font: 500 11px var(--mono); fill: var(--dim); }
.dt-lane { fill: rgba(var(--accent-rgb, 232, 182, 76), .07); }
.dt-zone { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--dim); }
.dt-fight { fill: var(--bone); fill-opacity: .06; cursor: pointer; }
.dt-fight:hover, .dt-fight.hl { fill-opacity: .16; }
.dt-window { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.dt-row { stroke: var(--seam); stroke-width: 1; stroke-dasharray: 2 4; }
.dt-name { font: 500 12px var(--mono); }
.dt-name.s-a { fill: var(--jade); }
.dt-name.s-b { fill: var(--ember); }
.dt-d { cursor: pointer; transition: opacity .12s; }
.dt-d.s-a { --c: var(--jade); }
.dt-d.s-b { --c: var(--ember); }
.dt-mark { fill: var(--c); stroke: var(--ink); stroke-width: 1.5; }
.dt-dead { fill: var(--c); opacity: .3; }
.dt-d.fight .dt-mark { fill: var(--stone); stroke: var(--c); stroke-width: 1.4; }
.dt-d.fight .dt-dead { opacity: .12; }
.deathmap[data-show="solo"] .dt-d.fight { opacity: .35; }
.dt-d.off, .dt-name.off { opacity: .12 !important; }
.hl-on .dt-d:not(.hl) { opacity: .15; }
.dt-d.hl { opacity: 1 !important; }
.dt-d.hl .dt-mark { stroke: var(--bone); stroke-width: 2; }
/* player histogram: lane blue, pickoff pink, teamfight muted (validated categorical hues) */
.dh-bar.k1 { fill: #3987e5; }
.dh-bar.k2 { fill: #d55181; }
.dh-bar.k0 { fill: var(--dust); fill-opacity: .45; }
.dh-bar.off { opacity: .15; }
.dh-hit { fill: transparent; cursor: pointer; }
.dh-hit:hover, .dh-hit.hl { fill: var(--bone); fill-opacity: .07; }
/* totals, with a key dot per kind */
.dt-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; font: 12px/1.7 var(--mono); color: var(--dust); }
.dm-line i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--dust); opacity: .5; }
.dm-line.k1 i { background: #3987e5; opacity: 1; }
.dm-line.k2 i { background: #d55181; opacity: 1; border-radius: 0; transform: rotate(45deg) scale(.85); }
.dm-line span { color: var(--dim); margin-left: 8px; }

/* Player page: game analysis. Picker tiles (hero art, result stripe, game rating), the game's
   head banner, impact (rating tile, places, multipliers, strengths / weak spots, the ten
   ranked), stat tiles with their place in the game, and the wards / kills / deaths map. */
.ga-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ga-picker { margin-bottom: 14px; }
button.ga-g {
  --tc: var(--dust); position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: stretch; gap: 12px;
  padding: 0 10px 0 0; min-height: 64px; text-align: left; font: inherit; text-transform: none; letter-spacing: normal;
  background: var(--stone); color: var(--bone); border: 1px solid var(--seam); border-left: 3px solid var(--jade); clip-path: none; cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
}
button.ga-g.ga-l { border-left-color: var(--ember); }
button.ga-g:hover:not(:disabled) { transform: translateY(-1px); background: var(--stone-2); border-color: var(--seam-2); color: var(--bone); }
button.ga-g.ga-l:hover:not(:disabled) { border-left-color: var(--ember); }
button.ga-g.ga-w:hover:not(:disabled) { border-left-color: var(--jade); }
button.ga-g[aria-pressed="true"] { background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), transparent 80%), var(--stone-2); border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35); }
.ga-g .ga-g-img { width: 76px; height: 100%; min-height: 62px; object-fit: cover; object-position: center 25%; display: block; }
.ga-g.ga-l .ga-g-img { filter: saturate(.4) brightness(.8); }
.ga-g-body { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; }
.ga-g-vs { font: 800 14px/1.15 var(--display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-g-who { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-g-date, .ga-g-kda { font: 400 12px/1.4 var(--mono); color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-g-date .res { font-weight: 700; }
.ga-g-kda { color: var(--bone); }
.ga-g-r { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.ga-g-r b { font: 900 26px/1 var(--display); color: var(--tc); }
.ga-g-r small { font: 700 12px var(--mono); letter-spacing: .1em; color: var(--dim); }
.ga-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font: 600 12px var(--mono); color: var(--bone); }
.ga-pager small { color: var(--dim); font-weight: 400; }
button.ga-pg { padding: 6px 12px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--stone); color: var(--accent); border: 1px solid var(--seam-2); clip-path: none; cursor: pointer; }
button.ga-pg:hover:not(:disabled) { border-color: var(--accent); background: var(--stone-2); color: var(--accent); }
button.ga-pg:disabled { opacity: .35; cursor: default; }
@media (max-width: 1200px) { .ga-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ga-g.t-S, .ga-score.t-S, .ga-ten-r.t-S { --tc: var(--gold); --tc-rgb: 232, 182, 76; }
.ga-g.t-A, .ga-score.t-A, .ga-ten-r.t-A { --tc: var(--jade); --tc-rgb: var(--jade-rgb); }
.ga-g.t-B, .ga-score.t-B, .ga-ten-r.t-B { --tc: #b9c6c0; --tc-rgb: 185, 198, 192; }
.ga-g.t-C, .ga-score.t-C, .ga-ten-r.t-C { --tc: #8a8074; --tc-rgb: 138, 128, 116; }
.ga-g.t-D, .ga-score.t-D, .ga-ten-r.t-D { --tc: var(--ember); --tc-rgb: var(--ember-rgb); }
.ga-g-flag { position: absolute; top: -6px; right: 6px; padding: 1px 5px; font: 700 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--tc); }

.ga-head {
  --rc: var(--jade); position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto auto; align-items: center; gap: 20px;
  overflow: hidden; background: var(--stone); border: 1px solid var(--seam); border-top: 3px solid var(--rc); margin-bottom: 10px;
}
.ga-head.ga-l { --rc: var(--ember); }
.ga-art { align-self: stretch; position: relative; min-height: 104px; }
.ga-art .ga-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ga-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, var(--stone)); }
.ga-head-body { padding: 14px 0; min-width: 0; }
.ga-result { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--rc); }
.ga-title { font: 900 32px/1.05 var(--display); text-transform: uppercase; margin: 6px 0; }
.ga-title a { color: var(--bone); }
.ga-meta { font: 400 12px/1.5 var(--mono); color: var(--dust); }
.ga-kda { display: flex; align-items: baseline; gap: 4px; font: 900 44px/1 var(--display); position: relative; padding-bottom: 14px; }
.ga-kda i { font-style: normal; color: var(--dim); font-size: 28px; }
.ga-kda .d { color: var(--ember); }
.ga-kda small { position: absolute; left: 0; bottom: 0; font: 600 12px var(--mono); letter-spacing: .1em; color: var(--dim); white-space: nowrap; }
.ga-open { padding: 0 18px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.ga-impact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(220px, .8fr); gap: 10px; margin-bottom: 8px; }
.ga-score { --tc: var(--dust); --tc-rgb: 155, 145, 132; background: linear-gradient(160deg, rgba(var(--tc-rgb), .12), transparent 55%), var(--stone); border: 1px solid var(--seam); border-top: 3px solid var(--tc); padding: 16px; display: grid; gap: 14px; align-content: start; }
.ga-rating { display: flex; align-items: center; gap: 12px; }
.ga-letter { display: grid; place-items: center; width: 60px; height: 60px; font: 900 44px/1 var(--display); color: var(--on-accent); background: var(--tc); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.ga-rating b { font: 900 64px/.85 var(--display); color: var(--tc); text-shadow: 0 0 30px rgba(var(--tc-rgb), .35); }
.ga-rating small { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.ga-places { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ga-places div { display: flex; align-items: baseline; gap: 6px; }
.ga-places b { font: 900 28px/1 var(--display); color: var(--bone); }
.ga-places small { font: 400 12px var(--mono); color: var(--dust); }
.ga-mults { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ga-mult { padding: 8px; background: var(--stone-2); border: 1px solid var(--seam); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ga-mult b { font: 900 22px/1 var(--display); color: var(--bone); }
.ga-mult.up b { color: var(--jade); }
.ga-mult.down b { color: var(--ember); }
.ga-mult small { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.ga-mult em { font: 400 12px var(--mono); font-style: normal; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-why { display: grid; gap: 10px; align-content: start; }
.ga-why-col { background: var(--stone); border: 1px solid var(--seam); border-left: 3px solid var(--jade); padding: 12px 14px; }
.ga-why-col.down { border-left-color: var(--ember); }
.ga-why-col h3 { margin: 0 0 8px; font: 900 18px/1 var(--display); text-transform: uppercase; color: var(--jade); }
.ga-why-col.down h3 { color: var(--ember); }
.ga-why-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ga-why-col li { display: flex; justify-content: space-between; gap: 10px; font: 400 12px var(--mono); }
.ga-why-col li b { font-weight: 600; color: var(--bone); }
.ga-why-col li span { text-align: right; color: var(--bone); white-space: nowrap; }
.ga-why-col li small { color: var(--dim); }
.ga-ten { list-style: none; margin: 0; padding: 8px; background: var(--stone); border: 1px solid var(--seam); display: grid; gap: 2px; align-content: start; }
.ga-ten li { display: grid; grid-template-columns: 18px 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px; border-left: 2px solid transparent; font: 400 12px var(--mono); }
.ga-ten li.s-a { border-left-color: rgba(var(--jade-rgb), .5); }
.ga-ten li.s-b { border-left-color: rgba(var(--ember-rgb), .5); }
.ga-ten li.me { background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4); }
.ga-ten .hero-img { width: 36px; height: 20px; }
.ga-ten-n { color: var(--dim); text-align: right; }
.ga-ten-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-ten-r { --tc: var(--dust); font: 900 18px/1 var(--display); color: var(--tc); }

.ga-more { margin: 0 0 8px; background: var(--stone); border: 1px solid var(--seam); }
.ga-more summary { cursor: pointer; padding: 10px 14px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ga-more[open] summary { border-bottom: 1px solid var(--seam); }
.ga-more .table-note { padding: 0 14px 12px; margin: 0; }
.ga-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; padding: 12px 14px; }
.ga-bars-h { grid-column: 1 / -1; margin-top: 8px; font: 800 14px var(--display); text-transform: uppercase; color: var(--dust); }
.ga-bar { display: grid; grid-template-columns: 130px minmax(60px, 1fr) 150px 52px; align-items: center; gap: 10px; font: 400 12px var(--mono); }
.ga-bar-l { color: var(--bone); white-space: nowrap; }
.ga-bar-t { position: relative; height: 8px; background: rgba(255, 255, 255, .05); }
.ga-bar-t::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--seam-2); }
.ga-bar-t i { display: block; height: 100%; width: calc(var(--m) * 100%); background: var(--dust); }
.ga-bar.up .ga-bar-t i { background: var(--jade); box-shadow: 0 0 8px rgba(var(--jade-rgb), .5); }
.ga-bar.down .ga-bar-t i { background: var(--ember); }
.ga-bar-v { color: var(--bone); white-space: nowrap; text-align: right; }
.ga-bar-v small, .ga-bar-p small { color: var(--dim); }
.ga-bar-p { text-align: right; color: var(--dust); }

.ga-h3 { margin: 22px 0 10px; font: 900 22px/1.1 var(--display); text-transform: uppercase; }
.tier-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.tier-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.tier-vs-l { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.tier-vs .seg { padding: 6px 12px; font-size: 12px; }
.ga-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.ga-cmp-l { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.ga-cmp .segs { margin: 0; }
.ga-cmp .seg { padding: 6px 12px; font-size: 12px; }
.ga-cmp-x:disabled { opacity: .4; cursor: not-allowed; }
.ga-h3 small { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mono); text-transform: none; color: var(--dim); }
.ga-group { display: grid; grid-template-columns: 110px minmax(0, 1fr); background: var(--stone); border: 1px solid var(--seam); margin-bottom: 6px; }
.ga-group-h { display: flex; align-items: center; padding: 10px 16px 10px 12px; background: var(--seam-2); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); font: 900 17px/1.05 var(--display); text-transform: uppercase; }
.ga-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ga-stat { --sc: var(--seam-2); position: relative; padding: 10px 12px 12px; background: var(--stone); border-top: 2px solid var(--sc); border-right: 1px solid var(--seam); border-bottom: 1px solid var(--seam); }
.ga-stat.best { --sc: var(--gold); background: linear-gradient(170deg, rgba(232, 182, 76, .1), transparent 60%), var(--stone); }
.ga-stat.good { --sc: var(--jade); }
.ga-stat.bad { --sc: var(--ember); }
.ga-stat .k { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); flex: 1 1 0; }
.ga-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2px 8px; }
.ga-stat .v { font: 900 28px/1.05 var(--display); margin-top: 4px; }
.ga-stat .s { font: 400 12px/1.3 var(--mono); color: var(--dim); margin-top: 2px; }
.ga-rk { margin-left: auto; white-space: nowrap; font: 900 16px/1 var(--display); color: var(--sc); }
.ga-stat:not(.best):not(.good):not(.bad) .ga-rk { color: var(--dust); }
.ga-rk small { font: 400 12px var(--mono); color: var(--dim); }

button.ga-go { margin-left: 8px; padding: 2px 7px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .45); clip-path: none; cursor: pointer; }
button.ga-go:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }

@media (max-width: 1200px) {
  .ga-impact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ga-ten { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 16px; }
  .ga-bars { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .ga-pick { grid-template-columns: minmax(0, 1fr); }
  .ga-head { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .ga-kda { grid-column: 2; font-size: 34px; }
  .ga-open { grid-column: 1 / -1; padding: 0 12px 12px; }
  .ga-title { font-size: 24px; }
  .ga-impact { grid-template-columns: minmax(0, 1fr); }
  .ga-ten { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .ga-mults { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-group { grid-template-columns: minmax(0, 1fr); }
  .ga-group-h { clip-path: none; font-size: 15px; padding: 8px 12px; }
  .ga-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-bar { grid-template-columns: 100px minmax(40px, 1fr) auto; }
  .ga-bar-p { display: none; }
}
/* map zoom (lib/mapzoom.js): click to zoom, drag to move; marks keep their size via --ms */
.mz-wrap { position: relative; }
.mz-wrap .wm-map svg { cursor: zoom-in; touch-action: pan-y; }
.zoomed .mz-wrap .wm-map svg { cursor: grab; touch-action: none; }
.panning .mz-wrap .wm-map svg { cursor: grabbing; }
.mz-wrap .dm-x, .mz-wrap .wm-dots > * { cursor: pointer; }
.mz-ctl { position: absolute; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 4px; }
.mz-ctl button { width: 28px; height: 28px; padding: 0; background: rgba(8, 8, 6, .8); color: var(--bone); border: 1px solid var(--seam-2); font: 600 15px/1 var(--mono); cursor: pointer; }
.mz-ctl button:hover { border-color: var(--accent); color: var(--accent); }
.mz-level { font: 600 12px var(--mono); color: var(--accent); margin-right: 4px; paint-order: stroke; text-shadow: 0 0 3px #000; }
.mz-hint { position: absolute; left: 8px; top: 8px; padding: 3px 7px; background: rgba(8, 8, 6, .7); font: 12px var(--mono); letter-spacing: .06em; color: var(--dim); pointer-events: none; opacity: 0; transition: opacity .2s; }
.mz-wrap:hover .mz-hint { opacity: 1; }
/* deaths map tooltip: every death under the pointer */
.dm-tip { position: absolute; z-index: 2; width: max-content; max-width: min(380px, 90%); padding: 8px 10px; background: rgba(8, 8, 6, .94); border: 1px solid var(--seam-2); font: 12px/1.55 var(--mono); color: var(--bone); pointer-events: none; }
.dm-tip-h { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.dm-tip-l { padding-left: 15px; text-indent: -15px; }
.dm-tip-l i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; }
.dm-tip-l.s-a i { background: var(--jade); }
.dm-tip-l.s-b i { background: var(--ember); }
.dm-tip-l.s-mine i { background: var(--accent); }
/* game totals: key marks match the timeline (team colour; circle lane, diamond pickoff, ring teamfight) */
.deathmap[data-mode="game"] .dm-line i { opacity: 1; background: var(--c); }
.deathmap[data-mode="game"] .wm-stat.s-a { --c: var(--jade); }
.deathmap[data-mode="game"] .wm-stat.s-b { --c: var(--ember); }
.deathmap[data-mode="game"] .dm-line.k0 i { background: transparent; border: 1.5px solid var(--c); width: 7px; height: 7px; }
/* deaths map: hero portraits in a team-coloured ring, hero filter, portraits in the tooltip */
.dm-x.dm-p circle { fill: var(--ink); stroke-width: .7; }
.dm-x.dm-p.hl circle { stroke: var(--bone); stroke-width: 1.1; }
.dm-pick { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dm-pick select { max-width: 240px; padding: 6px 8px; background: var(--stone-2); color: var(--bone); border: 1px solid var(--seam-2); font: 500 12px var(--mono); letter-spacing: 0; text-transform: none; }
.dm-pick select:focus { outline: 1px solid var(--accent); }
.deathmap:not([data-hero=""]) .dm-pick select { border-color: var(--accent); color: var(--accent); }
.dt-name { cursor: pointer; }
.dt-name:hover { text-decoration: underline; }
.dt-name.on { font-weight: 700; }
.dm-tip-l img { width: 28px; height: 16px; object-fit: cover; margin-right: 8px; vertical-align: -3px; border: 1px solid var(--seam-2); }
.dm-tip-l { padding-left: 38px; text-indent: -38px; }

/* Game analysis: gold & events chart. The player's gold as a glowing area, the enemy at their
   position dashed, kills / deaths on the gold line, a map lane for Roshan / Tormentor / buildings
   (theirs above, the enemy's below), the team lead underneath, teamfights shaded. */
.gamegold { margin: 0 0 8px; padding: 14px 16px 10px; background: var(--stone); border: 1px solid var(--seam); border-top: 3px solid var(--accent); }
.gg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; font: 400 12px var(--mono); color: var(--dust); }
.gg-k { display: inline-flex; align-items: center; gap: 6px; }
.gg-k::before { content: ""; display: inline-block; width: 14px; height: 3px; background: var(--dust); }
.gg-k.mine::before { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), .8); }
.gg-k.opp::before { height: 0; border-top: 2px dashed var(--ember); background: none; }
.gg-k.kill::before { width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--jade); }
.gg-k.death::before { width: 10px; height: 10px; border-radius: 50%; background: var(--ember); }
.gg-k.obj::before { width: 9px; height: 9px; transform: rotate(45deg); background: #b48cff; }
.gg-k.obj.tor::before { background: #5aa9e6; }
.gg-k.bld::before { width: 14px; height: 7px; background: linear-gradient(90deg, var(--jade) 50%, var(--ember) 50%); }
.gg-k.fight::before { width: 12px; height: 12px; background: rgba(255, 255, 255, .12); }
.gg-chart { position: relative; }
.gg-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.gg-hit { fill: transparent; }
.gg-grid { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.gg-tick { font: 400 12px var(--mono); fill: var(--dim); }
.gg-rl { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--dust); }
.gg-fight { fill: rgba(255, 255, 255, .045); }
.gg-fight:hover { fill: rgba(255, 255, 255, .1); }
.gg-stop-a { stop-color: var(--accent); stop-opacity: .35; }
.gg-stop-b { stop-color: var(--accent); stop-opacity: 0; }
.gg-mine { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .6)); }
.gg-opp { fill: none; stroke: var(--ember); stroke-width: 2; stroke-dasharray: 6 5; opacity: .85; }
.gg-end text { font: 700 11px var(--mono); }
.gg-end .gg-end-v { font: 900 15px var(--display); }
.gg-end.mine text { fill: var(--accent); }
.gg-end.opp text { fill: var(--ember); }
.gg-lead-in { fill: none; stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.gg-end.mine .gg-lead-in { stroke: var(--accent); }
.gg-end.opp .gg-lead-in { stroke: var(--ember); }
.gg-kill { fill: var(--jade); stroke: var(--stone); stroke-width: 1.5; }
.gg-death circle { fill: var(--ember); stroke: var(--stone); stroke-width: 1.5; }
.gg-death path { stroke: var(--ink); stroke-width: 1.6; }
.gg-kill:hover, .gg-death:hover, .gg-obj:hover, .gg-bld:hover { filter: brightness(1.4); }
.gg-lane { stroke: var(--seam-2); stroke-width: 1; stroke-dasharray: 2 3; }
.gg-obj rect { stroke: var(--stone); stroke-width: 1.5; }
.gg-obj.roshan rect { fill: #b48cff; }
.gg-obj.tormentor rect { fill: #5aa9e6; }
.gg-obj.theirs rect { opacity: .55; }
.gg-obj text { font: 800 10px var(--mono); fill: var(--ink); pointer-events: none; }
.gg-bld { stroke: var(--stone); stroke-width: 1; }
.gg-bld.ours { fill: var(--jade); }
.gg-bld.theirs { fill: var(--ember); }
.gg-lead.up { fill: rgba(var(--jade-rgb), .35); stroke: var(--jade); stroke-width: 1.2; }
.gg-lead.down { fill: rgba(var(--ember-rgb), .3); stroke: var(--ember); stroke-width: 1.2; }
.gg-zero { stroke: var(--seam-2); stroke-width: 1; }
.gg-cross { stroke: var(--bone); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; pointer-events: none; }
.gg-tip {
  position: absolute; top: 8px; z-index: 2; min-width: 170px; max-width: 280px; padding: 8px 10px; pointer-events: none;
  background: rgba(var(--ink-rgb), .94); border: 1px solid var(--seam-2); border-left: 3px solid var(--accent);
  font: 400 12px/1.55 var(--mono); color: var(--bone); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.gg-tip b { display: block; font: 900 18px/1.1 var(--display); color: var(--accent); margin-bottom: 2px; }
.gg-tip .gg-k { margin-right: 6px; }
.gg-tip em { font-style: normal; font-weight: 700; margin-left: 4px; }
.gg-tip em.up { color: var(--jade); }
.gg-tip em.down { color: var(--ember); }
.gg-tip .gg-ev { color: var(--dust); border-top: 1px solid var(--seam); margin-top: 3px; padding-top: 3px; }
@media (max-width: 1000px) {
  .gamegold { padding: 10px 8px 6px; }
  .gg-tip { min-width: 140px; font-size: 11px; }
}
/* team fight map (lib/fightmap.js): heat of teamfight deaths, or one circle per fight */
.fightmap[data-view="fights"] [data-ctl="who"] { display: none; }
.fm-river { stroke: var(--bone); stroke-opacity: .35; stroke-width: .35; stroke-dasharray: 1.5 1.5; pointer-events: none; }
.fm-f { stroke: rgba(8, 8, 6, .9); stroke-width: .45; fill-opacity: .72; cursor: pointer; transition: fill-opacity .12s; }
.fm-f.won { fill: var(--jade); }
.fm-f.lost { fill: var(--ember); }
.fm-f.even { fill: var(--dust); }
.fm-f:hover, .fm-f.hl { fill-opacity: 1; stroke: var(--bone); stroke-width: .8; }
.fm-k { color: var(--jade) !important; }
.fm-d { color: var(--ember) !important; }

/* Player page head cards: season numbers and the three best games, two full rows on a wide
   screen (--cols = half the cards). Narrower screens fall back to the usual auto-fit grid. */
@media (min-width: 1400px) {
  .player-cards { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; }
  .player-cards .card { padding: 16px 14px; }
  .player-cards .card .v { font-size: 34px; }
  .player-cards .card .k { letter-spacing: .1em; }
}
.player-cards .best-game { border-color: rgba(var(--accent-rgb), .35); background: linear-gradient(160deg, rgba(var(--accent-rgb), .08), transparent 60%), var(--stone); }
.player-cards .best-game .k { color: var(--accent); }
@media (min-width: 1400px) { .player-cards .card .v.pair { font-size: 27px; } }
/* Team page head cards: two to a row on a phone (fifteen full-width cards is a long scroll). */
@media (max-width: 760px) {
  .team-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .team-cards .card { padding: 14px 12px; }
  .team-cards .card .v { font-size: 28px; margin: 10px 0 6px; }
  .team-cards .card .v.pair { font-size: 21px; }
  .team-cards .card .s { font-size: 12px; }
}

/* Player page tabs (Stats / Heroes / Map / Games): styled like the site nav. */
/* Compact player header: one kicker line, then name + tier + team line + tabs in one row
   sitting on a rule. */
.pp-head { margin-bottom: 22px; }
.pp-head .kicker { flex-wrap: wrap; row-gap: 6px; }
.pp-head .kicker a, .pp-league { color: inherit; white-space: nowrap; }
/* A player's profile background (parts/profile-background.js): a loading screen framed by
   object-position and scale, under the page colour at --pbg-dim. Behind the head it fades in from
   the left so the name stays readable; .pbg-fixed covers the whole page behind the content. */
.pp-head.has-bg { position: relative; isolation: isolate; padding: 22px 22px 0; border-radius: 10px; overflow: hidden; }
@media (max-width: 760px) { .pp-head.has-bg { padding: 14px 12px 0; } }
.pbg-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* The art is a card-editor thumbnail (.ft-art-thumb) stretched over the layer, so the card image
   styles apply; "plain" is no style. Hue turns the art like a card's --art-hue. */
.pbg-layer .ft-art-thumb { position: absolute; inset: 0; height: auto; border-radius: 0; background: none; }
.pbg-layer .ft-art, .pbg-editor [data-styles] .ft-art { filter: hue-rotate(var(--art-hue, 0deg)); }
.pbg-layer .ft-art img { transition: none; }
/* Your signature on the background: placed by percent and sized in cqi of the background's width,
   like a card's (lib/signatures.js). Above the dim overlay. In the editor you drag it. */
.pbg-sig { position: absolute; inset: 0; z-index: 1; container-type: inline-size; }
.pbg-sig .card-autograph { position: absolute; width: max-content; max-width: 90%; transform: translate(-50%, -50%) rotate(var(--placement-rotation, -7deg)); color: var(--signature-ink); text-align: center; filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 8px var(--signature-glow)); }
.pbg-preview .pbg-sig .card-autograph { pointer-events: auto; cursor: move; }
:is(.pbg-layer, .pbg-editor) [data-style="plain"] .ft-art img { filter: none; }
.pbg-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--ink-rgb), min(1, calc(var(--pbg-dim) + .4))) 0%, rgba(var(--ink-rgb), var(--pbg-dim)) 55%, rgba(var(--ink-rgb), calc(var(--pbg-dim) * .6)) 100%); }
/* Sized to the large viewport so a phone's address bar showing or hiding mid-scroll doesn't
   resize (and re-crop) the whole background; its own layer so scrolling doesn't repaint it. */
.pbg-layer.pbg-fixed { position: fixed; z-index: -1; bottom: auto; height: 100vh; height: 100lvh; transform: translateZ(0); }
/* The head's text in the colour picked in the background editor (--pbg-text), with a shadow so it
   reads over the art. Unpicked tabs stay a step fainter than the picked one. */
.pp-head.pbg-text :is(.kicker, .kicker a, .crumbs li::before, .crumbs [aria-current], .h1-name, .h1-name *, .pp-sub, .pp-sub *, .pp-follows, .pp-follows *, .pp-tabs button) { color: var(--pbg-text); text-shadow: 0 1px 2px rgb(0 0 0 / .7), 0 0 10px rgb(0 0 0 / .45); }
.pp-head.pbg-text .pp-tabs button:not([aria-selected="true"]) { opacity: .72; }
.pp-head.pbg-text .pp-tabs button:hover { opacity: 1; }
/* Auto text: the site's colours with a shadow, and dark ink on the pieces over bright art
   (.pbg-ink-dark, marked by parts/profile-background.js). */
.pp-head.pbg-auto :is(.kicker li, .h1-name, .pp-sub, .pp-tabs button) { text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.pp-head.pbg-auto .pbg-ink-dark, .pp-head.pbg-auto .pbg-ink-dark * { color: #17141b; text-shadow: 0 0 6px rgb(255 255 255 / .45); }
.pp-head.pbg-auto .kicker li.pbg-ink-dark::before { color: #17141b; }
.pbg-layer.pbg-fixed::after { background: linear-gradient(rgba(var(--ink-rgb), calc(var(--pbg-dim) * .8)), rgba(var(--ink-rgb), var(--pbg-dim)) 40%, rgba(var(--ink-rgb), min(1, calc(var(--pbg-dim) + .15)))); }
@media (max-width: 760px) {
  .pp-head .kicker::before { display: none; }
  .pp-row .pp-tabs { margin-left: -11px; width: calc(100% + 11px); }
}
.pp-league { display: inline-flex; align-items: center; gap: 10px; color: var(--dust); }
/* Breadcrumbs on detail pages: league › list › this page, in the kicker line. */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--dim); letter-spacing: 0; }
.crumbs a { color: inherit; white-space: nowrap; }
.crumbs [aria-current] { color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.pp-league::before { content: "·"; }
.pp-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 24px; margin-top: 18px; border-bottom: 1px solid var(--seam); }
.pp-row h1 { margin: 0 0 12px; font-size: clamp(36px, 4.4vw, 58px); }
.pp-hero-img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 14px; border: 1px solid var(--seam-2); box-shadow: 0 18px 40px -18px #000; }
@media (max-width: 760px) { .pp-hero-img { width: 96px; } }
.pp-row .pp-sub { margin: 0 0 16px; color: var(--dust); max-width: none; }
.pp-row .pp-follows { display: flex; gap: 14px; margin: 0 0 16px; color: var(--dust); font-size: 14px; }
.pp-row .pp-follows strong { color: var(--bone); font-variant-numeric: tabular-nums; }
.pp-row .pp-tabs { margin-left: auto; }
.pp-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.pp-tabs button {
  font: 600 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  color: var(--dust); background: none; border: 0; clip-path: none; padding: 14px 18px; position: relative;
}
.pp-tabs button:hover { color: var(--bone); }
.pp-tabs button[aria-selected="true"] { color: var(--bone); }
.pp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--accent); }
.pp-tabs button:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.pp-panel > h2:first-child, .pp-panel > div:first-child > h2:first-child { margin-top: 0; }
.tier-role-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.tier-role-switch button { padding: 5px 8px; border: 1px solid var(--seam-2); background: none; color: var(--dust); font: 600 10px var(--mono); cursor: pointer; }
.tier-role-switch button[aria-pressed="true"] { color: var(--bone); border-color: var(--accent); }
@media (max-width: 520px) { .pp-tabs button { padding: 12px 11px; font-size: 11px; letter-spacing: .08em; } }

/* Sidebar (core.js sideBar, "Move subtabs" in the settings cog): a page's tabs, or the Content
   page's weeks, in a full-height column on the left, opened by the handle on its edge. Wide
   screens: under the sticky header, and the page moves over to make room. Phones: the whole
   height, over the page, which dims behind it. */
.side-panel, .side-handle { -webkit-user-select: none; user-select: none; }
.side-panel {
  position: fixed; z-index: 31; left: 0; top: var(--head-h, 0px); bottom: 0;
  width: max-content; min-width: 150px; max-width: min(300px, 85vw);
  overflow-y: auto; overscroll-behavior: contain; padding: 18px 14px 24px 10px;
  background: var(--ink); border-right: 1px solid var(--seam);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s;
}
.side.open .side-panel { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.side-group + .side-group { margin-top: 18px; }
.side-group > .menu-label { padding: 0 8px 8px; }
/* The handle rides the panel's right edge and moves with it. */
.side-handle {
  position: fixed; z-index: 31; left: 0; top: calc(var(--head-h, 0px) + 18px);
  display: flex; align-items: center; gap: 8px; cursor: pointer; clip-path: none;
  writing-mode: vertical-rl; padding: 14px 8px;
  font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dust); background: var(--ink);
  border: 1px solid var(--seam); border-left: 0; border-radius: 0 2px 2px 0;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), color .15s, border-color .15s;
}
.side-handle:hover, .side.open .side-handle { color: var(--bone); border-color: var(--seam-2); }
.side-handle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.side.open .side-handle { transform: translateX(var(--side-w, 240px)); }
.side-handle svg { flex: none; color: var(--accent); transform: rotate(-90deg); transition: transform .22s; }
.side.open .side-handle svg { transform: rotate(90deg); }
.side-now { max-height: 40vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-shade { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .45); }
.side-shade[hidden] { display: none; }
/* Reopening a docked sidebar on the next page: no slide. */
.side.still .side-panel, .side.still .side-handle, .side.still .side-handle svg { transition: none; }
@media (min-width: 1001px) {
  #app { transition: padding-left .22s cubic-bezier(.2, .8, .2, 1); }
  #app:has(> .side.open) { padding-left: calc(var(--side-w, 240px) + clamp(16px, 4vw, 48px)); }
  #app:has(> .side.still) { transition: none; }
}
/* Page tabs, stacked, styled like the tabs they came from: mono caps, the open one bright with
   the league-colour underline. */
.side .pp-tabs { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; margin: 0; width: auto; border: 0; }
.side .pp-tabs button { text-align: left; padding: 12px 8px; }
.side .pp-tabs button[aria-selected="true"]::after { left: 8px; right: 8px; bottom: 4px; }
.side .pp-tabs button:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
/* Content page weeks, newest on top, in the same style: number, date, games. */
.side .week-pick { max-width: none; margin: 0; }
.side .week-pick-label { display: none; }
.side .week-chips { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; overflow: visible; padding: 0; }
.side .week-chip {
  position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 0 10px; padding: 10px 8px;
  border: 0; background: none; color: var(--dust); transform: none;
}
.side .week-chip .wn { grid-row: auto; font-size: 20px; }
.side .week-chip:hover { background: none; color: var(--bone); transform: none; }
.side .week-chip.on { background: none; color: var(--bone); }
.side .week-chip.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: var(--accent); }
.side .week-chip.on .wd, .side .week-chip.on .wc { color: var(--dust); opacity: 1; }
.side .week-chip:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
@media (max-width: 1000px) { .side-panel { background: var(--stone-2); border-right-color: var(--seam-2); box-shadow: 18px 0 40px rgba(0, 0, 0, .5); } }
@media (max-width: 760px) {
  .side-panel { top: 0; }
  .side-handle { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); padding: 12px 7px; background: var(--stone-2); }
  .side .pp-tabs button { padding: 14px 8px; }
}
@media (prefers-reduced-motion: reduce) { .side-panel, .side.open .side-panel, .side-handle, .side-handle svg, #app { transition: none !important; } }

/* Player page: a big tier letter beside the name (its colour from .t-X), with a small corner
   arrow saying it opens; clicking opens the breakdown as a modal. */
h1:has(> .tier-badge) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
/* The button only positions; the letter tile carries the colour and the site's slanted edge
   (a clip-path would cut off the corner arrow and the glow, so the glow is a drop-shadow). */
button.tier-badge {
  position: relative; display: block; margin: 0; padding: 0; background: none; border: 0; clip-path: none; cursor: pointer;
  font: inherit; color: inherit; text-transform: none; letter-spacing: 0;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tc) 45%, transparent));
  transition: transform .12s, filter .12s;
}
button.tier-badge:hover:not(:disabled) { background: none; color: inherit; transform: translateY(-3px); filter: drop-shadow(0 0 24px color-mix(in srgb, var(--tc) 70%, transparent)); }
button.tier-badge:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
.tb-letter {
  display: flex; align-items: center; justify-content: center; height: .92em; padding: 0 .3em 0 .2em;
  font: 900 1em/1 var(--display); color: var(--on-accent); background: var(--tc);
  clip-path: polygon(0 0, 100% 0, calc(100% - .16em) 100%, 0 100%);
}
.tb-pop {
  position: absolute; top: -9px; right: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font: 700 12px/1 var(--mono); color: var(--tc); background: var(--ink); border: 1px solid var(--tc);
  animation: tb-pulse 2.4s ease-in-out infinite;
}
button.tier-badge:hover .tb-pop { animation: none; background: var(--bone); color: var(--ink); border-color: var(--bone); }
@keyframes tb-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc) 60%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .tb-pop { animation: none; } }
@media (max-width: 760px) { .tb-pop { width: 18px; height: 18px; top: -8px; right: -4px; } }

html.modal-open, html.modal-open body { overflow: hidden; }
dialog.tier-modal {
  width: min(1180px, 94vw); max-width: none; max-height: 90vh; padding: 0; overflow: hidden;
  display: none; flex-direction: column; border: 1px solid var(--seam-2); border-top: 3px solid var(--tc);
  background: var(--stone); color: var(--bone); box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
dialog.tier-modal[open] { display: flex; animation: tm-in .22s cubic-bezier(.2, .8, .2, 1); }
dialog.tier-modal::backdrop { background: rgba(6, 5, 4, .78); backdrop-filter: blur(3px); }
@keyframes tm-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.tm-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--seam); background: var(--stone-2); }
.tm-title { min-width: 0; flex: 1; }
.tm-title h3 { margin: 0; font: 900 24px/1.05 var(--display); text-transform: uppercase; }
.tm-title small { font: 400 12px var(--mono); color: var(--dust); }
button.tm-close { margin-left: auto; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; font: 400 26px/1 var(--body); background: transparent; border: 1px solid var(--seam-2); color: var(--bone); cursor: pointer; clip-path: none; }
button.tm-close:hover:not(:disabled) { border-color: var(--tc); color: var(--tc); background: transparent; }
.tm-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 18px; }
.tm-body > .bd { margin-top: 0; border-top: 0; }
@media (max-width: 760px) {
  dialog.tier-modal { width: 100vw; max-height: 92vh; }
  .tm-body { padding: 4px 10px 14px; }
}

/* ---------- game page ---------- */
.gm-back { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.gm-ext { margin-left: auto; display: flex; gap: 14px; }
.gm-ext::before { display: none; }
.banner.compact { min-height: 0; }
.banner.compact .plate { padding-top: 20px; padding-bottom: 22px; gap: 10px; }
.banner.compact .plate .team { font-size: clamp(22px, 2.6vw, 34px); }
.banner.compact .plate .n { font-size: clamp(56px, 7vw, 92px); }
.banner.compact .banner-meta { bottom: 12px; font-size: 12px; padding: 7px 12px; }
.gm-h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dust); }
.gm-facts .s-a, .gm-tape-head .s-a { color: var(--jade); }
.gm-facts .s-b, .gm-tape-head .s-b { color: var(--ember); }

/* Series / head-to-head strip */
.gm-series { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 10px 0 0; }
.gm-series-k { align-self: center; margin-right: 8px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.gm-series-k b { color: var(--bone); font-weight: 600; letter-spacing: .04em; margin-left: 6px; }
.gm-chip { display: flex; flex-direction: column; gap: 3px; padding: 6px 12px; min-width: 110px; background: var(--stone); border: 1px solid var(--seam); border-left: 3px solid var(--c); color: var(--bone); font: 600 12px/1.2 var(--body); }
.gm-chip small { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.gm-chip.s-a { --c: var(--jade); }
.gm-chip.s-b { --c: var(--ember); }
a.gm-chip:hover { border-color: var(--seam-2); border-left-color: var(--c); text-decoration: none; background: var(--stone-2); }
.gm-chip.on { background: var(--stone-2); outline: 1px solid var(--accent); outline-offset: -1px; }

/* Casts: links to casts of the game, anyone can add */
.gm-casts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.gm-cast { display: flex; align-items: stretch; background: var(--stone); border: 1px solid var(--seam); border-left: 3px solid var(--accent); }
.gm-cast a { display: flex; flex-direction: column; gap: 3px; padding: 6px 4px 6px 12px; color: var(--bone); font: 600 12px/1.2 var(--body); max-width: 240px; }
.gm-cast a:hover { text-decoration: none; background: var(--stone-2); }
.gm-cast small { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.gm-cast-x { border: 0; background: none; color: var(--dim); padding: 0 8px; min-width: 0; font-size: 14px; cursor: pointer; }
.gm-cast-x:hover { color: var(--ember); background: var(--stone-2); }
.gm-cast-add { font-size: 12px; color: var(--dust); }
.gm-cast-add summary { cursor: pointer; width: max-content; padding: 6px 4px; }
.gm-cast-add form { margin-top: 6px; flex-wrap: wrap; gap: 6px; }
.gm-cast-add input { min-width: 0; flex: 1 1 180px; box-sizing: border-box; }
.gm-cast-add summary { color: var(--accent); }
.gm-cast-add[open] { flex-basis: 100%; }

/* Key facts */
.gm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 14px 0; background: var(--seam); border: 1px solid var(--seam); }
.gm-fact { background: var(--stone); padding: 12px 14px; min-width: 0; }
.gm-fact .k, .gm-stand .k { display: flex; align-items: center; gap: 4px; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.gm-fact .v { display: flex; align-items: center; gap: 8px; margin: 7px 0 4px; font: 800 22px/1.05 var(--display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-fact .v a { color: var(--bone); overflow: hidden; text-overflow: ellipsis; }
.gm-fact .s { font-size: 12px; color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-img.fact-img { width: 38px; height: 21px; flex: none; }

/* Team comparison + draft */
.gm-top { display: grid; gap: 12px; margin-bottom: 28px; }
.gm-tape, .gm-draft { background: var(--stone); border: 1px solid var(--seam); padding: 12px 16px 10px; min-width: 0; }
.gm-draft .draft-rows { grid-template-columns: 1fr 1fr; gap: 64px; }
.gm-draft .draft-picks, .gm-draft .draft-bans { gap: 6px; }
@media (max-width: 760px) { .gm-draft .draft-rows { grid-template-columns: 1fr; gap: 10px; } }
.gm-draft .draft-legend { margin-bottom: 0; }
.gm-tape-rows { columns: 300px 2; column-gap: 48px; }
.gm-row { break-inside: avoid; }
.gm-tape-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font: 800 14px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.gm-tape-head a { color: inherit; }
.gm-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; column-gap: 10px; padding: 5px 0 6px; }
.gm-row .va, .gm-row .vb { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--dust); }
.gm-row .vb { text-align: right; }
.gm-row.lead-a .va { color: var(--jade); font-weight: 700; }
.gm-row.lead-b .vb { color: var(--ember); font-weight: 700; }
.gm-row .tl { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-align: center; }
.gm-row .tbar {
  grid-column: 1 / -1; height: 4px; margin-top: 5px; opacity: .55;
  background: linear-gradient(90deg, var(--jade) 0 calc(var(--p) * 100% - 1px), var(--ink) calc(var(--p) * 100% - 1px) calc(var(--p) * 100% + 1px), var(--ember) calc(var(--p) * 100% + 1px));
}
.gm-row.lead-a .tbar, .gm-row.lead-b .tbar { opacity: .85; }

/* Tabs */
.pp-tabs.gm-tabs { border-bottom: 1px solid var(--seam-2); margin-bottom: 18px; }

/* Scoreboard */
.gm-standouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.gm-stand { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--stone); border: 1px solid var(--seam); min-width: 0; }
.gm-stand > div { min-width: 0; }
.gm-stand .v { font: 800 22px/1 var(--display); margin: 5px 0 3px; }
.gm-stand .s { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-stand .hero-img.fact-img { width: 48px; height: 27px; }
.gm-board { max-height: none; }
.gm-board td.who { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.gm-board td.who .hero-img { width: 48px; height: 27px; flex: none; }
.who-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.who-name { font-weight: 600; }
.who-sub { font: 400 12px/1.2 var(--mono); color: var(--dim); }
.who-sub a { color: var(--dust); }
.who-r { margin-left: auto; min-width: 32px; padding: 3px 5px; text-align: center; font: 700 12px/1 var(--mono); color: var(--on-accent); background: var(--tc); }

/* Ratings */
.gm-ratings { list-style: none; margin: 0; padding: 0; border: 1px solid var(--seam); background: var(--stone); }
.gm-ratings li {
  display: grid; grid-template-columns: 22px 48px minmax(140px, 1.3fr) minmax(0, 2fr) 130px 58px; gap: 12px; align-items: center;
  padding: 8px 14px 8px 11px; border-bottom: 1px solid var(--seam); border-left: 3px solid var(--c);
}
.gm-ratings li:last-child { border-bottom: 0; }
.gm-ratings li.s-a { --c: var(--jade); }
.gm-ratings li.s-b { --c: var(--ember); }
.gm-ratings li.mvp { background: linear-gradient(90deg, rgba(var(--accent-rgb), .08), transparent 60%); }
.rt-n { font: 600 12px var(--mono); color: var(--dim); text-align: right; }
.rt-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-who small { font: 400 12px/1.2 var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-why { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-why em { font: 500 12px/1 var(--mono); font-style: normal; padding: 4px 6px; border: 1px solid; }
.rt-why em.up { color: var(--jade); border-color: rgba(var(--jade-rgb), .35); }
.rt-why em.down { color: var(--ember); border-color: rgba(var(--ember-rgb), .35); }
.rt-season { font: 600 13px var(--mono); color: var(--dust); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rt-season small { flex-basis: 100%; font: 400 12px var(--mono); color: var(--dim); }
.rt-tier { display: inline-grid; place-items: center; width: 20px; height: 20px; font: 900 14px/1 var(--display); color: var(--on-accent); background: var(--tc); }
.rt-r { display: flex; flex-direction: column; align-items: center; padding: 5px 0; background: var(--tc); color: var(--on-accent); }
.rt-r b { font: 900 22px/1 var(--display); }
.rt-r small { font: 700 12px/1 var(--mono); letter-spacing: .1em; }
@media (max-width: 760px) {
  .gm-ratings li { grid-template-columns: 18px 40px minmax(0, 1fr) 52px; gap: 4px 8px; }
  .gm-ratings li .hero-img { width: 40px; height: 22px; }
  .rt-why, .rt-season { grid-column: 3 / 4; }
  .rt-r { grid-row: 1 / span 3; grid-column: 4; }
}

/* Gold charts: side by side on wide screens so neither grows huge. */
.gm-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
@media (min-width: 1201px) { .gm-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.gm-charts figure.chart { margin: 0; }

@media (max-width: 760px) {
  .gm-back { flex-wrap: wrap; }
  .gm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-fact .v { font-size: 19px; }
  .banner.compact .plate .n { font-size: 52px; }
}

/* Items (AD2L, parsed replays): Valve item icons, 88×64 at source. */
.item { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; gap: 2px; }
.item img, .item .missing, .item.empty { width: 33px; height: 24px; display: block; object-fit: cover; background: var(--stone-2); border: 1px solid var(--seam); }
.item .missing { display: grid; place-items: center; font: 600 10px var(--mono); color: var(--dust); }
.item b { font: 500 12px/1 var(--mono); color: var(--dust); font-variant-numeric: tabular-nums; }
.item.neutral { margin-left: 8px; }
.item.neutral img { border-radius: 50%; width: 24px; }
.item-row { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: flex-start; }
.item-row.timeline { gap: 6px; }
.items-table td .item { margin-right: 6px; }
.items-table td { vertical-align: middle; }
.items-table td + td + td + td .item-row.timeline { padding-left: 14px; border-left: 1px solid var(--seam); }
.items-table .pos { color: var(--jade); }
.items-table .neg { color: var(--ember); }
.card .v .item { margin-right: 6px; }
.card .v .item img { width: 44px; height: 32px; }
@media (max-width: 760px) {
  .item img, .item .missing, .item.empty { width: 26px; height: 19px; }
  .item.neutral img { width: 19px; }
}

/* ---------- team Map tab: league-ranked cards, per-game gold lines ---------- */
.tm-sum { display: grid; gap: 10px; padding: 14px 16px; background: var(--stone); border: 1px solid var(--seam); }
.tm-sum > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sum-k { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); min-width: 100px; }
.sum-chip { font-size: 13px; padding: 5px 10px; border: 1px solid var(--seam-2); color: var(--bone); }
.sum-chip b { font: 700 12px var(--mono); margin-right: 2px; }
.sum-chip.good { border-color: rgba(var(--jade-rgb), .4); background: rgba(var(--jade-rgb), .08); }
.sum-chip.good b { color: var(--jade); }
.sum-chip.bad { border-color: rgba(var(--ember-rgb), .4); background: rgba(var(--ember-rgb), .08); }
.sum-chip.bad b { color: var(--ember); }
.lc-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lc-cards.two { grid-template-columns: 1fr 1fr; }
.lc { display: flex; flex-direction: column; }
.lc .s { margin-top: auto; }
.lc.good { border-color: rgba(var(--jade-rgb), .35); background: linear-gradient(180deg, rgba(var(--jade-rgb), .08), transparent 70%), var(--stone); }
.lc.bad { border-color: rgba(var(--ember-rgb), .35); background: linear-gradient(180deg, rgba(var(--ember-rgb), .08), transparent 70%), var(--stone); }
.lc.good::after { background: linear-gradient(225deg, var(--jade) 50%, transparent 50%); }
.lc.bad::after { background: linear-gradient(225deg, var(--ember) 50%, transparent 50%); }
.lc.good .v { color: var(--jade); }
.lc.bad .v { color: var(--ember); }
.lc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lc-top .v { margin: 12px 0 10px; }
.lc-rank { font: 900 22px/1 var(--display); color: var(--dust); white-space: nowrap; }
.lc-rank small { font: 500 12px var(--mono); color: var(--dim); }
.lc.good .lc-rank { color: var(--jade); }
.lc.bad .lc-rank { color: var(--ember); }
.lc-strip { position: relative; height: 14px; margin: 0 6px 10px; }
.lc-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--seam-2); }
.lc-strip i, .lc-strip b { position: absolute; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.lc-strip i { width: 6px; height: 6px; background: var(--dim); }
.lc-strip b { width: 12px; height: 12px; background: var(--bone); box-shadow: 0 0 0 3px var(--stone); }
.lc.good .lc-strip b { background: var(--jade); }
.lc.bad .lc-strip b { background: var(--ember); }
.split { display: flex; gap: 2px; height: 6px; margin: 0 0 12px; }
.split i:first-child { background: var(--jade); }
.split i:last-child { background: var(--ember); }
.tg-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 12px; align-items: start; }
.tg-chart figure.chart { margin: 0; }
.mini-cards { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.card.mini { padding: 14px; }
.card.mini .v { font-size: 28px; margin: 8px 0 6px; }
.rec b { font-weight: inherit; }
.rec b.w { color: var(--jade); }
.rec b.l { color: var(--ember); }
figure.chart .ghost path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-opacity: .28; stroke-linejoin: round; transition: stroke-opacity .12s; }
figure.chart .ghost:hover path { stroke-opacity: 1; stroke-width: 2.5; }
@media (max-width: 1000px) { .tg-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .lc-cards.two, .mini-cards { grid-template-columns: 1fr; } }

/* Game page: gold lead with teamfights and item finishes (lib/itemlead.js). */
figure.chart.item-lead .area.il-a { fill: rgba(var(--jade-rgb), .14); }
figure.chart.item-lead .area.il-b { fill: rgba(var(--ember-rgb), .14); }
figure.chart.item-lead .fight-band { fill: var(--bone); opacity: .05; }
figure.chart.item-lead .fight-band:hover { opacity: .12; }
figure.chart.item-lead .fight-dot { fill: var(--dust); stroke: var(--ink); stroke-width: 1.5; fill-opacity: .85; }
figure.chart.item-lead .fight-dot.s-a { fill: var(--jade); }
figure.chart.item-lead .fight-dot.s-b { fill: var(--ember); }
figure.chart.item-lead .fight-dot:hover { stroke: var(--bone); }
figure.chart.item-lead .it-tick { stroke-width: 1.5; }
figure.chart.item-lead .it image { cursor: default; }
figure.chart.item-lead .it:hover image { outline: 1px solid var(--accent); filter: brightness(1.25); }
.gm-wide { margin-top: 18px; }

/* Player Items tab: one hero (or all) at a time. */
.ih-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ih-chips button {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; cursor: pointer;
  background: var(--stone); border: 1px solid var(--seam-2); color: var(--dust); font: 600 12px/1.2 var(--mono);
}
.ih-chips button:hover { color: var(--bone); }
.ih-chips button[aria-pressed="true"] { border-color: var(--accent); color: var(--bone); box-shadow: inset 0 -2px var(--accent); }
.ih-chips button b { font-weight: 500; color: var(--dim); }
.ih-chips .hero-img.ih-img { width: 32px; height: 18px; }
.ih-view .table-note { margin-top: 8px; }
.ih-more-btn {
  margin: 8px 0 0; padding: 6px 12px; cursor: pointer; background: var(--stone); border: 1px solid var(--seam-2);
  color: var(--dust); font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.ih-more-btn:hover { color: var(--bone); border-color: var(--accent); }

/* ---------- laning (lib/lanes.js) ---------- */
.lane-v { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border: 1px solid; white-space: nowrap; }
.lane-v.won { color: var(--jade); border-color: var(--jade-deep); }
.lane-v.even { color: var(--gold); border-color: rgba(232, 182, 76, .4); }
.lane-v.lost { color: var(--ember); border-color: var(--ember-deep); }
.ln-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 8px; }
.ln-verdict { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 10px 0 14px; }
.ln-verdict small { display: block; margin-top: 6px; font: 400 12px/1.3 var(--mono); color: var(--dust); text-transform: none; }
.ln-card.won .ln-verdict { color: var(--jade); }
.ln-card.lost .ln-verdict { color: var(--ember); }
.ln-side { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--seam); }
.ln-side + .ln-side { margin-top: 10px; }
.ln-role { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ln-side.a .ln-role { color: var(--jade); }
.ln-side.b .ln-role { color: var(--ember); }
.ln-p { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ln-p > span { display: grid; min-width: 0; }
.ln-p small { font: 12px var(--mono); color: var(--dust); }
.ln-p .hero-img { width: 44px; height: 25px; flex: none; }
.ln-table tr.side-a td:first-child { box-shadow: inset 2px 0 var(--jade); }
.ln-table tr.side-b td:first-child { box-shadow: inset 2px 0 var(--ember); }
.ln-faces { white-space: nowrap; }
/* Team page, Laning tab. */
.tl-cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 10px; }
.tl-card { border-top: 2px solid var(--seam-2); }
.tl-card.won { border-top-color: var(--jade); }
.tl-card.lost { border-top-color: var(--ember); }
.tl-card.even { border-top-color: var(--gold); }
.tl-card.won .v { color: var(--jade); }
.tl-card.lost .v { color: var(--ember-soft); }
.tl-split { display: flex; height: 8px; margin: 10px 0 8px; background: var(--stone); overflow: hidden; border-radius: 2px; }
.tl-split i.won { background: var(--jade); }
.tl-split i.even { background: var(--gold); opacity: .75; }
.tl-split i.lost { background: var(--ember); }
.tl-who { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--seam); font: 600 12px/1.3 var(--body); }
.tl-who small { font: 400 12px/1 var(--mono); color: var(--dim); }
.tl-table { border-collapse: separate; border-spacing: 0 6px; }
.tl-table td { vertical-align: middle; }
.tl-game a { display: block; font-weight: 600; }
.tl-game small { font: 400 12px/1.3 var(--mono); color: var(--dim); }
.tl-cell { min-width: 190px; padding: 8px 10px; border-left: 3px solid var(--seam-2); background: var(--stone-2); }
.tl-cell.won { border-left-color: var(--jade); background: linear-gradient(90deg, rgba(var(--jade-rgb), .12), var(--stone-2) 70%); }
.tl-cell.lost { border-left-color: var(--ember); background: linear-gradient(90deg, rgba(var(--ember-rgb), .12), var(--stone-2) 70%); }
.tl-cell.even { border-left-color: var(--gold); }
.tl-faces { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl-faces .hero-img { width: 40px; height: 22px; margin-right: 2px; vertical-align: middle; }
.tl-them .hero-img { filter: saturate(.6) brightness(.8); }
.tl-vs { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tl-res { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 400 12px/1 var(--mono); }
.tl-cell.won .tl-res b { color: var(--jade); }
.tl-cell.lost .tl-res b { color: var(--ember-soft); }
.ln-faces .hero-img { width: 36px; height: 20px; margin-right: 3px; vertical-align: middle; }
.ln-best { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 18px; }
.ln-w { color: var(--jade); font-weight: 600; }
.ln-l { color: var(--ember); font-weight: 600; }
figure.chart.item-lead .fight-face circle { fill: none; stroke-width: 1.5; }
figure.chart.item-lead .fight-face.s-a circle { stroke: var(--jade); }
figure.chart.item-lead .fight-face.s-b circle { stroke: var(--ember); }
figure.chart.item-lead .fight-face image { filter: grayscale(.35) brightness(.9); }
figure.chart.item-lead .fight-face:hover image { filter: none; }
figure.chart.item-lead .fight-face:hover circle { stroke: var(--bone); stroke-width: 2; }
figure.chart.item-lead .fight-dot.anchor { stroke-width: 1; }
figure.chart.item-lead .it-hero-ring { fill: none; stroke-width: 1; }
figure.chart.item-lead .it.s-a .it-hero-ring { stroke: var(--jade); }
figure.chart.item-lead .it.s-b .it-hero-ring { stroke: var(--ember); }
figure.chart.item-lead .it:hover .it-hero { outline: none; filter: none; }

/* Game page hero chart: items & fights, or net worth by player */
.gm-draft { margin-bottom: 18px; }
.gm-hero-chart { margin-bottom: 28px; }
.gm-hc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 10px; }
.gm-hc-head .segs { margin: 0; }
.gm-hc-head .swing-story { margin: 0; }
.gm-hc-view figure.chart { margin: 0; }
.gm-hc-items { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); cursor: pointer; }
.gm-hc-items[hidden] { display: none; }
.gm-hc-items input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
figure.chart.item-lead .obj-frame { fill: none; stroke: var(--gold); stroke-width: 1.25; }
figure.chart.item-lead .it.obj image { filter: drop-shadow(0 0 3px rgba(232, 182, 76, .6)); }
.gm-hc-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 8px 12px; border: 1px solid var(--seam-2); background: var(--stone); }
.gm-hc-layers[hidden] { display: none; }
.gm-worth-segs { margin: 0 0 8px; }
.gm-worth-segs .seg { padding: 6px 12px; font-size: 12px; }
.gm-hc-layers legend { float: left; padding: 0; margin-right: 4px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.gm-hc-layers label { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--body); color: var(--dust); cursor: pointer; white-space: nowrap; }
.gm-hc-layers label:has(input:checked) { color: var(--bone); }
.gm-hc-layers input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
figure.chart.item-lead .bld-box { fill: var(--ink); stroke-width: 1.25; }
figure.chart.item-lead .bld.s-a .bld-box { stroke: var(--jade); }
figure.chart.item-lead .bld.s-b .bld-box { stroke: var(--ember); }
figure.chart.item-lead .bld-tag { font: 700 10px var(--mono); fill: var(--bone); letter-spacing: .02em; }
figure.chart.item-lead .fight-dead.pick { opacity: .75; }
figure.chart.item-lead .fight-dead.pick .fight-face circle { stroke-dasharray: 2 1.5; }
figure.chart.item-lead .fight-dead.pick:hover { opacity: 1; }
figure.chart.item-lead .mk-bg { fill: var(--ink); }
figure.chart.item-lead .mk-ring { fill: none; stroke-width: 1.5; }
figure.chart.item-lead .mk.s-a .mk-ring { stroke: var(--jade); }
figure.chart.item-lead .mk.s-b .mk-ring { stroke: var(--ember); }
figure.chart.item-lead .mk.obj .mk-ring { stroke-width: 1.75; }
figure.chart.item-lead .mk-icon path { fill: var(--bone); }
figure.chart.item-lead .mk:hover .mk-ring { stroke: var(--bone); stroke-width: 2; }
figure.chart.item-lead .mk-bb { fill: none; stroke: var(--gold); stroke-width: 1.5; }
figure.chart.item-lead .mk-fb { fill: none; stroke: #d0342c; stroke-width: 1.8; }

/* ---------- guided tour (lib/tour.js) ----------
   League accent: gold in Champion, the league's own colour everywhere else. */
/* "New here?" in the footer: always there, in the league accent. */
button.tour-open {
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  color: var(--accent); background: none; border: 1px solid rgba(var(--accent-rgb), .45); padding: 9px 12px; border-radius: 2px;
}
button.tour-open:hover:not(:disabled) { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
button.tour-open.paused { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
button.tour-open.paused:hover:not(:disabled) { background: color-mix(in srgb, var(--accent), #fff 18%); border-color: color-mix(in srgb, var(--accent), #fff 18%); }
.tour-block { position: fixed; inset: 0; z-index: 90; }
/* The tour only visits AD2L divisions: while it waits for a pick, the scrims are hidden. */
body.tour-pick #league-menu a[data-league="scrim"], body.tour-pick .hub-list a[data-league="scrim"],
body.tour-pick #league-menu a[data-league="all"], body.tour-pick .hub-all { display: none; }
.tour-block.dim { background: rgba(6, 5, 4, .66); transition: background .25s; }
/* The spotlight: a transparent box whose huge shadow darkens everything else. */
.tour-box {
  position: fixed; z-index: 91; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(6, 5, 4, .66), 0 0 24px rgba(var(--accent-rgb), .45) inset, 0 0 18px rgba(var(--accent-rgb), .35);
  transition: top .35s cubic-bezier(.45,.05,.25,1), left .35s cubic-bezier(.45,.05,.25,1), width .35s cubic-bezier(.45,.05,.25,1), height .35s cubic-bezier(.45,.05,.25,1);
}
.tour-card, .tour-invite {
  z-index: 102; width: min(340px, calc(100vw - 32px));
  background: var(--stone-2); color: var(--bone);
  border: 1px solid var(--accent); border-radius: 8px; padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  font: 400 14px/1.5 var(--body);
}
.tour-card { position: fixed; transition: top .3s, left .3s; width: min(380px, calc(100vw - 32px)); }
.tour-card.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-card.docked:not(.center) { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; }
.tour-count { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
/* Breadcrumb: where the boxed thing is, and how to get there. */
.tour-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: -2px 0 10px; font: 400 12px/1.5 var(--mono); color: var(--dust); }
.tour-path[hidden] { display: none; }
.tour-path i { font-style: normal; color: var(--dim); }
.tour-path .here { color: var(--bone); }
/* "ⓘ" in a caption: the site's info dot. */
.tour-i {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 1px; vertical-align: 1px;
  border: 1px solid var(--seam-2); border-radius: 50%; color: var(--bone); font: 600 12px/1 var(--mono);
}
.tour-title { margin: 0 0 6px; font: 800 22px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.tour-text { margin: 0 0 14px; color: var(--dust); }
.tour-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.tour-btn {
  font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 12px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  background: none; color: var(--bone); border: 1px solid var(--seam-2);
}
/* button.tour-btn beats the site-wide button:hover background. */
button.tour-btn:hover:not(:disabled) { border-color: var(--accent); background: none; }
.tour-skip, button.tour-skip:hover:not(:disabled) { margin-right: auto; border-color: transparent; color: var(--dim); }
button.tour-skip:hover:not(:disabled) { color: var(--bone); }
/* Exit tour sits beside Pause tour, on the quiet side of the card. */
.tour-skip:has(+ .tour-exit) { margin-right: 0; }
.tour-exit, button.tour-exit:hover:not(:disabled) { margin-right: auto; border-color: transparent; color: var(--dim); }
.tour-skip, .tour-exit { padding-left: 6px; padding-right: 6px; }
button.tour-exit:hover:not(:disabled) { color: var(--bone); }
button.tour-next, button.tour-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.tour-next:hover:not(:disabled), button.tour-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent), #fff 18%); border-color: color-mix(in srgb, var(--accent), #fff 18%); }
/* The fake cursor: its tip sits on the point it's moved to. */
.tour-cursor {
  position: fixed; left: 0; top: 0; z-index: 103; pointer-events: none;
  margin: -2px 0 0 -4px; transform: translate(50vw, 50vh);
  fill: var(--bone); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
.tour-cursor path { transition: transform .12s; transform-origin: 4px 2px; }
.tour-cursor.press path { transform: scale(.82); }
.tour-ripple {
  position: fixed; z-index: 102; pointer-events: none; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 2px solid var(--accent); border-radius: 50%; opacity: 0;
}
.tour-ripple.go { animation: tour-ripple .5s ease-out; }
@keyframes tour-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
/* A small toast low in the corner, clear of most of the page; it leaves on its own (tour.js). */
.tour-invite {
  position: fixed; right: 16px; bottom: 16px; display: grid; gap: 4px;
  width: min(280px, calc(100vw - 32px)); padding: 12px 14px 10px; font-size: 13px;
  animation: tour-in .35s ease-out;
}
.tour-invite b { font: 800 17px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.tour-invite span { color: var(--dust); margin-bottom: 6px; }
.tour-invite .tour-btn { padding: 8px 10px; }
@keyframes tour-in { from { transform: translateY(16px); opacity: 0; } }
@media (max-width: 760px) {
  /* Phones: one slim bar across the bottom: the question and both buttons on a line. */
  .tour-invite { left: 8px; right: 8px; bottom: 8px; width: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; }
  .tour-invite b { font-size: 15px; }
  .tour-invite span { display: none; }
  .tour-invite .tour-btns { flex-wrap: nowrap; gap: 4px; }
  /* Phones: the header scrolls away during the tour, and the docked caption is compact. */
  body.touring .top { position: static; }
  .tour-card.docked:not(.center) { left: 8px !important; right: 8px; bottom: 8px; padding: 10px 12px; font-size: 13px; }
  .tour-card.docked.up:not(.center) { top: 8px !important; bottom: auto; }
  .tour-card.docked .tour-count { margin-bottom: 5px; }
  .tour-card.docked .tour-path { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 4px; }
  .tour-card.docked .tour-path::-webkit-scrollbar { display: none; }
  .tour-card.docked .tour-title { font-size: 17px; margin-bottom: 3px; }
  .tour-card.docked .tour-text { margin-bottom: 8px; line-height: 1.4; }
  .tour-card.docked .tour-btn { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-box, .tour-card, .tour-block.dim { transition: none; }
  .tour-invite, .tour-ripple.go { animation: none; }
}

/* ---------- AD2L Matches: one box per week, like a Liquipedia group stage ---------- */
.mx-jump { margin-left: 8px; vertical-align: middle; }
.mx-lead { margin: 0 0 14px; }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 14px; align-items: start; }
.mx-box { background: var(--stone); border: 1px solid var(--seam); }
.mx-box.next { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25); }
.mx-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--seam); background: var(--stone-2); }
.mx-wk { font: 800 16px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.mx-date { font: 400 12px/1 var(--mono); color: var(--dust); }
.mx-tag { margin-left: auto; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 6px; }
.mx-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px 28px minmax(0, 1fr); align-items: stretch; border-bottom: 1px solid var(--seam); font-size: 13px; }
.mx-row:last-child { border-bottom: 0; }
.mx-row.bye { opacity: .5; }
.mx-t { padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-t.h { text-align: right; }
.mx-t.w { font-weight: 700; }
.mx-t.l { color: var(--dust); }
.mx-t.l a { color: inherit; }
.mx-s { display: grid; place-items: center; font: 700 13px/1 var(--mono); color: var(--on-accent); background: var(--seam-2); }
.mx-s.w { background: var(--jade); }
.mx-s.l { background: var(--ember); }
.mx-s.t { background: var(--gold); }
.mx-t.h.w { box-shadow: inset -3px 0 0 var(--jade); background: rgba(var(--jade-rgb), .08); }
.mx-t.a.w { box-shadow: inset 3px 0 0 var(--jade); background: rgba(var(--jade-rgb), .08); }
.mx-t.t { background: rgba(232, 182, 76, .08); }
.mx-vs { grid-column: span 2; display: grid; place-items: center; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.mx-x { grid-column: 1 / -1; display: flex; justify-content: center; gap: 6px; padding: 0 10px 6px; font: 400 12px/1 var(--mono); color: var(--dim); }
.mx-g { color: var(--dust); border: 1px solid var(--seam-2); padding: 2px 5px; }
.mx-g:hover { color: var(--bone); border-color: var(--accent); text-decoration: none; }
.mx-when { align-self: center; }
.mx-nog { border-style: dashed; cursor: default; }
.mx-nog:hover { color: var(--dust); border-color: var(--seam-2); }
/* Combined Heroic: Division A left, Division B right, one week per row. */
.mx-grid.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .mx-grid.split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- AD2L Crosstable: every team against every other, like a Liquipedia group table ---------- */
.ct-wrap { overflow-x: auto; margin-bottom: 18px; }
.ct-div { font: 800 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); margin: 0 0 8px; }
.ct { border-collapse: collapse; font-size: 13px; }
.ct th, .ct td { border: 1px solid var(--seam); }
.ct-corner { background: none; border-top-color: transparent !important; border-left-color: transparent !important; }
.ct-col { background: var(--stone-2); font: 700 12px/1 var(--mono); padding: 8px 4px; min-width: 50px; }
.ct-col a { color: var(--dust); }
.ct-col a:hover { color: var(--bone); text-decoration: none; }
.ct-row { background: var(--stone-2); text-align: left; font-weight: 400; padding: 0 10px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; height: 44px; }
.ct-rank { display: inline-block; width: 22px; font: 700 12px/1 var(--mono); color: var(--dim); }
.ct-ab { margin-left: 6px; font: 400 12px/1 var(--mono); color: var(--dim); }
.ct-self { background: repeating-linear-gradient(135deg, var(--stone-2) 0 4px, var(--seam) 4px 5px); }
.ct-none { background: var(--stone); }
.ct-c { padding: 0; vertical-align: middle; }
.ct-m { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 42px; padding: 4px; font: 700 13px/1 var(--mono); color: var(--bone); }
.ct-m + .ct-m { border-top: 1px solid var(--seam); }
.ct-m small { font: 400 12px/1 var(--mono); color: var(--dust); text-transform: uppercase; letter-spacing: .06em; }
.ct-m.w { background: rgba(var(--jade-rgb), .28); }
.ct-m.l { background: rgba(var(--ember-rgb), .26); }
.ct-m.t { background: rgba(232, 182, 76, .3); }
.ct-m.up { color: var(--dim); font-weight: 400; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; outline: 1px dashed var(--seam-2); outline-offset: -3px; }
a.ct-m:hover { text-decoration: none; outline: 1px solid var(--accent); outline-offset: -1px; }

/* ---------- feedback mode (lib/feedback.js) ----------
   Top-bar button; then, while it's on: a banner, a tool sidebar on the left, a layer in page
   coordinates (hover box, snip box, drawings, numbered pins), the note popover beside each
   mark, the notes list and the submit card. All of it sits under .fb, which the screenshot
   leaves out. */
button.fb-open {
  position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dust); background: none; border: 1px solid var(--seam); padding: 8px 11px; border-radius: 2px;
}
button.fb-open:hover, button.fb-open.tour-hover { color: var(--bone); border-color: var(--dust); }
button.fb-open[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.fb-badge {
  position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  font: 700 12px/17px var(--mono); letter-spacing: 0; text-align: center; color: var(--ink); background: var(--bone);
}
.fb-badge[hidden] { display: none; }
@media (max-width: 760px) { .fb-open-label { display: none; } }
/* Discord invite (footer): same frame as the Feedback button, blurple on hover. */
a.discord-join {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dust); border: 1px solid var(--seam); padding: 8px 11px; border-radius: 2px;
}
a.discord-join:hover { color: #fff; background: #5865f2; border-color: #5865f2; text-decoration: none; }
.foot a { color: var(--dust); }
.foot a:hover { color: var(--bone); }
.foot a.discord-join:hover { color: #fff; } /* over .foot a:hover */
/* Footer: the tour ("New here?" / Resume) and the Discord invite, right of the disclaimer. */
.foot { align-items: center; }
.foot-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-data { flex: 1 1 320px; text-transform: none; letter-spacing: .02em; }
.foot-data a { text-decoration: underline; text-underline-offset: 3px; }

/* The Feedback button feedback.js adds to modal dialogs (they make the top-bar one unreachable). */
button.fb-dialog-btn {
  position: fixed; top: 12px; left: 12px; z-index: 5; cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dust); background: var(--ink); border: 1px solid var(--seam); padding: 8px 11px; border-radius: 2px;
}
button.fb-dialog-btn:hover { color: var(--bone); border-color: var(--dust); }
.fb-on button.fb-dialog-btn { display: none; }
.fb[hidden] { display: none; }
/* A modal dialog reopened non-modal for feedback mode (liftDialog): kept centred and dimmed,
   under the feedback tools. */
dialog.fb-lifted { position: fixed; inset: 0; margin: auto; z-index: 980; box-shadow: 0 0 0 100vmax rgba(8, 7, 10, .85); }
.fb-banner {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 1002; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 999px;
  font: 600 12px/1.3 var(--body); color: var(--on-accent); background: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); text-align: center;
}
/* Catches the pointer for Snip, Click and Draw; Use site lets it through. */
.fb-catch { position: fixed; inset: 0; z-index: 1000; cursor: crosshair; touch-action: none; }
.fb[data-tool="snip"] .fb-catch { background: rgba(0, 0, 0, .28); }
.fb[data-tool="snip"].snipping .fb-catch { background: none; }
.fb[data-tool="click"] .fb-catch { cursor: pointer; touch-action: auto; }
.fb[data-tool="use"] .fb-catch { display: none; }
.fb-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; z-index: 1001; pointer-events: none; }
.fb-ink { position: absolute; top: 0; left: 0; overflow: visible; }
.fb-ink path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fb-ink path.fb-old { opacity: .55; }
.fb-hover { position: absolute; outline: 2px solid var(--accent); outline-offset: 2px; background: rgba(var(--accent-rgb), .1); border-radius: 2px; transition: all .06s; }
.fb-hover[hidden], .fb-snip[hidden] { display: none; }
/* The snip: everything outside it stays dim, like the Snipping Tool. */
.fb-snip { position: absolute; outline: 2px solid var(--accent); box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .45); }
.fb-snip.set { pointer-events: auto; cursor: move; }
.fb-snip i { display: none; position: absolute; width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--ink); }
.fb-snip.set i { display: block; }
.fb-snip i[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.fb-snip i[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.fb-snip i[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.fb-snip i[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.fb-done { position: absolute; outline: 1px dashed rgba(var(--accent-rgb), .7); }
.fb-pin {
  position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  font: 700 12px/22px var(--mono); text-align: center; color: var(--on-accent); background: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* Tool sidebar. */
.fb-bar {
  position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 1003;
  display: flex; flex-direction: column; gap: 4px; width: 64px; padding: 6px;
  background: var(--stone-2); border: 1px solid var(--seam-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.fb-bar hr { width: 100%; border: 0; border-top: 1px solid var(--seam-2); margin: 4px 0; }
.fb-tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; cursor: pointer;
  font: 600 12px/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: var(--dust); background: none; border: 1px solid transparent; border-radius: 2px;
}
.fb-tool:hover:not(:disabled) { color: var(--bone); background: var(--hover); }
.fb-tool[aria-pressed="true"], .fb-tool[aria-pressed="true"]:hover { color: var(--on-accent); background: var(--accent); }
.fb-tool:disabled { opacity: .35; cursor: not-allowed; }
.fb-count { font: 800 20px/1 var(--display); color: var(--bone); }
.fb-send, .fb-exit {
  padding: 8px 2px; cursor: pointer; border-radius: 2px;
  font: 700 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.fb-send { color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); }
.fb-send:disabled { opacity: .35; cursor: not-allowed; }
.fb-exit { color: var(--dust); background: none; border: 1px solid var(--seam-2); }
.fb-exit:hover { color: var(--bone); border-color: var(--dust); }

/* Note popover, next to the mark. */
.fb-note {
  position: fixed; z-index: 1004; width: min(340px, calc(100vw - 88px)); padding: 10px; box-sizing: border-box;
  background: var(--stone-2); border: 1px solid var(--seam-2); border-top: 2px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.fb-note[hidden] { display: none; }
.fb-note-head { font: 400 12px/1.3 var(--mono); color: var(--dust); margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-note-head b { color: var(--accent); }
.fb-note textarea, .fb-card input {
  width: 100%; box-sizing: border-box; resize: vertical; padding: 8px 10px;
  font: 14px/1.4 var(--body); color: var(--bone); background: var(--ink); border: 1px solid var(--seam-2); border-radius: 2px;
}
.fb-note textarea:focus, .fb-card input:focus { outline: none; border-color: var(--accent); }
.fb-note-foot, .fb-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fb-note-tip { flex: 1; font: 400 12px/1.2 var(--mono); color: var(--dim); }
.fb-note button, .fb-card button {
  padding: 8px 12px; cursor: pointer; border-radius: 2px; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.fb-discard, .fb-cancel { color: var(--dust); background: none; border: 1px solid var(--seam-2); }
.fb-add, .fb-go { color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); }
.fb-add:disabled, .fb-go:disabled { opacity: .4; cursor: not-allowed; }
.fb-note.busy { opacity: .8; pointer-events: none; }
@media (pointer: coarse) { .fb-note-tip { visibility: hidden; } }

/* Notes list, beside the sidebar. */
.fb-list {
  position: fixed; left: 88px; top: 50%; transform: translateY(-50%); z-index: 1004;
  width: min(380px, calc(100vw - 104px)); max-height: 70vh; overflow: auto; padding: 10px; box-sizing: border-box;
  background: var(--stone-2); border: 1px solid var(--seam-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.fb-list[hidden] { display: none; }
.fb-list-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.fb-list-head b { font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.fb-list-head span, .fb-empty { font: 400 12px/1.4 var(--mono); color: var(--dust); }
.fb-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fb-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px; background: var(--ink); border: 1px solid var(--seam); }
.fb-list img, .fb-noshot { width: 72px; height: 48px; object-fit: cover; object-position: top left; border: 1px solid var(--seam-2); box-sizing: border-box; }
.fb-noshot { display: grid; place-items: center; font: 400 12px/1 var(--mono); color: var(--dim); text-transform: uppercase; }
.fb-list li b { font-size: 13px; }
.fb-list small { font: 400 12px/1.3 var(--mono); color: var(--dim); word-break: break-all; }
.fb-list p { margin: 3px 0 0; font-size: 13px; color: var(--bone); overflow-wrap: anywhere; }
.fb-list li button { cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; color: var(--dust); background: none; border: 0; }
.fb-list li button:hover { color: var(--err); }
.fb-li-btns { display: flex; flex-direction: column; gap: 2px; }
.fb-list li .fb-li-btns [data-edit] { font-size: 15px; }
.fb-list li .fb-li-btns [data-edit]:hover { color: var(--bone); }
.fb-edit { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 6px 8px; font: 13px/1.4 var(--body); color: var(--bone); background: var(--stone-2); border: 1px solid var(--seam-2); resize: vertical; }
.fb-edit:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-edit-row { display: flex; gap: 6px; margin-top: 6px; }
.fb-list li .fb-edit-row button { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--seam-2); }
.fb-list li .fb-edit-row .fb-edit-save { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.fb-list li .fb-edit-row .fb-edit-save:disabled { opacity: .5; cursor: default; }
.fb-list li .fb-edit-row .fb-edit-cancel:hover { color: var(--bone); }

/* Submit card. */
.fb-modal { position: fixed; inset: 0; z-index: 1005; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.fb-modal[hidden] { display: none; }
.fb-card {
  width: min(400px, 100%); box-sizing: border-box; padding: 20px; background: var(--stone-2); border: 1px solid var(--seam-2); border-top: 3px solid var(--accent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); animation: rise .18s cubic-bezier(.2, .8, .2, 1);
}
.fb-card h3 { margin: 0 0 8px; font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.fb-card p { margin: 0 0 12px; color: var(--dust); font-size: 14px; }
.fb-card label { display: grid; gap: 6px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.fb-card .fb-msg { margin: 10px 0 0; color: var(--err); font-size: 13px; }
.fb-card .fb-msg:empty { display: none; }
.fb-card-foot { justify-content: flex-end; margin-top: 16px; }
.fb-id { font: 700 15px/1 var(--mono); color: var(--accent); }

/* Narrow screens: the sidebar shrinks to icons. */
@media (max-width: 760px) {
  .fb-bar { left: 6px; width: 46px; padding: 4px; }
  .fb-tool span { display: none; }
  .fb-send, .fb-exit { font-size: 10px; letter-spacing: 0; }
  .fb-banner { font-size: 11px; padding: 6px 12px; border-radius: 12px; }
  .fb-list { left: 60px; width: calc(100vw - 72px); }
}
@media (prefers-reduced-motion: reduce) { .fb-card { animation: none; } .fb-hover { transition: none; } }

/* ---------- feedback replay (lib/feedback-review.js, local server only) ----------
   A ticket's marks drawn on the real page (page coordinates, like feedback mode), and a
   panel of its notes on the right. */
.fbr-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; z-index: 990; pointer-events: none; }
.fbr-marks { position: absolute; inset: 0; }
.fbr-mark { position: absolute; }
.fbr-box { position: absolute; inset: -3px; outline: 2px dashed rgba(var(--accent-rgb), .6); border-radius: 2px; }
.fbr-box.lost { outline-color: rgba(var(--bone-rgb), .45); }
.fbr-mark.focus .fbr-box { outline: 3px solid var(--accent); background: rgba(var(--accent-rgb), .08); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); }
.fbr-mark .fb-pin { left: 0; top: 0; }
.fbr-bubble {
  position: absolute; left: 14px; top: -12px; transform: translateY(-100%); width: max-content; max-width: 280px;
  padding: 7px 10px; font: 500 13px/1.35 var(--body); color: var(--bone);
  background: var(--stone-2); border: 1px solid var(--seam-2); border-left: 3px solid var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.fbr-mark:not(.focus) .fbr-bubble { opacity: .8; }
.fbr-bubble small { display: block; margin-top: 4px; font: 400 12px/1.3 var(--mono); color: var(--dust); }

.fbr-panel {
  position: fixed; right: 12px; top: 80px; max-height: calc(100vh - 92px); z-index: 995; width: min(320px, calc(100vw - 24px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--stone-2); border: 1px solid var(--seam-2); border-top: 3px solid var(--accent); box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.fbr.min .fbr-panel ol { display: none; }
.fbr-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--seam-2); }
.fbr-head b { font: 700 14px/1 var(--mono); color: var(--accent); }
.fbr-head span { flex: 1; font-size: 12px; color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbr-head button { cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; color: var(--dust); background: none; border: 0; }
.fbr-head button:hover { color: var(--bone); }
.fbr-panel ol { list-style: none; margin: 0; padding: 8px; overflow: auto; display: grid; gap: 6px; align-content: start; }
.fbr-panel li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 8px; cursor: pointer;
  background: var(--ink); border: 1px solid var(--seam); border-left: 3px solid var(--seam);
}
.fbr-panel li:hover { border-color: var(--seam-2); }
.fbr-panel li.here { border-left-color: rgba(var(--accent-rgb), .5); }
.fbr-panel li.focus { border-color: var(--accent); }
.fbr-panel li > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 11px; font: 700 12px/1 var(--mono); color: var(--on-accent); background: var(--accent); }
.fbr-kind, .fbr-meta { display: block; font: 400 12px/1.4 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.fbr-meta.warn { color: var(--warn); }
.fbr-panel li p { margin: 3px 0; font-size: 13px; color: var(--bone); overflow-wrap: anywhere; }
.fbr-panel li img { grid-column: 2; width: 100%; max-height: 140px; object-fit: cover; object-position: top left; border: 1px solid var(--seam-2); cursor: zoom-in; }
.fbr-shot { position: fixed; inset: 0; z-index: 1006; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .8); cursor: zoom-out; }
.fbr-shot img { max-width: 100%; max-height: 100%; border: 2px solid var(--accent); }

/* ---------- Combat stats (lib/combat-charts.js) ---------- */
/* Kill-streak timeline */
figure.chart.sk-chart .sk-zone { fill: var(--gold); opacity: .06; }
figure.chart .sk-level { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--gold); }
figure.chart .sk-lead { stroke-width: 1; opacity: .6; }
figure.chart .sk-run { fill: none; stroke-width: 1.2; opacity: .28; stroke-linejoin: round; }
figure.chart .sk-run.big { stroke-width: 2.4; opacity: .95; }
figure.chart .sk-run.dash { stroke-dasharray: 5 3; }
figure.chart .sk-run:hover { opacity: 1; stroke-width: 3; }
figure.chart .sk-end path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
figure.chart .sk-frame { fill: var(--stone); stroke-width: 2; }
figure.chart .sk-name { font: 700 11px var(--mono); stroke: var(--stone) !important; stroke-width: 4px; paint-order: stroke; }
figure.chart .sk-multi circle { stroke: var(--stone); stroke-width: 1.5; }
figure.chart .sk-multi text { font: 700 10px var(--mono); fill: var(--ink); stroke: none; pointer-events: none; }
figure.chart .sk-multi.big circle { stroke: var(--gold); stroke-width: 2; }

/* Bar rows */
.cb-bars { display: grid; gap: 7px; margin: 8px 0 6px; }
.cb-row { display: grid; grid-template-columns: minmax(110px, 190px) 1fr 64px; gap: 12px; align-items: center; }
.cb-label { font-size: 13px; color: var(--bone); display: flex; flex-direction: column; min-width: 0; }
.cb-label small { font: 500 12px var(--mono); color: var(--dust); margin-top: 2px; }
.cb-track { position: relative; height: 12px; background: var(--stone-2, var(--stone)); border: 1px solid var(--seam); }
.cb-fill { position: absolute; inset: 0 auto 0 0; background: var(--dust); opacity: .65; }
.cb-row.hot .cb-fill { background: var(--gold); opacity: .9; }
.cb-row.cold .cb-fill { background: var(--ember); opacity: .75; }
.len .cb-row.hot .cb-fill { background: var(--jade); }
.cb-row.none { opacity: .5; }
.cb-mid { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--seam-2); }
.cb-ref { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; background: var(--bone); }
.cb-val { font: 600 12px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.cb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .cb-pair { grid-template-columns: 1fr; } .cb-row { grid-template-columns: 110px 1fr 52px; gap: 8px; } }

/* Deaths by source */
.ds { display: grid; gap: 10px; margin: 8px 0; }
.ds-row { display: grid; grid-template-columns: minmax(110px, 190px) 1fr; gap: 12px; align-items: center; }
.ds-track { display: flex; height: 18px; background: var(--stone-2, var(--stone)); border: 1px solid var(--seam); }
.ds-track i { height: 100%; }
.ds-hero { background: var(--ember); }
.ds-tower { background: var(--gold); }
.ds-creep { background: var(--jade); }
.ds-neutral { background: #8f7ce6; }
.ds-other { background: var(--dust); }
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 12px var(--mono); color: var(--dust); }
.ds-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.ds-killers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; }
.ds-killer { display: inline-flex; align-items: center; gap: 6px; }
.ds-killer img { width: 32px; height: 18px; object-fit: cover; border: 1px solid var(--seam); }

/* Medal vs rating scatter */
figure.chart .ms-dot circle { fill: var(--tc, var(--dust)); stroke: var(--stone); stroke-width: 1; opacity: .85; }
figure.chart .ms-dot:hover circle { opacity: 1; stroke: var(--bone); }
figure.chart .ms-dot text { font: 600 11px var(--mono); stroke: var(--stone); stroke-width: 3px; paint-order: stroke; }
figure.chart .ms-dot text.up { fill: var(--jade); }
figure.chart .ms-dot text.down { fill: var(--ember); }
figure.chart .ms-fit { stroke: var(--bone); stroke-width: 1.4; stroke-dasharray: 6 5; opacity: .55; }
.ms-lists { display: grid; gap: 8px; margin: 6px 0 4px; }
.ms-lists > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ms-chip { font-size: 13px; padding: 3px 8px; border: 1px solid var(--seam); }
.ms-chip small { font: 500 12px var(--mono); color: var(--dust); }
.ms-chip.up { border-color: var(--jade); }
.ms-chip.down { border-color: var(--ember); }

/* Skill-build grid */
.sg { border-collapse: collapse; font-size: 12px; }
.sg th, .sg td { padding: 3px 4px; text-align: center; border: 1px solid var(--seam); }
.sg th { font: 600 12px var(--mono); color: var(--dust); }
.sg .sg-name { text-align: left; white-space: nowrap; display: flex; align-items: center; gap: 6px; border: none; border-bottom: 1px solid var(--seam); }
.sg-cell { min-width: 22px; background: rgba(232, 182, 76, calc(var(--s) * .85)); color: var(--ink); font-size: 12px; }
.sg-ico { width: 22px; height: 22px; object-fit: cover; border: 1px solid var(--seam); flex: none; }
.sg-ico.sm { width: 26px; height: 26px; }
.sg-talent { display: inline-grid; place-items: center; font: 700 12px var(--mono); color: var(--gold); background: var(--stone-2, var(--stone)); }
.sg-common { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.sg-seq { display: inline-flex; gap: 4px; }

/* Build order */
.bo { display: grid; gap: 6px; }
.bo-row { display: grid; grid-template-columns: 180px auto 1fr; gap: 12px; align-items: center; padding: 6px 8px; border-left: 3px solid var(--jade); background: var(--stone); }
.bo-row.s-b { border-left-color: var(--ember); }
.bo-who { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-start { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; padding-right: 12px; border-right: 1px solid var(--seam); }
.bo-start small { font: 600 12px var(--mono); color: var(--dust); align-self: flex-end; margin-right: 4px; }
.bo-line { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 760px) { .bo-row { grid-template-columns: 1fr; } .bo-start { border-right: none; padding: 0; } }
.sk-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.sk-toggles .seg:not(.on) { opacity: .45; }
.sk-toggles .seg { padding: 6px 12px; font-size: 12px; }
.sk-toggles .seg small { font: 600 12px var(--mono); color: inherit; opacity: .75; margin-left: 4px; }
.sk-chart.hide-runs .sk-run, .sk-chart.hide-runs .sk-end, .sk-chart.hide-runs .sk-peak { display: none; }
.sk-chart.hide-n2 .sk-n2, .sk-chart.hide-n3 .sk-n3, .sk-chart.hide-n4 .sk-n4, .sk-chart.hide-n5 .sk-n5 { display: none; }
/* First blood tag */
.fb-tag { display: inline-block; font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 5px; color: #fff; background: #b8261f; vertical-align: 1px; white-space: nowrap; }
.fb-tag.died { background: transparent; color: #e0574f; border: 1px solid #b8261f; padding: 2px 4px; }
.lane-fb-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Benchmark percentiles: an ordinal over a bar filled to the percentile */
.bn-board th small { display: block; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--dim); margin-top: 2px; }
.bn-cell { position: relative; font-variant-numeric: tabular-nums; }
.bn-cell[style]::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 7px; height: 3px; background: var(--seam); }
.bn-cell[style]::after { content: ""; position: absolute; left: 10%; bottom: 7px; height: 3px; width: calc(80% * var(--v)); background: var(--dust); }
.bn-cell.hot span { color: var(--gold); font-weight: 700; }
.bn-cell.hot::after { background: var(--gold); }
.bn-cell.cold span { color: var(--ember); }
.bn-cell.cold::after { background: var(--ember); }

/* ---------- playoff picture (Predict) ---------- */
.po-lead { color: var(--dust); font-size: 14px; max-width: 80ch; margin: 0 0 6px; }
.po-sub { margin: 26px 0 10px; font: 700 18px/1.2 var(--display); letter-spacing: .04em; color: var(--bone); }
.po-div { margin: 22px 0 8px; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.po-h { margin: 18px 0 8px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.po-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.po-rest > div { background: var(--stone); border: 1px solid var(--seam); padding: 10px 14px; }
.po-rest h4 { margin: 0 0 6px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.po-guess { color: var(--gold); }
.po-rest ul, .po-tb ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.po-res { display: inline-block; min-width: 30px; font: 600 12px var(--mono); color: var(--jade); }
.po-res.t { color: var(--gold); }
.po-table td.po-to { font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dust); }
.po-table tr.po-upper-bracket td.po-to, .po-table tr.po-aegis-upper-bracket td.po-to, .po-table tr.po-heroic-upper-bracket td.po-to { color: var(--jade); }
.po-table tr.po-out td { color: var(--dim); }
.po-table tr.po-cut td { border-bottom: 2px solid var(--accent); }
.po-tb { background: var(--stone); border: 1px solid var(--seam); border-left: 3px solid var(--gold); padding: 10px 14px; margin: 0 0 10px; font-size: 14px; color: var(--dust); }
.po-tb p { margin: 0 0 8px; }
.po-tb b { color: var(--bone); }
.po-tb .po-out { margin: 8px 0 0; }
.po-bo { display: inline-block; min-width: 34px; font: 600 12px var(--mono); letter-spacing: .08em; color: var(--gold); }
.po-none, .po-settled, .po-heroic { font-size: 14px; color: var(--dust); max-width: 90ch; margin: 0 0 8px; }
.po-settled b, .po-heroic b { color: var(--bone); }
/* Bracket (parts/playoffs.js grid): equal rows, a match centred on the rows it spans, lines from
   the matches that feed it: a stub out of each, a rail joining them, a line into the match. */
.po-br-wrap { overflow-x: auto; padding-bottom: 6px; }
.po-br { --cw: 176px; --g: 28px; --line: color-mix(in srgb, var(--bone) 35%, var(--seam)); display: grid; grid-template-columns: 22px repeat(var(--cols), var(--cw)); grid-template-rows: auto repeat(var(--rows), minmax(26px, 1fr)); column-gap: var(--g); width: max-content; }
.po-wk { grid-row: 1; margin-bottom: 8px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.po-wk span { display: block; color: var(--dust); letter-spacing: .04em; }
.po-lbl { grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.po-lbl.up { border-right: 2px solid var(--jade); }
.po-lbl.low { border-right: 2px solid var(--ember); }
.po-cell { position: relative; display: flex; align-items: center; min-width: 0; }
.po-cell > .po-m, .po-gfw { flex: 0 0 var(--cw); width: var(--cw); margin: 5px 0; }
.po-in { position: relative; flex: 1 1 auto; align-self: stretch; }
.po-cell.has-in > .po-in::before { content: ""; position: absolute; left: calc(var(--g) / -2); top: var(--t); bottom: var(--b); border-left: 2px solid var(--line); }
.po-cell.has-in > .po-in::after { content: ""; position: absolute; left: calc(var(--g) / -2); right: 0; top: 50%; border-top: 2px solid var(--line); }
.po-cell.has-out > .po-m { position: relative; }
.po-cell.has-out > .po-m::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--g) / 2 + 1px); border-top: 2px solid var(--line); }
.po-gfw { position: relative; }
.po-gfw > .po-champ { position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; }
.po-brs { margin: 4px 0 10px; }
.po-m { background: var(--stone); border: 1px solid var(--seam); min-width: 0; }
.po-m.gf { border-color: var(--accent); }
.po-m.is-bye { opacity: .55; }
.po-mh { padding: 5px 8px; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--seam); }
.po-slot { display: flex; gap: 8px; align-items: center; padding: 5px 8px; font-size: 13px; color: var(--dust); overflow-wrap: anywhere; }
.po-slot.win { color: var(--bone); font-weight: 600; background: rgba(var(--jade-rgb), .1); }
.po-slot.win a { color: inherit; }
.po-seed { flex: 0 0 14px; font: 600 12px var(--mono); color: var(--dim); text-align: right; }
.po-mp { padding: 4px 8px 6px; font: 12px var(--mono); color: var(--dim); border-top: 1px solid var(--seam); }
.po-gw { margin-left: auto; flex: 0 0 auto; font: 600 13px var(--mono); color: var(--dim); }
.po-slot.win .po-gw { color: var(--jade); }
.po-m .po-odds { padding: 0 8px 6px; margin-top: -2px; }
.po-odds { display: block; font: 12px var(--mono); color: var(--dust); }
.po-tb .po-odds { margin: 2px 0 0 0; }
.po-champ { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--accent); text-align: center; font: 800 16px/1.15 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.po-champ span { font: 600 12px var(--mono); letter-spacing: .1em; color: var(--accent); }
.po-champ a { color: var(--bone); }

/* smoke card (lib/smokemap.js): smoke ganks on the map, smoked kills on a timeline or by minute */
.sm-band { fill-opacity: .14; cursor: pointer; }
.sm-band.s-a { fill: var(--jade); }
.sm-band.s-b { fill: var(--ember); }
.sm-band:hover, .sm-band.hl { fill-opacity: .3; }
.sm-band.off { opacity: .12; }
.smokemap .dt-d.sm-nospot .dt-mark { fill: var(--stone); stroke: var(--c); stroke-width: 1.6; }
.smokemap .dt-d.hl .dt-mark { stroke: var(--bone); stroke-width: 2; }
.smokemap.hl-on .dt-d:not(.hl) { opacity: .3; }
.sm-pt { stroke: rgba(8, 8, 6, .9); stroke-width: .45; fill-opacity: .8; cursor: pointer; }
.sm-pt.own { fill: var(--jade); }
.sm-pt.enemy { fill: var(--ember); }
.sm-pt:hover, .sm-pt.hl { fill-opacity: 1; stroke: var(--bone); stroke-width: .8; }
.sm-bar.own { fill: var(--jade); }
.sm-bar.enemy { fill: var(--ember); }
.sm-side { display: grid; gap: 12px; margin-top: 14px; font: 12px/1.6 var(--mono); color: var(--dust); }

/* ---------- Drafter: fit on one screen ---------- */
.dx-page .page-head { padding-bottom: 6px; margin-bottom: 10px; }
.dx-page .page-head h1 { font-size: clamp(30px, 4vw, 46px); }
.dx-page .dx-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.dx-page .dx-modes { margin: 0; }
.dx-page .dx-mode, .dx-page .dx-opts { margin: 0; gap: 8px 12px; }
.dx-page .dx-setup select { padding: 6px 8px; font-size: 13px; }
.dx-score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 0 8px; padding: 8px 12px; background: var(--stone-2); border: 1px solid var(--seam); }
.dx-score > span:not(.dx-meter) { display: flex; align-items: baseline; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dx-score b { font: 800 28px/1 var(--display); letter-spacing: 0; }
.dx-sx { color: var(--jade); }
.dx-sy { color: var(--ember-soft); }
.dx-sy b { color: var(--ember); }
.dx-score .dx-meter { height: 10px; margin: 0; border-radius: 2px; overflow: hidden; }
.dx-score .dx-meter em { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--bone); opacity: .5; }
.dx-page .dx-now { margin: 0 0 10px; font-size: 13px; gap: 6px 14px; }
/* The board (whose turn, both teams' slots, the chart) and the hero grid each in their own darker
   box, so they read apart from the page and each other. */
.dx-stage, .dx-page .dx-heroes { background: var(--ink); border: 1px solid var(--seam); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 24px rgba(0, 0, 0, .35); padding: 12px 14px 4px; margin: 0 0 14px; }
.dx-page .dx-stage .dchart { margin-bottom: 6px; }
.dx-page .dx-heroes { padding: 10px 12px 12px; margin: 0; min-width: 0; }
.dx-page .dx-heroes input[type=search] { background: var(--stone); }
.dx-page .dx-team { padding: 4px 0 4px 10px; grid-template-columns: minmax(120px, 170px) 5fr 4fr; }
.dx-page .dx-team + .dx-team { margin-top: 4px; }
.dx-page .dx-picks { padding-bottom: 13px; }
.dx-page .dchart { margin: 4px 0 10px; }
.dx-h { margin: 0 0 8px; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dx-page .dx-cols { grid-template-columns: minmax(250px, 300px) 1fr; gap: 16px; }
@media (max-width: 760px) { .dx-page .dx-cols { grid-template-columns: minmax(0, 1fr); } .dx-hhead { flex-wrap: wrap; } }
.dx-page .dx-sugg .table-note { margin: 0 0 6px; }
.dx-page .dx-list { gap: 2px; }
.dx-page .dx-pickbtn { grid-template-columns: 40px 1fr auto; padding: 3px 8px 3px 4px; }
.dx-page .dx-pickbtn .hero-img { width: 40px; height: 22px; }
.dx-page .dx-hn { font-size: 12px; }
.dx-page .dx-pickbtn b { font-size: 13px; }
.dx-page .dx-pickbtn small { font-size: 12px; }
.dx-page .dx-for { margin-bottom: 6px; }
.dx-page .dx-rolefilter { margin-bottom: 6px; }
.dx-hhead { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.dx-hhead .dx-h { margin: 0; }
.dx-page .dx-heroes input[type=search] { margin: 0; padding: 5px 8px; font-size: 13px; max-width: 220px; }
/* Dota's own layout: the four attributes side by side. */
.dx-attrs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.dx-page .dx-attr { margin: 0; }
.dx-page .dx-attr-h { margin-bottom: 5px; font-size: 12px; letter-spacing: .1em; }
.dx-page .dx-attr-h i { width: 9px; height: 9px; }
.dx-page .dx-attr .dx-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; padding-left: 6px; }
.dx-page .dx-tile small { font-size: 10px; }
.dx-more { margin: 14px 0 0; }
.dx-more summary { cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 6px 0; }
.dx-page .dx-rosters { margin-top: 10px; }
/* Roster rows: the player's pages on Stratz, OpenDota, Dotabuff and PlayOn under the name. */
.dx-page .dx-ext { display: block; margin-top: 2px; font: 400 12px/1.4 var(--mono); color: var(--dim); }
.dx-page .dx-ext a { color: var(--dust); }
.dx-page .dx-ext a:hover { color: var(--accent); }
/* Hero grid to prep against either team (parts/herogrid.js under the board). */
.dx-hhead { flex-wrap: wrap; }
.dx-hhead .dx-views { margin: 0; }
/* The hero grid as the Drafter's picker. */
.dx-gridfor { margin: 0 0 6px; }
.dx-hg .wm-intro { margin: 0 0 8px; }
.dx-gridnote { margin: 0 0 8px; }
.dx-findrow[hidden] { display: none; }
.dx-findrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 2px; margin: 0 0 10px; padding: 6px; border: 1px dashed var(--seam-2); }
.dx-list.with-grid li { display: grid; grid-template-columns: 1fr auto; gap: 2px; align-items: stretch; }
.dx-togrid { padding: 0 8px; clip-path: none; font: 700 14px/1 var(--mono); }
.hg-h.playable { cursor: pointer; }
.hg-h.playable:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.hg-h.gone { opacity: .2; filter: grayscale(1); cursor: default; }
.hg-h.off { opacity: .45; filter: grayscale(.8); }
.hg-h i.hg-v { background: rgba(0, 0, 0, .8); color: #f0ebe2; }
.hg-into { margin: 10px 0 0; }
.hg-into > summary { cursor: pointer; font: 600 13px var(--body); color: var(--dust); }
.hg-into .hg-steps { margin-top: 10px; }
@media (max-width: 1200px) { .dx-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dx-score { grid-template-columns: 1fr 1fr; } .dx-score .dx-meter { grid-column: 1 / -1; order: 3; } .dx-sy { justify-content: flex-end; } }
.dx-page .dx-team { grid-template-columns: minmax(120px, 170px) auto auto; justify-content: start; column-gap: 22px; }
.dx-page .dx-picks { grid-template-columns: repeat(5, 92px); }
.dx-page .dx-bans { grid-template-columns: repeat(7, 66px); align-self: start; }
@media (max-width: 1200px) { .dx-page .dx-picks { grid-template-columns: repeat(5, minmax(0, 76px)); } .dx-page .dx-bans { grid-template-columns: repeat(7, minmax(0, 54px)); } }
@media (max-width: 760px) { .dx-page .dx-team { grid-template-columns: 1fr; } .dx-page .dx-picks { grid-template-columns: repeat(5, 1fr); } .dx-page .dx-bans { grid-template-columns: repeat(7, 1fr); } }
.dx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0 0 10px; }
.dx-tools:empty { display: none; }
.dx-page .dx-tools .dx-for { margin: 0; }
.dx-page .dx-tools .dx-for-l { flex-basis: auto; margin: 0 6px 0 0; }
.dx-page .dx-tools .dx-rolefilter { margin: 0; flex-wrap: nowrap; align-items: center; }
.dx-page .dx-tools .dx-rolefilter small { flex-basis: auto; }
.dchart .dc-name { paint-order: stroke; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; }
.dchart .dc-cell { pointer-events: none; }
/* Flex heroes: more than one position, so the pick doesn't give its position away. */
.dx-flex { font-style: normal; font-weight: 600; color: var(--gold); border: 1px solid rgba(232, 182, 76, .45); padding: 0 4px; margin-right: 4px; letter-spacing: .04em; }
.dx-bslot.flex { box-shadow: inset 0 0 0 1px var(--gold); }
.dx-bflex { position: absolute; right: 2px; top: 2px; z-index: 1; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 2px 3px; }
.dx-tile.flex::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; border-style: solid; border-width: 7px 7px 0 0; border-color: var(--gold) transparent transparent transparent; pointer-events: none; }

/* Playoff picture sub-tabs: your picks (clickable winners), possibilities (place shares). */
.po-tabs { margin: 0 0 14px; border-bottom: 1px solid var(--seam); }
.po-who { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px dashed var(--seam); padding: 1px 5px; vertical-align: 1px; }
.po-who.me { color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .5); }
.po-who.played { color: var(--jade); border: 1px solid rgba(var(--jade-rgb), .5); }
.po-pick { font: inherit; color: var(--dust); background: none; border: 1px dashed var(--seam); padding: 2px 8px; cursor: pointer; clip-path: none; }
.po-pick:hover { color: var(--bone); border-color: var(--dust); }
.po-pick.on { color: var(--bone); font-weight: 600; background: rgba(var(--jade-rgb), .1); border-color: rgba(var(--jade-rgb), .5); }
.po-pick.on.me { border-style: solid; border-color: var(--jade); }
.po-pick:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
button.po-slot { width: 100%; text-align: left; border: 0; border-top: 1px dashed transparent; border-bottom: 1px dashed transparent; padding: 5px 8px; }
button.po-slot.on { border-color: rgba(var(--jade-rgb), .5); }
button.po-slot.on.me { border-style: solid; border-color: var(--jade); }
.po-nm { min-width: 0; }
.po-seedpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 13px; }
.po-seedpick button { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; color: var(--dust); background: var(--stone); border: 1px solid var(--seam); cursor: pointer; clip-path: none; }
.po-seedpick button[aria-pressed="true"] { color: var(--bone); border-color: var(--accent); }
.po-weightbar { margin: 20px 0 16px; }
.po-versions { margin: 12px 0 4px; }
.po-versions + .table-note { margin-top: 4px; }
.po-poss th, .po-poss td { padding: 3px 4px; }
.po-poss thead th { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--dim); text-align: center; }
.po-poss thead th.l { text-align: left; }
.po-poss tbody th { font-weight: 400; min-width: 16ch; max-width: 26ch; }
.po-poss tbody th button { color: var(--bone); text-align: left; font: inherit; font-size: 14px; line-height: 1.4; text-transform: none; letter-spacing: 0;
  clip-path: none; display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.po-poss tr.sel th button { color: var(--accent); }
/* Team names open a drop-down of every place the team can reach: a caret and a hover box say so. */
.po-poss tbody th button.po-team { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px 4px 6px; border: 1px solid transparent; }
.po-poss tbody th button.po-team:hover { border-color: var(--seam); background: rgba(var(--bone-rgb), .05); }
.po-poss tbody th button.po-team:hover .po-caret, .po-poss tr.sel .po-caret { color: var(--accent); }
.po-caret { flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  color: var(--dust); transition: transform .15s; }
.po-team[aria-expanded="true"] .po-caret { transform: rotate(90deg); }
.po-tname { overflow: hidden; text-overflow: ellipsis; }
.po-c { text-align: center; }
.po-c.zero { color: var(--dim); opacity: .5; }
.po-c button {
  width: 100%; min-width: 44px; padding: 6px 4px; font: 600 12px var(--mono); color: var(--bone); cursor: pointer; clip-path: none;
  border: 1px solid transparent; background: rgba(var(--jade-rgb), calc(.06 + var(--p) * .55));
}
.po-c button:hover { border-color: var(--dust); }
.po-c button.on { border-color: var(--accent); outline: 1px solid var(--accent); }
.po-sum { font: 600 12px var(--mono); color: var(--accent); text-align: center; white-space: nowrap; }
.po-poss thead th.po-sum { color: var(--accent); }
.po-events { margin-top: 18px; }
.po-ev-h { margin-top: 26px; }
.po-ev th.l, .po-ev td.l { text-align: left; }
.po-ev td.name { white-space: normal; min-width: 120px; max-width: 320px; font-family: var(--body); font-size: 14px; color: var(--bone); }
.po-why-list { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--dust); }
.po-why-list li::before { content: "= "; color: var(--accent); font-family: var(--mono); }
.po-ev tr.sel td { background: var(--stone-2); }
.po-ev td .linkish { white-space: nowrap; }
.po-need { background: var(--stone); border: 1px solid var(--seam); border-left: 3px solid var(--accent); padding: 10px 14px; margin: 10px 0 16px; font-size: 14px; color: var(--dust); }
.po-need-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 8px; color: var(--bone); }
.po-need-p h5 { margin: 12px 0 6px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.po-need-p ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.po-need-p li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.po-need-share { min-width: 44px; font: 600 12px var(--mono); color: var(--dim); }
.po-chip { font-size: 12px; color: var(--bone); background: rgba(var(--bone-rgb), .06); border: 1px solid var(--seam); padding: 2px 7px; }
.po-chip.any { color: var(--jade); }
.po-chip.tb { color: var(--gold); border-style: dashed; }
.po-poss .po-line { border-right: 2px solid var(--accent); }

/* Playoff picture, laid out as steps: a progress strip, then 1 group stage, 2 table + week 8,
   3 bracket. */
.po-progress { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 14px 0 6px; }
.po-stat { display: grid; gap: 4px; min-width: 120px; padding: 10px 14px; background: var(--stone); border: 1px solid var(--seam); }
.po-stat span { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.po-stat b { font: 700 22px/1 var(--display); color: var(--bone); }
.po-stat b i { font-style: normal; font-size: 14px; color: var(--dim); }
.po-stat.full b { color: var(--jade); }
.po-stat.champ { flex: 1 1 200px; border-color: rgba(var(--accent-rgb), .5); }
.po-stat.champ b { font-size: 18px; line-height: 1.15; color: var(--accent); overflow-wrap: anywhere; }
.po-clear { align-self: center; margin-left: 4px; }
.po-step { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--seam); }
.po-step > header { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.po-step > header h3 { margin: 0; font: 700 20px/1.1 var(--display); letter-spacing: .04em; color: var(--bone); }
.po-step > header p { margin: 3px 0 0; font-size: 13px; color: var(--dust); }
.po-step-n { flex: 0 0 30px; height: 30px; display: grid; place-items: center; font: 700 15px var(--mono); color: var(--ink); background: var(--accent); }
.po-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.po-g { background: var(--stone); border: 1px solid var(--seam); border-left: 3px dashed var(--seam); min-width: 0; }
.po-g.me { border-left: 3px solid var(--accent); }
.po-g-t { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 14px; color: var(--dust); }
.po-g-t a { color: inherit; min-width: 0; overflow-wrap: anywhere; }
.po-g-t b { margin-left: auto; font: 600 14px var(--mono); color: var(--dim); }
.po-g-t.w { color: var(--bone); font-weight: 600; background: rgba(var(--jade-rgb), .08); }
.po-g-t.w b { color: var(--jade); }
.po-g.tie .po-g-t b { color: var(--gold); }
.po-g-by { padding: 4px 10px 6px; border-top: 1px solid var(--seam); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.po-g.me .po-g-by { color: var(--accent); }
.po-nudge { margin: 10px 0 0; font-size: 13px; color: var(--dust); }
.po-split { display: grid; gap: 14px 24px; align-items: start; }
@media (min-width: 1201px) { .po-split { grid-template-columns: minmax(0, 660px) minmax(0, 1fr); } }
.po-week8 > .po-h:first-child { margin-top: 0; }
.po-two { display: grid; gap: 22px 28px; align-items: start; margin-top: 18px; }
.po-pane { min-width: 0; }
.po-pane .po-split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1400px) { .po-two { grid-template-columns: minmax(520px, 530px) minmax(0, 1fr); } }
.po-pane .table-note { margin-bottom: 14px; }
.po-pane .po-seedpick { margin-bottom: 14px; }
.po-table .po-place { color: var(--dim); }
.po-gain { font: 600 12px var(--mono); color: var(--jade); }
.po-zone { display: inline-block; padding: 2px 7px; border: 1px solid var(--seam); white-space: nowrap; }
.po-table tr.po-upper-bracket .po-zone, .po-table tr.po-aegis-upper-bracket .po-zone, .po-table tr.po-heroic-upper-bracket .po-zone { border-color: rgba(var(--jade-rgb), .45); }
.po-table tr.po-out .po-zone { border-style: dashed; }
.po-tb ul { gap: 8px; }
.po-tbm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.po-tbm-meta { margin: 3px 0 0 40px; font: 12px var(--mono); color: var(--dim); }
/* Pick buttons read as team names, not as the site's mono button labels. */
.po-pick, button.po-slot { font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; }
.po-tb .po-pick { font-size: 14px; }
@media (max-width: 520px) {
  .po-stat { min-width: 0; flex: 1 1 28%; padding: 8px 10px; }
  .po-stat.champ { flex-basis: 100%; }
  .po-stat span { letter-spacing: .08em; }
}
/* Your picks bracket: open matches and slots waiting on an earlier pick. */
.po-who.open { color: var(--bone); border-style: solid; border-color: rgba(var(--bone-rgb), .3); }
.po-slot.tbd { color: var(--dim); font: 600 12px var(--mono); letter-spacing: .1em; }
.po-m.is-tbd { border-style: dashed; }
.po-m.is-tbd .po-mh { color: var(--dim); }
.po-champ-tbd, .po-tbd { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--dim); }

/* ---------- hero grid export (team page, Heroes tab; parts/herogrid.js) ---------- */
.hg { display: grid; gap: 22px; align-items: start; }
.hg-tpl, .hg-me { margin-bottom: 8px; align-items: center; gap: 8px 14px; }
.hg-me small { font-size: 12px; }
.hg-editor { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--seam); background: var(--stone); display: grid; gap: 8px; }
.hg-editor[hidden] { display: none; }
.hg-ename input { margin-left: 6px; }
.hg-editor > small { font-size: 12px; }
/* The grid as Dota's canvas (parts/herogrid.js): boxes placed as a share of it, heroes shrunk
   to fit each box. Red: the enemy, grey: bans, green: you. */
.hg-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.hg-work:has(.hg-side:not([hidden])) { grid-template-columns: minmax(0, 1fr) 250px; }
.hg-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; font: 400 12px var(--mono); color: var(--dust); }
.hg-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--hg-c); }
.side-them { --hg-c: var(--err); }
.side-bans { --hg-c: var(--dim); }
.side-us { --hg-c: var(--jade); }
.hg-scroll { overflow-x: auto; }
.hg-canvas { position: relative; min-width: 640px; background: #0b0c0e; border: 1px solid var(--seam);
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 4.545% 0, 4.545% 100%; }
.hg-canvas.editing { background-size: 1.818% 1.818%; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); }
.hg-box { position: absolute; display: grid; grid-template-rows: var(--label) minmax(0, 1fr); background: rgba(20, 22, 26, .92); border: 1px solid rgba(255, 255, 255, .1); border-top: 2px solid var(--hg-c); overflow: hidden; }
.hg-box.drop { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.hg-box.sel { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }
.hg-box.dragging { opacity: .85; z-index: 3; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.hg-box:focus-visible { outline: 2px solid var(--accent); }
.hg-bhead { display: flex; align-items: center; min-height: 0; padding: 0 6px; overflow: hidden; }
.hg-bhead b { font: 700 12px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #e8e2d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-canvas.editing .hg-bhead { cursor: move; touch-action: none; background: rgba(255, 255, 255, .04); }
.hg-heroes { display: grid; gap: 2px; align-content: start; padding: 0 4px 3px; min-height: 0; overflow: hidden; }
.hg-empty { grid-column: 1 / -1; font: 400 12px var(--mono); color: #77706a; padding-top: 2px; white-space: nowrap; }
.hg-resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%); opacity: .8; }
.hg-h { position: relative; cursor: grab; min-width: 0; }
.hg-h .hero-img { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.hg-h i { position: absolute; right: 1px; bottom: 1px; font: 600 10px/1 var(--mono); font-style: normal; color: #f0ebe2; background: rgba(0, 0, 0, .72); padding: 1px 2px; }
/* Played in pubs lately: a jade outline and the pub count top left. */
.hg-h.pub { outline: 2px solid rgba(var(--jade-rgb), .85); outline-offset: -2px; }
.hg-h em { position: absolute; left: 1px; top: 1px; font: 700 10px/1 var(--mono); font-style: normal; color: #0c0b0a; background: rgba(var(--jade-rgb), .95); padding: 1px 2px; }
.hg-canvas.editing .hg-h:hover { opacity: .65; }
.hg-h.drop-before { box-shadow: -3px 0 0 var(--accent); }
/* The selected box's settings. */
.hg-side { display: grid; gap: 10px; align-content: start; font-size: 13px; }
.hg-ctools { gap: 8px; align-items: center; }
.hg-insp { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--seam); background: var(--stone); }
.hg-insp label { display: grid; gap: 3px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.hg-insp input, .hg-insp select { width: 100%; min-width: 0; font: 400 13px var(--body); letter-spacing: 0; text-transform: none; }
.hg-insp small { font-size: 12px; }
.hg-ibtns { gap: 10px; }
.hg-tip { font-size: 12px; margin: 0; }
@media (max-width: 1000px) { .hg-work:has(.hg-side:not([hidden])) { grid-template-columns: 1fr; } }
.hg-steps { margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.55; columns: 2 320px; column-gap: 32px; }
.hg-steps li { break-inside: avoid; }
.hg-steps li + li { margin-top: 12px; }
.hg-steps li::marker { font: 800 15px var(--display); color: var(--accent); }
.hg-steps small { display: block; color: var(--dust); font-size: 12px; margin-top: 4px; }
.hg-path { display: block; margin: 6px 0 4px; padding: 6px 8px; background: var(--stone); border: 1px solid var(--seam); word-break: break-all; color: var(--bone); }
.hg-path i { color: var(--accent); }
.hg-btns { margin-top: 10px; }
.hg-msg { margin: 8px 0 0; font: 400 12px/1.5 var(--mono); }
.hg-msg:empty { display: none; }
.hg-msg.ok { color: var(--jade); }
.hg-msg.err { color: var(--err); }
/* Possibilities, what it takes: "always needs" once, then numbered ways. */
.po-need-p h5 { border-top: 1px solid var(--seam); padding-top: 10px; }
.po-need-p:first-of-type h5 { border-top: 0; padding-top: 0; }
.po-need-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; align-items: start; margin: 0 0 8px; }
.po-need-row > div { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.po-need-k { padding-top: 4px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.po-need-row.must .po-need-k { color: var(--accent); }
.po-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: way; }
.po-ways li { display: flex; align-items: flex-start; gap: 8px; counter-increment: way; }
.po-ways li::before { content: counter(way); flex: 0 0 18px; padding-top: 3px; font: 600 12px var(--mono); color: var(--dim); }
.po-ways li > div { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.po-ways .po-need-share { padding-top: 3px; }
.po-chip.own { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
@media (max-width: 520px) { .po-need-row { grid-template-columns: 1fr; } }
.po-ways li { flex-wrap: nowrap; }
/* Team page Outcomes tab: summary cards, a bar per place. */
.po-tcards { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.po-tcards .po-stat b i { font-size: 13px; }
.po-tbars { display: grid; gap: 3px; max-width: 640px; margin: 0 0 12px; }
.po-tbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 54px; align-items: center; gap: 10px; width: 100%; padding: 4px 8px; background: none; border: 1px solid transparent; clip-path: none; color: var(--dust); text-align: left; font: inherit; cursor: pointer; }
button.po-tbar:hover { border-color: var(--seam); }
.po-tbar.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.po-tbar.zero { cursor: default; opacity: .45; }
.po-tb-k { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--dim); }
.po-tb-bar { height: 14px; background: rgba(var(--bone-rgb), .05); }
.po-tb-bar i { display: block; height: 100%; background: rgba(var(--jade-rgb), .6); }
.po-tb-v { font: 600 12px var(--mono); color: var(--bone); text-align: right; }
.po-tbar { text-transform: none; letter-spacing: 0; }
/* "Needs all of these": a + between chips says they all have to happen. */
.po-need-row > div > .po-chip + .po-chip::before, .po-ways li > div > .po-chip + .po-chip::before { content: "+"; margin: 0 6px 0 -2px; color: var(--dim); }
.po-need-row > div, .po-ways li > div { gap: 4px 10px; }
.po-need-row .po-chip + .po-chip, .po-ways .po-chip + .po-chip { position: relative; }
.po-need-row .po-chip + .po-chip::before, .po-ways .po-chip + .po-chip::before { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); margin: 0; }
.po-need-row .po-need-k { width: auto; }
.po-key { color: var(--accent); }
.po-need-row { grid-template-columns: 140px minmax(0, 1fr); }
/* What it takes: each way a collapsible row, its results listed in full. */
.po-way { border: 1px solid var(--seam); background: rgba(var(--bone-rgb), .02); margin: 0 0 6px; }
.po-way > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; cursor: pointer; list-style: none; }
.po-way > summary::-webkit-details-marker { display: none; }
.po-way > summary::before { content: "▸"; color: var(--dim); font-size: 12px; }
.po-way[open] > summary::before { content: "▾"; }
.po-way[open] > summary { border-bottom: 1px solid var(--seam); }
.po-way-n { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); }
.po-way-sum { font-size: 13px; color: var(--dust); }
.po-way-sum b { color: var(--accent); font-weight: 600; }
.po-way-list { list-style: none; margin: 0; padding: 8px 12px 10px 34px; display: grid; gap: 4px; font-size: 14px; color: var(--bone); }
.po-way-list li { position: relative; }
.po-way-list li::before { content: "✓"; position: absolute; left: -18px; color: var(--jade); font-size: 12px; }
.po-way-list li.own { color: var(--accent); }
.po-way-list li.tb { color: var(--gold); }
.po-way-list li.any { color: var(--jade); }
.po-need-p ul.po-way-list { padding: 8px 12px 10px 34px; gap: 4px; }
/* Ways side by side: as many columns as fit. */
.po-ways-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.po-ways-grid .po-way { margin: 0; }
.po-way-sum { flex: 1 1 100%; }
/* Each final place in its own box, in its own colour (--ph, a hue, set per place). */
.po-need-p, .po-tbar { --pc: hsl(var(--ph, 40) 62% 62%); }
html.light .po-need-p, html.light .po-tbar { --pc: hsl(var(--ph, 40) 60% 34%); }
.po-need .po-need-p { margin: 0 0 12px; padding: 12px 14px 14px; border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); border-left: 4px solid var(--pc); background: color-mix(in srgb, var(--pc) 6%, transparent); }
.po-need .po-need-p h5, .po-need .po-need-p:first-of-type h5 { margin: 0 0 10px; padding: 0; border: 0; color: var(--pc); }
.po-need-p .po-way { border-color: color-mix(in srgb, var(--pc) 25%, transparent); background: color-mix(in srgb, var(--pc) 4%, transparent); }
.po-need-p .po-way-n { color: var(--pc); }
.po-tbar .po-tb-bar i { background: color-mix(in srgb, var(--pc) 75%, transparent); }
.po-tbar .po-tb-k { color: var(--pc); }
.po-tbar.zero .po-tb-k { color: var(--dim); }
.po-need { background: none; border: 0; padding: 0; }
/* Place boxes collapse: the heading is the toggle. */
.po-need-p > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
.po-need-p > summary::-webkit-details-marker { display: none; }
.po-need-p > summary::before { content: "▸"; color: var(--pc); font-size: 12px; }
.po-need-p[open] > summary::before { content: "▾"; }
.po-need .po-need-p:not([open]) { padding-bottom: 12px; }
.po-need .po-need-p:not([open]) h5 { margin: 0; }
/* Settings cog: my team (core.js myTeam). */
.settings-team { display: grid; gap: 6px; padding: 8px 10px; }
.settings-team .menu-label { padding: 0; }
.settings-team select { width: 100%; max-width: 260px; }
.settings-team small { font-size: 12px; color: var(--dust); white-space: normal; max-width: 260px; }

/* Site search deep links: the section a result pointed at flashes once (core.js goToSection). */
.search-flash { animation: search-flash 1.2s ease-out; border-radius: 6px; }
@keyframes search-flash {
  0%, 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .search-flash { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; } }

/* Site search results (pages/search.js). */
.sr-form { display: flex; gap: 8px; max-width: 640px; margin: 0 0 18px; }
.sr-form input { flex: 1; min-width: 0; padding: 10px 12px; background: var(--stone); color: var(--bone); border: 1px solid var(--seam-2); border-radius: 4px; font: inherit; }
.sr-did { color: var(--dust); margin: 0 0 14px; }
.sr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.sr-lgpick { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.sr-list { display: grid; gap: 6px; margin: 0 0 22px; max-width: 820px; }
.sr-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-left: 2px solid transparent; background: var(--stone); border-radius: 4px; color: var(--bone); }
.sr-hit:hover { text-decoration: none; border-left-color: var(--accent); background: var(--stone-2); }
.sr-crumb { font: 400 13px/1.3 var(--mono); color: var(--dust); }
.sr-crumb b { color: var(--bone); }
.sr-snip { flex-basis: 100%; color: var(--dust); font-size: 13px; line-height: 1.45; margin: 0; }
.sr-sub { color: var(--dust); font-size: 13px; }
.sr-links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 12px 2px 14px; font: 400 12px/1.4 var(--mono); }
.sr-card { max-width: 820px; padding: 14px 16px; margin: 0 0 18px; background: var(--stone); border: 1px solid var(--seam); border-radius: 6px; }
.sr-card .sr-title { margin: 0 0 6px; }
.sr-card .sr-snip { margin: 0 0 12px; }
.sr-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.sr-find { flex: 1 1 220px; padding: 8px 10px; background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); border-radius: 4px; font: inherit; }
.sr-opts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.sr-opt { padding: 5px 10px; border: 1px solid var(--seam-2); border-radius: 999px; font-size: 13px; }
.sr-opt small { color: var(--dust); }
.sr-go { font-weight: 600; }
.sr-empty a { white-space: nowrap; }
@media (max-width: 760px) { .sr-form { flex-direction: column; } .sr-hit { padding: 9px 10px; } }

.search-all { display: block; padding: 10px 12px; border-top: 1px solid var(--seam); font: 600 12px/1.3 var(--mono); color: var(--accent); }
.search-all:hover { text-decoration: none; background: rgba(255, 255, 255, .04); }

/* Tables (parts/tables.js) on the search results page. */
.sr-pick .tt-table, .sr-card .tt-table { flex-basis: 100%; min-width: 0; margin-top: 8px; }
.sr-tablefirst, .tt-card { max-width: none; }
.sr-tablefirst .sr-lgpick { margin-bottom: 4px; }
.sr-build { font: 600 12px/1.3 var(--mono); white-space: nowrap; }
.tt-builder { display: grid; gap: 12px; }
.tt-kinds { margin: 0; }
.tt-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.tt-row [hidden] { display: none; }
.tt-min { width: 64px; padding: 5px 8px; background: var(--ink); color: var(--bone); border: 1px solid var(--seam-2); border-radius: 4px; font: inherit; }
.tt-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-preset { padding: 5px 10px; border: 1px solid var(--seam-2); border-radius: 999px; background: none; color: var(--bone); font: 500 13px var(--body); text-transform: none; letter-spacing: 0; clip-path: none; }
.tt-preset:hover { border-color: var(--accent); background: none; }
.tt-preset.on { border-color: var(--accent); color: var(--accent); }
.tt-saved { display: inline-flex; align-items: center; gap: 2px; }
.tt-unsave { padding: 2px 6px; background: none; border: 0; color: var(--dust); clip-path: none; }
.tt-cols > summary { cursor: pointer; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); }
.tt-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; margin-top: 8px; }
.tt-groups fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 3px; min-width: 0; align-content: start; }
.tt-groups legend { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); margin-bottom: 4px; }
.tt-groups label { font-size: 13px; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.tt-low { opacity: .45; }
.tt-btns { gap: 10px 16px; align-items: center; }
.tt-msg.ok { color: var(--jade); }
.tt-msg.err { color: var(--ember); }
.tt-acts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font: 600 12px/1.3 var(--mono); flex-basis: 100%; }

/* Right-click a hero: add it to a hero grid (parts/herogrid.js). */
.hgm { position: fixed; z-index: 1000; width: min(320px, calc(100vw - 16px)); max-height: min(70vh, 520px); display: flex; flex-direction: column;
  background: var(--stone); border: 1px solid var(--seam-2); border-top: 2px solid var(--accent); box-shadow: 0 12px 32px rgb(0 0 0 / .45); font-size: 14px; color: var(--dust); }
.hgm-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--seam); color: var(--bone); }
.hgm-h .hero-img { width: 40px; height: auto; }
.hgm-body { overflow-y: auto; padding: 6px 0; }
.hgm-g { padding: 4px 0; }
.hgm-t { padding: 4px 12px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hgm button { display: block; width: 100%; text-align: left; padding: 6px 12px 6px 20px; background: none; border: 0; color: var(--bone);
  font: 400 14px/1.35 var(--body); text-transform: none; letter-spacing: 0; cursor: pointer; }
.hgm button:hover:not([disabled]), .hgm button:focus-visible { background: var(--stone-2); outline: none; }
.hgm button[disabled] { color: var(--dim); cursor: default; }
.hgm .hgm-new { padding-left: 12px; color: var(--accent); }
.hgm-none { margin: 4px 12px; color: var(--dim); }
.hgm .hgm-grid small { display: block; color: var(--dim); font-size: 12px; }
.hgm .hgm-back { padding-left: 12px; color: var(--dim); }
.hgm-sub { padding: 6px 12px 2px; font-size: 12px; color: var(--dim); }
.hgm-built summary { padding: 8px 12px; cursor: pointer; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.hgm-msg:empty { display: none; }
.hgm-msg { margin: 0; padding: 10px 12px; color: var(--bone); }

/* Team and player names wrap rather than cut off with "…" (team names here run long). */
.sh-name, .td-us, .td-them, .td-nm, .lu-name, .hist-vs, .h2h-name, .chip-name, .chip-meta, .bd-vs, .ld-meta,
.ga-g-vs, .ga-ten-name, .rt-who b, .mx-t, .ct-row, .bo-who, .sp-tabs .sp-team, .gm-fact .v a, .gm-stand .s,
.po-poss tbody th, .po-poss tbody th button, .pk-chip, .dx-pickbtn small {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.chip-name { min-width: 0; } /* a long name with no spaces breaks mid-string instead of pushing the rating out */
.po-poss tbody th { max-width: 22ch; }
.pk-chip { max-width: 220px; }

/* Tier breakdowns: a close button in the open card's top-right corner, and sortable stat headers. */
.chip.open { position: relative; }
.chip.open .chip-top { padding-right: 34px; }
.bd-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  font: 400 20px/1 var(--body); color: var(--dust); background: var(--stone-2); border: 1px solid var(--seam-2); clip-path: none; cursor: pointer; }
.bd-x:hover:not(:disabled) { color: var(--bone); border-color: var(--dust); }
.tm-body .bd-x { display: none; }
/* A player who played several positions: one tab per position above the score. */
.bd-tabs { flex-wrap: wrap; margin: 0 0 14px; }
.bd-tabs .seg { padding: 6px 12px; font-size: 12px; }
.bd-tabs .seg small { font: 600 12px var(--mono); color: inherit; opacity: .75; margin-left: 4px; }
.bd-sort { padding: 0; background: none; border: 0; clip-path: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.bd-sort:hover:not(:disabled) { background: none; color: var(--bone); }
.bd-sort i { font-style: normal; margin-left: 3px; color: var(--dim); }
.bd-sort.on, .bd-sort.on i { color: var(--accent); }

/* Content page: each team's whole draft on one small line (bans, then picks), so the panel fits a screen. */
.game-panel .draft-rows { gap: 4px; }
.game-panel .draft { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.game-panel .draft-bans, .game-panel .draft-picks { gap: 5px; }
.game-panel .draft-bans .draft-step { flex: 0 0 60px; }
.game-panel .draft-picks .draft-step { flex: 0 0 77px; }
.game-panel .draft-gap { flex: 0 0 10px; }
.game-panel .draft-tag { padding: 2px 0; font-size: 12px; }
.game-panel .draft-legend { margin: 6px 0 8px; }
.game-panel .draft-rows.draft-bottom { margin-top: 8px; }
.game-panel .gp-head { margin-bottom: 8px; }

/* Lead chart hover: dots on the lines and a box with the exact gold and XP lead. */
figure.chart .lead-tip rect { fill: var(--stone); stroke: var(--seam-2); }
figure.chart .lead-tip text { font: 600 11px var(--mono); fill: var(--dust); }
figure.chart .lead-tip text.lt-min { fill: var(--bone); }
figure.chart .lead-tip text.s-a { fill: var(--jade); }
figure.chart .lead-tip text.s-b { fill: var(--ember); }
figure.chart .lead-dot { fill: var(--bone); stroke: var(--stone); }
figure.chart .lead-dot.xp { fill: var(--dust); }
figure.chart.item-lead .xp-line { stroke: var(--gold); stroke-width: 1.5; opacity: .85; }
.lane-n { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); margin: 0 5px 0 2px; }

/* Team hero pool: a sortable table, three rows showing until opened. */
.hpool { margin-top: 10px; }
.hpool-table { width: 100%; }
.hpool-table td, .hpool-table th { vertical-align: middle; }
.hpool-table th.hp-hero, .hpool-table td.hp-hero { text-align: left; }
.hpool-table th.hp-pos { text-align: center; }
.hpool-table .hp-hero a { display: flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font-weight: 600; }
.hpool-table .hp-hero a:hover { color: var(--accent); }
.hpool-table .hero-img { width: 56px; height: auto; aspect-ratio: 16 / 9; flex: none; display: block; }
.hpool-table .hp-pos { text-align: center; font-family: var(--mono); color: var(--dust); }
.hpool-table td.hp-w { color: var(--jade); }
.hpool-table td.hp-l { color: var(--ember); }
.hpool-table td.hp-e { color: var(--gold); }
.hp-rate span { display: inline-block; min-width: 3ch; }
.hpool-bar { display: inline-block; vertical-align: middle; width: 48px; height: 3px; margin-left: 8px; background: var(--ember-deep); }
.hpool-bar u { display: block; height: 100%; background: var(--jade); }
.hpool-row.hpool-hide:nth-child(n+4) { display: none; }
.hpool-table .hp-by { text-align: left; color: var(--dust); font-size: 13px; }
.hpool-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.hpool-filters select { margin-left: 6px; }
.hpool-clear { padding: 6px 10px; background: none; border: 1px solid var(--seam); color: var(--accent); font: inherit; cursor: pointer; }
.hpool-sub { margin: 18px 0 8px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.hpool-sub:first-child { margin-top: 0; }
.hpool-bands { display: grid; gap: 18px; }
.hpool-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hpool-head small { font: 400 12px/1 var(--mono); letter-spacing: .04em; text-transform: none; color: var(--dust); }
.hpool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.hpool-tile { position: relative; display: grid; gap: 2px; padding: 0 0 7px; background: var(--stone); border: 1px solid var(--seam); color: inherit; text-decoration: none; }
.hpool-tile:hover { border-color: var(--accent); }
.hpool-tile .hero-img { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
.hpool-name { padding: 5px 8px 0; font: 600 12px/1.2 var(--body); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpool-by { padding: 0 8px; font: 400 12px/1.2 var(--body); color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpool-rec { padding: 0 8px; font: 600 12px/1 var(--mono); }
.hpool-tile.w .hpool-rec b { color: var(--jade); }
.hpool-tile.l .hpool-rec b { color: var(--ember); }
.hpool-tile.e .hpool-rec b { color: var(--gold); }
.hpool-tile .hpool-bar { display: block; width: auto; margin: 5px 8px 0; }
.hpool-toggle { display: block; width: 100%; margin-top: 6px; padding: 9px; background: var(--stone); border: 1px solid var(--seam); color: var(--accent); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.hpool-toggle:hover { border-color: var(--accent); }

/* Same compact drafts in a team's Series tab (seriesDraftsHtml). */
.sd-game .draft-rows { gap: 4px; }
.sd-game .draft { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.sd-game .draft-bans, .sd-game .draft-picks { gap: 5px; }
.sd-game .draft-bans .draft-step { flex: 0 0 60px; }
.sd-game .draft-picks .draft-step { flex: 0 0 77px; }
.sd-game .draft-gap { flex: 0 0 10px; }
.sd-game .draft-tag { padding: 2px 0; font-size: 12px; }
.sd-game .draft-legend { margin: 6px 0 8px; }
.sd-game .draft-rows.draft-bottom { margin-top: 8px; }
.sd-game .draft-rows { gap: 6px; }
.hpool-segs { margin: 10px 0 0; flex-wrap: wrap; }
.hpool-note { margin: 8px 0 0; }

/* Player page: Compare tab */
/* Tier-stat radar (parts/radar.js): each outline takes its group's --pc. */
.radar { display: block; min-width: 0; width: 100%; height: auto; overflow: visible; }
.radar-grid { fill: none; stroke: var(--seam-2); stroke-width: 1; }
.radar-shape { fill: var(--pc, var(--accent)); fill-opacity: .14; stroke: var(--pc, var(--accent)); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--pc, var(--accent)); }
.radar-label { font: 500 8.5px var(--mono); fill: var(--dust); letter-spacing: .04em; text-transform: uppercase; }
/* Player overview: the tier-profile radar, first of the head cards and two rows tall. */
.radar-card { --pc: var(--tc, var(--accent)); display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit; text-transform: none; letter-spacing: normal; clip-path: none; cursor: pointer; }
button.radar-card:hover:not(:disabled) { border-color: var(--pc); background: var(--stone); }
button.radar-card:active:not(:disabled) { transform: none; }
.radar-card .radar { flex: 1; max-height: 260px; margin: auto; }
.radar-card .radar-label { font-size: 12px; }
.radar-card .rc-go { color: var(--dim); }
.radar-card:hover .rc-go { color: var(--pc); }
@media (min-width: 1400px) {
  .player-cards.has-radar { grid-template-columns: minmax(300px, 1.6fr) repeat(var(--cols), minmax(0, 1fr)); }
  .player-cards .radar-card { grid-row: span 2; }
}
/* Breakdown: the profile radar under the score, in the tier's colour. */
.bd-radar { --pc: var(--tc, var(--accent)); max-width: 380px; margin: 0 auto 6px; }
/* Compare tab: one colour per player, shared by its column, bars and radar outline. */
.cmp-c1 { --pc: #3987e5; } .cmp-c2 { --pc: #d95926; } .cmp-c3 { --pc: #199e70; } .cmp-c4 { --pc: #c98500; }
html.cb .cmp-c1 { --pc: #56b4e9; } html.cb .cmp-c2 { --pc: #e69f00; } html.cb .cmp-c3 { --pc: #1fb98a; } html.cb .cmp-c4 { --pc: #f0e442; }
#cmp-box { max-width: 1120px; margin: 0 auto; }
#cmp-box h2 { margin-top: 28px; }
.cmp-pick { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 8px; padding: 16px; background: var(--stone); border: 1px solid var(--seam); }
.cmp-pick label { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.cmp-pick input { flex: 0 1 360px; min-width: 0; padding: 9px 12px; font: 14px var(--body); color: var(--bone); background: var(--stone-2); border: 1px solid var(--seam-2); }
.cmp-pick input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmp-hint { flex-basis: 100%; text-align: center; font-size: 13px; color: var(--dim); }
.cmp-fig { display: grid; grid-template-columns: minmax(280px, 520px) minmax(220px, 300px); justify-content: center; align-items: center; gap: 20px 48px; margin: 0; padding: 22px 26px; background: var(--stone); border: 1px solid var(--seam); }
.cmp-fig figcaption { display: grid; gap: 10px; }
.cmp-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cmp-key { display: grid; row-gap: 4px; padding: 10px 14px; background: var(--stone-2); border: 1px solid var(--seam); border-left: 3px solid var(--pc); }
.cmp-key b { font: 700 18px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--pc); }
.cmp-key > span { display: flex; align-items: center; gap: 8px; font: 600 13px var(--mono); color: var(--bone); }
.cmp-key small { font: 500 12px var(--mono); color: var(--dust); }
.cmp-cap { font-size: 12px; color: var(--dim); }
.cmp-wrap { overflow-x: auto; }
.cmp-table { border-collapse: collapse; font-size: 13px; width: 100%; background: var(--stone); border: 1px solid var(--seam); }
.cmp-table th, .cmp-table td { padding: 7px 14px; text-align: right; border-bottom: 1px solid var(--seam); white-space: nowrap; }
.cmp-table tbody th.l { text-align: left; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); position: sticky; left: 0; z-index: 1; background: var(--stone-2); min-width: 150px; }
.cmp-table thead th.l { position: sticky; left: 0; z-index: 1; background: var(--stone-2); }
.cmp-table tbody tr:not(.cmp-sec):hover > * { background: var(--hover); }
.cmp-table thead th { vertical-align: bottom; border-bottom: 1px solid var(--seam-2); padding-top: 12px; }
.cmp-p { min-width: 150px; border-top: 3px solid var(--pc); }
.cmp-name { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font: 700 20px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.cmp-name a { color: var(--pc); }
.cmp-name b { color: var(--pc); font-weight: inherit; }
.cmp-team { max-width: 170px; margin: 2px 0 0 auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; font-weight: 400; color: var(--dust); white-space: normal; }
.cmp-badge { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; font: 500 12px var(--mono); color: var(--bone); }
.cmp-badge span + span::before { content: "· "; color: var(--dim); }
.cmp-heroes { display: flex; justify-content: flex-end; gap: 3px; margin-top: 8px; }
.cmp-hero { width: 32px; height: 18px; object-fit: cover; }
.cmp-lead { margin-top: 8px; font: 500 12px var(--mono); color: var(--dust); }
.cmp-lead b { font-size: 15px; color: var(--pc); }
.cmp-x { padding: 0 6px; font: 16px/1.2 var(--body); color: var(--dust); background: none; border: 1px solid var(--seam-2); cursor: pointer; }
.cmp-x:hover { color: var(--bone); border-color: var(--dust); }
/* Remove a player from their card under the radar; Clear all beside the picker. */
.cmp-key { position: relative; }
.cmp-key-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; clip-path: none; }
.cmp-key:has(.cmp-key-x) b { padding-right: 34px; }
.cmp-clear {
  padding: 9px 12px; cursor: pointer; clip-path: none; background: none; border: 1px solid var(--seam-2);
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dust);
}
.cmp-clear:hover { color: var(--bone); border-color: var(--dust); background: none; }
.cmp-table .cmp-sec th { padding: 18px 14px 6px; text-align: left; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: var(--stone-2); border-bottom: 1px solid var(--seam-2); position: sticky; left: 0; }
.cmp-table td { position: relative; padding-bottom: 11px; font: 500 13px var(--mono); color: var(--bone); }
.cmp-table td.cmp-none { color: var(--dim); }
.cmp-v { position: relative; }
.cmp-bar { position: absolute; right: 14px; bottom: 5px; height: 3px; width: calc((100% - 28px) * var(--w, 0)); background: var(--pc); opacity: .35; }
.cmp-table td.cmp-best { color: var(--jade); font-weight: 700; }
.cmp-table td.cmp-best .cmp-bar { opacity: 1; }
.cmp-table td.cmp-best .cmp-v::before { content: "▲ "; font-size: 8px; vertical-align: 2px; }
.cmp-table td small { color: var(--dust); }
.cmp-tier { display: inline-block; min-width: 1.4em; text-align: center; font: 700 13px var(--display); color: var(--tc, var(--bone)); }
/* Compare tab, from the games: charts, ward map and deaths map in each player's colour. */
.cmp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-chart { min-width: 0; padding: 14px 16px 6px; background: var(--stone); border: 1px solid var(--seam); }
.cmp-chart.wide { grid-column: 1 / -1; }
.cmp-chart h3 { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dust); }
.cmp-chart figure.chart { margin: 0; }
.wm-dots[class*="cmp-c"] { --ring: var(--pc); }
.wm-dots[class*="cmp-c"] .ward circle { stroke-width: .9; }
.wm-stat[class*="cmp-c"] { border-left-color: var(--pc); }
.wm-stat[class*="cmp-c"] .wm-who { color: var(--pc); font-weight: 700; }
.cmp-dot { fill: var(--pc); fill-opacity: .85; stroke: rgba(8, 8, 6, .8); stroke-width: .35; }
.cmp-dot:hover { fill-opacity: 1; stroke: var(--bone); stroke-width: .6; }
.cmp-split { display: flex; height: 8px; margin: 8px 0 4px; min-width: 4px; background: var(--seam); }
.cmp-split i { display: block; }
.cmp-split .k-lane, .cmp-split-l .k-lane::before { background: var(--pc); opacity: .45; }
.cmp-split .k-pickoff, .cmp-split-l .k-pickoff::before { background: var(--pc); opacity: .75; }
.cmp-split .k-fight, .cmp-split-l .k-fight::before { background: var(--pc); }
.cmp-split-l { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.cmp-split-l span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: 0; }
@media (max-width: 760px) { .cmp-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .cmp-table th, .cmp-table td { padding: 5px 8px 9px; }
  .cmp-bar { right: 8px; width: calc((100% - 16px) * var(--w, 0)); }
  .cmp-table tbody th.l { min-width: 0; max-width: 96px; white-space: normal; font-size: 11px; }
  .cmp-p { min-width: 100px; }
  .cmp-name { font-size: 16px; }
  .cmp-hero { width: 22px; height: 13px; }
  .cmp-fig { grid-template-columns: minmax(0, 1fr); padding: 12px; }
}

/* ---------- phones: fit the screen ---------- */
@media (max-width: 760px) {
  /* Compact drafts (Content page, a team's Series tab): bans and picks share the width
     instead of fixed tiles that ran off the screen. */
  :is(.game-panel, .sd-game) .draft-rows { grid-template-columns: minmax(0, 1fr); }
  :is(.game-panel, .sd-game) .draft { display: grid; gap: 4px; }
  :is(.game-panel, .sd-game) .draft-bans .draft-step,
  :is(.game-panel, .sd-game) .draft-picks .draft-step { flex: 1 1 0; min-width: 0; }
  :is(.game-panel, .sd-game) .draft-bans, :is(.game-panel, .sd-game) .draft-picks { gap: 3px; }
  :is(.game-panel, .sd-game) .draft-gap { flex: 0 0 6px; }
  :is(.game-panel, .sd-game) .draft-tag { font-size: 10px; }
  .hist-drafts { padding: 0 8px 2px; }
  .banner > .plate { min-width: 0; }
  /* Drafter: a long team name in the My-team list sized the whole grid past the screen. */
  .hg { grid-template-columns: minmax(0, 1fr); }
  .hg-me label { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
  .hg-me select, .hg-tpl select { flex: 1 1 auto; max-width: 100%; min-width: 0; }
  /* Entry animations (the match banner slides in from the side) never widen the page. */
  main { overflow-x: clip; }
  .plate .team { overflow-wrap: anywhere; }
  /* Thumb-sized targets for the small text buttons. */
  .segs .seg, .sp-next, .tm-chip { min-height: 38px; }
}

/* ---------- page not found (app.js renderNotFound) ---------- */
.nf-text { color: var(--dust); max-width: 60ch; margin: 0 0 18px; }
.nf-text code { color: var(--bone); font: 13px var(--mono); overflow-wrap: anywhere; }
.nf-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- touch screens: tap targets ---------- */
/* Checkboxes and radios grow to 20px, segmented buttons to 36px tall, and the footer's inline
   links get padding, so a fingertip lands where it aims. (Info dots already carry a 31px hit
   area: button.info::before.) */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .seg, .col-pager button, .week-btn, .tour-btn, .hchip-more { min-height: 36px; }
  .foot-data a { display: inline-block; padding: 6px 0; }
  .gm-cast-add summary { padding: 10px 4px; }
}

/* ---------- privacy (pages/privacy.js) ---------- */
.privacy { max-width: 70ch; color: var(--dust); font-size: 15px; line-height: 1.6; }
.privacy h2 { margin: 28px 0 8px; font: 800 22px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--bone); }
.privacy b { color: var(--bone); font-weight: 600; }
.privacy ul { padding-left: 20px; }
.privacy li { margin: 6px 0; }

/* ---------- visit counts, Fav only (pages/stats.js) ---------- */
.stats-page { color: var(--dust); }
.stats-page h2 { margin: 28px 0 10px; font: 800 22px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--bone); }
.stats-page h2 small { font: 400 12px/1 var(--mono); text-transform: none; letter-spacing: 0; color: var(--dim); margin-left: 8px; }
.stats-page .muted { color: var(--dim); font-size: 13px; }
.stats-stale { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--warn); color: var(--bone); font-size: 13px; }
.stats-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.stats-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.stats-filter { flex: 1 1 220px; max-width: 360px; padding: 8px 10px; background: var(--stone); color: var(--bone); border: 1px solid var(--seam); font: inherit; }
.stats-totals { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.stats-totals > div { flex: 1 1 160px; padding: 12px 14px; background: var(--stone); border: 1px solid var(--seam); }
.stats-totals b { display: block; font: 900 26px/1.1 var(--display); color: var(--bone); }
.stats-totals span { font: 400 12px/1 var(--mono); color: var(--dim); }
.stats-bars { display: block; width: 100%; height: 120px; background: var(--stone); }
.stats-bars rect { fill: var(--accent); }
.stats-bars rect:hover { fill: var(--bone); }
.stats-bars .day-line { stroke: var(--seam); stroke-width: .3; vector-effect: non-scaling-stroke; }
.spark .stats-bars { height: 28px; min-width: 140px; background: none; }
.stats-grid-wrap { overflow-x: auto; margin-top: 10px; }
.stats-grid { border-collapse: collapse; font: 400 11px/1 var(--mono); color: var(--bone); }
.stats-grid th, .stats-grid td { padding: 5px 4px; text-align: center; min-width: 26px; border: 1px solid var(--seam); }
.stats-grid th { color: var(--dim); font-weight: 400; white-space: nowrap; }
.stats-grid td { background: rgba(var(--accent-rgb), var(--a, 0)); }
.stats-grid .sum, .stats-grid tr.sum td { color: var(--accent); font-weight: 700; background: none; }
.stats-paths { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats-paths th { text-align: left; font: 400 11px/1 var(--mono); color: var(--dim); padding: 8px 6px; border-bottom: 1px solid var(--seam); }
.stats-paths td { padding: 7px 6px; border-bottom: 1px solid var(--seam); vertical-align: middle; text-align: left; }
.stats-paths .n { text-align: right; font-family: var(--mono); color: var(--bone); white-space: nowrap; }
.stats-paths code { color: var(--bone); word-break: break-all; }
.stats-path { cursor: pointer; }
.stats-path:hover, .stats-path.open { background: var(--hover); }
.stats-detail > td { background: var(--hover); }
@media (max-width: 640px) { .stats-paths thead th:last-child, .stats-paths .spark { display: none; } }

/* Game tags (lib/gametags.js): outlined chips after a game's meta line or in a Tags column. */
.gtags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 1px; }
td .gtags, .hist-games .gtags { margin-left: 4px; }
.gtag { --c: var(--dust); font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 5px; color: var(--c); border: 1px solid var(--c); white-space: nowrap; cursor: help; }
.gtag-stomp, .gtag-comeback { --c: var(--jade); }
.gtag-throw { --c: var(--ember); }
.gtag-rampage, .gtag-ultra { --c: var(--gold); }

/* ---------- Fantasy (pages/fantasy.js) ---------- */
.ft-sign { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; font-size: 14px; color: var(--dust); }
.ft-sign b { color: var(--bone); }
.ft-note { font-size: 13px; color: var(--dust); }
.ft-week, .ft-last, .ft-board-wrap { margin: 0 0 32px; }
.ft-lock, .ft-total { font: 400 12px var(--mono); letter-spacing: .08em; color: var(--dust); margin-left: 10px; text-transform: none; }
.ft-total { font-size: 18px; color: var(--accent); }
/* The display case: your lineup, each pick standing on a lit pedestal with its position engraved
   on the front. Always dark (it holds the cards). Clicking a pick turns it over; the pedestal is
   the tab that shows that position's deck. */
.ft-case {
  position: relative; margin: 0 0 22px; padding: 16px 18px 0; overflow: hidden; scroll-margin-top: 130px;
  border: 1px solid rgba(232, 182, 76, .32); border-radius: 6px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(232, 182, 76, .13), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 6px),
    linear-gradient(#1a1610, #0c0b09 62%, #070606);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 22px 50px rgba(0, 0, 0, .45);
}
.ft-case::after { /* the glass's glare */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .05), transparent 22%, transparent 70%, rgba(255, 255, 255, .03));
}
.ft-case-title { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; color: #e8b64c; }
.ft-case-title::before, .ft-case-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 182, 76, .6)); }
.ft-case-title::after { transform: scaleX(-1); }
.ft-case-title span { font: 400 22px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 0 18px rgba(232, 182, 76, .45); }
.ft-lineup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: end; }
.ft-slot { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 22px; cursor: pointer; }
.ft-slot::before { /* the spotlight from above */
  content: ""; position: absolute; z-index: 0; top: 0; left: -6%; right: -6%; bottom: 30px; pointer-events: none;
  background: radial-gradient(55% 75% at 50% 0, rgba(255, 232, 180, .2), rgba(255, 232, 180, .05) 60%, transparent 80%);
  opacity: .5; transition: opacity .3s;
}
.ft-slot.active::before, .ft-slot:hover::before { opacity: 1; }
.ft-stage { position: relative; z-index: 2; width: min(100%, 260px); margin-bottom: -10px; }
.ft-stage::after { /* the card's shadow on the pedestal top */
  content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -6px; height: 20px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent); filter: blur(2px);
}
.ft-stage .ft-card { width: 100%; }
.ft-stage .ft-card .ft-tilt { --lift: -4px; }
.ft-stage .ft-card:hover .ft-tilt { --lift: -10px; }
.ft-empty {
  display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 5 / 7; border-radius: 14px;
  border: 1px dashed rgba(232, 182, 76, .35); background: rgba(232, 182, 76, .03);
  font: 700 11px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 237, 227, .4);
}
.ft-empty b { font: 400 54px/1 var(--display); letter-spacing: 0; color: rgba(232, 182, 76, .22); }
.ft-slot.active .ft-empty { border-color: rgba(232, 182, 76, .7); color: rgba(243, 237, 227, .7); }
.ft-plinth {
  all: unset; box-sizing: border-box; position: relative; z-index: 1; width: min(100%, 300px); padding: 26px 8px 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 18%, transparent 82%, rgba(0, 0, 0, .45)),
    linear-gradient(#4b3e29, #2c2419 12px, #15110d 13px, #1c1711 40%, #0e0c09);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(232, 182, 76, .55), inset 0 -3px 0 rgba(0, 0, 0, .5);
  transition: box-shadow .2s;
}
.ft-plinth::before { /* the lit top of the pedestal */
  content: ""; position: absolute; left: 5%; right: 5%; top: 0; height: 18px;
  background: radial-gradient(60% 100% at 50% 0, rgba(232, 182, 76, .4), transparent); opacity: .5; transition: opacity .2s;
}
.ft-slot.active .ft-plinth { box-shadow: inset 0 2px 0 #f5c862, inset 0 -3px 0 #e8b64c; }
.ft-slot.active .ft-plinth::before, .ft-slot:hover .ft-plinth::before { opacity: 1; }
.ft-plinth:focus-visible { outline: 2px solid #f3ede3; outline-offset: -4px; }
.ft-slot-pos { font: 700 10px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: #e8b64c; }
.ft-slot-role {
  font: 400 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: #d9cfbf; text-shadow: 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .08);
}
.ft-slot.active .ft-slot-role { color: #f3ede3; text-shadow: 0 0 12px rgba(232, 182, 76, .5); }
/* Player cards */
.ft-deck { margin: 0 0 20px; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 20px; padding-top: 10px; }
.ft-rest { margin-top: 16px; }
.ft-rest > summary { cursor: pointer; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); margin-bottom: 12px; }
.ft-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Player cards: trading cards (5:7) in a metal frame of their tier's colour. The front is the
   hero art with a nameplate; the turn button flips to the back, the player's league numbers.
   Layers: .ft-card (perspective, sizing) > .ft-tilt (lift and mouse tilt) > .ft-flip (the turn)
   > .ft-front / .ft-back. Sizes scale with the card's width (container units). */
.ft-card {
  --tc: #8a8074; --tc-rgb: 138, 128, 116; --frame: 6px; --r: 14px; --turn: clamp(28px, 12cqi, 34px);
  position: relative; aspect-ratio: 5 / 7; max-width: 100%; perspective: 1100px; container-type: inline-size; color: #f3ede3; text-align: left;
}
.ft-card.t-S { --tc: var(--gold); --tc-rgb: 232, 182, 76; }
.ft-card.t-A { --tc: var(--jade); --tc-rgb: var(--jade-rgb); }
.ft-card.t-B { --tc: #b9c6c0; --tc-rgb: 185, 198, 192; }
.ft-card.t-D { --tc: var(--ember); --tc-rgb: var(--ember-rgb); }
.ft-card.picked { --tc: var(--accent); --tc-rgb: var(--accent-rgb); }
.ft-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.ft-card:hover .ft-tilt { --lift: -6px; transition-duration: .15s; }
.ft-card.picked .ft-tilt { --lift: -8px; }
.ft-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.35, 1.35, .45, 1); }
.ft-card.flipped .ft-flip { transform: rotateY(180deg); }

/* Both faces: a frame (the border, a brushed-metal sheen over the tier colour) around an inner panel. */
.ft-card .ft-face {
  all: unset; box-sizing: border-box; position: absolute; inset: 0; display: block; overflow: hidden; cursor: pointer;
  border: var(--frame) solid transparent; border-radius: var(--r);
  background:
    linear-gradient(#0d0c0b, #0d0c0b) padding-box,
    linear-gradient(155deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 28%, rgba(0, 0, 0, .32) 62%, rgba(255, 255, 255, .28)) border-box,
    linear-gradient(var(--tc), var(--tc)) border-box;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .45);
  transition: box-shadow .3s;
}
.ft-card:hover .ft-face { box-shadow: 0 22px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(var(--tc-rgb), .22); }
.ft-card.picked .ft-face { box-shadow: 0 0 0 2px var(--accent), 0 0 38px rgba(var(--accent-rgb), .45), 0 22px 40px rgba(0, 0, 0, .55); }
.ft-card .ft-face:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.ft-card .ft-front:disabled { cursor: default; }
.ft-card .ft-back { transform: rotateY(180deg); } /* after .ft-face's all: unset */
/* The turned-away face is hidden outright at the turn's midpoint, about .1s into the .7s curve.
   No backface-visibility: some browsers drop it once a face holds blended or filtered layers
   (showing the turned-away face mirrored), and Chrome on Android culls whole faces at random
   while scrolling zoomed cards (fitDesignCards) when it's set. */
.ft-card .ft-face { transition: box-shadow .3s, visibility 0s .1s; }
.ft-card.flipped .ft-front, .ft-card:not(.flipped) .ft-back { visibility: hidden; }
/* Cosmetics repaint every frame: they hold still while the page scrolls and while the card is off
   screen (lib/card-motion.js), so a phone only has to scroll what's already drawn. */
/* The feed's posts hold cosmetics outside cards too, so everything holds still while scrolling. */
.cards-still *, .cards-still *::before, .cards-still *::after,
[data-effects-offscreen], [data-effects-offscreen] *, [data-effects-offscreen] *::before, [data-effects-offscreen] *::after { animation-play-state: paused !important; }
/* Blurring what's behind a button re-renders it on every scrolled frame; on phones the buttons go
   a touch more solid instead. */
@media (hover: none) {
  html .ft-card .ft-pos, html .ft-card .ft-turn, html .ft-card .ft-expand { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(12, 11, 10, .84); }
  html .ft-card .ft-pos.here { background-color: var(--tc); }
  html .collection-dialog .feed-react-main { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* The inner keyline of the art window. */
.ft-front::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: calc(var(--r) - var(--frame));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 0 22px rgba(0, 0, 0, .55);
}

/* Front. The hero fills the window (style filters below); a dark wash from the bottom keeps the type readable. */
.ft-front > .ft-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0d0c0b; }
.ft-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; transform: scale(1.02); transition: transform .5s;
  filter: url(#ft-paint) contrast(1.2) saturate(1.35);
  -webkit-mask: url("img/grit.png") var(--grit, 0 0) / 256px 256px; mask: url("img/grit.png") var(--grit, 0 0) / 256px 256px; /* scripts/gen/gen-grit.js */
}
.ft-card:hover .ft-art img { transform: scale(1.06); }
/* Each hero's art and style (lib/hero-art.js, Fav's picks; filters in pages/fantasy.js). Loading
   screens are wide, so they crop a little lower; cut-outs sit on a tier-coloured glow. Every style
   but stencil drops the grit mask. */
.ft-card.src-ls .ft-art img { object-position: center 30%; }
.ft-card.src-cut .ft-art { background: radial-gradient(80% 60% at 50% 32%, rgba(var(--tc-rgb), .55), rgba(var(--tc-rgb), .12) 55%, #0b0a09 80%); }
.ft-card.src-crop .ft-art img { object-position: center top; height: 70%; transform: scale(1.25); transform-origin: 50% 0; }
.ft-card.src-render .ft-art img { object-position: center 20%; transform: scale(1.35); transform-origin: 50% 20%; }
.ft-card[data-style]:not([data-style="stencil"]) .ft-art img { -webkit-mask: none; mask: none; }
.ft-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ft-card[data-style="plain"] .ft-art img { filter: none; }
.ft-card[data-style="clean"] .ft-art img { filter: contrast(1.08) saturate(1.12); }
.ft-card[data-style="cinema"] .ft-art img { filter: contrast(1.18) saturate(.85) sepia(.18) brightness(.95); }
.ft-card[data-style="cinema"] .ft-art::before { background: radial-gradient(120% 80% at 50% 35%, transparent 45%, rgba(0, 0, 0, .7) 100%); }
.ft-card[data-style="ember"] .ft-art img { filter: url(#ft-ember) contrast(1.1); }
.ft-card[data-style="frost"] .ft-art img { filter: url(#ft-frost) contrast(1.1); }
.ft-card[data-style="ink"] .ft-art img { filter: url(#ft-ink) saturate(1.3); }
.ft-card[data-style="noir"] .ft-art img { filter: grayscale(1) url(#ft-paint) contrast(1.5) brightness(.95); }
.ft-card[data-style="noir"] .ft-art::before { background: linear-gradient(90deg, rgba(var(--tc-rgb), .35), transparent 70%); mix-blend-mode: color; }
.ft-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 20%, transparent 46%, rgba(10, 9, 8, .78) 70%, rgba(10, 9, 8, .96) 100%);
}
/* Tier: a shield in the top corner. */
.ft-card .ft-tier {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: clamp(36px, 17cqi, 50px); aspect-ratio: 46 / 54; padding-bottom: 6%;
  font: 400 clamp(22px, 11cqi, 32px)/.9 var(--display); color: #14110d;
  background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18)), var(--tc);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}
.ft-card .ft-tier small { font: 700 clamp(8px, 3.6cqi, 11px) var(--mono); letter-spacing: .02em; }
.ft-front > .ft-tier { position: absolute; z-index: 4; top: 0; left: 10%; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.ft-pos {
  position: absolute; z-index: 4; top: 9px; right: calc(var(--turn) + 15px); padding: 4px 8px; border-radius: 99px;
  font: 700 clamp(8px, 3.8cqi, 11px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #f3ede3; background: rgba(12, 11, 10, .62); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(4px);
}
.ft-pos.here { color: #14110d; background: var(--tc); border-color: transparent; }
.ft-plate { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 3px; padding: 0 7% 8% 7%; }
.ft-name { font: 400 clamp(22px, 13cqi, 36px)/.92 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.ft-tm { font-size: clamp(10px, 4.6cqi, 13px); color: rgba(243, 237, 227, .75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-sig { margin-top: 2px; font: 600 clamp(8px, 3.6cqi, 10px) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--tc-rgb), .95); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Foil: a soft light that follows the mouse (--mx/--my from pages/fantasy.js) and a sheen band. */
.ft-shine {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: calc(var(--r) - var(--frame)); opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(255, 255, 255, .32), transparent 38%),
    linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .16) 47%, transparent 56%) calc(var(--mx, 50%) * 1.4 - 20%) 0 / 200% 100% no-repeat;
}
.ft-card:hover .ft-shine { opacity: 1; }
/* Picked for another slot: the art dims (the pick button names the slot). */
.ft-card[data-taken]:not([data-taken=""]) .ft-art, .ft-card[data-taken]:not([data-taken=""]) .ft-back > :not(.ft-pickbtn) { opacity: .45; }
.ft-card .ft-front { cursor: pointer; }

/* Flip button: top right of the card, on either face. */
.ft-card .ft-turn {
  all: unset; box-sizing: border-box; position: absolute; z-index: 8; top: 13px; right: 13px; transform: translateZ(1px);
  display: grid; place-items: center; width: var(--turn); aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  color: #f3ede3; background: rgba(12, 11, 10, .66); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(4px);
  transition: background .2s, color .2s, rotate .4s cubic-bezier(.3, 1.4, .5, 1);
}
.ft-card .ft-turn svg { width: 52%; fill: currentColor; }
.ft-card .ft-turn:hover { background: var(--tc); color: #14110d; rotate: 180deg; }
.ft-card .ft-turn:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
/* Full-size button, under the flip button (opens .ft-big, player-card.js). */
.ft-card .ft-expand {
  all: unset; box-sizing: border-box; position: absolute; z-index: 8; top: calc(19px + var(--turn)); right: 13px; transform: translateZ(1px);
  display: grid; place-items: center; width: var(--turn); aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  color: #f3ede3; background: rgba(12, 11, 10, .66); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(4px);
  transition: background .2s, color .2s;
}
.ft-card .ft-expand svg { width: 50%; fill: currentColor; }
.ft-card .ft-expand:hover { background: var(--tc); color: #14110d; }
.ft-card .ft-expand:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.tier-card-main .ft-card .ft-expand, .ft-big .ft-card .ft-expand { display: none; }
.ft-big {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none;
  display: grid; place-items: center; overflow: hidden;
}
.ft-big:not([open]) { display: none; }
.ft-big::backdrop { background: rgba(8, 7, 10, .88); backdrop-filter: blur(6px); }
.ft-big .ft-card { width: min(92vw, calc(88dvh * 5 / 7)); }
.ft-big-close {
  all: unset; position: fixed; top: 14px; right: 16px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; font-size: 26px; color: #f3ede3; background: rgba(12, 11, 10, .7); border: 1px solid rgba(255, 255, 255, .28);
}
.ft-big-close:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
/* A player's feedback tickets on their profile (parts/profile-tickets.js). */
.profile-tickets h3 { margin: 0 0 10px; }
.profile-tickets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.profile-tickets li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--seam); }
.profile-tickets li:first-child { border-top: 0; }
.profile-tickets .pt-status { grid-row: span 2; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; color: var(--dust); border: 1px solid var(--seam-2); }
.profile-tickets li.implemented .pt-status { color: var(--on-accent); background: var(--jade); border-color: transparent; }
.profile-tickets .pt-note { color: var(--bone); }
.profile-tickets small { color: var(--dim); font: 500 11px var(--mono); }
/* Layouts (lib/card-layout.js): a part's size, parts placed anywhere on the face, hidden parts and stats. */
.ft-card [data-part] { zoom: var(--part-size, 1); }
.ft-card [data-part]:not(.ft-placed) { rotate: var(--part-rot, 0deg); }
.ft-card [data-part]:not(.ft-placed)[style*="--part-z"] { position: relative; z-index: var(--part-z); }
.card-editor .ft-front [data-part] { cursor: pointer; }
.part-panel { display: grid; gap: .6rem; padding: .8rem; border: 1px solid #e8b84a; border-radius: 8px; }
.part-panel[hidden] { display: none; }
.part-panel label { display: grid; gap: .2rem; }
.part-panel .pp-remove { color: #ff6b6b; }
.ft-card .ft-bname .ft-name { zoom: var(--name-size, 1); }
.ft-card .ft-front > .ft-placed { position: absolute; z-index: calc(6 + var(--part-z, 0)); zoom: 1; transform: translate(-50%, -50%) rotate(var(--part-rot, 0deg)) scale(var(--part-size, 1)); max-width: calc(96% / var(--part-size, 1)); margin: 0; white-space: nowrap; }
.ft-card [data-part][hidden], .ft-stats > span[hidden] { display: none; }
.ft-no-posbars .ft-posbars, .ft-no-posbars .ft-label:has(+ .ft-posbars),
.ft-no-heroes .ft-heroes, .ft-no-heroes .ft-label:has(+ .ft-heroes) { display: none; }

/* Back: the player's numbers on a dark panel tinted by the tier. */
.ft-card .ft-back {
  display: flex; flex-direction: column; gap: 2.6cqi; padding: 5cqi 5.5cqi 4.5cqi; cursor: default;
  background:
    radial-gradient(130% 70% at 0 0, rgba(var(--tc-rgb), .28), transparent 60%) padding-box,
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px) padding-box,
    linear-gradient(#15130f, #0f0e0c) padding-box,
    linear-gradient(155deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 28%, rgba(0, 0, 0, .32) 62%, rgba(255, 255, 255, .28)) border-box,
    linear-gradient(var(--tc), var(--tc)) border-box;
}
.ft-card .ft-back > * { flex-shrink: 0; }
.ft-bhead { display: flex; align-items: center; gap: 3.5cqi; min-width: 0; padding-right: calc(var(--turn) + 4px); }
.ft-bhead .ft-tier { width: clamp(30px, 13cqi, 40px); font-size: clamp(18px, 9cqi, 26px); }
.ft-bhead .ft-tier { flex: none; }
.ft-bname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ft-bname .ft-name { font-size: clamp(18px, 10cqi, 28px); text-shadow: none; }
.ft-medal { font: 600 clamp(8px, 3.6cqi, 10px) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--tc-rgb), 1); }
.ft-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6cqi 2cqi; padding: 3cqi 0; border-block: 1px solid rgba(255, 255, 255, .12); }
.ft-stats > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 600 clamp(7px, 3.2cqi, 9px) var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: rgba(243, 237, 227, .55); }
.ft-stats > span.wide { grid-column: span 2; }
.ft-stats b { font: 600 clamp(11px, 5.2cqi, 15px) var(--mono); letter-spacing: 0; color: #f3ede3; white-space: nowrap; }
.ft-label { font: 700 clamp(7px, 3.2cqi, 9px) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--tc-rgb), 1); margin-bottom: -1.5cqi; }
.ft-posbars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqi; height: 12cqi; }
.ft-posbars > span { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 0; }
.ft-posbars i { display: block; min-height: 2px; border-radius: 2px 2px 0 0; background: rgba(var(--tc-rgb), .55); }
.ft-posbars .here i { background: var(--accent); }
.ft-posbars b { font: 700 clamp(7px, 3cqi, 9px)/1 var(--mono); text-align: center; color: rgba(243, 237, 227, .6); }
.ft-heroes { display: flex; flex-direction: column; gap: 1.6cqi; }
.ft-hrow { display: grid; grid-template-columns: 15cqi minmax(0, 1fr) auto; align-items: center; gap: 3cqi; font-size: clamp(10px, 4.4cqi, 13px); }
.ft-h { position: relative; display: block; }
.ft-h img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .18); }
.ft-h b { display: none; }
.ft-hname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-hrec { font: 600 clamp(8px, 3.6cqi, 10px) var(--mono); color: rgba(243, 237, 227, .6); white-space: nowrap; }
/* Pick buttons: one under the nameplate, one at the foot of the back. Picked: an outline. */
.ft-card .ft-pickbtn {
  padding: 3cqi; border-radius: 7px; clip-path: none; text-align: center; cursor: pointer;
  font: 700 clamp(9px, 4cqi, 11px) var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); border: 0; color: var(--on-accent);
}
.ft-card .ft-bpick { margin-top: auto; }
.ft-card .ft-fpick { margin-top: 3cqi; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.ft-card .ft-pickbtn:hover { background: #f5c862; }
.ft-card .ft-pickbtn:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.ft-card.picked .ft-pickbtn { background: rgba(12, 11, 10, .7); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ft-card[data-taken]:not([data-taken=""]) .ft-pickbtn { background: rgba(12, 11, 10, .7); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* A small card's back (under 200px: the display case's minis, a profile card on a phone). Four
   stat columns can't fit at that width, so two, with no position bars and only the top hero. */
@container (width < 200px) {
  .ft-card .ft-back { gap: 3cqi; padding: 5cqi; }
  .ft-card .ft-bhead .ft-tier { display: none; }
  .ft-card .ft-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2cqi 4cqi; padding: 3cqi 0; }
  .ft-card .ft-stats > span { font-size: clamp(7px, 4.4cqi, 9px); }
  .ft-card .ft-stats b { font-size: clamp(10px, 6.4cqi, 14px); }
  .ft-card .ft-posbars, .ft-card .ft-label { display: none; }
  .ft-card .ft-back .ft-heroes .ft-hrow:nth-child(n + 2) { display: none; }
  .ft-card .ft-hrow { grid-template-columns: 22cqi minmax(0, 1fr); }
  .ft-card .ft-hrec { display: none; }
}

/* The pick-up: the card lifts off the table, tips toward you, and settles raised. */
@keyframes ft-pickup {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-28px) scale(1.07) rotateX(10deg) rotateZ(-2deg); }
  62% { transform: translateY(-12px) scale(1.03) rotateZ(1deg); }
  100% { transform: translateY(-8px) scale(1); }
}
.ft-card.pickup { z-index: 5; }
.ft-card.pickup .ft-tilt { animation: ft-pickup .6s cubic-bezier(.2, .8, .2, 1); }
.ft-slot.pop .ft-stage { animation: ft-land .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes ft-land { 0% { transform: translateY(-26px) scale(1.06); opacity: .4; } 60% { transform: translateY(3px) scale(.99); opacity: 1; } 100% { transform: none; } }

@media (max-width: 760px) {
  .ft-case { padding: 12px 10px 0; }
  .ft-lineup { grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; }
  .ft-slot-role { font-size: 16px; }
  .ft-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ft-tilt, .ft-flip, .ft-art img, .ft-shine, .ft-card .ft-turn { transition: none; }
  .ft-card:hover .ft-tilt { --lift: 0px; }
  .ft-card.pickup .ft-tilt, .ft-slot.pop .ft-stage { animation: none; }
}
/* Your card: your own card beside the hero and role choices (pages/fantasy.js). A role the
   player set has a dot on its pill. */
.ft-mine { margin: 0 0 32px; }
.ft-mine-row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 420px); gap: 20px 28px; align-items: start; padding-top: 10px; }
.ft-mine-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ft-mine-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--dust); }
.ft-mine-form select { max-width: 100%; }
.ft-mine-form .ft-note { margin: 0; }
.ft-mine-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ft-card.own .ft-front { cursor: default; }
.ft-pos.set::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: currentColor; vertical-align: middle; }
@media (max-width: 560px) { .ft-mine-row { grid-template-columns: minmax(0, 1fr); } .ft-mine-card { max-width: 260px; } }
.ft-save { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; }
.ft-save label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--dust); }
.ft-msg { font-size: 13px; color: var(--dust); }
.ft-team { font-size: 12px; color: var(--dim); }
.ft-counted { color: var(--bone); }
.ft-dropped { color: var(--dim); text-decoration: line-through; }
.ft-board tr.ft-me td { background: rgba(var(--jade-rgb), .08); }
.ft-board summary { cursor: pointer; }
.ft-wk { font-size: 12px; color: var(--dust); margin: 6px 0 0 14px; }
.ft-wk b { color: var(--bone); font-weight: 600; }
/* Steam sign-in in the top bar (parts/me.js) */
.me { display: flex; align-items: center; }
.me-in { padding: 8px 12px; font-size: 12px; }
.me-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid var(--seam-2); background: var(--stone-2); color: var(--bone); font: 600 13px var(--mono); text-decoration: none; }
.me-av:hover, .me-av:focus-visible { border-color: var(--accent); }
.me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-intro { font-size: 14px; color: var(--dust); margin: 0 0 14px; max-width: 70ch; }

/* Saved Fantasy lineups and score details. */
.ft-view-lineup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.ft-view-pick { min-width: 0; }
.ft-view-pick .ft-card { width: 100%; }
.ft-pick-score { margin-top: 10px; font-size: 13px; color: var(--dust); }
.ft-pick-score b { color: var(--accent); }
.ft-entry, .ft-saved-week { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.ft-entry > summary, .ft-saved-week > summary, .ft-breakdown > summary, .ft-rules > summary { cursor: pointer; }
.ft-breakdown .ft-wk { margin: 18px 0; }
.ft-breakdown .ft-wk > details { margin: 8px 0; }
.ft-rules { max-width: 680px; }
@media (max-width: 800px) { .ft-view-lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ft-view-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ft-entry .ft-total { display: block; margin: 6px 0 0; } }

/* Authentic team logos: small marks on the cards, larger beside team titles. */
.team-logo { display: inline-block; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.team-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.inline-team-logo { width: 18px; height: 18px; padding: 2px; border-radius: 3px; background: #171512; }
.wm-time { display: inline-flex; flex-direction: column; gap: 3px; min-width: 150px; color: var(--dust); font: 600 11px var(--mono); }
.wm-time input { accent-color: var(--accent); width: 150px; }
.team-title { display: flex; align-items: center; gap: 14px; }
.team-page-logo { width: clamp(38px, 5vw, 56px); height: clamp(38px, 5vw, 56px); padding: 4px; border-radius: 8px; background: #171512; }
.tc-logo { width: 28px; height: 28px; margin-right: 8px; }
.ft-card .ft-tm { display: flex; align-items: center; gap: 2cqi; min-width: 0; }
.ft-card .ft-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-team-logo { width: clamp(14px, 9cqi, 26px); height: clamp(14px, 9cqi, 26px); padding: 2px; border-radius: 4px; background: rgba(12, 11, 10, .8); }
.ft-back .ft-team-logo { width: clamp(12px, 7cqi, 20px); height: clamp(12px, 7cqi, 20px); }

/* Fantasy cards in the tier bands, with ratings from the selected tier model. */
.ft-record { font: 700 clamp(10px, 4.8cqi, 14px)/1.2 var(--mono); color: #f3ede3; letter-spacing: .04em; }
.ft-record small { font-size: .72em; color: rgba(243, 237, 227, .6); }
/* Small portrait trading cards: viewport height sets the tier-row card size. */
#tiers { --tier-card-width: clamp(56px, calc((100dvh - 400px) / 7), 96px); }
.tier-band:has(.fantasy-tier-chip) { grid-template-columns: 44px minmax(0, 1fr); min-height: 0; }
.tier-band:has(.fantasy-tier-chip) .tier-letter { font-size: 32px; }
.tier-band:has(.fantasy-tier-chip) .tier-chips { padding: 4px 10px; gap: 8px; }
.tier-band:has(.fantasy-tier-chip) .tier-chips:not(:has(.chip.open)) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tier-band .fantasy-tier-chip:not(.open) { flex-shrink: 0; }
.tier-band .fantasy-tier-chip { width: var(--tier-card-width); padding: 0; border: 0; background: transparent; cursor: default; }
.tier-band .fantasy-tier-chip:hover { transform: none; }
.tier-card-main { position: relative; width: var(--tier-card-width); max-width: 100%; }
.tier-card-main .ft-card { width: 100%; aspect-ratio: 5 / 7; --frame: 2px; --r: 6px; --turn: 14px; }
.tier-card-main .ft-card:hover .ft-tilt { --lift: 0px; }
.tier-card-main .ft-front > .ft-tier { left: 4px; top: 0; width: 17px; font-size: 11px; padding-bottom: 2px; }
.tier-card-main .ft-tier small { font-size: 7px; }
/* The tier list always shows the tier and score, even when the owner's layout hides it. */
.tier-card-main .ft-front > .ft-tier[hidden] { display: flex; }
/* The Dota Plus badge scales with the small card and hangs under the small tier shield. */
.tier-card-main .ft-plus:not(.ft-placed) { top: 24px; left: 12.5px; }
.tier-card-main .ft-card .ft-plus i.plus { font-size: clamp(14px, 24cqi, 24px); }
/* Each card's player, by name, under the card (owners can rename or hide the card's own name). */
.tier-card-name { margin-top: 4px; font: 700 11px/1.2 var(--body); text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tier-card-name a { color: inherit; }
.tier-card-name a:hover { text-decoration: underline; }
.tier-card-main .ft-pos, .tier-card-main .ft-sig, .tier-card-main .ft-plate::before { display: none; }
.tier-card-main .ft-plate { left: 0; right: 0; bottom: 3px; padding: 0 4px 0; gap: 2px; }
.tier-card-main .ft-name { font: 700 clamp(8px, 10cqi, 11px)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px #000; }
.tier-card-main .ft-name a { color: inherit; }
.tier-card-main .ft-record { font-size: clamp(7px, 9cqi, 9px); }
.tier-card-main .ft-record small { font-size: 6px; }
.tier-card-main .ft-tm { min-height: 12px; padding-right: 14px; font-size: 6px; letter-spacing: 0; gap: 2px; }
.tier-card-main .ft-team-logo { width: 11px; height: 11px; padding: 1px; }
.tier-card-main .ft-card .ft-turn { top: 3px; right: 3px; }
.tier-card-main .ft-card .ft-back { gap: 3px; padding: 4px; }
.tier-card-main .ft-bhead { padding: 14px 0 0; gap: 3px; }
.tier-card-main .ft-back .ft-tier, .tier-card-main .ft-medal, .tier-card-main .ft-label, .tier-card-main .ft-posbars, .tier-card-main .ft-heroes, .tier-card-main .ft-back .ft-tm { display: none; }
.tier-card-main .ft-bname .ft-name { font-size: 8px; }
.tier-card-main .ft-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px 0 0; gap: 3px; border-bottom: 0; }
.tier-card-main .ft-stats > span { font-size: 6px; }
.tier-card-main .ft-stats > span.wide { grid-column: span 2; }
.tier-card-main .ft-stats > span:nth-child(n+4) { display: none; }
.tier-card-main .ft-stats b { font-size: 8px; }
.tier-card-actions { position: absolute; bottom: 5px; right: 4px; z-index: 9; }
.tier-card-actions .chip-caret { display: grid; place-items: center; width: 14px; height: 12px; margin: 0; padding: 0; border: 0; border-radius: 0; clip-path: none; background: transparent; font: 700 11px/1 var(--mono); color: var(--tc); }
.tier-band .fantasy-tier-chip.open { width: 100%; }
@container (width < 80px) { .tier-card-main .ft-team-name { display: none; } }
@media (max-width: 600px) {
  #tiers { --tier-card-width: 70px; }
  .tier-band:has(.fantasy-tier-chip) { grid-template-columns: 28px minmax(0, 1fr); }
  .tier-band:has(.fantasy-tier-chip) .tier-letter { font-size: 24px; }
  .tier-band:has(.fantasy-tier-chip) .tier-chips { padding: 4px; gap: 6px; }
}

/* Compact, per-hero art editor for the Steam owner's card. */
.ft-art-editor > summary { cursor: pointer; font-size: 13px; color: var(--bone); }
.ft-art-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 208px; overflow-y: auto; margin: 12px 0; padding: 3px; }
.ft-art-choice { min-width: 0; padding: 3px; background: var(--stone); border: 1px solid var(--seam); clip-path: none; border-radius: 5px; text-align: left; }
.ft-art-choice > span:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; font: 10px var(--mono); }
.ft-art-thumb { position: relative; display: block; height: 76px; overflow: hidden; border-radius: 3px; background: #0b0a09; }
.ft-art-thumb .ft-art { position: absolute; inset: 0; }
.ft-art-thumb .ft-art::after { display: none; }
.ft-art-thumb.src-crop .ft-art img { object-position: center top; transform: scale(1.25); }
.ft-art-thumb.src-render .ft-art img { object-position: center 20%; transform: scale(1.35); }
.ft-art-thumb[data-style]:not([data-style="stencil"]) .ft-art img { -webkit-mask: none; mask: none; }
.ft-art-thumb[data-style="clean"] .ft-art img { filter: contrast(1.08) saturate(1.12); }
.ft-art-thumb[data-style="cinema"] .ft-art img { filter: contrast(1.18) saturate(.85) sepia(.18) brightness(.95); }
.ft-art-thumb[data-style="ember"] .ft-art img { filter: url(#ft-ember) contrast(1.1); }
.ft-art-thumb[data-style="frost"] .ft-art img { filter: url(#ft-frost) contrast(1.1); }
.ft-art-thumb[data-style="comic"] .ft-art img, .ft-card[data-style="comic"] .ft-art img { filter: url(#ft-paint) contrast(1.3) saturate(1.7); }
.ft-art-thumb[data-style="comic"] .ft-art::before, .ft-card[data-style="comic"] .ft-art::before { background: radial-gradient(circle, rgba(0, 0, 0, .55) .9px, transparent 1.5px) 0 0 / 5px 5px; mix-blend-mode: multiply; }
.ft-art-thumb[data-style="ink"] .ft-art img { filter: url(#ft-ink) saturate(1.3); }
.ft-art-thumb[data-style="noir"] .ft-art img { filter: grayscale(1) url(#ft-paint) contrast(1.5) brightness(.95); }
.ft-style-options { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-style-choice { padding: 5px 8px; clip-path: none; font-size: 11px; border: 1px solid var(--seam); }
.ft-art-choice[aria-pressed="true"], .ft-style-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ft-style-choice[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

@media (min-width: 800px) {
  main:has(#tiers) { padding-top: 24px; }
  main:has(#tiers) .page-head { margin-bottom: 14px; }
  main:has(#tiers) .pp-row { margin-top: 8px; gap: 6px 16px; }
  main:has(#tiers) .pp-row h1 { font-size: 36px; margin-bottom: 8px; }
  main:has(#tiers) .pp-row .pp-sub { font-size: 12px; margin-bottom: 10px; }
  main:has(#tiers) .pp-tabs button { font-size: 11px; padding: 10px; }
  #tiers .tier-bar { gap: 6px 10px; }
  #tiers .tier-pos { margin-bottom: 8px; }
  #tiers .tier-pos .seg { padding: 7px 11px; font-size: 12px; }
  #tiers .tier-vs { margin-bottom: 8px; }
  #tiers .tier-vs-l { font-size: 10px; }
  #tiers .tier-vs .seg { padding: 5px 8px; font-size: 10px; }
  #tiers > .tier-vs-note { margin: 6px 0; font-size: 11px; }
}

@media (min-width: 800px) and (max-height: 800px) {
  main:has(#tiers) { padding-top: 8px; }
  main:has(#tiers) .page-head { margin-bottom: 8px; }
  main:has(#tiers) .pp-row { margin-top: 4px; }
  main:has(#tiers) #tier-list { margin-bottom: 8px; }
  #tiers > .tier-vs-note { margin: 4px 0; font-size: 10px; line-height: 1.2; }
}

/* Saved art framing applies identically to full-size and miniature cards. */
.ft-card.ft-custom-crop .ft-front .ft-art img { height: 100%; object-position: var(--art-x) var(--art-y); transform-origin: var(--art-x) var(--art-y); transform: scale(var(--art-zoom)) rotate(var(--art-rot, 0deg)) scaleX(var(--art-flip, 1)); transition: none; }
/* Once the picture's aspect is known, size it to cover the window without clipping it, so rotating shows more of
   the picture instead of a card-shaped piece with dark corners. Same anchor as object-position above. */
.ft-card.ft-custom-crop .ft-front .ft-art { container-type: size; }
.ft-card.ft-custom-crop[style*="--art-ar"] .ft-front .ft-art img {
  --w: max(100cqw, calc(var(--art-ar) * 100cqh)); --h: max(100cqh, calc(100cqw / var(--art-ar)));
  position: absolute; max-width: none; width: var(--w); height: var(--h); object-fit: fill;
  left: calc((100cqw - var(--w)) * var(--art-xf, .5)); top: calc((100cqh - var(--h)) * var(--art-yf, .5));
}
.ft-mine-card .ft-front { touch-action: none; user-select: none; }
.ft-mine-card .ft-front .ft-art img { -webkit-user-drag: none; }
.ft-mine-card .ft-card.own .ft-front { cursor: grab; }
.ft-mine-card .ft-card.own .ft-front:active { cursor: grabbing; }
.ft-crop-controls { display: grid; gap: 8px; margin-top: 12px; }
.ft-mine-form .ft-crop-controls label { display: grid; grid-template-columns: 112px minmax(0, 1fr) 42px; align-items: center; gap: 8px; font-size: 11px; }
.ft-crop-controls input { width: 100%; min-width: 0; accent-color: var(--accent); }
.ft-crop-controls output { text-align: right; font: 10px var(--mono); }
.ft-crop-controls > button { justify-self: start; font-size: 11px; }
.ft-slot .ft-captain{display:block;width:100%;margin-top:10px;font-size:12px;padding:8px 4px;clip-path:none;letter-spacing:0;text-transform:none}
.ft-slot .ft-captain[aria-pressed=true]{background:var(--accent);color:#17120b;border-color:var(--accent)}
.ft-case:has(.ft-captain){padding-bottom:12px}
.ft-case-title span+span{font:12px/1.4 var(--mono);letter-spacing:.02em;text-transform:none}

/* Dota Plus hero level (lib/hero-levels.js): Valve's badge for the tier (img/hero-badges/,
   the art STRATZ serves) with the level on it, as in game, tucked onto the corner of the hero
   portrait before it. A 1em square: each place sets its size with font-size. Empty until the
   levels load, and when the level isn't known. */
i.plus { display: inline-block; position: relative; z-index: 1; flex: none; width: 1em; height: 1em; font-size: 24px; margin: 0 1px 0 -13px; vertical-align: bottom; font-style: normal; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
i.plus:empty { display: none; }
i.plus img { display: block; width: 100%; height: 100%; }
i.plus b { position: absolute; left: 0; right: 0; bottom: -.04em; text-align: center; font: 800 .46em/1 var(--body); color: #fff; letter-spacing: -.02em; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 1px #000; pointer-events: none; }
.hero-cell i.plus { margin: 0 -9px 0 -17px; }
/* Cards: the owner turns it on (layout part "plus"); it hangs under the tier shield. */
.ft-card .ft-plus { position: absolute; z-index: 4; top: calc(clamp(36px, 17cqi, 50px) * 54 / 46 + 4px); left: calc(10% + clamp(36px, 17cqi, 50px) / 2); transform: translateX(-50%); line-height: 0; }
.ft-card .ft-plus i.plus { font-size: clamp(38px, 18cqi, 56px); margin: 0; zoom: var(--part-size, 1); }
.ft-card .ft-plus.ft-placed i.plus { zoom: 1; }
.ft-card .ft-h i.plus { position: absolute; right: -5px; bottom: -6px; font-size: max(16px, 8cqi); margin: 0; }
.ft-card:not(.ft-plus-on) .ft-h i.plus { display: none; }
.ft-card .ft-h i.plus b { display: block; } /* .ft-h b (the games count) is hidden */
/* Beside a name instead of on a portrait: the hero page's players. */
.hp-name i.plus { margin: 0 0 0 6px; vertical-align: -5px; }
/* In a name cell (grid rows: game ratings, the analysis ten, week lineups, game tiles). */
.rt-who i.plus, .ga-ten-name i.plus, .lu-name i.plus, .ga-g-body i.plus { margin: 0 5px 0 0; vertical-align: -6px; }
.ga-g-body i.plus { position: absolute; left: 50px; bottom: 4px; margin: 0; font-size: 26px; }
/* After a portrait in a flex row: back over the row's gap onto the portrait's corner. */
.gm-board td.who i.plus, .gm-stand i.plus, .ln-p i.plus, .gm-fact .v i.plus { align-self: flex-end; margin: 0 -6px -3px -26px; }
.gm-fact .v i.plus { font-size: 22px; }
/* Over hero art: the bottom corner. */
.hp-banner i.plus, .ph-banner i.plus { position: absolute; z-index: 2; right: 6px; bottom: 4px; font-size: 32px; margin: 0; }
.ph-banner i.plus { font-size: 28px; }
.ga-art i.plus { position: absolute; z-index: 2; left: 6px; bottom: 6px; font-size: 34px; margin: 0; }
.pf i.plus { position: absolute; right: -6px; bottom: 0; font-size: 18px; margin: 0; }
.card.hl i.plus { position: absolute; right: 8px; bottom: 6px; font-size: 30px; margin: 0; }

/* Fantasy scoring popup (reuses dialog.tier-modal) */
.ft-how { font-size: 14px; margin: 0 0 14px; }
dialog.fp-modal { width: min(760px, 94vw); }
.fp-body { padding: 16px 18px 22px; display: grid; grid-auto-rows: max-content; gap: 12px; align-content: start; }
.fp-body h4 { margin: 14px 0 0; font: 800 20px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--bone); }
.fp-body p { margin: 0; max-width: 62ch; color: var(--dust); font-size: 14px; line-height: 1.55; }
.fp-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); }
.fp-formula span { padding: 8px 10px; border: 1px solid var(--seam-2); background: var(--stone-2); white-space: nowrap; }
.fp-formula b { color: var(--accent); font-weight: 600; }
.fp-formula i { font-style: normal; color: var(--dim); }
.fp-lede { color: var(--dust); }
.fp-wrap { border: 1px solid var(--seam); background: var(--stone-2); overflow-x: auto; }
.fp-grid { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 520px; font-variant-numeric: tabular-nums; }
.fp-grid th, .fp-grid td { padding: 0; }
.fp-grid thead th { font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dust); padding: 10px 6px 8px; text-align: center; }
.fp-grid thead th small { display: block; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--dim); margin-top: 3px; }
.fp-grid .fp-l { text-align: left; padding-left: 10px; }
.fp-grid th.fp-stat { text-align: left; font: 500 13px/1.25 var(--body); padding: 8px 10px; color: var(--bone); white-space: nowrap; }
.fp-grid tr.fp-group th { text-align: left; font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 14px 10px 4px; }
.fp-grid td.fp-c { text-align: center; font: 600 14px/1 var(--mono); height: 36px; min-width: 56px; border-radius: 4px; background: var(--stone); cursor: default; }
.fp-grid td.fp-zero { color: var(--dim); font-weight: 400; background: transparent; }
.fp-grid tfoot th, .fp-grid tfoot td { padding: 10px 6px; border-top: 1px solid var(--seam-2); font: 600 12px/1 var(--mono); text-align: center; color: var(--dust); }
.fp-grid tfoot td.fp-c { height: auto; background: transparent; font-size: 12px; }
.fp-mults { display: grid; gap: 16px; border: 1px solid var(--seam); background: var(--stone-2); padding: 16px; }
.fp-mult { display: grid; gap: 6px; }
.fp-mult h5 { margin: 0; font: 700 14px/1.2 var(--body); color: var(--bone); }
.fp-mult h5 span { margin-left: 10px; font: 600 12px/1.3 var(--mono); color: var(--accent); }
.fp-mult p { font-size: 13px; }
.fp-track { position: relative; height: 24px; }
.fp-track i { position: absolute; display: block; }
.fp-rail { left: 0; right: 0; top: 11px; height: 2px; background: var(--seam-2); }
.fp-one { top: 2px; bottom: 2px; width: 2px; background: var(--bone); opacity: .55; }
.fp-seg { top: 6px; height: 12px; border-radius: 4px; background: var(--accent); }

.sp-live { color: #ff6b6b; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sp-live::before { content: "●"; margin-right: 4px; }
.po-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.po-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto; gap: 8px 16px; align-items: center; padding: 10px 14px; border: 1px solid var(--line, #2a2a2a); border-radius: 6px; }
.po-round { opacity: .7; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.po-status { white-space: nowrap; opacity: .85; }
@media (max-width: 640px) { .po-row { grid-template-columns: 1fr; } }

/* Content tab: the playoff bracket in a framed panel, boxes joined by lines. */
.wkb-box { margin: 28px 0; padding: 18px 20px 22px; border: 1px solid var(--accent); border-radius: 8px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--bone) 3%, transparent) 55%), var(--stone);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .35); }
.wkb-box > h2 { margin-top: 0; }
:is(#wk-bracket, .po-final) .po-br-wrap { padding: 6px 6px 10px; }
:is(#wk-bracket, .po-final) .po-br { --cw: 210px; --g: 44px; }
:is(#wk-bracket, .po-final) .po-wk { margin: 0 0 12px; text-align: center; padding: 5px 8px; border: 1px solid var(--seam); border-radius: 4px; background: color-mix(in srgb, var(--bone) 4%, transparent); }
:is(#wk-bracket, .po-final) .po-lbl { padding: 0 4px; }
:is(#wk-bracket, .po-final) .po-m { position: relative; border: 1px solid color-mix(in srgb, var(--bone) 28%, var(--seam)); border-radius: 6px; background: var(--stone); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
:is(#wk-bracket, .po-final) .po-m.gf { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
:is(#wk-bracket, .po-final) .po-mh { border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--bone) 5%, transparent); }
:is(#wk-bracket, .po-final) .po-slot { border-bottom: 1px solid var(--seam); }
:is(#wk-bracket, .po-final) .po-slot:last-of-type { border-bottom: 0; }
:is(#wk-bracket, .po-final) .po-mp { border-radius: 0 0 6px 6px; background: color-mix(in srgb, var(--bone) 3%, transparent); }
:is(#wk-bracket, .po-final) .po-champ { border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--stone)); }
@media (max-width: 640px) { .wkb-box { padding: 12px; } }
:is(#wk-bracket, .po-final) .po-m.is-maybe { outline: 2px dashed var(--accent); outline-offset: 4px; }
:is(#wk-bracket, .po-final) .po-maybe { padding: 4px 8px 6px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border-top: 1px dashed var(--accent); }

/* Fantasy table tab (pages/fantasy.js mountFantasyTable) */
.fx-wrap { border: 1px solid var(--seam); border-radius: 6px; background: var(--stone); overflow-x: auto; }
.fx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fx-table th { position: sticky; top: 0; padding: 10px 12px; text-align: left; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); background: var(--stone-2); border-bottom: 1px solid var(--seam-2); white-space: nowrap; }
.fx-table td { padding: 9px 12px; border-bottom: 1px solid var(--seam); white-space: nowrap; }
.fx-table th.num, .fx-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fx-table tbody tr:hover td { background: var(--hover); }
.fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-rank { width: 36px; font: 600 12px var(--mono); color: var(--dust); }
.fx-name { font-weight: 600; color: var(--bone); }
.fx-team { color: var(--dust); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.fx-pos { display: inline-block; min-width: 22px; padding: 2px 0; text-align: center; font: 600 11px var(--mono); border: 1px solid var(--seam-2); border-radius: 4px; color: var(--bone); }
.fx-g { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 4px; background: rgba(var(--jade-rgb), .12); color: var(--jade-soft); }
.fx-g.fx-drop { background: transparent; color: var(--dust); text-decoration: line-through; border: 1px dashed var(--seam-2); }
.fx-none { color: var(--dust); }
.fx-pts b { font-size: 16px; color: var(--gold); }
.fx-top1 td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.fx-top2 td:first-child { box-shadow: inset 3px 0 0 var(--bone); }
.fx-top3 td:first-child { box-shadow: inset 3px 0 0 var(--ember); }
.fx-top .fx-rank { color: var(--bone); }
@media (max-width: 640px) { .fx-table th, .fx-table td { padding: 8px 8px; } .fx-name { position: sticky; left: 0; background: var(--stone); } }
.fx-table td.fx-name, .fx-table td.fx-team, .fx-table td.fx-rank { text-align: left; font-family: var(--body); letter-spacing: normal; text-transform: none; }
.fx-table td.fx-rank { font-family: var(--mono); }
.fx-table td.fx-name { font-size: 14px; }
.fx-wrap .fx-table td.fx-team { font: 400 13px/1.2 var(--body); color: var(--dust); text-transform: none; letter-spacing: normal; max-width: 150px; }
.fx-wrap .fx-table th, .fx-wrap .fx-table td { padding-left: 9px; padding-right: 9px; }
.fx-wrap .fx-table td.fx-team { max-width: 120px; }
.fx-g { margin-left: 4px; }
.fx-wrap .fx-table td.fx-pts, .fx-wrap .fx-table th:nth-child(3) { text-align: left; }
.fx-mode { display: flex; margin: 0 0 12px; }
.fx-btn { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; clip-path: none; }
.fx-btn.fx-g { border: 0; }
.fx-btn.fx-g.fx-drop { border: 1px dashed var(--seam-2); }
.fx-btn:hover, .fx-btn:focus-visible { filter: brightness(1.3); text-decoration: underline; }
.fx-ptsbtn { padding: 0; font: 700 16px var(--body); color: var(--gold); }
.fx-pts b { color: inherit; }
#fx-modal .ft-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#fx-modal .ft-table th, #fx-modal .ft-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--seam); font-family: var(--body); letter-spacing: normal; text-transform: none; }
#fx-modal .ft-table th { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
#fx-modal .ft-table th.num, #fx-modal .ft-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#fx-modal details { border: 1px solid var(--seam); border-radius: 6px; padding: 8px 12px; background: var(--stone); }
#fx-modal summary { cursor: pointer; font-weight: 600; color: var(--bone); }
#fx-modal details > a { display: inline-block; margin: 6px 0; font-size: 13px; }
@media (max-width: 1280px) { #fx-modal .tm-head { padding-top: 44px; } }

/* Predict: the playoff bracket you submit once (same frame as the Content tab's). */
.po-final .po-res { font-weight: 600; }
.po-final .po-res.right { color: var(--jade); }
.po-final .po-res.wrong { color: var(--ember); }
.po-submit { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border: 1px solid rgba(var(--accent-rgb), .5); background: color-mix(in srgb, var(--accent) 7%, var(--stone)); }
.po-submit .primary { font-size: 15px; padding: 10px 18px; }
.po-submit-note { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dust); }
.po-submit .po-clear { margin-left: auto; }
.po-earned { margin: -10px 0 18px; color: var(--dust); }
.po-earned .po-pts { font: 700 13px var(--mono); color: var(--accent); }
.pb-sub { margin: 26px 0 8px; }
dialog.po-confirm { width: min(460px, 94vw); }
.po-confirm .tm-body { padding: 14px 18px 18px; }
.po-confirm-champ { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.po-confirm-champ li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb), .5); background: var(--stone-2); }
.po-confirm-champ span { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.po-confirm-champ b { color: var(--accent); }
.po-confirm-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
/* Bracket leaderboard: a score opens that person's bracket in a pop-up. */
button.pb-score { padding: 3px 10px; font: 700 15px var(--mono); color: var(--accent); background: transparent; border: 1px solid rgba(var(--accent-rgb), .5); }
button.pb-score:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
dialog.pb-modal { width: min(1320px, 96vw); }
.pb-modal .tm-body { padding: 10px 16px 18px; }

/* The "Picking as" name bar never shows; picks ask for a name once if none is stored. */
.pred-name { display: none !important; }