/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #12141d; /* Soft navy-charcoal (subtle blue, not saturated) */
  --surface:     #1d1c20; /* Raised panel */
  --surface2:    #252428; /* Higher surface */
  --surface3:    #2d2c31; /* Hover / active surface */
  --border:      rgba(255, 255, 255, 0.09); /* Sleek opacity borders */
  --border-strong: rgba(255, 255, 255, 0.16); /* Emphasis / hover borders */
  --gold:        #2dd4bf; /* Vivid teal accent */
  --gold-dim:    #14b8a6; /* Teal 500 */
  --text:        #eef1f6; /* Cool near-white */
  --text-dim:    #9aa4ba; /* Muted slate — proper secondary text */
  --text-faint:  #6b7384; /* Tertiary / disabled */
  --green:       #34d399; /* Emerald 400 — brighter on dark */
  --red:         #fb5a71; /* Warm rose */
  --blue:        #5b9cf8; /* Softer sky blue */
  --radius:      10px;    /* Softer rounded corners */
  --radius-sm:   7px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.3);
  --shadow-md:   0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:   0 16px 40px rgba(0,0,0,.5);
  --ring:        0 0 0 2px rgba(45, 212, 191, 0.40); /* Focus ring */
  --font:        'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  /* Rounded terminals, wide apertures — used for the draft board's champion and
     player names, which are read at a glance (his request 2026-08-18). */
  --font-round:  'Nunito', 'Outfit', system-ui, -apple-system, sans-serif;
  --mono:        'Inter', system-ui, sans-serif;
  --ui-zoom:     1.1;     /* Global UI scale — everything renders 110% size */
  /* Top-nav accent, as an R,G,B triplet so borders/glows can vary the alpha.
     Swap this one line to re-tint every tab: gold 242,207,120 · teal
     45,212,191 · platinum 205,214,230 · violet 167,139,250 · sky 125,211,252 */
  --tab-accent:  242, 207, 120;
}

/* Site-wide 110% zoom. Applied to body's direct children (header, every
   .tab-content, JS-appended overlays/menus) rather than to body itself so
   body's own `min-height: 100vh` keeps resolving against the real viewport
   and no phantom scrollbar appears. Change --ui-zoom to rescale the whole UI.
   NOTE: any JS that positions an element from getBoundingClientRect() must
   divide by this factor — see uiZoom() in app.js. */
body > * { zoom: var(--ui-zoom); }

body {
  /* Site-wide canvas: the Draft Simulator navy — two blue radial glows over a
     diagonal navy-black ramp — now lives on the body so EVERY tab (Match
     History, Draft Analysis, SoloQ, …) shares it. Fixed, so it stays put behind
     scrolling content. Tabs are transparent and let this show through. */
  background:
    radial-gradient(ellipse at 20% 30%, rgba(14, 30, 60, 0.7) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(10, 18, 38, 0.5) 0%, transparent 50%),
    linear-gradient(160deg, #07070a 0%, #0c1422 35%, #101720 65%, #080a10 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400; /* Relaxed weight from default bold/700 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Header ────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 18px 24px 16px;
  /* Dark navy-blue bar — clearly blue-tinted but a step darker than the page's
     navy canvas, so the top strip reads as a recessed lid over the content. */
  background: linear-gradient(180deg, #0a1019 0%, #070b12 100%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55);
  /* Positioning context for the desktop Refresh button, which is pinned to the
     right without disturbing the centred nav. (.logo, the only other absolutely
     positioned child this rule ever anchored, is not in the markup.) */
  position: relative;
}

/* ─── Desktop-only "Refresh app" button ────────────────────────────────────
   Rendered by index.html ONLY when Electron's preload is present, so the local
   website and the Render deploy never show it. Absolutely positioned so the
   centred tab row keeps its exact place. */
/* Two guards, because this button leaked onto the public site once already:
   1. `display:flex` below is an AUTHOR style, and author styles beat the
      browser's built-in `[hidden] { display: none }` — so the hidden attribute
      alone did NOT hide it. This rule restores that, and must stay ahead of
      any future `display` added to #dhRefreshApp.
   2. .site-public is stamped on every non-local hostname, so the Render deploy
      hides it even if the preload check were ever bypassed. */
#dhRefreshApp[hidden],
.site-public #dhRefreshApp { display: none !important; }

#dhRefreshApp {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(45, 212, 191, .38);
  background: rgba(45, 212, 191, .10);
  color: #5eead4;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#dhRefreshApp:hover:not(:disabled) {
  background: rgba(45, 212, 191, .20);
  border-color: rgba(45, 212, 191, .7);
  color: #99f6e4;
}
#dhRefreshApp:disabled { cursor: progress; opacity: .75; }
.dh-refresh-icon { font-size: 18px; line-height: 1; display: inline-block; }
/* Spin while the server restarts, so a slow restart doesn't look like a no-op. */
#dhRefreshApp.busy .dh-refresh-icon { animation: dhRefreshSpin .9s linear infinite; }
@keyframes dhRefreshSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #dhRefreshApp.busy .dh-refresh-icon { animation: none; }
}

.logo {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.logo-icon { height: 28px; width: auto; display: block; }
.logo-text  { font-size: 17px; font-weight: 700; letter-spacing: .5px; color: var(--gold); }

.tabs { display: flex; gap: 10px; }

/* Public deploys (Render): only Draft Helper, Match History and Stats are
   exposed. The head script stamps .site-public on any non-local hostname.
   Stats went public 2026-08-08 — its /api/champions router is unguarded to
   match (see server.js); the rest below stay local tools. */
.site-public .tab[data-tab="tags"],
.site-public .tab[data-tab="acc"],
.site-public .tab[data-tab="bot"],
.site-public .tab[data-tab="practice"],
.site-public .tab[data-tab="setups"] { display: none !important; }

/* Team Tags board + Over Time Checklist — a local research tool, hidden on the
   public deploy. It still renders locally; only the panel is hidden here, so
   nothing else on the Draft Simulator changes. */
.site-public #simTagBoard { display: none !important; }

/* Possible Setups + Things to consider — local-only research panels, same as the
   Setups tab they come from. renderPossibleSetups() also bails out early on
   SITE_PUBLIC, so the public deploy never even calls /api/setups/live. */
.site-public #simPossibleSetups,
.site-public #simImportantEdges { display: none !important; }

/* Live Game Stats — local-only too. Its /api/live endpoints are switched off on
   the public deploy as well (see server.js), so this hides a panel that could
   not load anything there anyway. The 📡 Live Game button above the board is a
   separate feature and stays. */
.site-public #liveStatsPanel { display: none !important; }

/* Send-to-Discord — local-only for the same reason: /api/alerts is write-guarded,
   so the button could only ever fail out there. */
.site-public #simDiscordPanel { display: none !important; }

/* ── Draft Simulator action buttons ────────────────────────────
   One small centred button, no card, no caption: "Send analysis to Discord" at
   the foot of the page, only on a local/desktop host. It stays disabled until
   the board's requirements are met, reason in its tooltip. (The sibling
   "Draft Analysis Link" button was removed 2026-08-19.) */
#simDiscordPanel { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.sdx-btn {
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 7px;
  cursor: pointer;
  color: #fff;
  background: rgba(88, 101, 242, .82);
  border: 1px solid rgba(88, 101, 242, .9);
  transition: filter .15s ease;
}
.sdx-btn:hover:not(:disabled) { filter: brightness(1.15); }
.sdx-btn:disabled { opacity: .38; cursor: not-allowed; background: #1b2331; border-color: var(--border-strong); color: var(--text-dim); }
.sdx-btn.ok  { background: #15502f; border-color: #1e6b3f; color: #c9ffdf; }
.sdx-btn.err { background: #4a1c20; border-color: #6b2a2f; color: #ffd4d6; }

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #1e1e22 0%, #151517 55%, #101012 100%);
  /* Neutral hairline instead of an accent box on every tab — the accent is
     reserved for the tab you are on, so the header reads as one row, not six. */
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.45);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Lit edge along the bottom — the accent the old outline used to spend on all
   four sides. Faint on hover, full on the active tab. */
.tab::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--tab-accent), 0) 0%,
    rgba(var(--tab-accent), 1) 22%,
    rgba(var(--tab-accent), 1) 78%,
    rgba(var(--tab-accent), 0) 100%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.tab .tab-text {
  /* Brighter, flatter gold — the lettering carries the accent now that the
     surrounding glows are toned down, so it stays legible without them. */
  background: linear-gradient(180deg, #fff6d8 0%, #fbdc8c 34%, #f2c962 62%, #dcac45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: .88;
  transition: opacity .2s ease;
}
.tab-emblem {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #5a3d22 0%, #3a2614 70%, #241509 100%);
  box-shadow: 0 0 0 1px rgba(var(--tab-accent), .28);
  transition: box-shadow .2s ease;
}
.tab-emblem img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }

.tab:hover {
  border-color: rgba(var(--tab-accent), .22);
  background: linear-gradient(180deg, #232228 0%, #18181b 55%, #121214 100%);
}
.tab:hover .tab-text { opacity: 1; }
.tab:hover::after { opacity: .22; }

.tab.active {
  /* Warm panel + a quiet lit edge. No halo — the lettering is the bright part. */
  border-color: rgba(var(--tab-accent), .26);
  background: linear-gradient(180deg, #29241c 0%, #1b1813 55%, #121011 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.45);
}
.tab.active::after { opacity: .55; }
.tab.active .tab-text { opacity: 1; }
.tab.active .tab-emblem { box-shadow: 0 0 0 1px rgba(var(--tab-accent), .45); }

.tab:focus-visible { outline: 2px solid rgb(var(--tab-accent)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tab, .tab::after, .tab .tab-text, .tab-emblem { transition: none; }
}

/* ─── Mobile: top nav ──────────────────────────────────────────── */
@media (max-width: 640px) {
  header { gap: 8px; padding: 10px 8px 8px; flex-wrap: wrap; }
  .tabs { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .tab { height: 34px; padding: 0 12px; gap: 6px; }
  .tab-emblem { width: 20px; height: 20px; }
  .tab .tab-text { font-size: 12.5px; }
}

.db-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}

/* ─── Tab content ───────────────────────────────────────────────── */
.tab-content { display: none; flex: 1; }
.tab-content.active { display: flex; }

/* ─── Dashboard layout ──────────────────────────────────────────── */
#tab-dashboard {
  flex-direction: row;
  align-items: stretch;
  height: calc(100vh - 49px);
}

/* ─── Filters sidebar ───────────────────────────────────────────── */
.filters {
  width: 220px;
  min-width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.filters h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dim);
}

.filters select,
.filters input[type="text"],
.filters input[type="number"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.filters select:focus,
.filters input:focus { border-color: var(--gold-dim); }

.filter-group-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: -8px;
}

.filter-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-range input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.filter-range input:focus { border-color: var(--gold-dim); }
.range-sep { color: var(--text-dim); flex-shrink: 0; }

.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity .15s;
  width: 100%;
}
.btn-primary:hover    { opacity: .85; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  width: 100%;
}
.btn-secondary:hover { color: var(--text); border-color: var(--text-dim); }

/* ─── Data panel ────────────────────────────────────────────────── */
.data-panel { }

.data-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.result-label { font-size: 13px; color: var(--text-dim); }
.result-count  { font-size: 13px; color: var(--gold); font-family: var(--mono); }

.table-wrap {
  flex: 1;
  overflow-y: auto;
}

table { width: 100%; border-collapse: collapse; }

thead th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
thead th.num { text-align: right; }

thead th.sortable {
  cursor: pointer;
  transition: color .15s, background .15s;
}
thead th.sortable:hover { color: var(--text); background: #222336; }
thead th.sortable.sort-active { color: var(--gold); }

.sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  opacity: .3;
  transition: opacity .15s;
}
th.sortable:hover .sort-arrow { opacity: .6; }
th.sort-active .sort-arrow { opacity: 1; color: var(--gold); }

tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:hover { background: var(--surface2); }

tbody td { padding: 9px 16px; font-size: 13px; }
tbody td.num { text-align: right; font-family: var(--mono); }

.champ-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.champ-portrait {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.champ-portrait-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

td.empty {
  text-align: center;
  color: var(--text-dim);
  padding: 40px;
  font-style: italic;
}

.wr-high { color: var(--green); font-weight: 600; }
.wr-low  { color: var(--red); }
.wr-mid  { color: var(--text); }

.sample-warn { color: var(--gold-dim); font-size: 12px; margin-left: 3px; }

/* ─── Dashboard layout wrappers ─────────────────────────────────── */
.dash-main {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  height: 100%;
}

.dash-profile {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* ─── Profile topbar ────────────────────────────────────────────── */
.profile-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.btn-back {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
  white-space: nowrap;
}
.btn-back:hover { color: var(--text); border-color: var(--text-dim); }

.profile-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.profile-breadcrumb .bc-sep  { color: var(--border); }
.profile-breadcrumb .bc-link {
  color: var(--text-dim);
  cursor: pointer;
  transition: color .15s;
}
.profile-breadcrumb .bc-link:hover { color: var(--gold); }
.profile-breadcrumb .bc-current { color: var(--text); font-weight: 600; }

/* ─── Profile body ──────────────────────────────────────────────── */
.profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

/* ─── Profile header card ───────────────────────────────────────── */
/* Team logo — profile header (medium) */
.profile-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-team-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.profile-header-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.profile-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 8px;
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-league-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 3px;
  background: var(--gold-dim);
  color: #f0e0b0;
}

.profile-meta-item {
  font-size: 13px;
  color: var(--text-dim);
}

.profile-meta-sep { color: var(--border); }

/* ─── Role badge ────────────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 3px 9px;
  border-radius: 3px;
  text-transform: uppercase;
}
.role-Top     { background: #3a2010; color: #e07030; border: 1px solid #5a3010; }
.role-Jungle  { background: #0e2e14; color: #4caf60; border: 1px solid #1e4e24; }
.role-Mid     { background: #0e1a3a; color: #5b8dd9; border: 1px solid #1e2a5a; }
.role-Bot     { background: #2e0e1a; color: #d95b8d; border: 1px solid #4e1e2a; }
.role-Support { background: #0e2e2e; color: #4cafa0; border: 1px solid #1e4e4e; }

/* ─── Split pills ───────────────────────────────────────────────── */
.split-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.split-pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.split-pill:hover  { border-color: var(--text-dim); color: var(--text); }
.split-pill.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }

/* ─── Roster grid ───────────────────────────────────────────────── */
.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.roster-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.roster-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  min-width: 140px;
  flex: 1;
  max-width: 200px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roster-card:hover {
  border-color: var(--gold-dim);
  background: var(--surface2);
}

.roster-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.roster-card-stats {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}

/* ─── Profile champion table ────────────────────────────────────── */
.profile-section { margin-bottom: 32px; }

.profile-table-wrap { overflow-x: auto; }

.profile-table {
  width: 100%;
  border-collapse: collapse;
}

.profile-table thead th {
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.profile-table thead th:hover { color: var(--text); }
.profile-table thead th.sort-active { color: var(--gold); }
.profile-table thead th.num { text-align: right; }

.profile-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.profile-table tbody tr:hover { background: var(--surface2); }
.profile-table tbody td { padding: 9px 16px; font-size: 13px; }
.profile-table tbody td.num { text-align: right; font-family: var(--mono); }

/* clickable cells in dashboard table */
.link-cell {
  cursor: pointer;
  transition: color .15s;
}
.link-cell:hover { color: var(--gold); }

/* ─── Tournaments tab ───────────────────────────────────────────── */
#tab-tournaments { flex-direction: column; overflow: hidden; }

.tourn-list-view,
.tourn-detail-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.tourn-list-header {
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tourn-list-header h2 { font-size: 15px; font-weight: 600; color: var(--text); }

.tourn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 24px 32px;
  overflow-y: auto;
  align-content: start;
}

.tourn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tourn-card:hover { border-color: var(--gold-dim); background: var(--surface2); }

.tourn-card-name { font-size: 15px; font-weight: 600; color: var(--text); }
.tourn-card-meta { display: flex; align-items: center; gap: 8px; }
.tourn-card-year { font-size: 13px; color: var(--text-dim); font-family: var(--mono); }

/* ─── Tournament detail ──────────────────────────────────────────── */
.tourn-detail-view { height: 100%; }

.btn-refresh {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
}
.btn-refresh:hover { color: var(--text); border-color: var(--text-dim); }
.btn-refresh:disabled { opacity: .4; cursor: not-allowed; }

.tourn-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-content: start;
}

/* header spans full width */
.tourn-detail-header {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* left column: rankings */
.tourn-rankings-panel { display: flex; flex-direction: column; gap: 12px; }

/* right column: teams + matches stacked */
.tourn-right-panel { display: flex; flex-direction: column; gap: 24px; }

.tourn-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* ─── Rankings table ─────────────────────────────────────────────── */
.rankings-table {
  width: 100%;
  border-collapse: collapse;
}
.rankings-table th {
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rankings-table th.num { text-align: right; }
.rankings-table td {
  padding: 9px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.rankings-table td.num { text-align: right; font-family: var(--mono); font-size: 13px; }
.rankings-table tbody tr { transition: background .1s; }
.rankings-table tbody tr:hover { background: var(--surface2); }

.rank-num {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
}
.rank-1 { color: var(--gold); font-weight: 700; }
.rank-2 { color: #ffffff; }
.rank-3 { color: #cd7f32; }

.rank-team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color .15s;
}
.rank-team-cell:hover { color: var(--gold); }

/* ─── Teams grid in tournament ───────────────────────────────────── */
.tourn-teams-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tourn-team-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.tourn-team-chip:hover { border-color: var(--gold-dim); color: var(--gold); }

/* ─── Match schedule ─────────────────────────────────────────────── */
.match-list { display: flex; flex-direction: column; gap: 6px; }

.match-row {
  display: grid;
  grid-template-columns: 100px 1fr auto 1fr 80px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
}
.match-row.upcoming {
  border-color: var(--gold-dim);
  background: #1a160a;
}

.match-date {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
}
.match-row.upcoming .match-date { color: var(--gold); }

.match-team {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-team.right { text-align: right; }

.match-score {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: var(--text-dim);
  min-width: 50px;
}
.match-score.done { color: var(--text); }
.match-score.upcoming-indicator {
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
}

.match-vs { color: var(--text-dim); font-size: 13px; text-align: center; }

.matches-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  margin-top: 4px;
  transition: all .15s;
}
.matches-toggle:hover { color: var(--text); border-color: var(--text-dim); }

/* ─── Draft Simulator tab ───────────────────────────────────────── */
#tab-draft {
  overflow-y: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  /* Canvas now lives on body (shared by all tabs); this stays transparent. */
}

/* ─── Draft sub-tabs ─────────────────────────────────────────── */
.draft-subtab-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  background: rgba(9, 14, 23, 0.85); /* Dark navy blue, still lightly glassy */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}

.draft-subtab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(244, 244, 245, 0.55);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 10px 22px;
  text-transform: uppercase;
  transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.draft-subtab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}
.draft-subtab.active {
  color: var(--gold);
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.35);
}

/* ─── Matchup Odds — teams from Draft Simulator ──────────────── */
/* ─── Draft Simulator canvas ─────────────────────────────────────────────
   The same blue -> red wash the Draft Win Rate plate wears (.draft-metric-bar.ds),
   scaled up to the whole page (his request 2026-08-21): blue bleeds in from the
   left edge, red from the right, both fading out toward the centre, so the page
   itself carries the side colours the board is arguing about.

   Painted OVER the body canvas rather than replacing it — body keeps the navy
   ramp every other tab shares. Fixed to the viewport for the same reason body's
   is: the two sides' colours must hold their positions while the board scrolls.
   Diluted from the plate's .24 to .13 — the identical gradient reads far
   stronger across a page than inside a 360px box. */
/* Applied to BODY, not to #tab-draft: the section is only as tall as its
   content, so a short board left the navy canvas showing under it. `:has()`
   keys off the same .active class switchTab() already toggles, so no JS and no
   extra body class — when any other tab is active this rule stops matching and
   the site-wide canvas above comes back untouched. */
body:has(#tab-draft.active) {
  /* Dark ground with the side wash at FULL strength (2026-08-21): blue bleeds in
     from the left edge, red from the right, fading out toward the centre — the
     same gradient .draft-metric-bar.ds wears, scaled to the page. It was halved
     to .07/.055 for one round and he asked for this version back.
     Under it: near-black, replacing the navy ramp and both blue glows the other
     tabs share, but not #000 — the low-alpha hairlines need a ground. */
  background:
    linear-gradient(90deg,
      rgba(59, 130, 246, 0.13),
      rgba(59, 130, 246, 0.03) 42%,
      rgba(244, 63, 94, 0.03) 58%,
      rgba(244, 63, 94, 0.13)),
    linear-gradient(180deg, #101116 0%, #0c0d12 100%);
  background-attachment: fixed;
}

/* ─── Draft page transparency ───────────────────────────────────── */
#tab-draft .draft-topbar            { background: rgba(12,  15,  23,  0.72); }
#tab-draft .draft-pick-slot         { background: rgba(24,  24,  28,  0.50); }
#tab-draft .draft-team-sel          { background: rgba(32,  31,  36,  0.55); }
#tab-draft .draft-ban-slot          { background: rgba(28,  27,  32,  0.50); }
#tab-draft .draft-pick-placeholder  { background: rgba(32,  31,  36,  0.45); }
#tab-draft .draft-dropdown          { background: rgba(26,  25,  29,  0.95); }
#tab-draft .draft-side-badge.blue   { background: rgba(14,  26,  58,  0.80); }
#tab-draft .draft-side-badge.red    { background: rgba(46,  14,  14,  0.80); }

/* ─── Draft Simulator ───────────────────────────────────────────── */
.draft-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 4px 28px 32px;
  padding-bottom: 20vh;
  gap: 0;
}

.draft-topbar {
  position: relative;
  /* .draft-board's own stacking context (drag/hover z-indexes on its cards)
     otherwise paints over the topbar in DOM order, since neither side had an
     explicit z-index — this keeps the league-picker list above it when open. */
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 9px;
  border-bottom: 1px solid var(--border);
  margin: 0 auto 12px;
  width: fit-content;   /* shrink to the controls instead of full width */
  max-width: 100%;      /* but never overflow on small screens */
  flex-shrink: 0;
}
.draft-title { font-size: 14px; font-weight: 600; color: var(--text); }
.draft-split-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-dim);
}
.draft-league-label {
  color: #fff;
  font-family: 'Chakra Petch', var(--font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.draft-split-label select {
  font-family: 'Chakra Petch', var(--font);
  background-color: var(--surface2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4ba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 34px 8px 14px;
  /* Wide enough for the longest league label ("Circuito Desafiante") so the
     box doesn't resize as the selection changes. */
  min-width: 235px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, background-color .15s;
}
/* The topbar is width:fit-content, and min-width wins over max-width, so drop
   the floor on narrow screens rather than push the bar into overflow. */
@media (max-width: 560px) {
  .draft-split-label select { min-width: 0; }
}
.draft-split-label select:hover { border-color: rgba(255, 255, 255, 0.20); }
.draft-split-label select:focus {
  border-color: var(--gold);
  background-color: var(--surface2);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* First-run hint: gently pulse the League selector (teal glow, like its focus
   state) so a new user knows to click here first. JS removes .hint-blink on the
   first interaction and remembers it, so it never blinks again. */
@keyframes leaguePulse {
  0%, 100% { border-color: var(--border); box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
  50%      { border-color: var(--gold);   box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.28); }
}
.draft-split-label select.hint-blink { animation: leaguePulse 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .draft-split-label select.hint-blink { animation: none; }
}

/* ─── League picker (flag-enabled select replacement) ─────────────────
   Native <select> can't render <img> inside its <option>s in any browser, so
   the visible control here is a custom button + list; #draftSplitSel stays in
   the DOM (hidden) as the real state — all existing JS keeps reading/writing
   it via .value/.selectedIndex/.options, and this UI is just a skin synced
   on top of it. */
.league-picker { position: relative; }
.league-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Chakra Petch', var(--font);
  background-color: var(--surface2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4ba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 34px 8px 14px;
  /* Wide enough for the longest league label ("Circuito Desafiante") so the
     box doesn't resize as the selection changes. */
  min-width: 235px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
@media (max-width: 560px) {
  .league-picker-btn { min-width: 0; }
}
.league-picker-btn:hover { border-color: rgba(255, 255, 255, 0.20); }
.league-picker-btn:focus,
.league-picker-btn[aria-expanded="true"] {
  border-color: var(--gold);
  background-color: var(--surface2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.league-picker-btn.hint-blink { animation: leaguePulse 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .league-picker-btn.hint-blink { animation: none; }
}
.league-picker-flag {
  display: inline-flex;
  flex-shrink: 0;
}
.league-picker-flag img {
  width: 22px; height: auto; display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.league-picker-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.league-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.league-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.league-picker-opt img {
  width: 18px; height: auto; display: block; border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.league-picker-opt .league-picker-flag-spacer { width: 18px; flex-shrink: 0; }
.league-picker-opt:hover,
.league-picker-opt.is-active { background-color: rgba(255,255,255,.08); }
.league-picker-opt.is-selected { color: var(--gold); }

.draft-clear-btn { width: auto; padding: 5px 16px; position: absolute; right: 24px; }

/* ─── Live Game button ─────────────────────────────────────────────── */
.btn-live-game {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-family: 'Chakra Petch', var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(0, 200, 120, 0.15);
  border: 1px solid rgba(0, 200, 120, 0.45);
  color: #00e087;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn-live-game:hover   { background: rgba(0, 200, 120, 0.28); border-color: #00e087; box-shadow: 0 2px 14px rgba(0, 200, 120, 0.22); }
.btn-live-game:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* ─── Live game picker modal ───────────────────────────────────────── */
.live-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.live-modal {
  background: #111;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  min-width: 320px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.live-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.live-modal-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: -6px;
  line-height: 1.4;
}
.live-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
}
/* ─── Live game card — modern glass card, side-tinted, GAME N badge top-center ── */
.live-game-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.live-game-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.lgc-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px 0;
  position: relative;
}
.lgc-league {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .04em;
  position: absolute;
  left: 12px;
}
.lgc-flag { width: 17px; height: auto; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.lgc-game-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lgc-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.lgc-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background:
    linear-gradient(115deg, rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0) 65%),
    rgba(22, 22, 26, 0.35);
  border-left: 2px solid rgba(59, 130, 246, 0.55);
  border-radius: 6px;
  padding: 6px 9px;
}
.lgc-team.red {
  flex-direction: row-reverse;
  text-align: right;
  background:
    linear-gradient(245deg, rgba(244, 63, 94, 0.10), rgba(244, 63, 94, 0) 65%),
    rgba(22, 22, 26, 0.35);
  border-left: none;
  border-right: 2px solid rgba(244, 63, 94, 0.55);
}
.lgc-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }
.lgc-team-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lgc-side-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 3px;
}
.lgc-side-tag.blue { color: var(--blue); background: rgba(59,130,246,0.15); }
.lgc-side-tag.red  { color: var(--red);  background: rgba(244,63,94,0.15); }
.lgc-vs {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: .05em;
  padding: 0 2px;
}
.live-game-sides {
  display: flex;
  justify-content: center;
  padding: 4px 10px 10px;
}
.lgc-view-btn {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 6px 22px;
  border-radius: 7px;
  border: 1px solid var(--gold);
  background: rgba(45, 212, 191, 0.10);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.lgc-view-btn:hover { background: rgba(45, 212, 191, 0.2); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12); }
.live-game-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 7px;
  text-align: center;
  cursor: default;
}
.live-modal-cancel {
  align-self: flex-end;
  padding: 5px 18px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius);
  cursor: pointer;
}
.live-modal-cancel:hover { border-color: var(--text-dim); color: var(--text); }

/* ─── Live load notice (draft not ready / fetch failed) ────────────── */
.live-notice {
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 400px;
  padding: 28px 30px 22px;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  box-shadow: var(--shadow-lg);
  animation: liveNoticeIn .18s ease-out;
}
@keyframes liveNoticeIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.live-notice-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.32);
}
.live-notice .live-modal-title { font-size: 16px; }
.live-notice-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  opacity: .88;
  max-width: 32ch;
}
.live-notice-ok {
  align-self: stretch;
  margin-top: 4px;
  padding: 9px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0b1a18;
  background: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.live-notice-ok:hover  { background: #4ee3d0; box-shadow: 0 2px 14px rgba(45, 212, 191, 0.28); }
.live-notice-ok:focus-visible { outline: none; box-shadow: var(--ring); }

/* ─── Series game tabs (Bo3 / Bo5) ───────────────────────────────── */
.draft-series-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 24px 0 0;
  flex-wrap: wrap;
}
.draft-game-tab {
  position: relative;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.draft-game-tab:hover {
  color: var(--text);
  border-color: var(--text-dim);
}
.draft-game-tab.active {
  color: var(--text);
  border-color: var(--gold);
  background: rgba(255,255,255,.04);
}
/* Dot marks games that already hold a saved draft this session */
.draft-game-tab.filled::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* ─── New Draft button ────────────────────────────────────────────── */
.draft-new-draft-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 24px 0 32px;
}
/* Switch Sides — same muted style as New Draft. */
.btn-switch-sides {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-switch-sides:hover {
  color: var(--text);
  border-color: var(--text-dim);
  background: rgba(255,255,255,.04);
}
.btn-new-draft {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 36px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-new-draft:hover {
  color: var(--text);
  border-color: var(--text-dim);
  background: rgba(255,255,255,.04);
}

/* ─── Team plate (draft simulator) — crest + name + record ──────── */
.draft-team-stats-panel {
  position: relative;
  /* Was hidden. The team picker lives inside the plate now and its menu drops
     below the card's edge, so the plate can no longer clip its children. */
  overflow: visible;
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  /* Cap the plate so it hugs its content instead of filling the whole half-board
     (which left big empty margins on both sides). It follows the side's
     align-items, so it sits at the centre divider next to the other team.
     Tightened 2026-08-07: the type grew a step, so the plate gives back the
     width it was padding out with. */
  /* Scaled up 2026-08-20: zoom is a real layout scale (crest, type, records and
     the mounted team picker all grow together), so 420 x 1.12 = 470px on screen
     — the same width as the Draft Win Rate column beside it. */
  zoom: 1.12;
  max-width: 420px;
  margin-bottom: 6px;
  padding: 9px 12px;
  /* Spine border by side (1px neutral elsewhere) with a light, even side tint. */
  border: 1px solid var(--border-strong);
  border-left: 3px solid #3b82f6;
  border-radius: 10px;
  /* "Before" recipe: a solid navy-tinted base (not translucent gray) so the box
     reads as a lit panel that shares the navy environment, with the side wash
     angled off its spine corner. */
  background:
    linear-gradient(115deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.04) 38%, rgba(59, 130, 246, 0) 62%),
    rgba(20, 22, 30, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.draft-team-stats-panel.visible { display: flex; }

/* ── Team picker inside the plate (2026-08-20) ──────────────────────────────
   The dropdown used to sit in .draft-side-head above the card; it is mounted
   into the plate now (mountTeamPicker in app.js) and the side badge is all that
   is left up top. With no team chosen the trigger is the plate's only control;
   once a team is picked the trigger is hidden and .dts-name takes over as the
   click target — the wrapper stays in the DOM (collapsed) because the menu is
   positioned against it. */
.draft-team-stats-panel .cs-dd {
  align-self: center;
  margin-top: 8px;
  max-width: 100%;
}
/* Empty plate: the picker is the plate's whole content, centred in it. */
.draft-team-stats-panel.dts-empty {
  justify-content: center;
  min-height: 96px;
}
.draft-team-stats-panel.dts-empty .cs-dd { margin: 0; }
.draft-team-stats-panel.has-team .cs-dd {
  margin: 0;
  height: 0;
  min-width: 0;
}
.draft-team-stats-panel.has-team .cs-dd-trigger { display: none; }
/* The team name is the picker's handle once a team is set. */
.draft-team-stats-panel.has-team .dts-name {
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s;
}
.draft-team-stats-panel.has-team .dts-name:hover { color: var(--gold); }
/* Lift the whole plate while its menu is open, so the list paints over the
   board below instead of under it. */
.draft-team-stats-panel:has(.cs-dd.open) { z-index: 70; }
/* Red side: the menu hangs off the right edge, matching the card's mirroring. */
.draft-side.red .draft-team-stats-panel .cs-dd-menu { left: auto; right: 0; }

/* Placeholder plate — same frame, nothing in it. Dimmed and de-tinted so it
   reads as "waiting for a team" rather than as a card that failed to load. */
.draft-team-stats-panel.dts-empty {
  background: rgba(20, 22, 30, 0.42);
  border-color: var(--border);
  border-left-color: rgba(59, 130, 246, .45);
  box-shadow: none;
}
.draft-side.red .draft-team-stats-panel.dts-empty {
  background: rgba(24, 20, 24, 0.42);
  border-left: 1px solid var(--border);
  border-right-color: rgba(251, 90, 113, .45);
}
.dts-crest-empty {
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.dts-name-empty { color: var(--text-dim); font-style: italic; }
.dts-wr-empty   { color: var(--text-faint); }
.draft-side.red .draft-team-stats-panel {
  border-left: 1px solid var(--border-strong);
  border-right: 3px solid var(--red);
  background:
    linear-gradient(-115deg, rgba(251, 90, 113, 0.16), rgba(251, 90, 113, 0.04) 38%, rgba(251, 90, 113, 0) 62%),
    rgba(24, 20, 24, 0.72);
}


/* Header: crest tile + identity block (stacked name over WR/record),
   centered as a cluster within the plate */
.dts-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.draft-side.red .dts-header { flex-direction: row-reverse; }

.dts-crest {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* No plate around the crest — the Leaguepedia logos are transparent squares and
   read better floating on the panel (his request 2026-08-18). */
.dts-team-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.dts-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.draft-side.red .dts-id { align-items: center; }
.dts-name {
  font-family: 'Cinzel', var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--text);
}
.dts-name,
.draft-side.red .dts-name { text-align: center; }
.dts-recline {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.dts-wr-pct { font-size: 18px; font-weight: 800; font-family: var(--mono); }
.dts-rec    { font-size: 13.5px; font-weight: 600; color: var(--text-dim); font-family: var(--mono); }

/* Row 2: side records, each a column so a 👑 can sit under the better side */
.dts-row2 {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15.5px;
}
.draft-side.red .dts-row2 { justify-content: center; }
.dts-side-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dts-crown { font-size: 13px; line-height: 1; }
.dts-side-b  { color: #6ea8fe; font-weight: 700; }
.dts-side-r  { color: #ff7189; font-weight: 700; }
.dts-sep2    { color: var(--text-faint); }

/* Rows 3-6: the last-10 averages (time · drakes · kills · towers) */
.dts-time {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  /* High contrast on purpose — these were 12px dim gray, his top complaint. */
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 15px;
  color: var(--text);
}
.dts-time .dts-time-item { color: var(--text); font-weight: 600; }
/* Same vocabulary as the Head-to-Head O/U chips: ▲ over the line (red),
   ● around it (blue), ▼ under it (green). The band sets --ou on whichever
   element carries the class, so arrow and number stay in step. */
.dts-time .ou-hi { --ou: #fb7185; }
.dts-time .ou-md { --ou: #60a5fa; }
.dts-time .ou-lo { --ou: #4ade80; }
.dts-time .dts-time-item strong {
  color: var(--ou, var(--text));
  font-family: var(--mono); font-weight: 700; font-size: 17px;
}
.dts-time .dts-ou-sym {
  color: var(--ou, var(--text-dim));
  font-size: 12.5px; font-weight: 800; line-height: 1;
  margin-right: -2px;   /* the arrow hugs its number */
}
/* Printed only when a metric holds fewer than 10 games (partial drake/tower
   coverage), so the heading's "10" is never taken on faith. */
.dts-stat-n { font-size: 12.5px; color: var(--text-dim); font-family: var(--mono); }

/* Recent form: the W-L of the same last-10 window, first line under the heading.
   No label — the heading names the window, W/L name themselves. */
.dts-form {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 1px;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
}
.dts-form-w   { color: #4ade80; }
.dts-form-l   { color: #fb7185; }
.dts-form-sep { color: var(--text-faint); font-weight: 600; }

/* One heading over the four averages — the window is named once, not per row. */
.dts-stat-block { margin-top: 7px; }
.dts-stat-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-dim);
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
}

/* Stat rows in two columns: game time + drakes left, kills + towers right.
   The pair is sized to its content and centred as a block, so the four rows sit
   in the middle of the plate instead of stretching to both edges. */
.dts-stat-cols {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 26px;
}
.dts-stat-col { display: flex; flex-direction: column; min-width: 0; }
.dts-stat-col .dts-time { justify-content: flex-start; white-space: nowrap; }
.dts-item    { color: var(--text-dim); }
.dts-item strong { color: var(--text); font-family: var(--mono); font-weight: 600; }

/* Center the bans strip like the header (the extra .draft-side.red selectors
   outrank the right-aligned profile-page defaults without touching those pages) */
.draft-team-stats-panel .dts-bans-section { position: relative; }
.draft-team-stats-panel .dts-bans-title,
.draft-side.red .draft-team-stats-panel .dts-bans-title { text-align: center; }
.draft-team-stats-panel .dts-bans-label,
.draft-side.red .draft-team-stats-panel .dts-bans-label { text-align: center; }
.draft-team-stats-panel .dts-bans-champs,
.draft-side.red .draft-team-stats-panel .dts-bans-champs { justify-content: center; }

@media (max-width: 900px) {
  .dts-name  { font-size: 16px; }
  .dts-crest { width: 48px; height: 48px; }
  .dts-team-logo { width: 40px; height: 40px; }
}

/* Profile wrapper for bans-against (reuses dts-* classes) */
.profile-bans-against .dts-bans-section {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.profile-bans-against .dts-ban-item img { width: 36px; height: 36px; }
.profile-bans-against .dts-ban-pct      { font-size: 12px; }
.profile-bans-against .dts-bans-champs  { gap: 6px; flex-wrap: wrap; }

/* Banned against section */
.dts-bans-section {
  border-top: 1px solid var(--border);
  padding-top: 5px;
  margin-top: 1px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dts-bans-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-dim);
  font-weight: 700;
}
.draft-side.red .dts-bans-title { text-align: right; }
.dts-bans-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dts-bans-label {
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.draft-side.red .dts-bans-label { text-align: right; }
.over-champ-section {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.over-champ-count {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #cf5858;
  font-family: var(--mono);
  text-align: center;
}
.dts-bans-label.blue-lbl { color: #5b8dd9; }
.dts-bans-label.red-lbl  { color: #d95b5b; }
.dts-bans-champs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.draft-side.red .dts-bans-champs { justify-content: flex-end; }
.dts-ban-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.dts-ban-item img {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--border);
  object-fit: cover;
}
.dts-ban-pct {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text-dim);
  text-align: center;
}

.dts-dot-sep  { display: none; }

/* (The Trending Picks strip lived here — removed 2026-08-08.) */

/* Team stats card (used in team profile) */
.team-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.team-stat-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.team-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); }
.team-stat-value { font-size: 18px; font-weight: 700; font-family: var(--mono); color: var(--text); }

.draft-mode-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28);
}
.draft-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: 'Chakra Petch', var(--font);
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s;
}
.draft-mode-btn:hover  { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.draft-mode-btn.active {
  background: var(--gold);
  color: #04221d;
  font-weight: 700;
  box-shadow: 0 1px 8px rgba(45, 212, 191, 0.35);
}
.draft-mode-btn.active:hover { background: var(--gold); color: #04221d; }

/* Board — middle track collapsed: the sides sit close together with only
   their own inner padding between them (divider elements stay as empty
   grid items so auto-placement keeps blue in col 1 / red in col 3). */
.draft-board {
  display: grid;
  /* The middle track used to be 0 wide (it only carried the VS diamond). It now
     holds the Draft Win Rate box, which is sized to match the team plates on
     either side — see .draft-divider.has-ds below. */
  grid-template-columns: 1fr 470px 1fr;
  gap: 0;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Summary bar — spans all 3 columns, hidden until picks exist */
.draft-summary-row {
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.draft-summary-row.visible { display: flex; }

.dsr-title {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text);
}

.dsr-bar {
  display: flex;
  align-items: center;
}

.dsr-half {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dsr-half.blue { justify-content: flex-end; }
.dsr-half.red  { justify-content: flex-start; }

.dsr-vs {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  opacity: .4;
  padding: 0 14px;
  flex-shrink: 0;
}

.dsr-wr {
  font-size: 30px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--text);
}
.dsr-wr.wr-blue { color: #5b8dd9; }
.dsr-wr.wr-red  { color: #d95b5b; }
.dsr-wr.wr-high { color: var(--green); }
.dsr-wr.wr-low  { color: var(--red); }

.dsr-rec {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
}

/* Draft Success — isolated banner at the top (toggled via inline display) */
.draft-success-banner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 14px 28px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 0% 50%,   rgba(59,130,246,0.18), transparent 55%),
    radial-gradient(120% 160% at 100% 50%, rgba(244,63,94,0.18),  transparent 55%),
    linear-gradient(180deg, rgba(24,24,27,0.92), rgba(15,15,17,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
.draft-success-banner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, #3b82f6, transparent 40%, transparent 60%, #f43f5e);
  opacity: .7;
}

.dsb-side {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dsb-side.blue { justify-content: flex-end; }
.dsb-side.red  { justify-content: flex-start; }

.dsb-side-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 3px 9px;
  border-radius: 4px;
}
.dsb-side.blue .dsb-side-tag { background: rgba(59,130,246,0.16); color: #6ea8ff; border: 1px solid rgba(59,130,246,0.35); }
.dsb-side.red  .dsb-side-tag { background: rgba(244,63,94,0.16);  color: #ff7088; border: 1px solid rgba(244,63,94,0.35); }

.dsr-ds-val {
  font-size: 30px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
  letter-spacing: -0.5px;
}
.dsb-side.blue .dsr-ds-val { color: #6ea8ff; text-shadow: 0 0 18px rgba(59,130,246,0.5); }
.dsb-side.red  .dsr-ds-val { color: #ff7088; text-shadow: 0 0 18px rgba(244,63,94,0.5); }

.dsb-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 26px;
  flex-shrink: 0;
}
.dsb-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text);
}
.dsb-sub {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: .8;
}

/* ─── Board band: the view/stats control rail ─────────────────────────────
   Draft Success and Prediction no longer live here — they're per-side bars on
   the picks dashboard (.draft-metric-bar). The centre track is left in place
   so the rail keeps sitting in the left gap. */
.draft-metrics-band {
  grid-column: 1 / -1;
  /* Collapsed to zero height so the Draft Success box rises to sit flush under
     the team cards (no empty band row). The only child — the view controls — is
     floated out of flow into the empty left gutter beside the centred DS box. */
  position: relative;
  height: 14px;   /* small breathing gap between the team cards and the DS box */
  z-index: 3;
}
/* Side-by-side/Stacked sits in the left gutter. Pushed out to the board's own
   left edge on 2026-08-20 (his request) — it used to hug the Draft Win Rate box
   at left: 270px, and that box has moved up into the centre of the info row. */
.draft-view-controls {
  position: absolute;
  top: 50px;   /* was 22px + the "View" heading, which is gone */
  left: 20px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
/* Career/2026 in the Stacked view: the mirror of the view rail, in the right gap
   beside the Draft Win Rate box. (Side-by-side moves the node into the dashboard
   instead — see applyPicksView in app.js and the .pv-cols rules further down.) */
.draft-scope-controls {
  position: absolute;
  top: 50px;
  right: 270px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.draft-view-controls .draft-mode-toggle,
.draft-scope-controls .draft-mode-toggle { width: max-content; }
/* The rail reads as secondary controls — a step smaller than the board text. */
.draft-view-controls .draft-mode-btn,
.draft-scope-controls .draft-mode-btn { font-size: 11.5px; padding: 5px 14px; }
/* The view/stats controls and the pick board are only useful once both teams
   are chosen — hidden until then so the empty draft page stays clean (toggled
   by updateDraftReveal in app.js). */
.dcl-hidden { display: none !important; }

/* ─── Draft metric bars ───────────────────────────────────────────────────
   Each team's figure is pinned to its own end (over its tray) with the label
   centred between them. The two metrics encode differently on purpose:
   Draft Success = two INDEPENDENT win rates (they don't sum to 100), so each
   figure sits in its own side-coloured chip and there is no shared track.
   Prediction = a win share that DOES sum to 100, so it keeps the tug-of-war
   track (blue fills left, red right, brightest at the meeting point).
   Draft Success sits above the picks, Prediction below them, in both views. */
.draft-metric-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 8px 14px 9px;
  border-radius: 18px;   /* softer shell (his request 2026-08-18) */
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.10);
  /* Side blend over the dark base — blue bleeds in from the left edge, red from
     the right, fading out toward the centre (same tint hues as the team trays). */
  background:
    linear-gradient(90deg, rgba(59,130,246,0.24), rgba(59,130,246,0.05) 42%, rgba(244,63,94,0.05) 58%, rgba(244,63,94,0.24)),
    linear-gradient(180deg, rgba(24,24,27,0.94), rgba(13,13,16,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Figures at the track's ends, label dead-centre between them. */
.dmb-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.dmb-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.dmb-ico { font-size: 12.5px; line-height: 1; flex: none; }
.dmb-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.dmb-val {
  font-family: var(--mono);
  /* Compacted 21px → 17px (his request 2026-08-19); the whole Draft Win Rate
     shell came down with it — see .draft-metric-bar.ds below. */
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dmb-val.blue { color: var(--blue); justify-self: start; }
.dmb-val.red  { color: var(--red);  justify-self: end; }

/* Draft Success chips — independent figures, each boxed in its side's colour. */
/* Gradient border (his request 2026-08-18). A flat grey ring over the blue→red
   fill read as a mismatched outline, worst at the rounded corners. The border is
   transparent and PAINTED by a third background layer clipped to border-box, so
   the edge carries the same blue→neutral→red blend as the fill and the two can't
   disagree. The first two layers clip to padding-box so the fill stops where the
   ring begins — keep all three clips in step.
   Scoped to .ds on purpose: the .pred variants below set `background` with the
   SHORTHAND, which would reset background-clip and leave that bar's transparent
   border invisible. */
.draft-metric-bar.ds {
  padding: 9px 14px;   /* tightened from 13px 18px (2026-08-19) */
  border-color: transparent;
  /* The two halves are NOT symmetric in alpha, on purpose (2026-08-21). At an
     equal .24 the red half read hotter than the blue: warm saturated red
     advances against this navy ground while blue half-dissolves into it. Red is
     pulled back to .19 and blue pushed to .27 so the two sides carry the same
     apparent weight — matched by eye, not by number. */
  background-image:
    linear-gradient(90deg, rgba(59,130,246,0.27), rgba(59,130,246,0.05) 42%, rgba(244,63,94,0.05) 58%, rgba(244,63,94,0.19)),
    linear-gradient(180deg, rgba(24,24,27,0.94), rgba(13,13,16,0.94)),
    linear-gradient(90deg, rgba(96,165,250,0.70), rgba(255,255,255,0.13) 38%, rgba(255,255,255,0.13) 62%, rgba(251,113,133,0.62));
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 20px rgba(0,0,0,0.35);
}
/* The headline doubles as a shortcut to the Draft Analysis sub-tab. The 10s glow
   pulse that used to advertise that was removed at his request (2026-08-18); the
   ↗ arrow and the hover state still carry the affordance. */
.draft-metric-bar.ds .dmb-label {
  font-family: 'Chakra Petch', var(--font);
  /* Enlarged 11.5px → 14px (his request 2026-08-21). */
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--gold);
}
.draft-metric-bar.ds .dmb-head { cursor: pointer; border-radius: 6px; padding: 2px 6px; }
/* Link affordance: the ↗ arrow that lifts on hover (no underline). */
.dmb-link-arrow {
  font-size: 13px;
  line-height: 1;
  color: #7dd3fc;
  opacity: 0.75;
  transition: transform .15s ease, opacity .15s ease;
}
.draft-metric-bar.ds .dmb-head:hover .dmb-link-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}
.draft-metric-bar.ds .dmb-head:hover .dmb-label {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(45, 212, 191, 0.55);
}
#tab-draft.pv-cols #draftDsBar { max-width: 700px; }
.draft-metric-bar.ds .dmb-val {
  padding: 5px 10px 4px;
  border-radius: 10px;   /* rounded to sit inside the bar's 18px shell */
  border: 1px solid;
  /* No text-shadow (his request 2026-08-18) — the dark halo under the figures
     read as a glow now that the chip behind them is light. */
  text-shadow: none;
  /* Percentage on top, sample size centred underneath — a taller, narrower
     chip rather than the old figure + trailing count on one line. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* Both chips share a neutral dark shell — the side tint used to fight the figure
   for attention, and the number's own colour now carries the whole signal. The
   ring is the same padding-box/border-box trick as the bar itself: a soft top-lit
   edge that fades toward the bottom, so the chips read as inset glass rather
   than flat grey rectangles (his request 2026-08-18). */
.draft-metric-bar.ds .dmb-val.blue,
.draft-metric-bar.ds .dmb-val.red {
  border-color: transparent;
  /* Back to the dark shell (his request 2026-08-18) — the lighter greys tried
     in between washed the chips out. */
  background-image:
    linear-gradient(180deg, rgba(18,18,22,0.86), rgba(8,8,10,0.86)),
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 2px 8px rgba(0,0,0,0.28);
}
/* Value bands: 51+ green · 48–50.9 yellow · 47.9- red. Scoped at
   .draft-metric-bar.ds .dmb-val so they outrank the side-coloured
   `.dmb-val.blue/.red` base colour. */
.draft-metric-bar.ds .dmb-val.wr-green  { color: var(--green); }
.draft-metric-bar.ds .dmb-val.wr-yellow { color: #ffff00; }
.draft-metric-bar.ds .dmb-val.wr-red    { color: var(--red); }
/* Sample size behind Draft Success — kept so a small pool stays visible. */
.dmb-games { display: block; font-size: 9.5px; font-weight: 600; font-family: var(--mono); color: var(--text-dim); margin-top: 3px; letter-spacing: 0; text-shadow: none; }

/* Scope filters — the Draft Analysis filter bar (.dp-filter-btn) shrunk to fit
   inside the metric box. Sits ABOVE the figures and the label (his request
   2026-08-19); it's a sibling of .dmb-row, so DOM order is what puts it there
   and the flex-column parent grows to fit rather than crowding the figures. */
.ds-scope-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-bottom: 1px;
}
.ds-scope-btn {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  /* White, not the dim grey (his request 2026-08-21) — the unselected scopes
     were hard to read against the dark bar. The active pill keeps its fill. */
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 11px;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.45;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ds-scope-btn:hover  { color: #fff; border-color: var(--gold); }
.ds-scope-btn.active { background: var(--gold); color: #08110f; border-color: var(--gold); }

/* Leader emphasis: the winning figure glows faintly, the trailing one recedes
   a step — the bar itself stays neutral so the track carries the comparison. */
.draft-metric-bar.lead-blue .dmb-val.blue { text-shadow: 0 0 16px rgba(91,156,248,0.50); }
.draft-metric-bar.lead-blue .dmb-val.red  { opacity: 0.85; }
.draft-metric-bar.lead-red  .dmb-val.red  { text-shadow: 0 0 16px rgba(251,90,113,0.50); }
.draft-metric-bar.lead-red  .dmb-val.blue { opacity: 0.85; }
/* On the DS bar the leader gets NO glow (his request 2026-08-18) — this rule
   used to re-add a currentColor halo and outranked the `text-shadow: none`
   above, which is why the green/yellow figures still looked lit. The trailing
   side's opacity step still carries the comparison. */
.draft-metric-bar.ds.lead-blue .dmb-val.blue,
.draft-metric-bar.ds.lead-red  .dmb-val.red { text-shadow: none; }

/* Columns view — the bars span all three tracks; trays sit on the middle row.
   Sized via max-width + auto margins ONLY: a width/min-width here feeds back
   into the dashboard grid's column sizing and blows the middle gap apart. */
#tab-draft.pv-cols .draft-metric-bar { max-width: 640px; margin-left: auto; margin-right: auto; }
#tab-draft.pv-cols #draftDsBar                                    { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
#tab-draft.pv-cols .draft-side[data-side="blue"].draft-picks-row  { grid-column: 1; grid-row: 2; }
#tab-draft.pv-cols .draft-center-roles                            { grid-column: 2; grid-row: 2; }
/* Career/2026 shares the centre column's cell with the role tags, pinned to the
   top of it — i.e. the band the team-WR pills occupy on either side, directly
   above the TOP tag (the tags themselves start below it via their 64px margin).
   Career sits over 2026, so the toggle turns into a column here. */
/* Only if the toggle is INSIDE the dashboard. It no longer is in either view
   (see applyPicksView) — kept, scoped, so putting it back is a one-line change
   rather than a re-derivation of the grid placement. */
#tab-draft.pv-cols .draft-picks-dashboard > .draft-scope-controls {
  position: static;   /* the gutter placement is absolute; here the grid places it */
  grid-column: 2; grid-row: 2;
  align-self: start;
  justify-self: center;
  width: auto;
  align-items: center;
  /* Nudged down off the pills' top edge (his request 2026-08-19) — 5px against
     the 52px band, so it sits clear of the TOP tag. Knob to adjust. */
  margin: 5px 0 0;
}
#tab-draft.pv-cols .draft-picks-dashboard > .draft-scope-controls .draft-mode-toggle { flex-direction: column; }
/* The stacked pair has to fit the pill band it shares with the role tags:
   2 buttons + the toggle's own 3px gap, padding and border ≈ 42px against the
   52px the tags now leave free (the band tracks the pills). Don't grow
   past that, or Career/2026 rides over the TOP tag. */
#tab-draft.pv-cols .draft-picks-dashboard > .draft-scope-controls .draft-mode-btn {
  width: 100%;
  text-align: center;
  font-size: 9.5px;
  padding: 2px 10px;
}
#tab-draft.pv-cols .draft-side[data-side="red"].draft-picks-row   { grid-column: 3; grid-row: 2; }
/* The local-only Prediction plate takes row 2, directly under Draft Success,
   and pushes the trays down a row. Keyed on :has() rather than a body class:
   on a public host the node is REMOVED, these rules stop matching, and the
   two-row layout above applies unchanged with no empty track left behind. */
#tab-draft.pv-cols #draftPredBar { grid-column: 1 / -1; grid-row: 2; }
#tab-draft.pv-cols .draft-picks-dashboard:has(> #draftPredBar) .draft-side[data-side="blue"].draft-picks-row,
#tab-draft.pv-cols .draft-picks-dashboard:has(> #draftPredBar) .draft-center-roles,
#tab-draft.pv-cols .draft-picks-dashboard:has(> #draftPredBar) .draft-scope-controls,
#tab-draft.pv-cols .draft-picks-dashboard:has(> #draftPredBar) .draft-side[data-side="red"].draft-picks-row { grid-row: 3; }

/* Stacked view — centred bars above and below both teams' rows, at half the
   dashboard's 1220px cap to match the columns view's proportion. */
#tab-draft:not(.pv-cols) .draft-metric-bar {
  max-width: 610px;
  margin: 6px auto;
  padding: 8px 16px 10px;
}
#tab-draft:not(.pv-cols) .dmb-val { font-size: 19px; }
/* Stacked view only: drop the pick board clear of the Draft Win Rate box —
   the lane titles were crowding it (his request 2026-08-18). */
#tab-draft:not(.pv-cols) #draftDsBar { margin-bottom: 30px; }
/* Stacked view: the Side-by-side/Stacked toggle rides the role-badge row, a
   little in from the board's left edge (his request 2026-08-20). The band it is
   positioned in is unzoomed, so these are real px against the dashboard's
   1.265-zoomed rows. */
#tab-draft:not(.pv-cols) .draft-view-controls { top: 8px; left: 46px; }
/* The role-badge row it used to ride was removed (2026-08-21), so the blue picks
   row would rise under the toggle. Drop the rows — not the toggle, which keeps
   its position — clear of it. In dashboard px, so the 1.265 zoom scales it. */
#tab-draft:not(.pv-cols) .draft-side[data-side="blue"].draft-picks-row { margin-top: 26px; }
/* Side-by-side view: centred under the BLUE team plate instead. The band spans
   the whole board (grid-column: 1 / -1), so the blue column is
   (board - centre track) / 2 wide — box that, centre inside it, and the toggle
   lands on the plate's midline (the plate fills its column). Keep the 470px in
   step with .draft-board's middle track. */
#tab-draft.pv-cols .draft-view-controls {
  left: 0;
  width: calc((100% - 470px) / 2);
  align-items: center;
  /* Lifted from the inherited 50px (his request 2026-08-21): at 50px the toggle
     landed on the pick card's Options button below it. */
  top: 24px;
}

/* Side */
.draft-side {
  display: flex;
  flex-direction: column;
  padding: 0 12px 0;
  gap: 6px;
}
.draft-side.red { align-items: flex-end; }
/* Info-row team plates hug the CENTRE divider so the two cards sit close together
   for an easy head-to-head read (blue → right edge of its half, red → left edge).
   Scoped to :not(.draft-picks-row) so the pick trays below keep their own layout. */
.draft-side[data-side="blue"]:not(.draft-picks-row) { align-items: flex-end; }
.draft-side.red:not(.draft-picks-row) { align-items: flex-start; }

.draft-side-head {
  display: flex;
  align-items: center;
  justify-content: center;   /* the side badge alone now — the picker moved into the plate */
  gap: 10px;
  margin-bottom: 2px;
  /* Same box as .draft-team-stats-panel below (width + cap), so the two share
     an edge under the side's align-items and the centred badge + select land
     on the card's midline. Keep this max-width in step with the panel's. */
  width: 100%;
  max-width: 560px;
}
.draft-side-head.red { flex-direction: row-reverse; }

.draft-side-badge {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 3px;
}
.draft-side-badge.blue { background: #0e1a3a; color: #5b8dd9; border: 1px solid #1e2a5a; }
.draft-side-badge.red  { background: #2e0e0e; color: #d95b5b; border: 1px solid #4e1e1e; }

.draft-team-sel {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  flex: 1;
  max-width: 220px;
  transition: border-color .15s;
}
.draft-team-sel:focus { border-color: var(--gold-dim); }

/* Custom team dropdown — native <select>/<option> can't render logos or divider
   lines, so the native select is kept hidden as the state holder and this styled
   menu overlays it. */
/* inline-flex so the trigger hugs its content (compact) instead of stretching to
   fill the head — matches the red side and avoids a wide gap before the caret. */
.cs-dd { position: relative; display: inline-flex; max-width: 280px; min-width: 180px; vertical-align: middle; }
.cs-dd-native { display: none !important; }

.cs-dd-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: rgba(26, 26, 26, 0.65);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 11px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s;
}
.cs-dd-trigger:hover,
.cs-dd.open .cs-dd-trigger { border-color: var(--gold-dim); }

.cs-dd-trigger-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-dd-trigger-label.placeholder { color: var(--text-dim); }

.cs-dd-trigger-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.cs-dd-caret { flex-shrink: 0; font-size: 12px; color: var(--text-dim); }

.cs-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 100%;
  width: max-content;
  max-width: 300px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  display: none;
}
.cs-dd.open .cs-dd-menu { display: block; }
/* Red side: anchor to the right so the menu grows inward, staying in the panel. */
.draft-side.red .cs-dd-menu { left: auto; right: 0; }

.cs-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);   /* line separating the options */
}
.cs-dd-item:last-child { border-bottom: none; }
.cs-dd-item:hover,
.cs-dd-item.active { background: rgba(255, 255, 255, 0.07); }
.cs-dd-item.selected { background: rgba(20, 184, 166, 0.16); }
.cs-dd-item.placeholder { color: var(--text-dim); }

.cs-dd-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-dd-logo {                                /* small logo, sits after the name */
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.draft-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin: 0 0 2px 4px;
  font-weight: 700;
}

/* Divider */
.draft-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
/* Centre column of the info row: the Draft Win Rate box sits here, vertically
   centred against the team plates on either side (align-items: center above).
   `align-self: start` + margin-top keeps it level with the PLATES rather than
   with the whole side column, which also carries the team dropdown above them. */
.draft-divider.has-ds {
  /* A column: the Draft Win Rate box, then a gap, then Career/2026 under it.
     The box fills the column's height (flex: 1 on the bar below), so it matches
     the team plates beside it; the bar's top margin clears the team dropdown
     row, which shares this grid row with the plates. */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  min-width: 0;
}
/* Career/2026 under the box. The Stacked view's absolute gutter placement and
   the columns view's grid placement both have to be undone here. */
#tab-draft .draft-divider.has-ds > .draft-scope-controls {
  position: static;
  width: auto;
  margin: 16px 0 0;   /* pulled back up toward the box (2026-08-20) */
  align-items: center;
}
/* Career BESIDE 2026 again (2026-08-20), at the size the stacked pair had —
   each button keeps the same 116px box, so neither is sized by its own label. */
#tab-draft .draft-divider.has-ds > .draft-scope-controls .draft-mode-toggle {
  flex-direction: row;
  width: auto;
}
#tab-draft .draft-divider.has-ds > .draft-scope-controls .draft-mode-btn {
  width: 116px;
  text-align: center;
  font-size: 11.5px;
  padding: 5px 14px;
}
.draft-divider.has-ds > .draft-metric-bar {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
/* Narrow shell: label over the two figures instead of one wide line, so the box
   fits the 300px column without the team plates giving up more width. */
.draft-divider.has-ds .dmb-row {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head head"
    "blue red";
  gap: 9px 8px;
}
.draft-divider.has-ds .dmb-head      { grid-area: head; }
.draft-divider.has-ds .dmb-val.blue  { grid-area: blue; justify-self: center; }
.draft-divider.has-ds .dmb-val.red   { grid-area: red;  justify-self: center; }
/* Scope chips (2026 · Last 90D · league) wrap onto two lines at this width. */
.draft-divider.has-ds .ds-scope-bar { flex-wrap: wrap; justify-content: center; }
/* ID-prefixed so these beat the per-view rules further down (#tab-draft.pv-cols
   / #tab-draft:not(.pv-cols)), which size and space the bar for its old home
   inside the picks dashboard — including a 30px bottom margin that would knock
   it off the plates' centre line, and the dashboard's 1.265 zoom, which no
   longer reaches it here. */
#tab-draft .draft-divider.has-ds > .draft-metric-bar {
  /* Narrower than the 470px column (2026-08-20) — the extra width goes back to
     the gap between the box and the team plates. */
  width: 360px;
  max-width: 100%;
  align-self: center;
  /* The top offset is also the box's height knob: it takes the rest of the
     column (flex: 1), so pushing the top down makes it shorter as well. */
  margin: 56px 0 0;
  padding: 20px 22px;
  /* Fills the height the plates set for this row, so the three boxes read as one
     band; the figures below grow to use it. */
  flex: 1 1 auto;
  justify-content: center;
  gap: 18px;
}
#tab-draft .draft-divider.has-ds .dmb-val      { font-size: 27px; }
#tab-draft .draft-divider.has-ds .dmb-games    { font-size: 12px; margin-top: 5px; }
#tab-draft .draft-divider.has-ds .dmb-label    { font-size: 18px; letter-spacing: 1.3px; }
#tab-draft .draft-divider.has-ds .dmb-link-arrow { font-size: 16px; }
#tab-draft .draft-divider.has-ds .dmb-row      { gap: 16px 14px; }
#tab-draft .draft-divider.has-ds .ds-scope-btn { font-size: 13px; padding: 5px 15px; }
.draft-vs { display: none; }

/* Bans row */
.draft-bans-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.draft-side.red .draft-bans-row { justify-content: flex-end; }

.draft-ban-slot {
  position: relative;
}
.draft-ban-slot .draft-champ-input {
  width: 72px;
  padding: 4px 6px;
  font-size: 12px;
}
.draft-ban-portrait {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: none;
  object-fit: cover;
  border: 1px solid #5a2020;
}
.draft-ban-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #1a1010;
  border: 1px dashed #3a2020;
}

/* Picks dashboard — a shared lane-header row over two full-width team rows,
   each holding 5 equal cards (TOP · JUNGLE · MID · BOT · SUPPORT).
   --pick-gap / --tray-pad keep the header columns aligned with the cards:
   card inset from board edge = .draft-side padding (12) + tray border (1) + tray pad. */
#tab-draft .draft-board { --pick-gap: 20px; --tray-pad: 10px; --team-col: 96px; --total-col: 200px; }

/* Dashboard wrapper spans the board; stacks the lane header + two team rows.
   Switches to a two-column side-by-side layout under #tab-draft.pv-cols. */
.draft-picks-dashboard {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
/* Centre role column shows only in the side-by-side (columns) view. */
.draft-center-roles { display: none; }

/* No role tags anywhere in the picks dashboard (his request 2026-08-21): the
   shared lane header was removed outright, and the per-card badge stays hidden. */
#tab-draft .draft-pick-head .role-badge { display: none; }

.draft-picks-row + .draft-picks-row { margin-top: 8px; }
/* Row = tray (5 cards) + a standalone Team-WR box to its right (stacked view). */
#tab-draft .draft-picks-row { flex-direction: row; align-items: center; gap: var(--pick-gap); }

.draft-picks-col {
  display: grid;
  grid-template-columns: var(--team-col) repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--pick-gap);
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: var(--tray-pad);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* Darker navy (his request 2026-08-21): the base was a mid slate-blue at 55%
     over the page, and the corner wash sat at .34 — both dropped so the tray
     reads as deep blue and the cards on it carry the contrast. */
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10px),
    radial-gradient(120% 150% at 0% 0%, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0) 70%),
    linear-gradient(180deg, rgba(16, 26, 48, 0.80), rgba(11, 19, 36, 0.82));
}
.draft-side.red .draft-picks-col {
  background:
    repeating-linear-gradient(-115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10px),
    radial-gradient(120% 90% at 100% 0%, rgba(244, 63, 94, 0.14), rgba(244, 63, 94, 0) 55%),
    linear-gradient(180deg, rgba(45, 37, 41, 0.4), rgba(37, 31, 34, 0.45));
}

/* ── Side-by-side (columns) view — REDESIGNED 2026-07-13 ──────────────────
   Goal: a clean lane-vs-lane comparison. Each pick is ONE flat, fixed-height
   card laid out on a single CSS grid — no nested flex boxes negotiating width,
   so nothing can drift. Both teams use identical fixed-height rows, so blue TOP
   sits at exactly the same height as red TOP (and so on down the roster) for an
   easy head-to-head read. Blue reads portrait→stats left-to-right; red mirrors. */
#tab-draft.pv-cols .draft-picks-dashboard {
  /* Whole-board scale (his request 2026-08-05): DS bar + WR pills + trays +
     role badges all render at 115%, like browser zoom — one knob, every
     internal alignment invariant untouched. Stepped up to 126.5% on 2026-08-19
     ("another 110% on top"), which is 1.15 x 1.1; keep it in sync with the
     Stacked view's copy below. */
  zoom: 1.265;
  /* Shared by the two pick trays AND the centre role column, which are siblings
     — declaring it here is what keeps the role tags aligned to their lanes. */
  --pick-row-h: 86px;    /* [name / portrait / player] | [WR / record / games] */
  display: grid;
  /* [ blue side ] [ centre role column ] [ red side ]. Each side = 202px card
     tray + Total-WR box + inner gap; the role tags live in the centre column so
     the cards no longer carry their own. */
  /* The Total-WR box no longer sits beside the tray (it's a pill above it), so
     each side column is just the tray width. */
  /* Widened 202 -> 288px on 2026-08-20: the board had free width on both sides
     and the card was stacking what now sits on one line. Height is unchanged
     (--pick-row-h above) - the extra width is what pays for the bigger portrait
     and type below. */
  /* The middle track was ZERO wide for a day (the tag straddled the seam), but
     an overflowing plate sat on top of the red side's record line and clipped
     it. It has its own narrow lane again — wide enough for the tag, narrow
     enough that the teams still read as one board. Trays 288 -> 248px and the
     lane 46 -> 40px on 2026-08-21 (compaction pass). */
  grid-template-columns:
    minmax(0, 248px)
    40px
    minmax(0, 248px);
  justify-content: center;
  gap: 0px;   /* trays pulled in tight around the role column — pulled in
                 again per his follow-up (2026-08-18); adjust from here if needed */
  align-items: start;
}
/* Centre role column: one short tag per lane, vertically centred on its row so
   it sits in the gap exactly between the two teams' cards. Row rhythm must match
   the trays exactly (same row height, same gap, same vertical padding) or the
   tags drift out of their lanes — keep these three numbers in sync with
   .draft-picks-col / .draft-pick-slot below. */
#tab-draft.pv-cols .draft-center-roles {
  display: grid;
  grid-auto-rows: var(--pick-row-h);
  gap: 4px;
  padding: 5px 0;
  place-items: center;
  align-content: start;
  /* Its own 46px track: the tag centres in the gap between the trays and can no
     longer overlap either card's text. */
  width: 100%;
  position: relative;
  z-index: 6;
  /* Was 52px — the band the Total-WR pill occupied above each tray. The pill is
     removed now, so the trays start at their first pick row and the tags sit
     level with it. */
  margin-top: 0;
}
#tab-draft.pv-cols .draft-center-roles .role-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; padding: 2px 6px; letter-spacing: .4px;
  /* Reads as a plate laid over the seam, like the reference board: its own
     ground + a hairline, so neither card's fill shows through behind it. */
  border-radius: 7px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
#tab-draft.pv-cols .draft-team-id { display: none; }
#tab-draft.pv-cols .draft-side { align-self: start; }
#tab-draft.pv-cols .draft-side.red.draft-picks-row { align-items: stretch; }
#tab-draft.pv-cols .draft-picks-row { margin-top: 0; width: 100%; }

/* Tray = 5 identical fixed-height cards; identical rows on both teams = lanes
   line up across the middle.

   --pick-row-h is sized to the FILLED card: champion-name bar (~15px) + 2px +
   portrait (44px) + 2px + player line (~15px) + 6px card padding ≈ 84px, so the
   row is 86px. (100 -> 86 on 2026-08-21, with the tray width and the type, when
   he asked for the whole board to come in.) The stat column (chip / record /
   games) is shorter and centres itself against it. Raise this number before
   growing the portrait or either name. */
#tab-draft.pv-cols .draft-picks-col {
  grid-template-columns: 1fr;
  grid-auto-rows: var(--pick-row-h);
  gap: 4px;
  padding: 5px;
}
/* Both trays keep their full rounding again now that a gutter separates them. */
#tab-draft.pv-cols .draft-side[data-side="blue"] .draft-picks-col { padding-right: 4px; }
#tab-draft.pv-cols .draft-side[data-side="red"]  .draft-picks-col { padding-left: 4px; }
/* (The cards' seam corners were squared off while the trays touched; the role
   tag has its own gutter again, so every corner is back to the plate's 12px.) */

/* Flatten head + body so their children land directly on the card grid. */
#tab-draft.pv-cols .draft-pick-head,
#tab-draft.pv-cols .draft-pick-body { display: contents; }

/* The card, v5 (his request 2026-08-20): same idea as v4 - identity on the
   OUTER edge, stats facing the CENTRE divider - but re-cut to spend width
   instead of height, because the card's height is fixed and v4 was stacking
   three short lines in each column.

     v4 (tall):  [ name / portrait / player ]   [ WR / record / games ]
     v5 (wide):  [ name              ]  [ WR             ]
                 [ portrait + player ]  [ record + games ]

   The identity column runs the champion name across the top and puts the
   portrait BESIDE the player name underneath it; the stat column drops from
   three lines to two by setting the record and the game count on one line. Two
   rows instead of three in both columns is what buys the bigger portrait
   (38 -> 50px) and the larger type at the SAME --pick-row-h. */
#tab-draft.pv-cols .draft-pick-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "name stats"
    "id   stats";
  align-items: center;
  align-content: center;
  column-gap: 8px;
  row-gap: 2px;
  height: var(--pick-row-h);
  padding: 3px 8px;
}
#tab-draft.pv-cols .draft-side.red .draft-pick-slot {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "stats name"
    "stats id";
}
/* Player name UNDER the portrait (his request 2026-08-21), so the identity
   column reads name -> portrait -> player top to bottom. All three are CENTRED
   in that column on both sides (2026-08-21), so the stack sits on one axis
   instead of leaning to the card's outer edge. */
#tab-draft.pv-cols .draft-pick-idcol {
  grid-area: id;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
/* Short bar, centred over the portrait under it (2026-08-21) — full-column
   width made the input's underline run the whole card. 118px still clears the
   longest champion name at this size ("Twisted Fate"); widen it and the rule
   starts to overhang the stack again. */
#tab-draft.pv-cols .draft-pick-head .draft-autocomplete-wrap {
  grid-area: name;
  width: 118px;
  max-width: 100%;
  min-width: 0;
  justify-self: center;
}
#tab-draft.pv-cols .draft-pick-slot .role-badge { display: none; }  /* moved to centre column */
/* Per-role plate, redesigned (his request 2026-08-21). The old one was a heavy
   card — opaque fill, hard ring, 3px coloured spine — competing with the tray it
   sits on. This one is a LIGHT plate: a barely-there white wash lifting it off
   the tray's team colour, one hairline, a soft top highlight, and the side
   accent as a 2px spine on the OUTER edge only. Everything is #tab-draft-
   prefixed to outrank the ID-carrying base rules further down the file. */
#tab-draft.pv-cols .draft-pick-slot,
#tab-draft.pv-cols .draft-side.red .draft-pick-slot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
#tab-draft.pv-cols .draft-pick-slot            { border-left: 2px solid rgba(96, 165, 250, 0.45); }
#tab-draft.pv-cols .draft-side.red .draft-pick-slot {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  border-right: 2px solid rgba(251, 113, 133, 0.45);
}
/* Filled = the plate lights up: brighter spine, a touch more fill. */
#tab-draft.pv-cols .draft-pick-slot.has-pick {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  border-left-color: rgba(96, 165, 250, 0.95);
}
#tab-draft.pv-cols .draft-side.red .draft-pick-slot.has-pick {
  border-left-color: rgba(255, 255, 255, 0.09);
  border-right-color: rgba(251, 113, 133, 0.95);
}
/* Typing in the lane: the hairline brightens all the way round, no colour shift
   (the spine already says which side it is). */
#tab-draft.pv-cols .draft-pick-slot:focus-within,
#tab-draft.pv-cols .draft-side.red .draft-pick-slot:focus-within {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.28);
}
#tab-draft.pv-cols .draft-pick-slot:focus-within { border-left-color: rgba(96, 165, 250, 0.95); }
#tab-draft.pv-cols .draft-side.red .draft-pick-slot:focus-within {
  border-left-color: rgba(255, 255, 255, 0.22);
  border-right-color: rgba(251, 113, 133, 0.95);
}
/* Centred in its bar, which is itself centred over the portrait. */
#tab-draft.pv-cols .draft-champ-input { text-align: center; }

/* Sizes: portrait, name/player, the stat block. */
#tab-draft.pv-cols .draft-pick-portrait,
#tab-draft.pv-cols .draft-pick-placeholder { width: 44px; height: 44px; border-radius: 10px; }
#tab-draft.pv-cols .draft-role-icon { width: 26px; height: 26px; }
/* Champion and player names share one size, the rounded face and one grey (his
   request 2026-08-18) — kept light enough to stay high-contrast on the card. */
#tab-draft.pv-cols .draft-champ-input,
#tab-draft.pv-cols .draft-player-name {
  font-family: var(--font-round);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  color: #c2cad6;
}
/* display:block matters as much as the padding: as an inline-block the input
   sat on a line box that added ~8px of descender space under it — dead height
   inside a card whose whole point is being short. */
#tab-draft.pv-cols .draft-champ-input { display: block; padding: 0 0 1px; }
#tab-draft.pv-cols .draft-pick-who { gap: 2px; min-width: 0; max-width: 100%; justify-content: center; }

/* Stat block: three centred lines — win-rate chip, W-L record, games. Laid out
   by grid AREA rather than source order, so the markup can keep its
   games → record → WR → KDA → DMG order untouched. */
/* Three rows (v7): chip, then the record, then the game count on its own line
   under it — tight gaps, since the row height pays for them. */
#tab-draft.pv-cols .draft-pick-stats {
  grid-area: stats;
  grid-template-columns: auto;
  grid-template-areas:
    "wr"
    "rec"
    "games";
  align-content: center;
  justify-content: center;
  justify-items: center;
  gap: 2px;
}
#tab-draft.pv-cols .draft-pick-stats.visible { display: grid; }
#tab-draft.pv-cols .dps-wr {
  grid-area: wr;
  font-size: 16.5px; /* 14.5 -> 17 (v5) -> 15 (compaction) -> 16.5px, +1.5 on
                        every figure in the card (his request 2026-08-21) */
  line-height: 1.2;
  padding: 2px 9px;
  /* Rounded again (his request 2026-08-18). This OVERRIDES the base .dps-wr
     radius, so it has to be set here or this view keeps whatever it says. */
  border-radius: 12px;
  margin-bottom: 1px;   /* a touch more air under the chip than between the two
                           lines below it (the grid gap is uniform) */
}
#tab-draft.pv-cols .dps-record { grid-area: rec;   font-size: 13px; line-height: 1.12; }
#tab-draft.pv-cols .dps-games  { grid-area: games; font-size: 13px; line-height: 1.12; }
/* The count is back on its own line, so it drops the inline separator. */
#tab-draft.pv-cols .dps-games::before { content: none; }
#tab-draft.pv-cols .dps-kda,
#tab-draft.pv-cols .dps-dmg { display: none; }

/* ── Compact stacked (rows) view — smaller cards, portraits, and stats.
   Scoped to :not(.pv-cols) so the Side-by-side view keeps its own sizing. ── */
#tab-draft:not(.pv-cols) .draft-board {
  --pick-gap: 10px; --tray-pad: 8px; --team-col: 76px; --total-col: 168px;
}
/* Cap the dashboard so the five 1fr cards hug their content instead of
   stretching across the whole board; the lane header caps with it. */
#tab-draft:not(.pv-cols) .draft-picks-dashboard {
  /* Same whole-board scale the Side-by-side view uses, so Stacked no longer
     reads a size smaller — and the Draft Win Rate bar, which lives inside the
     dashboard, matches across the two views (his request 2026-08-18). */
  zoom: 1.265;
  max-width: 1220px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#tab-draft:not(.pv-cols) .draft-pick-slot { padding: 4px 9px; gap: 2px; }
#tab-draft:not(.pv-cols) .draft-pick-body { gap: 10px; }
#tab-draft:not(.pv-cols) .draft-pick-idcol { gap: 3px; }
#tab-draft:not(.pv-cols) .draft-pick-portrait,
#tab-draft:not(.pv-cols) .draft-pick-placeholder { width: 46px; height: 46px; }
#tab-draft:not(.pv-cols) .draft-role-icon { width: 26px; height: 26px; }
#tab-draft:not(.pv-cols) .draft-pick-head .draft-autocomplete-wrap { width: 102px; }
#tab-draft:not(.pv-cols) .draft-champ-input { font-size: 13.5px; }
#tab-draft:not(.pv-cols) .draft-player-name { font-size: 12px; }
#tab-draft:not(.pv-cols) .draft-pick-stats { gap: 1px; }
#tab-draft:not(.pv-cols) .dps-games,
#tab-draft:not(.pv-cols) .dps-record,
#tab-draft:not(.pv-cols) .dps-kda,
#tab-draft:not(.pv-cols) .dps-dmg { font-size: 13px; }
#tab-draft:not(.pv-cols) .dps-wr { font-size: 17px; }

/* Stacked view only: drop the KDA line and park the game count on the record
   row, right after the losses — two lines instead of four (his request). */
#tab-draft:not(.pv-cols) .draft-pick-stats.visible {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "rec games"
                       "wr  wr";
  column-gap: 7px;
  justify-items: start;
  align-items: center;
}
#tab-draft:not(.pv-cols) .dps-record { grid-area: rec; }
#tab-draft:not(.pv-cols) .dps-games  { grid-area: games; }
#tab-draft:not(.pv-cols) .dps-wr     { grid-area: wr; }
#tab-draft:not(.pv-cols) .dps-kda    { display: none; }
#tab-draft:not(.pv-cols) .draft-picks-row + .draft-picks-row { margin-top: 6px; }
#tab-draft:not(.pv-cols) .draft-team-total { padding: 10px 8px; gap: 3px; }
#tab-draft:not(.pv-cols) .dtt-label { font-size: 11.5px; gap: 4px; }
#tab-draft:not(.pv-cols) .dtt-logo { width: 15px; height: 15px; }
#tab-draft:not(.pv-cols) .dtt-wr { font-size: 24px; }
#tab-draft:not(.pv-cols) .dtt-rec { font-size: 12.5px; }
#tab-draft:not(.pv-cols) .draft-team-id-logo { width: 44px; height: 44px; }
#tab-draft:not(.pv-cols) .draft-team-id-name { font-size: 12px; }

/* Stacked view — swap sides: the standalone Total-WR box moves to the LEFT and
   the team logo moves to the RIGHT end of the tray (a clean mirror of both the
   picks row and the lane header). Each element keeps its own styling — only the
   positions swap. `order` handles the flex reordering; flipping the grid's narrow
   column to the end moves the logo/spacer there. Scoped to :not(.pv-cols) so the
   Side-by-side view is untouched. */
#tab-draft:not(.pv-cols) .draft-team-total       { order: -1; }
#tab-draft:not(.pv-cols) .draft-picks-col { grid-template-columns: repeat(5, 1fr) var(--team-col); }
#tab-draft:not(.pv-cols) .draft-team-id     { order: 1; }

/* Team badge at the start of each picks row (logo over team name). */
.draft-team-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 2px;
  text-align: center;
  min-width: 0;
}

/* WR% stacked over the W-L record (his request 2026-08-18). In the stacked view
   the pill is already a column, so this just groups two of its children. */
.dtt-figs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.12;
}

/* Combined team win-rate — a standalone box to the RIGHT of each team's tray. */
.draft-team-total {
  flex: 0 0 var(--total-col);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 20, 24, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.2);
}
.draft-team-total.visible { display: flex; }
/* REMOVED 2026-08-20 (his request): the per-team total-WR pill is gone from both
   views. The element and its writer (paintTeamTotals in app.js) are left in
   place — only the box is hidden — so it can be brought back by deleting this
   one rule. The pill's reserved band goes with it: see .draft-center-roles'
   margin-top below, and the Career/2026 toggle, which used to share that band
   in the columns view and now lives in the right gutter for both views. */
.draft-team-total,
.draft-team-total.visible { display: none !important; }
/* Side-by-side (2026-08-05, his request): the Total-WR box moved from the OUTER
   edges to ABOVE each team's tray, as one compact horizontal pill — label · % ·
   record on a single line. The rows stack vertically; the slot is reserved even
   before a team is chosen (visibility, not display) so the trays never jump and
   the centre role badges keep their fixed offset below. */
#tab-draft.pv-cols .draft-picks-row,
#tab-draft.pv-cols .draft-picks-row:not(.red) { flex-direction: column; align-items: stretch; gap: 0; }
/* The pill spans the tray and mirrors ONE pick card's column geometry — crest
   over the portrait column, figures over the stat column — so the team's total
   WR% lands in the same vertical line as the five cards' win-rate chips below
   it (his request 2026-08-19). Keep these three numbers equal to the card's:
   the 78px name/portrait column, the 10px column gap, and the card padding
   plus the tray's own 6px (6+6 inner / 8+6 outer). */
#tab-draft.pv-cols .draft-team-total {
  display: grid;
  visibility: hidden;
  order: -1;
  flex: 0 0 auto;
  align-self: stretch;
  grid-template-columns: 78px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  justify-items: center;
  /* WR% + record stack: 56px → 46px → 38px → 44px, all on 2026-08-19. Whenever
     this changes, .draft-center-roles' margin-top must follow (pill + 8px
     margin), or the role tags drift off their lanes. */
  height: 44px;
  padding: 0 14px 0 12px;
  margin-bottom: 8px;
  border-radius: 999px;
}
/* Red mirrors the card: figures first, crest on the outer edge. */
#tab-draft.pv-cols .draft-side[data-side="red"] .draft-team-total {
  grid-template-columns: minmax(0, 1fr) 78px;
  padding: 0 12px 0 14px;
}
#tab-draft.pv-cols .draft-side[data-side="red"] .draft-team-total .dtt-label { order: 2; }
#tab-draft.pv-cols .draft-team-total.visible { visibility: visible; }
/* The label is just the team logo now (no text) — 32→42px on 2026-08-18 to
   match the taller pill, then 34→27→30px on 2026-08-19 as the pill was
   compacted; it rides the card's 78px portrait column, so it can grow to
   roughly the 38px portrait below it before it looks crowded. */
#tab-draft.pv-cols .draft-team-total .dtt-logo { width: 30px; height: 30px; }
/* Side identity, matching the trays below: a soft side-coloured wash that fades
   into the dark base, plus a tinted border (same hues as the tray gradients and
   the Draft Success chips). */
#tab-draft.pv-cols .draft-side[data-side="blue"] .draft-team-total {
  border-color: rgba(91, 156, 248, 0.38);
  background:
    radial-gradient(120% 170% at 50% 0%, rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0) 75%),
    linear-gradient(180deg, rgba(30, 44, 72, 0.60), rgba(20, 24, 34, 0.60));
}
#tab-draft.pv-cols .draft-side[data-side="red"] .draft-team-total {
  border-color: rgba(251, 90, 113, 0.38);
  background:
    radial-gradient(120% 170% at 50% 0%, rgba(244, 63, 94, 0.20), rgba(244, 63, 94, 0) 75%),
    linear-gradient(180deg, rgba(45, 31, 36, 0.60), rgba(30, 22, 26, 0.60));
}
#tab-draft.pv-cols .dtt-wr    { font-size: 15px; }
#tab-draft.pv-cols .dtt-rec   { font-size: 12px; }
#tab-draft.pv-cols .dtt-label { font-size: 10.5px; }
#tab-draft.pv-cols .dtt-scope { font-size: 9px; }
/* "Total <team> WR" + the team's logo. Shown in BOTH views — the label is
   team-specific, so it can't be hoisted into a shared column header. */
.dtt-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
}
.dtt-logo {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex: none;
}
.dtt-wr {
  font-size: 30px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1.05;
  color: var(--text);
}
.dtt-wr.wr-green  { color: var(--green); }
.dtt-wr.wr-blue   { color: #60a5fa; }
.dtt-wr.wr-yellow { color: #ffff00; }
.dtt-wr.wr-red    { color: var(--red); }
.dtt-rec {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text-dim);
  white-space: nowrap;
}
/* Same green/red as the pick cards' W-L record, so the pill and the cards read
   as one scale — the dot separator keeps the dim colour. */
.dtt-rec .dtt-w { color: #4caf82; }
.dtt-rec .dtt-l { color: #cf5858; }
/* Only present on the pre-pick box, where the figure is the TEAM's season
   record rather than the selected champions' combined win rate. Without it the
   two states are indistinguishable at a glance. */
.dtt-scope {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.draft-team-id-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.draft-team-id-name {
  font-family: 'Chakra Petch', var(--font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  color: #fff;
  letter-spacing: .02em;
  word-break: break-word;
}

/* ─── Mobile: Draft Simulator, side-by-side only ──────────────────────────
   Phones keep the pv-cols (side-by-side) layout only — Stacked and the
   Main Leagues/Last 90 Days/Team's league scope row are hidden entirely
   (his request 2026-08-17), leaving just the Career/2026 toggle. Everything
   else here is the same board scaled down: zoom removed (compounds badly
   with already-small text) and every knob from the pv-cols block above
   shrunk in place so both trays + the centre role column fit one screen. */
@media (max-width: 640px) {
  /* ── THE width fix ──────────────────────────────────────────────────
     `.draft-board` is `grid-template-columns: 1fr 0 1fr`, and `1fr` means
     `minmax(auto, 1fr)`. That `auto` floor is the item's MIN-CONTENT width,
     and the team plate is wall-to-wall `white-space: nowrap` text, so the
     side tracks could not shrink to the phone — they inflated the whole
     board instead. The picks dashboard spans that same board (grid-column:
     1 / -1), so it inherited the blown-up width, which is why the plates
     AND both trays were cut off together. `minmax(0, …)` removes the floor;
     the `min-width: 0` lines below do the same job for the flex/grid items
     inside, so the nowrap text wraps or ellipses instead of pushing out. */
  .draft-board { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); }
  /* No room for a centre column on a phone: the Draft Win Rate box drops to its
     own full-width row between the two plates. */
  .draft-divider.has-ds { grid-column: 1 / -1; padding: 8px 4px 0; }
  #tab-draft .draft-side { min-width: 0; padding: 0 3px; }
  .draft-side-head { min-width: 0; max-width: 100%; gap: 5px; }
  .draft-team-stats-panel { min-width: 0; }
  .draft-team-sel, .league-picker, .cs-dd { min-width: 0; max-width: 100%; }

  /* Belt-and-braces: with the tracks fixed nothing should overflow, but a
     stray wide child must never bring back the sideways scroll. */
  #tab-draft, #tab-draft .draft-wrap { max-width: 100%; overflow-x: hidden; }
  #tab-draft .draft-wrap { padding: 10px 6px 20px; padding-bottom: 14vh; }

  /* Topbar: nowrap flex + a 210px min-width on the league button overflowed
     the row, clipping "Choose the League" and the Live Game button. */
  .draft-topbar { flex-wrap: wrap; gap: 8px; padding: 8px 8px 9px; }
  .draft-split-label { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .draft-league-label { font-size: 9.5px; letter-spacing: .08em; }
  .league-picker-btn, .draft-split-label select { min-width: 0; font-size: 12px; padding: 5px 26px 5px 10px; }
  .btn-live-game { font-size: 10.5px; padding: 5px 10px; }

  /* Sub-tabs (Draft Analysis / Head to Head / Player Props / Team History)
     don't fit on one
     line; scroll them sideways in their own bar rather than letting them wrap
     into three ragged rows or clip off-screen. */
  .draft-subtab-bar {
    padding: 6px 8px;
    gap: 5px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .draft-subtab-bar::-webkit-scrollbar { display: none; }
  .draft-subtab { font-size: 10.5px; padding: 6px 11px; white-space: nowrap; flex: none; }

  /* View controls: drop the Side-by-side/Stacked toggle (forced to cols,
     see applyPicksView's default) and the scope row, keep Career/2026.
     The band is a fixed 14px tall to hold the ABSOLUTE view rail on desktop;
     with that rail hidden here it can collapse. */
  .draft-metrics-band { height: auto; }
  /* The whole view rail goes (forced to cols, see applyPicksView's default). */
  .draft-view-controls { display: none; }
  /* Career/2026 keeps its centre-column slot, but the pill band is only ~32px
     here — far too short for a stacked pair, so the two buttons go back to a
     single row at phone type sizes. */
  #tab-draft.pv-cols .draft-scope-controls .draft-mode-toggle { flex-direction: row; }
  #tab-draft.pv-cols .draft-scope-controls .draft-mode-btn { width: auto; font-size: 9px; padding: 3px 7px; }
  #tab-draft.pv-cols .ds-scope-bar { display: none; }

  /* Team crest/name/record plate (info row, above the trays). Every figure in
     here is nowrap, so the plate sets the page's minimum width — it has to come
     down as a whole, not just its heading. */
  /* No plate zoom on a phone — the desktop 1.12 would push the board wide. */
  .draft-team-stats-panel { zoom: 1; max-width: 100%; padding: 5px 6px; gap: 3px; }
  .dts-header { gap: 7px; }
  .dts-crest { width: 32px; height: 32px; }
  .dts-team-logo { width: 26px; height: 26px; }
  .dts-name { font-size: 11px; letter-spacing: 0; }
  .dts-wr-pct { font-size: 13px; }
  .dts-rec { font-size: 10px; }
  .dts-recline { gap: 5px; }
  .dts-row2 { font-size: 10px; gap: 5px; }
  .dts-crown { font-size: 10px; }
  .dts-stat-block { margin-top: 4px; }
  .dts-stat-title { font-size: 9.5px; letter-spacing: .4px; }
  .dts-form { font-size: 13px; margin: 1px 0; }
  .dts-stat-cols { column-gap: 10px; }
  .dts-time { font-size: 10.5px; gap: 4px; margin-top: 3px; }
  .dts-time .dts-time-item strong { font-size: 12px; }
  .dts-time .dts-ou-sym { font-size: 10px; }
  .dts-stat-n { font-size: 9.5px; }

  /* The "Blue side" / "Red side" badge is dropped on mobile. Half the board is
     only ~169px, and the badge left so little room that the team name rendered
     as "F.." — unreadable and unpickable. The side is already unmistakable from
     the plate's coloured spine, the tray tint and the left/right position, so
     the badge is the redundant half of the pair and the selector gets the width. */
  .draft-side-badge { display: none; }
  .draft-side-head { gap: 0; }
  .draft-team-sel { font-size: 11px; padding: 4px 6px; width: 100%; }

  /* Draft Win Rate bar. */
  #tab-draft.pv-cols .draft-metric-bar { max-width: 100%; padding: 6px 8px 7px; }
  .dmb-label { font-size: 10.5px; letter-spacing: .5px; }
  .dmb-ico { font-size: 10px; }
  .dmb-val { font-size: 15px; }
  .draft-metric-bar.ds .dmb-val { padding: 5px 9px 4px; }
  .dmb-games { font-size: 9px; margin-top: 3px; }

  /* Board: no whole-board zoom on mobile, columns shrink to fit content
     instead of the fixed 288px desktop card width. */
  #tab-draft.pv-cols .draft-picks-dashboard {
    zoom: 1;
    --pick-row-h: 76px;   /* the two-column card, phone-sized (see the desktop sum) */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 4px;
  }
  #tab-draft.pv-cols .draft-picks-col { gap: 4px; padding: 4px; }

  /* Centre role column. */
  #tab-draft.pv-cols .draft-center-roles { gap: 4px; margin-top: 32px; }
  #tab-draft.pv-cols .draft-center-roles .role-badge { font-size: 9px; padding: 3px 6px; letter-spacing: 0; }

  /* Team total pill (crest + WR% + record), pinned above each tray. */
  #tab-draft.pv-cols .draft-team-total { height: 28px; padding: 0 8px; gap: 5px; margin-bottom: 4px; }
  /* Too little height here to stack — WR% and record stay on one line, which is
     what the 34px role-column offset above is measured against. */
  #tab-draft.pv-cols .dtt-figs { flex-direction: row; align-items: baseline; gap: 5px; }
  #tab-draft.pv-cols .draft-team-total .dtt-logo { width: 18px; height: 18px; }
  #tab-draft.pv-cols .dtt-wr    { font-size: 14px; }
  #tab-draft.pv-cols .dtt-rec   { font-size: 9.5px; }
  #tab-draft.pv-cols .dtt-label { font-size: 9.5px; }

  /* Pick cards: the same mirrored two-column card as desktop (v5 — identity
     column over portrait+player, stats facing the centre), shrunk to fit ~45%
     of a phone width. The tracks match the desktop card's; only sizes change. */
  #tab-draft.pv-cols .draft-pick-slot {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 6px; row-gap: 2px; padding: 4px 6px;
  }
  #tab-draft.pv-cols .draft-side.red .draft-pick-slot { grid-template-columns: auto minmax(0, 1fr); }
  #tab-draft.pv-cols .draft-pick-idcol { gap: 5px; }
  #tab-draft.pv-cols .draft-pick-portrait,
  #tab-draft.pv-cols .draft-pick-placeholder { width: 34px; height: 34px; border-radius: 9px; }
  #tab-draft.pv-cols .draft-role-icon { width: 18px; height: 18px; }
  #tab-draft.pv-cols .draft-champ-input { font-size: 11px; }
  #tab-draft.pv-cols .draft-pick-who { max-width: 100%; }
  #tab-draft.pv-cols .draft-player-name { font-size: 9px; }
  #tab-draft.pv-cols .dps-wr   { font-size: 12px; padding: 2px 7px; border-radius: 8px; }
  #tab-draft.pv-cols .dps-games,
  #tab-draft.pv-cols .dps-record { font-size: 9px; }
}

/* Narrow phones (360-400px logical, e.g. most Galaxy S handsets). The team
   plate is the binding constraint: its four stat labels are `white-space:
   nowrap` inside `auto` grid columns, so they can't shrink and instead push
   the whole document wider than the screen. Half the board is only ~168px
   there, so the pair has to give up a few more px of type and gutter. */
@media (max-width: 400px) {
  .dts-stat-cols { column-gap: 6px; }
  .dts-time { font-size: 9.5px; gap: 3px; }
  .dts-time .dts-time-item strong { font-size: 11px; }
  .dts-name { font-size: 10px; }
  .dts-row2 { font-size: 9px; }
  .draft-team-stats-panel { padding: 5px 4px; }
  #tab-draft .draft-side { padding: 0 2px; }
}

.draft-pick-slot {
  position: relative;   /* anchors the absolutely-centred stats block */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #1e2a5a;
  border-radius: 6px;
  padding: 8px 10px;
  transition: border-color .15s, border-left-color .15s, border-right-color .15s;
}
.draft-pick-slot:focus-within       { border-color: var(--border); border-left-color: #5b8dd9; }
.draft-pick-slot.has-pick           { border-left-color: #5b8dd9; }

.draft-side.red .draft-pick-slot {
  border-left: 1px solid var(--border);
  border-right: 3px solid #4e1e1e;
}

/* Heading row: champion name on the left, role tag on the right. */
.draft-pick-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
}

/* Body row: portrait-column on the left, stats on the right. */
.draft-pick-body {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Portrait column: portrait with the player name stacked beneath it. */
.draft-pick-idcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.draft-pick-who {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 84px;
}
.draft-pick-who .draft-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-side.red .draft-pick-slot:focus-within { border-color: var(--border); border-right-color: #d95b5b; }
.draft-side.red .draft-pick-slot.has-pick     { border-right-color: #d95b5b; }

.draft-pick-portrait {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  display: none;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.draft-pick-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.draft-role-icon {
  width: 34px;
  height: 34px;
  opacity: 0.35;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.draft-player-name {
  font-size: 15px;
  letter-spacing: .04em;
  color: #fff;
  font-family: 'Chakra Petch', var(--font);
  font-weight: 600;
}

/* Compact role tag inside pick slots (global .role-badge stays as-is) */
.draft-pick-slot .role-badge {
  font-size: 14.5px;
  padding: 2px 7px;
  letter-spacing: .5px;
  border-radius: 4px;
}

/* Player switcher (⇄) — shown on slots with configured alternate players */

/* Champion input + autocomplete */
.draft-autocomplete-wrap {
  position: relative;
  width: 100%;
}
/* Name sits on the left of the heading; role tag is pushed to the right. */
.draft-pick-head .draft-autocomplete-wrap { flex: 0 0 auto; width: 126px; }
.draft-pick-head .role-badge { flex-shrink: 0; }

.draft-champ-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  font-family: 'Chakra Petch', var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 1px 0;
  outline: none;
  transition: border-color .15s;
}
.draft-champ-input:focus { border-bottom-color: var(--gold-dim); }
.draft-champ-input::placeholder { color: var(--text-dim); }

.draft-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 220px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 200;
  display: none;
  max-height: 220px;
  overflow-y: auto;
}
.draft-side.red .draft-dropdown { left: auto; right: 0; }

.draft-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
}
.draft-dd-item:hover,
.draft-dd-item.active { background: var(--surface); }
.draft-dd-item img { width: 26px; height: 26px; border-radius: 3px; flex-shrink: 0; }
.draft-dd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-dd-wr {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.draft-dd-games {
  flex-shrink: 0;
  min-width: 26px;
  text-align: right;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ─── Lane "Options" — counter-pick panel ────────────────────────
   Absolutely positioned inside .draft-pick-slot (which is position:relative in
   both views), so it never takes a cell in the side-by-side card grid where
   .draft-pick-head is display:contents. */
.draft-opts-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 5;
  font-family: 'Chakra Petch', var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid rgba(45, 212, 191, .38);
  background: rgba(45, 212, 191, .10);
  color: var(--gold);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.draft-opts-btn:hover { background: rgba(45, 212, 191, .22); border-color: var(--gold); }
/* Neither rule above sets `display`, so the UA's [hidden] would win on its own —
   but this page has been bitten before by an author display beating [hidden]
   (the desktop Refresh button), so state it outright. */
.draft-opts-btn[hidden],
.draft-opts-panel[hidden] { display: none !important; }

/* Side-by-side view: the button sits OUTSIDE the tray entirely — left of blue,
   right of red — so it never lands on the champion input, which fills the card's
   whole `name` grid area here. `calc(100% + 14px)` measures from the slot's far
   edge, clearing the tray's 10px padding + 1px border with a 3px gap.
   The board is centred in a 288/auto/288 grid, so there is ample free space
   outside both trays; the narrow-screen fallback below reclaims it if not. */
#tab-draft.pv-cols .draft-opts-btn {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  right: calc(100% + 14px);
  left: auto;
}
#tab-draft.pv-cols .draft-side.red .draft-opts-btn {
  right: auto;
  left: calc(100% + 14px);
}
/* Below the width where the panel can still open outward, the button rejoins the
   card's outer top corner so trigger and panel stay adjacent — otherwise the
   button would float beside the tray while its panel dropped under the card.
   Keep this breakpoint equal to the panel's fallback further down. */
@media (max-width: 1490px) {
  #tab-draft.pv-cols .draft-opts-btn {
    top: 4px; transform: none; right: 6px; left: auto;
  }
  #tab-draft.pv-cols .draft-side.red .draft-opts-btn { right: auto; left: 6px; }
}

/* Base (stacked view / narrow screens): drops below its card. */
.draft-opts-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 210;      /* above .draft-dropdown (200) */
  /* Sized so the four columns leave the champion name ~104px — enough for the
     longest ones in this list ("Miss Fortune", "Renata Glasc") at 15px:
     268 − 6 panel padding − 18 row padding − 122 fixed tracks − 18 gaps = 104.
     Nothing wider: the point of dropping the games column was to lose the slack,
     not to spread the two remaining figures out. */
  width: 268px;
  /* Rows are 34px now (30px portrait + 2×2 padding), so this clears ~12 of the
     20 before scrolling while keeping a panel centred on the lowest lane inside
     the viewport. */
  max-height: 430px;
  overflow-y: auto;
  padding: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  text-align: left;
}
.draft-side.red .draft-opts-panel { left: auto; right: 0; }

/* Side-by-side view: the panel opens OUTWARD — left of blue, right of red — so
   it never covers either team's champion cards. It takes the same offset as the
   button and therefore sits on top of it; the ✕ in its header is what closes it
   (along with click-outside / Escape), since the button underneath is covered.
   Vertically centred on its own lane rather than top-aligned, so the lowest
   lanes open upward instead of running off the bottom of the board. */
#tab-draft.pv-cols .draft-opts-panel {
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + 14px);
  left: auto;
}
#tab-draft.pv-cols .draft-side.red .draft-opts-panel {
  right: auto;
  left: calc(100% + 14px);
}
/* Where the outward panel stops fitting. The board carries zoom:1.15, so the
   space beside a tray in CSS px is
     ((viewport − 56px wrap padding) / 1.15 − ~676px of grid tracks) / 2,
   and the panel needs its 268px + the 14px offset = 282px of it. Solving gives
   ≈1482px, so below ~1490px it drops under the card instead. */
@media (max-width: 1490px) {
  #tab-draft.pv-cols .draft-opts-panel {
    top: calc(100% + 4px); transform: none; left: 0; right: auto;
  }
  #tab-draft.pv-cols .draft-side.red .draft-opts-panel { left: auto; right: 0; }
}

/* "MATCHUP  vs Gwen" reads as one centred caption over the table rather than
   pinned to the two edges. The ✕ is absolutely positioned so it takes no part
   in the flex centring — otherwise the caption would sit left of true centre. */
/* Vertical padding is kept tight throughout — the ask was a SHORTER box, not a
   smaller one, so portrait and type sizes below are untouched and only the
   spacing around them gives ground. */
.dopt-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  padding: 5px 28px 3px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.dopt-head em {
  font-style: normal; font-size: 12px; letter-spacing: .02em; text-transform: none;
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 5px;
}
/* Enemy champion portrait + name inside the "vs <champ>" header — sized and
   coloured to match the rows below, so the header reads as one of them. */
.dopt-head-img {
  width: 30px; height: 30px; border-radius: 5px;
  object-fit: cover; flex-shrink: 0;
}
.dopt-head-name { font-size: 15px; font-weight: 600; color: var(--text); }
.dopt-close {
  position: absolute;
  top: 1px;
  right: 3px;
  background: none;
  border: none;
  padding: 3px 6px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 4px;
}
.dopt-close:hover { color: var(--text); background: rgba(255,255,255,.08); }
/* Four columns: portrait · champion · WR · gold@15. Each fixed width is sized to
   its widest real value ("46.9%*", "-620"); the champion name takes whatever is
   left. The games column was dropped 2026-08-16 — the sample sizes live on each
   row's tooltip now. */
.dopt-row,
.dopt-cols {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 48px 44px;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 2px 9px;
  text-align: left;
}
.dopt-cols {
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text);
  padding-bottom: 3px;
}
/* Header sits centred over its own column, and each value cell centres to match,
   so GAMES / WR / G@15 line up with the numbers under them. */
.dopt-cols span:nth-child(n+3) { text-align: center; }
.dopt-row {
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.dopt-row:hover { background: rgba(20, 184, 166, .10); }
/* Row whose WIN RATE is above 50% — a flat green tint, no leading-edge spine.
   Its own hover is a shade stronger than the tint rather than the teal above,
   which would have washed the green out on exactly the rows you are most likely
   to click. */
.dopt-row.is-good { background: rgba(52, 211, 153, .10); }
.dopt-row.is-good:hover { background: rgba(52, 211, 153, .19); }
.dopt-row img,
.dopt-noimg { width: 30px; height: 30px; border-radius: 5px; display: block; }
.dopt-noimg { background: rgba(255,255,255,.06); }
.dopt-name {
  font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dopt-wr, .dopt-gd {
  font-size: 13.5px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.dopt-wr.pos, .dopt-gd.pos { color: var(--green); }
.dopt-wr.neg, .dopt-gd.neg { color: var(--red); }
.dopt-wr.flat, .dopt-gd.flat { color: var(--text-dim); }
/* Win-rate-only bands — see optsWrClass(). Same #ffff00 the wr-yellow class
   uses elsewhere, and the shared --blue for a dead-even rate. */
.dopt-wr.warn { color: #ffff00; }
.dopt-wr.even { color: var(--blue); }
.dopt-note { font-size: 13px; color: var(--text-dim); padding: 9px; line-height: 1.45; }

/* ─── Inline pick stats ──────────────────────────────────────────── */
/* Stats sit right next to the portrait/player cluster (no wide middle gap),
   centred vertically against the body row. */
.draft-pick-stats {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
}
.draft-pick-stats.visible { display: flex; }

.dps-games, .dps-record {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
}

.dps-kda {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
}

/* Average damage to champions. Dimmed when it's the champion's field average
   (this player has no games on the pick) rather than the player's own. */
.dps-dmg {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
}
.dps-dmg:empty { display: none; }
/* DMG line removed from the sim pick cards (his request 2026-08-05). Hidden,
   not deleted — the /api/champion-damage plumbing and tooltip stay intact, so
   restoring it is a one-line revert. */
#tab-draft .draft-pick-stats .dps-dmg { display: none; }
.dps-dmg.dps-dmg-field { opacity: .72; }

.dps-wr {
  font-size: 20px;   /* a touch smaller than the original 23px (his request 2026-08-18) */
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--mono);
  color: var(--text);
  white-space: nowrap;
  /* Thin outline around the % so it reads as a chip. Border/tint both follow
     the WR colour via currentColor, and the vertical padding is cancelled by
     the negative margin so the pick-card height invariant holds. */
  display: inline-block;
  padding: 1px 7px;
  margin: -1px 0;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
/* Empty-scope message in the win-rate slot: "First Time" (green, the player has
   never played the pick) or "0 games in 2026" (grey, played before but not this
   season). It reuses .dps-wr's grid slot, so every piece of chip styling — the
   border, the tint, the big mono size — has to be unwound here, or the sentence
   renders inside a win-rate pill. */
.dps-wr.dps-empty-msg {
  font-family: var(--font-round);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  border: 0;
  background: none;
  padding: 1px 0;
  /* The season message carries its own <br>. nowrap still applies per line, so
     each half stays intact and only the explicit break splits them; centring
     keeps the two lines stacked squarely rather than ragged-left. */
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
.dps-wr.dps-empty-msg.dps-empty-first { color: #ffff00; }
/* The pv-cols rule sets its own size/padding on .dps-wr and would otherwise win
   on specificity, so the message re-states them for the side-by-side view too. */
#tab-draft.pv-cols .dps-wr.dps-empty-msg { font-size: 12.5px; padding: 1px 0; }

.dps-wr.wr-high   { color: var(--green); }
.dps-wr.wr-low    { color: var(--red); }
.dps-wr.wr-green  { color: var(--green); }
.dps-wr.wr-yellow { color: #ffff00; }
.dps-wr.wr-blue   { color: #60a5fa; }
.dps-wr.wr-red    { color: var(--red); }

/* ── Upload panel (left) ── */
.vision-upload-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  width: 280px;
  min-width: 280px;
}

.vision-panel-title { font-size: 15px; font-weight: 600; }

.vision-panel-hint {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.vision-panel-hint strong { color: var(--text); }

/* Status bar */
.vision-status-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 12px;
}
.vision-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}
.vision-status-dot.ready   { background: var(--green); }
.vision-status-dot.loading { background: var(--gold);  animation: pulse 1.2s ease-in-out infinite; }
.vision-status-dot.error   { background: var(--red); }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.3 } }

/* Dropzone */
.vision-dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  min-height: 120px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vision-dropzone:hover,
.vision-dropzone.drag-over { border-color: var(--gold-dim); background: #1a160a; }

.vision-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px;
  pointer-events: none;
}
.vision-drop-icon { font-size: 26px; opacity: .3; }
.vision-drop-text { font-size: 13px; color: var(--text-dim); }
.vision-drop-sub  { font-size: 12px; color: var(--text-dim); opacity: .85; }

/* Size slider */
.vision-size-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.vision-size-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vision-size-row input[type=range] {
  flex: 1;
  accent-color: var(--gold);
}
#visionSizeVal {
  font-family: var(--mono);
  font-size: 13px;
  min-width: 36px;
  text-align: right;
  color: var(--text);
}
.vision-size-hint { font-size: 12px; opacity: .6; }

.vision-error {
  background: #2a1010;
  border: 1px solid #5a2020;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--red);
  font-family: var(--mono);
  line-height: 1.5;
}

/* ── Right panel: image + results ── */
.vision-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Image area */
.vision-image-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: auto;
  background: #0a0a0f;
  border-bottom: 1px solid var(--border);
  max-height: 55%;
  cursor: crosshair;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.vision-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}
.vision-pins { position: absolute; top: 0; left: 0; pointer-events: none; }

/* Click pin indicator */
.vision-pin {
  position: absolute;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(0,0,0,.5);
  pointer-events: none;
}
.vision-pin.loading { border-color: var(--text-dim); color: var(--text-dim); animation: pulse 1s infinite; }
.vision-pin.error   { border-color: var(--red); color: var(--red); }

.vision-image-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 13px;
  opacity: .4;
}

/* Results list */
.vision-results-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.vision-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vision-result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.vision-result-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.vision-result-card-header .champ-portrait { width: 32px; height: 32px; }
.vision-result-name   { font-size: 14px; font-weight: 600; flex: 1; }
.vision-confidence    { font-size: 12px; font-family: var(--mono); }
.vision-confidence.hi { color: var(--green); }
.vision-confidence.ok { color: var(--gold); }
.vision-confidence.lo { color: var(--red); }

.vision-stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vision-stat-table th {
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.vision-stat-table th.num { text-align: right; }
.vision-stat-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); }
.vision-stat-table td.num { text-align: right; font-family: var(--mono); }
.vision-stat-table tbody tr:last-child td { border-bottom: none; }
.vision-stat-table tbody tr:hover { background: var(--surface2); }

.vision-no-data {
  padding: 12px;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
}

/* ─── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ─── Minimalist / Modern Style Overrides ───────────────────────── */

/* 1. Specific Font-Weight Adjustments to maintain structure */
h2,
th,
.dts-name,
.dsr-wr,
.btn-primary,
.profile-name {
  font-weight: 600;
}

/* 2. Header Status Alignment */
.db-status {
  font-size: 13px;
  color: var(--text-dim);
  margin-left: auto;
}

/* 4. Minimalist Form Inputs & Dropdowns */
select,
input[type="text"],
input[type="number"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  transition: all 0.2s;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
select:focus,
input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
  background: var(--surface);
}

/* 5. Buttons Styling */
.btn-primary {
  background: var(--gold);
  color: #09090b;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.15);
}
.btn-primary:hover {
  background: #0d9488;
  box-shadow: 0 4px 16px rgba(20, 184, 166, 0.3);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--text-dim);
}

/* 6. Clean Modern Tables */
table,
.profile-table {
  border-collapse: collapse;
}
thead th,
.profile-table thead th {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-strong);
}
thead th.sortable:hover,
.profile-table thead th:hover {
  background: var(--surface3);
  color: var(--text);
}
tbody tr,
.profile-table tbody tr {
  border-bottom: 1px solid var(--border);
  background: transparent;
}
tbody tr:hover,
.profile-table tbody tr:hover {
  background: rgba(45, 212, 191, 0.06);
}
tbody td,
.profile-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
}
.champ-portrait {
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* 7. Modern Standings & Standout Cards */
.roster-card,
.tourn-card,
.team-stat-box {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.roster-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.12);
  background: var(--surface2);
}
.tourn-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.12);
  background: var(--surface2);
}

/* 9. Modern Glassmorphic Draft Simulator Board */
#tab-draft .draft-topbar {
  background: rgba(12, 15, 23, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* Pick slots — same plate language as the team box: side-tinted glass wash,
   spine on the outer edge, 10px radius; tightened padding for compactness. */
#tab-draft .draft-pick-slot {
  position: relative;
  background:
    linear-gradient(115deg, rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0.03) 40%, rgba(59, 130, 246, 0) 62%),
    rgba(22, 22, 26, 0.45);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid rgba(59, 130, 246, 0.5); /* Dim blue border default */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 6px 12px;
}
#tab-draft .draft-pick-slot:focus-within {
  border-color: rgba(255, 255, 255, 0.18);
  border-left-color: #3b82f6;
  background:
    linear-gradient(115deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04) 40%, rgba(59, 130, 246, 0) 62%),
    rgba(24, 24, 28, 0.65);
  z-index: 10;
}
#tab-draft .draft-pick-slot.has-pick {
  background:
    linear-gradient(115deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04) 40%, rgba(59, 130, 246, 0) 62%),
    rgba(24, 24, 28, 0.55);
  border-left-color: #3b82f6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(59, 130, 246, 0.08);
}
/* #tab-draft prefix is required: the default slot rules above carry the ID, so
   without it these red-side overrides lose the cascade and the blue wash leaks
   onto red-side slots. */
#tab-draft .draft-side.red .draft-pick-slot {
  background:
    linear-gradient(-115deg, rgba(244, 63, 94, 0.10), rgba(244, 63, 94, 0.03) 40%, rgba(244, 63, 94, 0) 62%),
    rgba(26, 21, 24, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  border-right: 3px solid rgba(244, 63, 94, 0.5); /* Dim red border default */
}
#tab-draft .draft-side.red .draft-pick-slot:focus-within {
  border-color: rgba(255, 255, 255, 0.18);
  border-left-color: rgba(255, 255, 255, 0.18);
  border-right-color: #f43f5e;
  background:
    linear-gradient(-115deg, rgba(244, 63, 94, 0.12), rgba(244, 63, 94, 0.04) 40%, rgba(244, 63, 94, 0) 62%),
    rgba(28, 22, 26, 0.65);
  z-index: 10;
}
#tab-draft .draft-side.red .draft-pick-slot.has-pick {
  background:
    linear-gradient(-115deg, rgba(244, 63, 94, 0.12), rgba(244, 63, 94, 0.04) 40%, rgba(244, 63, 94, 0) 62%),
    rgba(28, 22, 26, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(244, 63, 94, 0.08);
}

/* Flat cards — no coloured team spine on the boxes. Team colour now reads only
   from the tray tint + the team badge, so every card gets a uniform neutral edge. */
#tab-draft .draft-pick-slot,
#tab-draft .draft-side.red .draft-pick-slot {
  border: 1px solid rgba(255, 255, 255, 0.10);
}
#tab-draft .draft-pick-slot.has-pick,
#tab-draft .draft-side.red .draft-pick-slot.has-pick {
  border-color: rgba(255, 255, 255, 0.15);
}
#tab-draft .draft-pick-slot:focus-within,
#tab-draft .draft-side.red .draft-pick-slot:focus-within {
  border-color: rgba(255, 255, 255, 0.24);
}

.draft-pick-portrait {
  border-radius: 10px;
  border: 1px solid var(--border);
}
.draft-pick-placeholder {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(39, 39, 42, 0.3);
}
.draft-ban-placeholder {
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 27, 0.3);
}
.draft-ban-portrait {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.draft-dd-item {
  border-radius: 6px;
  margin: 2px 4px;
}
.draft-dd-item:hover,
.draft-dd-item.active {
  background: rgba(20, 184, 166, 0.08);
  color: var(--gold);
}
/* 10. Profile Header Card Refinement */
.profile-header-card {
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* 13. Scrollbars Refinement */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 212, 191, 0.45);
  background-clip: padding-box;
}
* { scrollbar-color: rgba(255,255,255,0.18) transparent; scrollbar-width: thin; }

/* Accessibility: consistent keyboard focus ring across interactive elements */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
::selection { background: rgba(45, 212, 191, 0.32); color: #fff; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Versus Matchups (Opponent Stats) ───────────────────────────── */
.versus-header-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}
.versus-vs-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.5;
}
.versus-header-stats {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 6px;
}

.versus-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 24px;
  align-items: start;
}
@media (max-width: 1200px) {
  .versus-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.versus-column {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-height: 200px;
}

.versus-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.versus-column-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.versus-opp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.versus-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.versus-card:hover {
  background: var(--surface2);
  border-color: var(--border);
}

.versus-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.versus-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.versus-card-record {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}

.versus-card-wr {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--mono);
  text-align: right;
}

.versus-empty-state {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 24px 0;
}


/* ─── Draft Power — summary bar ─────────────────────────────────── */
.dp-summary-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  overflow: hidden; /* keep any residual overflow inside the rounded box, never off-screen */
}

.dp-sum-side {
  display: flex;
  align-items: center;
  gap: 8px;
  /* basis auto, not 0: a 50/50 split would starve the longer team name while the
     other side still has slack. Free space is shared, so the sides stay near-even. */
  flex: 1 1 auto;
  min-width: 0; /* if the bar really runs out, the name (not the stats) gives way */
}

.dp-sum-side.blue { justify-content: flex-end; }
.dp-sum-side.red  { justify-content: flex-start; }

.dp-sum-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 54px;
  flex-shrink: 0; /* stat numbers stay fully visible; the team name truncates instead */
}

.dp-sum-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dp-sum-val {
  font-size: 21px;
  font-weight: 800;
  font-family: var(--mono);
}
/* Synergy value when it's the only stat shown ("All Synergies" filter) — matches
   the Combined value's prominence so it doesn't read as small. */
.dp-sum-val-lg {
  font-size: 25px;
  font-weight: 800;
}
/* "All Synergies" filter shows a single stat per side, so scale the whole bar up
   to use the freed-up space. */
.dp-summary-bar-syn .dp-sum-val-lg    { font-size: 30px; }
.dp-summary-bar-syn .dp-sum-label     { font-size: 11px; letter-spacing: 0.08em; }
.dp-summary-bar-syn .dp-sum-g         { font-size: 12px; }
.dp-summary-bar-syn .dp-sum-team-name { font-size: 17px; }
.dp-summary-bar-syn .dp-sum-vs        { font-size: 12px; padding: 0 18px; }
.dp-summary-bar-syn .dp-sum-cell      { min-width: 92px; gap: 3px; }
.dp-summary-bar-syn                   { padding: 14px 16px; }

.dp-sum-na { color: var(--text-dim); }

.dp-sum-g {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}

.dp-sum-combined {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  min-width: 66px;
  flex-shrink: 0; /* combined box stays fully visible */
}

.dp-sum-combined-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dp-sum-combined-val {
  font-size: 25px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1.1;
}

.dp-sum-vs {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.12em;
  padding: 0 8px;
  flex-shrink: 0;
}

/* Name over crest, both centred — the name rides a little above the stat cells
   because the logo takes the lower half of the block. */
.dp-sum-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0; /* the name (not the stats) gives way when the bar is tight */
}
.dp-sum-team.blue { padding-left: 8px; }
.dp-sum-team.red  { padding-right: 8px; }

.dp-sum-team-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .5));
}

.dp-sum-team-name {
  max-width: 100%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* When the bar runs out of room, the team name truncates rather than pushing
     the Champion WR / Combined stats off the edge of the screen. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-sum-team-name.blue { color: #6f9fe6; }
.dp-sum-team-name.red  { color: #e66f6f; }

/* ═══════════════════ Draft Power (Current Meta Synergy) ═══════════════════ */
.draft-power-wrap {
  /* The sidebar rail left this panel with a lot of empty canvas either side, so
     the whole board is scaled up 20% rather than re-tuning ~40 font/padding
     rules one by one. zoom (not transform: scale) so the layout re-flows at the
     new size and the page height stays correct; it compounds with the site-wide
     `body > *` zoom, which is the intent — 20% larger than it rendered before. */
  zoom: 1.2;
  max-width: 920px;   /* 1104px on screen once zoomed */
  margin: 24px auto 0;
  padding: 0 16px;
  text-align: center;
}

/* ─── Odd Maker embedded in Draft tab ──────────────────────────── */
.om-section-divider {
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 0 16px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.om-section-divider::before,
.om-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.om-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.draft-power-title {
  margin-bottom: 4px;
}
.draft-power-title h2 {
  margin: 0;
  font-family: var(--font);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
}
.draft-power-title p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-dim);
}

.draft-power-panel {
  margin-top: 12px;
  text-align: left;
  background: linear-gradient(180deg, rgba(33, 32, 39, .95), rgba(21, 20, 26, .95));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  animation: dpFade .25s ease;
}
@keyframes dpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Draft Power redesign ── */
.dp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.dp-filter-btn {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 6px 20px;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}

.dp-filter-btn:hover { color: var(--text); border-color: var(--gold); }
.dp-filter-btn.active { background: var(--gold); color: #08110f; border-color: var(--gold); }

.dp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}

.dp-col { display: flex; flex-direction: column; gap: 6px; }
/* Champion WR block wrapper — same column layout so spacing is unchanged when it's
   toggled off for the "All Synergies" filter. */
.dp-wr-section { display: flex; flex-direction: column; gap: 6px; }

/* Archetype chip hugs its text instead of stretching across the column */
.dp-col > .dp-arch { align-self: flex-start; font-size: 13px; padding: 4px 10px; }

.dp-col-head {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 0 0 4px;
  border-bottom: 2px solid;
  margin-bottom: 0;
}

.dp-col-head.blue { color: #60a5fa; border-color: #60a5fa; }
.dp-col-head.red  { color: #fb7185; border-color: #fb7185; }

.dp-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dp-scope-label {
  font-size: 11.5px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}

/* Rows sit in one hairline-separated card, like the Head-to-Head list.
   Capped narrower than the column — the rows only need room for portrait,
   name, bar and percentage, so the card stops there instead of stretching. */
.dp-list, .dp-total-badge { max-width: 380px; }

.dp-list {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  overflow: hidden;
}
/* When a Total strip sits above it, the two read as one card */
.dp-total-badge + .dp-list { border-radius: 0 0 10px 10px; }

/* Synergy pair rows */
.dp-syn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  transition: background .12s;
}

.dp-syn-champs { display: flex; gap: 3px; flex-shrink: 0; }
.dp-syn-champs .champ-portrait { width: 34px; height: 34px; border-radius: 6px; }
.dp-syn-names { flex: 1; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-syn-stat { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; font-weight: 800; font-family: var(--mono); font-size: 15.5px; }
.dp-syn-g { color: var(--text-dim); font-weight: 500; font-size: 12px; font-family: var(--mono); }

/* WR rows */
.dp-wr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  transition: background .12s;
}

/* Shared row behaviour: zebra, hover, win-rate accent on the left edge */
.dp-list > :last-child { border-bottom: 0; }
.dp-list > :nth-child(even) { background: rgba(255, 255, 255, .028); }
.dp-list > :hover { background: rgba(255, 255, 255, .06); }
.dp-list > .lv-green  { border-left-color: #4ade80; }
.dp-list > .lv-red    { border-left-color: #fb7185; }
.dp-list > .lv-yellow { border-left-color: #eab308; }
.dp-list > .lv-blue   { border-left-color: #60a5fa; }

.dp-wr-row .champ-portrait { width: 34px; height: 34px; border-radius: 6px; flex-shrink: 0; }
.dp-wr-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-wr-row > span:not(.dp-wr-name):not(.dp-syn-g) {
  font-family: var(--mono); font-weight: 800; font-size: 15.5px;
}

.dp-wr-bar-wrap {
  width: 58px;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.dp-wr-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }

/* Total strip sits directly on top of its list */
.dp-total-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--mono);
}

.dp-total-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  min-width: 34px;
  font-family: var(--font);
}
/* Total's win rate matches the row percentages */
.dp-total-badge > span:not(.dp-total-label):not(.dp-syn-g) { font-size: 15.5px; font-weight: 800; }

.dp-empty {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 18px 0;
}

/* Headline comparison */
.dp-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dp-head-side   { flex: 1; }
.dp-head-side.red { text-align: right; }
.dp-head-pct {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}
.dp-head-side.blue .dp-head-pct { color: var(--blue); }
.dp-head-side.red  .dp-head-pct { color: var(--red); }
.dp-head-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
.dp-head-mid { text-align: center; min-width: 120px; }
.dp-edge   { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
.dp-margin { font-size: 12px; color: var(--text-dim); margin-top: 2px; font-family: var(--mono); }

/* Split bar */
.dp-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  margin: 14px 0 10px;
  border: 1px solid var(--border);
}
.dp-bar-blue, .dp-bar-red {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  transition: width .4s ease;
  min-width: 0;
}
.dp-bar-blue { background: linear-gradient(90deg, #2563eb, var(--blue)); }
.dp-bar-red  { background: linear-gradient(90deg, var(--red), #be123c); }

.dp-meta-line {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
  text-align: center;
  margin-bottom: 12px;
}

/* Freshness / staleness banner */
.dp-banner {
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.3);
  color: #93c5fd;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.dp-banner.stale {
  background: rgba(244,63,94,.1);
  border-color: rgba(244,63,94,.35);
  color: #fda4af;
}

/* Two side columns */
.dp-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dp-side {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.dp-side.blue { border-top: 2px solid var(--blue); }
.dp-side.red  { border-top: 2px solid var(--red); }
.dp-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dp-side-name  { font-size: 15px; font-weight: 700; color: var(--text); }
.dp-side-score { font-size: 13px; font-weight: 600; color: var(--gold); font-family: var(--mono); }

.dp-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.dp-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}
.dp-chip b { color: var(--text); font-weight: 700; }

.dp-factor {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-bottom: 4px;
}
.dp-factor.good { color: var(--green); }
.dp-factor.bad  { color: var(--red); }

/* Tale of the tape */
.dp-tape {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 18px;
  font-family: var(--mono);
}
.dp-tape th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.dp-tape th.blue { color: var(--blue); text-align: left; }
.dp-tape th.red  { color: var(--red);  text-align: right; }
.dp-tape td { padding: 5px 8px; font-size: 13px; }
.dp-tape-v {
  width: 64px;
  font-weight: 700;
  color: var(--text-dim);
}
.dp-tape-v.blue { text-align: left; }
.dp-tape-v.red  { text-align: right; }
.dp-tape-v.win.blue { color: var(--blue); }
.dp-tape-v.win.red  { color: var(--red); }
.dp-tape-v.win { background: rgba(255,255,255,.03); }
.dp-tape-f { text-align: center; color: var(--text); }
.dp-tape-f b { color: var(--text); }
.dp-tape-note { display: block; font-size: 12px; color: var(--text-dim); opacity: .9; }
.dp-tape-wt {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 6px;
  vertical-align: middle;
}
.dp-tape tfoot td { border-top: 1px solid var(--border); font-size: 13px; padding-top: 8px; }
.dp-tape tfoot .dp-tape-v.blue { color: var(--blue); }
.dp-tape tfoot .dp-tape-v.red  { color: var(--red); }

/* Lane matchups */
.dp-lanes {
  background: linear-gradient(180deg, rgba(45, 212, 191, .06), rgba(45, 212, 191, 0) 110px), var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 18px 4px;
  margin-bottom: 14px;
}
.dp-lanes-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
/* Lane Matchups heading — larger than the shared .dp-lanes-title, with the
   data scope spelled out underneath instead of the old Gold@15 · WR% chip. */
.lm-title { font-size: 19px; letter-spacing: .05em; margin-bottom: 2px; }
.dp-lanes-caption {
  font-size: 13px;
  font-weight: 500;
  color: #b9c6d8;
  letter-spacing: .01em;
  margin-bottom: 8px;
}
/* Lane Matchups data-scope filter */
.dp-lanes-subtitle {
  font-size: 10px;
  font-weight: 700;
  color: #0c0e13;
  background: var(--gold);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .02em;
  text-transform: none; /* Ignore parent uppercase */
}
.dp-lanes-leagues {
  gap: 6px;
  margin-top: 2px;
}
.dp-lane {
  display: grid;
  /* The chevrons cost the champion column ~30px, which truncated "Wukong" to
     "Wuk…" — the centre column gives that width back. */
  grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  align-items: center;
  /* Wide gutter: the win-rate chevron lives in it, outside the boxes. */
  gap: 30px;
  padding: 7px 0;
  font-size: 14px;
}
.dp-lane + .dp-lane { border-top: 1px solid var(--border); }
.dp-lane-role {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
  min-width: 30px;
}
.dp-lane-champ { display: flex; align-items: center; gap: 8px; color: var(--text-dim); min-width: 0; }
.dp-lane-champ .dp-lane-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-lane-champ.red { justify-content: flex-end; text-align: right; }
/* .win (the lane verdict) only brightens the row now — the green name went the
   way of the ring and the halo (2026-08-07). The green chevrons beside the
   stat boxes are the card's single winner marker. */
.dp-lane-champ.win { color: var(--text); }
/* The winner's portrait carries no marker at all now (2026-08-07): first the
   14px halo went, then the grayscale dimming of the loser, and finally the green
   ring itself. Portraits render plain; the green name and the chevrons are the
   only winner markers left. */
/* (The green chevrons used to hang off the champion name here — they moved onto
   the stat boxes; see .dp-lane-boxes below.) */
.dp-lane-champ .champ-portrait,
.dp-lane-champ .champ-portrait-placeholder { width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0; }

/* Each side is just the champion row now. (Player names and the per-player
   Gold@15 line used to live above the portrait; both removed.) */
.dp-lane-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dp-lane-side.red { align-items: flex-end; }

/* Name + speed chip stack, centred on each other. Replaces the old scheme where
   the chip sat below the whole side and was pushed past the portrait by a
   hard-coded padding — that padding had to be re-tuned every time the portrait
   size changed, and still only lined the chip up with the side, not the name. */
.dp-lane-namecol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.dp-lane-chip { max-width: 100%; box-sizing: border-box; }

/* ACC speed verdict chips — shared by the ACC Theory page and the Lane
   Matchups card. Faster = fastest, Break = slower but wins the H2H,
   Slower = neither. ("Furious" — fastest AND winning the H2H — was retired
   2026-08-07; those lanes show plain Faster, and .acc-chip.furious is gone.) */
.acc-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.acc-chip.faster  { background: #3a2c08; border-color: #7a5c12; color: #fbbf24; }
.acc-chip.brk     { background: #0f2f22; border-color: #1e6b48; color: #4ade80; }
.acc-chip.slow    { background: #1b2330; border-color: #2f3b4e; color: #8fa0b8; }
.acc-chip.none    { background: #1b2330; border-color: #2f3b4e; color: #6d7c93; }

/* Chip slot inside a Lane Matchups row — smaller than on the ACC page, and not
   bold: the ACC page keeps .acc-chip's 800, this card sets nothing in bold. */
.dp-lane-chip .acc-chip { font-size: 11px; padding: 3px 9px; font-weight: 400; }
@media (max-width: 560px) {
  .dp-lane-chip .acc-chip { font-size: 10px; padding: 2px 7px; }
}

/* Center column: aligned stat rows + win-share bar + sample size */
/* gap 4px: the two stat rows are boxed now, so they need air between them. */
.dp-lane-mid { display: flex; flex-direction: column; gap: 4px; }

/* The two boxes as one unit, so the win-rate chevron can hang off their shared
   edge and sit at the vertical CENTRE of the pair. Anchoring it to .dp-lane-mid
   instead would drag the centre down by half the "52 games" line. */
.dp-lane-boxes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Chevron pointing at the side with the better win rate. Sits in the lane's
   column gap, outside the box, clear of the champion names. */
.dp-lane-boxes.wr-blue::before,
.dp-lane-boxes.wr-red::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -5px;
  color: var(--green);
  pointer-events: none;
}
.dp-lane-boxes.wr-blue::before {
  content: '\276E\276E'; /* ❮❮ */
  right: 100%;
  margin-right: 13px;
}
.dp-lane-boxes.wr-red::after {
  content: '\276F\276F'; /* ❯❯ */
  left: 100%;
  margin-left: 13px;
  padding-right: 5px;    /* re-absorb trailing letter-spacing */
}
.dp-lane-stat {
  display: grid;
  /* Centre column widened with --lm-fig: at label size "WIN RATE" needs the room
     or it wraps onto two lines. The gap keeps the figures off the label — butted
     together, "-454gGOLD@15" read as one string. */
  grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
  column-gap: 8px;
  align-items: baseline;
  /* Each row sits in its own box — one for the Gold@15 pair, one for the Win
     rate pair — so a lane reads as two self-contained comparisons instead of
     four loose numbers. Deliberately faint: it should frame, not compete with
     the coloured figures inside it. */
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: 2px 9px;
  /* Back to the original face (Inter) after a look at Chakra Petch and JetBrains
     Mono — only the SIZES from those passes were kept. */
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  /* One size for the whole row — the figures and the GOLD@15 / WIN RATE labels
     both read from it, so they can never drift apart. Override this single
     property per context (Draft Sim card, narrow screens) to rescale the row.
     Set at the FIGURES' size and the labels raised to meet it, not the other way
     round: the numbers are what the card is for. */
  --lm-fig: 13px;
}
/* The figures inherit the row's Inter and sit at --lm-fig, the same size as the
   labels beside them — but keep the <b> tag's bold. They are the only bold text
   left on the card (2026-08-07): the labels, chips, roles and names all went to
   400, so the weight now marks the numbers alone. */
.dp-lane-stat b {
  font-weight: 700;
  font-size: var(--lm-fig);
  letter-spacing: 0;
}
.dp-lane-stat b:first-child { text-align: right; }
.dp-lane-stat b:last-child  { text-align: left; }
.dp-lane-metric {
  text-align: center;
  /* A step under the figures — the labels name the row, the numbers are the row. */
  font-size: calc(var(--lm-fig) * .82);
  font-weight: 700;
  /* Tracking eased from .07em — at this size it was pure width, no legibility. */
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--text-faint);
  text-transform: uppercase;
  align-self: center;
}
/* Both labels are plain grey again (2026-08-07): the amber Gold@15 and white
   Win rate competed with the coloured figures they sit between. .metric-gold
   and .metric-wr stay on the markup as hooks, carrying no colour of their own.

   Green arrow on the better win rate — the same marker the winning-lanes study
   uses. Sits on the OUTER edge of its figure (blue's number is right-aligned
   toward the label, red's left-aligned), so the two numbers stay put. */

/* Win-share bar — still used by the ACC page's own lane block; the Lane
   Matchups card dropped it (2026-08-07). */
.dp-lane-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(251, 90, 113, .45);
  overflow: hidden;
  margin-top: 3px;
}
.dp-lane-bar span {
  display: block;
  height: 100%;
  background: rgba(91, 156, 248, .85);
  border-right: 2px solid var(--bg);
}
/* Sample size: lifted off --text-faint — at 11px that grey was the card's least
   readable line. Font left to inherit, like the rest of the card. */
.dp-lane-sample {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: .02em;
}
/* Advantage badge: green pill under the bar showing the edge size, with a caret
   pointing at the favoured side. Green = "this side wins the lane" (matches the
   portrait ring + chevrons), so the whole card speaks one language. */
.dp-lane-edge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: center;
  margin: 4px auto 0;
  padding: 1px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--green);
  background: rgba(52, 211, 153, .13);
  border: 1px solid rgba(52, 211, 153, .42);
  box-shadow: 0 0 10px rgba(52, 211, 153, .12) inset;
}
.dp-edge-caret { font-size: 13px; line-height: 1; font-weight: 900; }
.dp-lane-edge.to-blue { padding-left: 7px; }
.dp-lane-edge.to-red  { padding-right: 7px; }
/* Winning side's win-rate figure: green, tying the centre number back to the
   highlighted portrait. The 9px halo it used to carry was removed 2026-08-07 —
   the colour alone marks the winner. */
.dp-lane-stat b.dp-wr-win {
  color: var(--green);
}

.dp-arch-row { margin-bottom: 6px; margin-top: 8px; }

/* ── Lane Matchups in Draft Simulator ─────────────────────────────
   Everything here runs 20% over the shared .dp-lane defaults (2026-08-21).
   Kept ID-scoped, like the sizes it replaces, so the Match History cards and
   the ACC page — which reuse the same .dp-lane markup — keep their own
   proportions. The card itself widens to match, or the bigger portraits and
   names would just squeeze the side columns. */
#simLaneMatchups .dp-lanes {
  max-width: 720px;
  margin: 16px auto 8px;
}
#simLaneMatchups .dp-lanes-title { font-size: 14.5px; text-align: center; }
#simLaneMatchups .lm-title { font-size: 24px; }
#simLaneMatchups .dp-lanes-caption { text-align: center; font-size: 15.5px; }

#simLaneMatchups .dp-lane {
  grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr);
  font-size: 18px;
  gap: 36px;
  padding: 8.5px 0;
}
#simLaneMatchups .dp-lane-role { font-size: 13.5px; min-width: 36px; }
#simLaneMatchups .dp-lane-champ { gap: 10px; }
#simLaneMatchups .dp-lane-champ .champ-portrait,
#simLaneMatchups .dp-lane-champ .champ-portrait-placeholder { width: 50px; height: 50px; border-radius: 9px; }
#simLaneMatchups .dp-lane-name  { font-size: 18px; }
/* --lm-fig sizes BOTH the figures and the GOLD@15 / WIN RATE labels — one knob
   for the whole centre row. */
#simLaneMatchups .dp-lane-stat  { font-size: 18px; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); column-gap: 12px; padding: 3px 11px; --lm-fig: 17px; }
#simLaneMatchups .dp-lane-sample { font-size: 14.5px; }
#simLaneMatchups .dp-lane-chip .acc-chip { font-size: 14.5px; padding: 4px 12px; }
/* The win-rate chevrons hang in the column gutter, so they scale with it. */
#simLaneMatchups .dp-lane-boxes.wr-blue::before,
#simLaneMatchups .dp-lane-boxes.wr-red::after { font-size: 24px; }
#simLaneMatchups .dp-lane-boxes.wr-blue::before { margin-right: 16px; }
#simLaneMatchups .dp-lane-boxes.wr-red::after   { margin-left: 16px; }

/* Lane Matchups block inside a Match History game card (display only) */
.mh-lanes {
  max-width: 680px;
  margin: 12px auto 4px;
}

/* Narrow screens: tighten the center column, keep alignment intact */
@media (max-width: 560px) {
  .dp-lane { grid-template-columns: minmax(0, 1fr) 158px minmax(0, 1fr); gap: 18px; font-size: 13px; }
  .dp-lane-stat { grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); column-gap: 6px; font-size: 12.5px; --lm-fig: 11px; }
  .dp-lane-champ .champ-portrait,
  .dp-lane-champ .champ-portrait-placeholder { width: 30px; height: 30px; }
  .dp-lane-champ .dp-lane-name { display: none; }
}

/* ─── Mobile: Lane Matchups (Draft Simulator) ─────────────────────────────
   MUST stay ID-scoped. The #simLaneMatchups block above sets a 230px centre
   column and 50px portraits, and an ID beats the plain-class rules in the
   560px query above no matter how narrow the screen gets — so on a phone the
   card kept its desktop geometry, the fixed-width portraits (flex-shrink: 0)
   overflowed their squeezed 1fr columns, and the win-rate figures ended up
   underneath them. Sizes below are chosen so the two side columns stay far
   wider than the portrait, leaving the overlap impossible rather than merely
   unlikely. */
@media (max-width: 640px) {
  #simLaneMatchups .dp-lanes { max-width: 100%; padding: 8px 6px 4px; margin: 10px auto 6px; }
  #simLaneMatchups .lm-title { font-size: 14px; letter-spacing: .03em; }
  #simLaneMatchups .dp-lanes-caption { font-size: 10px; margin-bottom: 5px; }
  #simLaneMatchups .dp-lane { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 12px; font-size: 11px; padding: 5px 0; }
  #simLaneMatchups .dp-lane-role { font-size: 9px; min-width: 22px; }
  /* Both of these are set by the desktop block above and would otherwise carry
     their 20%-larger values down here: the 10px gap eats a 12px gutter the
     comment above was tuned around, and the name is still VISIBLE between
     561px and 640px, where an 18px face overflows a 150px centre layout. */
  #simLaneMatchups .dp-lane-champ { gap: 6px; }
  #simLaneMatchups .dp-lane-name { font-size: 11px; }
  #simLaneMatchups .dp-lane-champ .champ-portrait,
  #simLaneMatchups .dp-lane-champ .champ-portrait-placeholder { width: 28px; height: 28px; border-radius: 6px; }
  #simLaneMatchups .dp-lane-stat {
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
    column-gap: 4px;
    padding: 2px 5px;
    font-size: 11px;
    --lm-fig: 10.5px;
  }
  #simLaneMatchups .dp-lane-sample { font-size: 9.5px; }
  #simLaneMatchups .dp-lane-chip .acc-chip { font-size: 9.5px; padding: 2px 7px; }
  /* The chevrons hang OUTSIDE the boxes into the lane gutter; at the desktop
     13px offset they reach past a 12px gutter and land on the portrait. */
  #simLaneMatchups .dp-lane-boxes.wr-blue::before,
  #simLaneMatchups .dp-lane-boxes.wr-red::after { font-size: 13px; letter-spacing: -4px; }
  #simLaneMatchups .dp-lane-boxes.wr-blue::before { margin-right: 2px; }
  #simLaneMatchups .dp-lane-boxes.wr-red::after   { margin-left: 2px; }
}
.dp-arch {
  display: inline-block;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 10px;
}
.dp-arch.strong { border-color: var(--green); color: var(--green); }
.dp-offmeta { font-size: 12px; color: var(--red); margin-bottom: 8px; }

.dp-pairs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dp-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
.dp-pair-champs { display: flex; gap: 2px; flex-shrink: 0; }
.dp-pair-champs .champ-portrait,
.dp-pair-champs .champ-portrait-placeholder { width: 28px; height: 28px; border-radius: 4px; }
.dp-pair-body { flex: 1; min-width: 0; }
.dp-pair-top  { display: flex; align-items: center; gap: 6px; }
.dp-pair-tag  { font-size: 12px; font-weight: 600; color: var(--text); }
.dp-pair-flag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 4px;
}
.dp-pair-flag.strong { background: rgba(16,185,129,.18); color: var(--green); }
.dp-pair-flag.low    { background: rgba(161,161,170,.15); color: var(--text-dim); }
.dp-pair-stats { font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin-top: 2px; }
.dp-pair-stats .wr-high { color: var(--green); }
.dp-pair-stats .wr-low  { color: var(--red); }

.dp-nopairs { font-size: 13px; color: var(--text-dim); font-style: italic; padding: 6px 0; }

.dp-warns { margin-top: 10px; }
.dp-warn  { font-size: 12px; color: #fbbf24; margin-top: 3px; }

.dp-foot {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .dp-sides { grid-template-columns: 1fr; }
  .dp-head-pct { font-size: 34px; }
}

/* ═══════════════════════ ODD MAKER ═══════════════════════════════ */

.om-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px 60px;
  width: 100%;
  /* Head-to-Head page renders larger than the rest of the site — the equivalent
     of a 132% browser zoom, applied to this page only. zoom (not transform) so
     it is a real layout scale: text stays crisp and nothing overlaps. Was 1.15;
     stepped up another 15% once the sidebar rail freed the space either side. */
  zoom: 1.32;
}

/* ── League filter bar ── */
.om-league-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.om-league-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: .04em;
  transition: all .15s;
}

.om-league-btn:hover { color: var(--text); border-color: var(--gold); }
.om-league-btn.active { background: var(--gold); color: #000; border-color: var(--gold); }

/* ── Selector bar ── */
.om-selector-bar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.om-team-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.om-team-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.om-team-sel {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font);
  cursor: pointer;
}

.om-vs-pill {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  padding-bottom: 10px;
  letter-spacing: .1em;
}


.dm-section-title {
  color: #7dd3fc;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: .01em;
}

.pc-title {
  color: #f59e0b;
  font-size: 34px;
  font-weight: 800;
  margin: 24px 0 24px;
  letter-spacing: .02em;
  text-align: center;
}

/* ── Empty / loading ── */
.om-empty, .om-loading {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  padding: 60px 20px;
}

.om-loading { color: var(--gold); font-weight: 600; letter-spacing: .05em; }

/* ── Head-to-head header card: crest + name each side, H2H score between ── */
.om-odds-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  background: linear-gradient(180deg, rgba(33, 32, 39, .95), rgba(21, 20, 26, .95));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px 18px;
  margin-bottom: 12px;
  align-items: center;
  overflow: hidden; /* keeps the win-share bar inside the rounded corners */
}

/* Crest beside the team name, mirrored on the red side */
.om-side {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  text-align: center;
}

.om-side-b { text-align: center; }

.om-team-logo-wrap {
  grid-row: 1; grid-column: 1;
  height: 38px; display: flex; align-items: center; justify-content: center;
}
.om-side-b .om-team-logo-wrap { grid-column: 2; }
.om-team-logo { height: 34px; width: auto; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0, 0, 0, .55)); }

.om-team-name {
  grid-row: 1; grid-column: 2;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.om-side-b .om-team-name { grid-column: 1; }
.om-side-a .om-team-name { color: var(--blue); text-shadow: 0 0 18px rgba(96, 165, 250, .3); }
.om-side-b .om-team-name { color: var(--red);  text-shadow: 0 0 18px rgba(251, 113, 133, .3); }

/* Everything below the crest row spans both columns */
/* ── Head-to-head score in the middle of the card ── */
.om-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.om-h2h-score {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
.om-h2h-score b.a { color: var(--blue); opacity: .5; }
.om-h2h-score b.b { color: var(--red);  opacity: .5; }
.om-h2h-score b.lead { opacity: 1; text-shadow: 0 0 16px currentColor; }
.om-h2h-score i {
  font-style: normal; font-weight: 500; font-size: 20px; color: var(--text-dim);
}

.om-h2h-games {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

/* Narrow screens: shrink the crest row before the names start wrapping */
@media (max-width: 600px) {
  .om-odds-card { gap: 10px; padding: 12px 12px 14px; }
  .om-team-name { font-size: 15px; }
  .om-team-logo { height: 26px; }
  .om-team-logo-wrap { height: 30px; }
  .om-h2h-score { font-size: 26px; gap: 7px; }
}

/* Win-share bar pinned to the bottom edge: blue portion = team A's share */
.om-h2h-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(to right,
    var(--blue) 0, var(--blue) var(--a, 50%),
    var(--red) var(--a, 50%), var(--red) 100%);
}

/* ── Lower row ── */
.om-lower {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.om-factors-panel,
.om-h2h-panel,
.om-lanes-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

/* H2H panel runs tighter and darker than the others — dense list, not a form */
.om-h2h-panel {
  position: relative; /* anchors the aggregate O/U strip to the title line */
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(33, 32, 39, .95), rgba(21, 20, 26, .95));
}

.om-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Head-to-Head panel: title is a compact left-aligned label over the list */
.om-h2h-panel .om-panel-title {
  font-size: 10.5px;
  letter-spacing: .12em;
  margin: 0 0 8px 2px;
}

.om-lanes-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* ── Factors ── */
.om-factor-row {
  margin-bottom: 14px;
}

.om-factor-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 5px;
}

.om-factor-weight {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}

.om-factor-note {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 3px;
  display: block;
}

.om-factor-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.om-factor-val {
  font-size: 12px;
  font-family: var(--mono);
  min-width: 38px;
}

.om-factor-val.a { text-align: right; color: var(--blue); }
.om-factor-val.b { text-align: left;  color: var(--red); }

.om-factor-bar {
  flex: 1;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.om-factor-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--blue);
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Form dots ── */
.om-form-dots { display: inline-flex; gap: 3px; margin: 0 2px; }

.om-form-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}

.om-form-dot.w { background: rgba(16,185,129,.2); color: var(--green); }
.om-form-dot.l { background: rgba(244,63,94,.2);  color: var(--red); }
.om-form-sep { font-size: 12px; color: var(--text-dim); }

/* ── H2H ── */
.om-h2h-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

/* ── Player vs Player — one radar per lane under the H2H ledger ─────────── */
/* The panel borrows .om-h2h-panel's dark plate; only the title line and the
   card grid are its own. */
/* Container queries, not media queries: this panel sits inside two nested
   `zoom` scales (body > * at --ui-zoom, then the odds wrap), so the viewport
   width a media query reports is ~1.45x the width the grid actually lays out
   in. A container query measures the panel itself and is immune to that. */
.om-pvp-panel {
  padding: 16px 18px 20px;
  border-radius: 16px;
  container-type: inline-size;
  container-name: pvp;
}

/* Header: one centred column — title, the scope it covers, then the colour key,
   closed by a hairline. Nothing floats to an edge, so the panel reads from the
   middle out and the cards below hang off a single axis. */
.om-pvp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 4px 0 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.om-pvp-panel .om-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;   /* wide tracking is the whole styling here */
  text-transform: uppercase;
  color: var(--text);
}
/* The season/league the numbers come from, set as a quiet chip rather than a
   second heading. */
.om-pvp-scope {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.om-pvp-scope:not(:empty) {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}

/* Which colour is which team — stated once, so the cards themselves only need
   to carry player names. */
.om-pvp-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.pvp-key {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.05);
}
.pvp-key::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
}
.pvp-key.a::before { background: var(--blue); box-shadow: 0 0 0 3px rgba(91,156,248,.16); }
.pvp-key.b::before { background: var(--red);  box-shadow: 0 0 0 3px rgba(251,90,113,.16); }

/* Three lanes across is the comfortable default — five across at this panel's
   width would leave each radar too narrow for its own axis labels, which is
   exactly the dim-micro-text failure mode to avoid. Five only kicks in if the
   panel ever gets genuinely wide. */
.om-pvp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@container pvp (min-width: 1120px) {
  .om-pvp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container pvp (max-width: 560px) {
  .om-pvp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container pvp (max-width: 340px) {
  .om-pvp-grid { grid-template-columns: 1fr; }
}

/* A soft top-lit plate rather than a boxed-in outline: the border is a hairline
   and the light comes from the gradient, which is what stops five of these in a
   row from reading as a wireframe. */
.pvp-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 42%, rgba(255,255,255,0) 100%),
    rgba(20,22,30,.55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px 14px 12px;
  transition: border-color .18s ease, transform .18s ease;
  /* Grid items default to min-content width; a canvas reports its drawing
     buffer as that minimum, so without this the chart widens its own column
     and the row count collapses. */
  min-width: 0;
}
.pvp-card:hover {
  border-color: rgba(255,255,255,.13);
  transform: translateY(-1px);
}

/* Role sits neutral on purpose. The card already spends colour on two player
   names, the green arrows and the two polygons — an accent-coloured heading on
   top of that is the difference between "designed" and "busy". */
.pvp-role {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
/* The Riot position glyphs ship near-white already, so they only need holding
   back to the label's weight — a brightness filter on top washed them out. */
.pvp-role-icon {
  width: 15px; height: 15px;
  opacity: .78;
}

.pvp-names {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px;
}
.pvp-name {
  font-size: 15px; font-weight: 700;
  letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pvp-name.a { color: var(--blue); text-align: left; }
.pvp-name.b { color: var(--red);  text-align: right; }

/* Chart.js sizes itself from this box, so the box has to be the one thing that
   is NOT content-derived — a height of its own plus maintainAspectRatio:false
   is what stops the canvas from growing a little on every resize pass. */
.pvp-canvas-wrap {
  position: relative;
  width: 100%;
  height: 168px;
  margin: 0 0 10px;
}
.pvp-canvas-wrap canvas { display: block; }

/* Value · label · value, blue on the left and red on the right so the row
   reads in the same direction as the rest of the tab. Rows are separated by
   hairlines rather than sat in a bordered box — same rhythm, a quarter of the
   ink. */
.pvp-stats {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pvp-stat {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}
.pvp-stat + .pvp-stat { border-top: 1px solid rgba(255,255,255,.04); }
/* --text-dim, not --text-faint: these are small and letter-spaced already, and
   unreadable grey micro-text is the one thing this UI must not do. */
.pvp-stat-label {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
}
.pvp-val {
  font-size: 14.5px; font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.pvp-val.a { text-align: left; }
.pvp-val.b { text-align: right; }
/* Only the winning side is fully lit — the loser stays legible but recedes. */
.pvp-val.a.lead { color: var(--blue); font-weight: 800; }
.pvp-val.b.lead { color: var(--red);  font-weight: 800; }

/* Green ▲ on the better number. Sits on the label side of the value so the two
   arrows in a row point at each other across the label rather than drifting out
   to the card edges, and the figures themselves stay flush-aligned. */
.pvp-lead-arrow {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: 1px;
}
.pvp-val.b .pvp-lead-arrow { margin: 0 5px 0 0; }

/* ── Head-to-Head History — dense ledger rows + per-game Over/Under ─────── */
/* The aggregate O/U tally rides on the panel title line, top-right */
.oh-summary {
  position: absolute; top: 10px; right: 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.oh-summary .oh-ou-strip.agg { gap: 6px; }

/* The list is one card; rows are hairline-separated instead of floating boxes */
.oh-list {
  display: flex; flex-direction: column;
  background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  overflow: hidden;
}
.oh-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 7px 12px 7px 10px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.oh-row:last-child { border-bottom: 0; }
.oh-row:nth-child(even) { background: rgba(255, 255, 255, .028); }
.oh-row:hover { background: rgba(255, 255, 255, .06); }
.oh-row.win-a { border-left-color: #60a5fa; }
.oh-row.win-b { border-left-color: #fb7185; }

.oh-when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oh-date { font-size: 12px; font-weight: 700; color: var(--text); font-family: var(--mono); white-space: nowrap; }
.oh-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.oh-game { font-size: 11.5px; font-weight: 700; color: #facc15; white-space: nowrap; }

/* Winner — the only team shown per row, coloured by identity (A = blue, B = red) */
.oh-winner { display: flex; justify-content: flex-start; min-width: 0; }
.oh-win-badge {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
  padding: 3px 9px 3px 5px; border-radius: 999px; white-space: nowrap;
}
.oh-win-badge.a { color: #8cc2ff; background: rgba(60, 110, 180, .26); border-color: rgba(96, 165, 250, .34); }
.oh-win-badge.b { color: #ff9aab; background: rgba(160, 60, 78, .26); border-color: rgba(251, 113, 133, .34); }
.oh-win-badge .oh-logo { width: 16px; height: 16px; }
.oh-win-name { line-height: 1; overflow: hidden; text-overflow: ellipsis; }
.oh-win-tbd { color: var(--text-dim); }
.oh-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

/* Over/Under chips sit at the right edge of the row, on one line */
.oh-row > .oh-ou-strip { justify-self: end; flex-wrap: nowrap; }

/* Over/Under chips — same colour vocabulary as Match History, borderless & tight */
.oh-ou-strip { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.oh-ou {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--mono); font-size: 11.5px;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .05);
  white-space: nowrap;
}
.oh-ou-label {
  font-family: inherit; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.oh-ou b { font-weight: 800; font-size: 11.5px; }
.oh-ou .hi { color: #fb7185; }
.oh-ou .md { color: #60a5fa; }
.oh-ou .lo { color: #4ade80; }
.oh-ou-val { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--text); }

@media (max-width: 760px) {
  .oh-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
    padding: 8px 10px;
  }
  .oh-row > .oh-ou-strip { grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; }
  .oh-winner { justify-content: flex-end; }
  /* No room beside the title on narrow screens — drop the tally back in flow */
  .oh-summary { position: static; padding: 0 2px 8px; }
}

/* ── Lanes table ── */
.om-lanes-panel { margin-bottom: 16px; }

.om-lanes-table-wrap { overflow-x: auto; }

.om-lanes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.om-lanes-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.om-col-player { width: 22%; }
.om-col-player.left  { text-align: left; }
.om-col-player.right { text-align: right; }
.om-col-stat  { width: 8%;  text-align: center; font-family: var(--mono); }
.om-col-role  { width: 10%; text-align: center; }
.om-col-edge  { width: 14%; text-align: center; }

.om-col-stat.right-stat { text-align: center; }

.om-lane-row td { padding: 10px 10px; vertical-align: middle; }
.om-lane-row + .om-lane-row { border-top: 1px solid var(--border); }

.om-lane-row.edge-a { background: rgba(59,130,246,.04); }
.om-lane-row.edge-b { background: rgba(244,63,94,.04); }

.om-player-name {
  font-weight: 600;
  color: var(--text-dim);
}

.om-col-player.winner .om-player-name,
.om-col-stat.winner {
  color: var(--text);
  font-weight: 700;
}

.om-col-stat.dim { color: var(--text-dim); font-size: 12px; }

.om-no-data { color: var(--text-dim); opacity: .4; }

.om-role-icon  { font-size: 13px; display: block; }
.om-role-label { font-size: 12px; color: var(--text-dim); display: block; }

.om-edge-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.om-edge-badge.a    { background: rgba(59,130,246,.18); color: #60a5fa; }
.om-edge-badge.b    { background: rgba(244,63,94,.18);  color: #fb7185; }
.om-edge-badge.even { background: rgba(161,161,170,.15); color: var(--text-dim); }

.om-rft-btn {
  display: inline-block;
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  transition: color .15s, border-color .15s;
}

.om-rft-btn:hover { color: var(--gold); border-color: var(--gold); }

.om-rftgg-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
}

.om-rftgg-link {
  color: var(--gold);
  text-decoration: none;
}

.om-rftgg-link:hover { text-decoration: underline; }

.om-stat-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.om-stat-pips.right { justify-content: flex-end; }

.om-stat-pip {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .03em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(20,184,166,.15);
  color: var(--gold);
  border: 1px solid rgba(20,184,166,.25);
}

/* ── Data Page ── */
.data-page-wrap {
  padding: 2rem;
  max-width: 960px;
  margin: 0 auto;
}

.data-subtab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
  padding-bottom: 0;
}

.data-subtab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 0.6rem 1rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}

.data-subtab:hover { color: var(--text); }
.data-subtab.active { color: var(--text); border-bottom-color: var(--gold); }

.data-subtab-scope {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .04em;
  padding-right: 0.25rem;
}

.data-panel { }

.data-tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

.data-tool-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.data-tool-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.data-tool-scope {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

/* Role pill bar */
.data-role-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.data-role-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}

.data-role-btn:hover { color: var(--text); border-color: var(--gold); }
.data-role-btn.active { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 700; }

/* A vs B bar */
.data-avb-bar {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.data-champ-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 180px;
}

.data-champ-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.data-champ-label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}

.data-champ-input-wrap {
  position: relative;
}

.data-champ-input-wrap input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font);
  box-sizing: border-box;
}

.data-champ-input-wrap input:focus {
  outline: none;
  border-color: var(--gold);
}

.data-vs-pill {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  padding-bottom: 10px;
  letter-spacing: .1em;
}

.data-search-btn {
  background: var(--gold);
  color: #000;
  border: none;
  padding: 10px 28px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.data-search-btn:hover { background: #e6b800; }

/* Autocomplete dropdown */
.data-suggest-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #3a3a42;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  z-index: 200;
  max-height: 360px;
  overflow-y: auto;
}

.data-suggest-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
  color: #f4f4f5;
}

.data-suggest-list li:hover,
.data-suggest-list li.active { background: rgba(255,255,255,0.10); }

.data-suggest-list li img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

/* H2H results */
.data-h2h-empty {
  color: var(--text-dim);
  font-size: 13px;
  padding: 0.75rem 0;
}

/* Single specific matchup card (A vs B both selected) */
.data-matchup-card {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.data-mc-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  gap: 8px;
}

.data-mc-side.side-a { background: rgba(96,165,250,.06); }
.data-mc-side.side-b { background: rgba(251,113,133,.06); }

.data-mc-portrait {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--border);
}

.data-mc-portrait.side-a { border-color: #60a5fa; }
.data-mc-portrait.side-b { border-color: #fb7185; }

.data-mc-champ-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.data-mc-wr {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.data-mc-wr.side-a { color: #60a5fa; }
.data-mc-wr.side-b { color: #fb7185; }

.data-mc-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 1rem;
}

.data-mc-vs { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .1em; }
.data-mc-games { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.data-mc-role { font-size: 12px; color: var(--text-dim); }

.data-mc-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  width: 80px;
}

.data-mc-bar-a { background: #60a5fa; transition: width .4s; }
.data-mc-bar-b { background: #fb7185; transition: width .4s; }

/* Matchup list (only A selected) */
.data-h2h-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-h2h-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.data-h2h-table th.sortable { cursor: pointer; user-select: none; }
.data-h2h-table th.sortable:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.data-h2h-table th.sort-active { color: var(--gold); }

.data-h2h-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.data-h2h-table tr:last-child td { border-bottom: none; }
.data-h2h-table tr:hover td { background: rgba(255,255,255,0.03); }

.h2h-opp-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.h2h-opp-cell img {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  object-fit: cover;
}

.h2h-opp-name { font-weight: 600; }

.h2h-bar-labels {
  display: flex;
  justify-content: space-between;
  width: 120px;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 700;
}

.h2h-bar-wrap {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  width: 120px;
  background: var(--border);
}

.h2h-bar-a { background: #60a5fa; }
.h2h-bar-b { background: #fb7185; }

.h2h-wr-a { color: #60a5fa; font-weight: 700; }
.h2h-wr-b { color: #fb7185; font-weight: 700; }
.wr-green      { color: #4ade80; font-weight: 700; }
.wr-green-soft { color: #86efac; font-weight: 600; }
.wr-blue       { color: #60a5fa; font-weight: 700; }
.wr-yellow     { color: #ffff00; font-weight: 700; }
.wr-red        { color: #fb7185; font-weight: 700; }
.wr-red-soft   { color: #fda4af; font-weight: 600; }
.h2h-games-cell  { color: var(--text-dim); font-size: 12px; }
.h2h-wins-cell   { color: #4ade80; font-size: 12px; font-weight: 600; }
.h2h-losses-cell { color: #fb7185; font-size: 12px; font-weight: 600; }

/* ── Teams tab ─────────────────────────────────────────────────────── */
.teams-wrap { padding: 1rem 0; }

.teams-top-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 1.25rem;
}

.teams-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  min-width: 180px;
}
.teams-select:focus { outline: none; border-color: var(--gold); }

.teams-main {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.teams-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  flex-shrink: 0;
}

.teams-player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.teams-player-card:hover { border-color: var(--gold); }
.teams-player-card.active { border-color: var(--gold); background: var(--surface2); }

.teams-player-role {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold);
  background: rgba(20,184,166,.12);
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 52px;
  text-align: center;
}

.teams-player-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.teams-champ-stats { flex: 1; min-width: 0; }

.tcs-player-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}
.tcs-player-name { font-size: 18px; font-weight: 700; color: var(--text); }
.tcs-player-role {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold);
  background: rgba(20,184,166,.12);
  border-radius: 4px;
  padding: 3px 8px;
}
.tcs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tcs-table th {
  text-align: left;
  padding: 6px 10px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.tcs-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.tcs-table tr:last-child td { border-bottom: none; }
.tcs-table tr:hover td { background: var(--surface2); }
.tcs-table .tcs-champ-name { font-weight: 600; }
.tcs-table .tcs-level-cell { color: var(--gold); font-weight: 700; }

/* ── Synergy champion overview header ── */
.syn-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.syn-ov-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.syn-ov-left img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.syn-ov-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.syn-ov-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.syn-ov-total {
  font-size: 13px;
  color: var(--text-dim);
}

.syn-ov-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.syn-ov-role {
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 2px 8px;
}

.syn-ov-bar-wrap {
  height: 4px;
  background: rgba(251,113,133,0.3);
  border-radius: 3px;
  overflow: hidden;
}

.syn-ov-bar-fill {
  height: 100%;
  background: #60a5fa;
  border-radius: 3px;
  transition: width .4s;
}

/* ═══════════════════════ PREDICTION TAB ═══════════════════════ */
.pred-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }

.pred-results { margin-top: 12px; }

/* Orchestrated entrance — result cards rise in sequence, once per prediction. */
@keyframes predRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.pred-results > * { animation: predRise .5s cubic-bezier(.22,.9,.34,1) both; }
.pred-results > :nth-child(2) { animation-delay: .07s; }
.pred-results > :nth-child(3) { animation-delay: .14s; }
.pred-results > :nth-child(4) { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .pred-results > * { animation: none; }
  .pred-duel-fill { transition: none !important; }
}

/* ── Section header pattern: emoji glyph chip + Cinzel title (+ optional pill).
   Every card on this tab opens with one, so titles carry a visual by system. ── */
.psec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.psec-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.14), rgba(45, 212, 191, 0.05));
  border: 1px solid rgba(45, 212, 191, 0.25);
}
.psec-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text);
}
.psec-sub {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}
.psec-pill {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.psec-pill.blue { color: var(--blue); border-color: rgba(91, 156, 248, .35); }
.psec-pill.red  { color: var(--red);  border-color: rgba(251, 90, 113, .35); }
.psec-pill.dim  { font-weight: 600; color: var(--text-dim); }

/* ── Hero — the verdict card ── */
.pred-hero {
  padding: 20px 26px 24px;
  background:
    radial-gradient(120% 140% at 8% 0%,   rgba(91, 156, 248, 0.13), transparent 44%),
    radial-gradient(120% 140% at 92% 0%,  rgba(251, 90, 113, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(22, 25, 34, 0.88), rgba(12, 14, 19, 0.88));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pred-hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 14px;
}
.pred-hero-eyebrow .psec-glyph { width: 28px; height: 28px; font-size: 15px; }
.pred-hero-eyebrow-text {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.pred-hero-duelists {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.pred-hero-side {
  text-align: center;
  padding: 14px 10px 12px;
  border-radius: 12px;
  transition: background .3s ease;
}
/* The favored side gets a faint halo in its own color. */
.pred-hero-side.blue.fav { background: radial-gradient(80% 100% at 50% 0%, rgba(91, 156, 248, 0.12), transparent 75%); }
.pred-hero-side.red.fav  { background: radial-gradient(80% 100% at 50% 0%, rgba(251, 90, 113, 0.12), transparent 75%); }
.pred-hero-crest {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.pred-hero-team {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pred-hero-side.blue .pred-hero-team { color: var(--blue); }
.pred-hero-side.red  .pred-hero-team { color: var(--red); }
.pred-hero-prob {
  font-size: clamp(40px, 5.4vw, 56px);
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.pred-hero-prob.blue { color: var(--blue); text-shadow: 0 0 26px rgba(91, 156, 248, .35); }
.pred-hero-prob.red  { color: var(--red);  text-shadow: 0 0 26px rgba(251, 90, 113, .35); }
.pred-hero-side:not(.fav) .pred-hero-prob { opacity: .82; text-shadow: none; }
.pred-hero-tag {
  min-height: 26px;
  margin-top: 8px;
}
.pred-hero-tag.on {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold);
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid rgba(45, 212, 191, 0.35);
}
.pred-hero-vs {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--text-dim);
  align-self: center;
}

/* Signature: the duel bar — one split bar, notched at the 50% coin-flip line. */
.pred-duel { margin-top: 16px; }
.pred-duel-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(251, 90, 113, .75), rgba(251, 90, 113, .5));
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}
.pred-duel-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: linear-gradient(90deg, rgba(91, 156, 248, .55), var(--blue));
  border-right: 2px solid rgba(255, 255, 255, 0.85); /* glowing seam where the sides meet */
  box-shadow: 6px 0 16px rgba(91, 156, 248, 0.5);
  transition: width .8s cubic-bezier(.22,.9,.34,1);
}
.pred-duel-tick {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255, 255, 255, 0.35);
}
.pred-duel-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.pred-duel-label {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--mono);
}
.pred-duel-label.blue { color: var(--blue); }
.pred-duel-label.red  { color: var(--red); }

@media (max-width: 560px) {
  .pred-hero { padding: 16px 14px 18px; }
  .pred-hero-duelists { gap: 8px; }
  .pred-hero-crest { width: 40px; height: 40px; }
  .pred-hero-team { font-size: 14px; }
}

/* Breakdown — the signals card */
.pred-breakdown {
  margin-top: 16px;
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.6), rgba(12, 12, 14, 0.6));
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.pred-breakdown .psec-head {
  padding: 13px 18px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.pred-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pred-table .pred-th.blue, .pred-table .pred-th.red { width: 25%; }
.pred-table th, .pred-table td { padding: 13px 16px; }
.pred-th {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pred-th.blue { color: var(--blue); text-align: center; }
.pred-th.red  { color: var(--red);  text-align: center; }
.pred-th-signal { font-size: 12.5px; color: var(--text-dim); text-align: center; font-weight: 600; }
.pred-table tbody tr { border-top: 1px solid var(--border); }
.pred-signal {
  text-align: center;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}
.pred-signal-glyph { margin-right: 7px; font-size: 15px; }
.pred-signal-note {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  margin-top: 3px;
}
.pred-val {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dim);
}
.pred-val.blue { text-align: center; }
.pred-val.red  { text-align: center; }
.pred-val.blue.win { color: var(--blue); }
.pred-val.red.win  { color: var(--red); }
.pred-na { font-size: 13px; opacity: .6; font-style: italic; font-family: var(--font); }
.pred-row-excluded { opacity: .55; }
.pred-row-avg {
  background: rgba(20, 184, 166, 0.09);
  border-top: 2px solid var(--gold-dim) !important;
}
.pred-row-avg .pred-val { font-size: 23px; }
.pred-row-avg .pred-val.win { text-shadow: 0 0 18px currentColor; }
.pred-row-avg .pred-signal { color: var(--gold); font-weight: 800; font-size: 15px; }

/* Manual Matchup Odds inputs (Prediction tab + Match History) */
.pred-odds-input, .mh-odds-input {
  width: 62px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--mono);
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  padding: 3px 4px;
  -moz-appearance: textfield;
}
.pred-odds-input { font-size: 18px; width: 74px; }
.pred-odds-input:focus, .mh-odds-input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surface);
}
.pred-odds-input::placeholder, .mh-odds-input::placeholder { color: var(--text-dim); font-weight: 400; }
.pred-odds-input::-webkit-outer-spin-button, .pred-odds-input::-webkit-inner-spin-button,
.mh-odds-input::-webkit-outer-spin-button, .mh-odds-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pred-row-manual .pred-signal-note { color: var(--gold-dim); }

.pred-note {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
  text-align: center;
}
.pred-note b { color: var(--gold); }

/* "Things to be aware of" — side-by-side layout below the prediction. H2H and
   Lane Matchups span the full width; the two Signs share a row and grow to fill. */
.pred-aware {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
/* Draft Simulator copy: two cards (Head to Head + Side Form) since the draft-edge
   card was removed 2026-08-20 — capped and centred so the pair sits in the
   middle of the page instead of stretching edge to edge. */
#simSignals {
  /* Narrowed to 880px (his request 2026-08-21). Keep in step with the later
     #simSignals rule in the Team Edges section, which wins on source order. */
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
/* Neutralize each panel's own centering/width so the flexbox controls layout. */
.pred-aware > .pred-h2h,
.pred-aware > .pred-signs,
.pred-aware > .pred-lanes {
  margin: 0;
  max-width: none;
}
/* H2H shares the row like the other cards and matches their height; the score
   row centers itself in the space under the header. */
.pred-aware > .pred-h2h   { flex: 1 1 300px; display: flex; flex-direction: column; }
.pred-aware > .pred-h2h .pred-h2h-row { flex: 1; align-content: center; }
.pred-aware > .pred-signs { flex: 1 1 300px; }  /* Draft Signs + Side form share a row */
.pred-aware > .pred-lanes { flex: 1 1 100%; }   /* full-width lane list */
@media (max-width: 620px) {
  .pred-aware > .pred-signs { flex-basis: 100%; } /* stack on narrow screens */
}

/* Head-to-head card on the Prediction tab */
.pred-h2h {
  position: relative;
  max-width: 560px;
  margin: 16px auto 0;
  padding: 9px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.6), rgba(12, 12, 14, 0.6));
}
/* Compact header inside the H2H card only — the shared .psec-* sizes stay. */
.pred-h2h .psec-head { margin-bottom: 6px; gap: 8px; }
.pred-h2h .psec-glyph { width: 24px; height: 24px; font-size: 14px; }
.pred-h2h .psec-title { font-size: 13.5px; }
.pred-h2h .psec-pill { font-size: 12px; padding: 3px 10px; }
.pred-h2h-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.pred-h2h-team {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  color: var(--text);
  opacity: .75;
}
.pred-h2h-team.lead { opacity: 1; }
.pred-h2h-team.blue b { color: var(--blue); font-weight: 800; }
.pred-h2h-team.red  b { color: var(--red);  font-weight: 800; }
/* Crest carries the identity now that the name is gone — bigger, and the row
   spreads the two logos evenly around the score. */
.pred-h2h-logo { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.pred-h2h-score {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 36px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
}
.pred-h2h-score b.blue { color: var(--blue); opacity: .55; }
.pred-h2h-score b.red  { color: var(--red);  opacity: .55; }
.pred-h2h-score b.lead { opacity: 1; text-shadow: 0 0 16px currentColor; }
.pred-h2h-dash { color: var(--text-dim); font-weight: 500; }
/* Thin win-share bar pinned to the bottom edge: blue fill = team A share. */
.pred-h2h-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(to right,
    var(--blue) 0, var(--blue) var(--a, 50%),
    var(--red) var(--a, 50%), var(--red) 100%);
}

/* Draft-advantage "Signs" — historical win rate for an edge this size */
.pred-signs {
  margin: 16px auto 0;
  max-width: 560px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 14px;
  padding: 15px 18px;
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.6), rgba(12, 12, 14, 0.6));
}
.pred-signs.blue { border-left-color: var(--blue); }
.pred-signs.red  { border-left-color: var(--red); }
.pred-signs.even { border-left-color: var(--text-dim); }
/* Bigger edges get a warmer, more prominent fill so they stand out at a glance. */
.pred-signs.tier-10 { background: rgba(255, 149, 0, 0.10); border-left-color: #ff9500; }
.pred-signs.tier-10 .psec-glyph { background: rgba(255, 149, 0, 0.15); border-color: rgba(255, 149, 0, 0.4); }
.pred-signs.tier-7  { background: rgba(88, 200, 120, 0.08); }
.pred-signs-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}
.pred-signs-body b { font-weight: 700; }
.pred-signs-body b.blue { color: var(--blue); }
.pred-signs-body b.red  { color: var(--red); }
.pred-signs-foot {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* Side-form sign — each team's WR on the side it's actually playing */
.pred-sideform { border-left-color: var(--text-dim); }
.pred-sideform.blue { border-left-color: var(--blue); }
.pred-sideform.red  { border-left-color: var(--red); }
.pred-sf-teams {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 11px;
}
.pred-sf-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 15px;
}
.pred-sf-team b { font-weight: 800; color: var(--text); }
.pred-sf-team.blue { border-top: 2px solid var(--blue); }
.pred-sf-team.red  { border-top: 2px solid var(--red); }
.pred-sf-team.fav {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.pred-sf-team.fav.blue { background: rgba(91, 156, 248, 0.10); }
.pred-sf-team.fav.red  { background: rgba(251, 90, 113, 0.10); }
.pred-sf-team.nodata { opacity: .65; }
.pred-sf-team.nodata em { font-size: 13px; color: var(--text-dim); font-style: normal; }
.pred-sf-star { color: var(--gold); font-size: 12px; margin-right: 4px; }
/* Name line: keeps the ▲ (better side form than the opponent) and the 👑 (on its
   own preferred side) on one row with the team name between them. */
.pred-sf-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pred-sf-name .pred-sf-star { margin-right: 0; }
.pred-sf-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pred-sf-crown { flex: 0 0 auto; font-size: 12px; line-height: 1; }
.pred-sf-rec { font-size: 13.5px; color: var(--text-dim); }
.pred-sf-rec b { color: var(--text); font-weight: 700; }
.pred-sf-vs {
  align-self: center;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Per-lane winners — Lane Matchups breakdown on the Prediction tab */
.pred-lanes {
  margin: 16px auto 0;
  max-width: 560px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 22, 26, 0.6), rgba(12, 12, 14, 0.6));
}
.pred-lanes .psec-head {
  padding: 13px 18px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.pred-lane {
  display: grid;
  grid-template-columns: 108px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}
.pred-lane:last-child { border-bottom: none; }
.pred-lane.blue { box-shadow: inset 3px 0 0 var(--blue); }
.pred-lane.red  { box-shadow: inset 3px 0 0 var(--red); }
.pred-lane.even { box-shadow: inset 3px 0 0 var(--text-dim); }

.pred-lane-role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pred-lane-role-glyph { font-size: 15px; }
.pred-lane-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--text);
}
.pred-lane-pick .champ-portrait,
.pred-lane-pick .champ-portrait-placeholder { width: 26px; height: 26px; border-radius: 5px; flex-shrink: 0; }
.pred-lane-pick b { font-weight: 700; }
.pred-lane-team {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}
.pred-lane-team.blue { color: var(--blue); }
.pred-lane-team.red  { color: var(--red); }
.pred-lane-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.pred-lane-pct {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--text);
}
.pred-lane-pct.blue { color: var(--blue); }
.pred-lane-pct.red  { color: var(--red); }
.pred-lane-wr-val {
  font-size: 12.5px;
  font-family: var(--mono);
  color: var(--text-dim);
}
.pred-lane-wr-val.wr-green { color: #4ade80; font-weight: 600; }
.pred-lane-wr-val.wr-green-soft { color: #86efac; font-weight: 500; }
.pred-lane-wr-val.wr-red { color: var(--red); font-weight: 600; }
.pred-lane-wr-val.wr-red-soft { color: #fb8b9b; font-weight: 500; }
.pred-lane-g {
  font-size: 12.5px;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: nowrap;
  min-width: 56px;
  text-align: right;
}

/* ─── Shared card shell (Setups page tables reuse these) ─────────────────── */
.fb-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.fb-card-head { padding:0.85rem 1.1rem; border-bottom:1px solid var(--border); display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap; }
.fb-card-title { font-size:0.9rem; font-weight:700; color:var(--text); }
.fb-card-sub { font-size:12px; color:var(--text-dim); letter-spacing:.02em; }
.fb-card-body { padding:0.45rem 0.4rem; max-height:440px; overflow-y:auto; }

/* .kda-players-table + .kda-star are reused by the Data → Champion Time table shell */
.kda-players-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kda-players-table th {
  text-align: left; color: var(--text-dim); font-weight: 600; padding: 7px 10px;
  border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.kda-players-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); font-family: var(--mono); white-space: nowrap; }
.kda-players-table td:nth-child(6), .kda-players-table td:nth-child(7),
.kda-players-table td:nth-child(8), .kda-players-table td:nth-child(9),
.kda-players-table td:nth-child(10) { text-align: right; }
.kda-players-table th:nth-child(6), .kda-players-table th:nth-child(7),
.kda-players-table th:nth-child(8), .kda-players-table th:nth-child(9),
.kda-players-table th:nth-child(10) { text-align: right; }
.kda-star { color: var(--gold-dim); font-weight: 700; margin-left: 2px; }

/* ── Champion Time — avg match length per champion ─────────────────────── */
.time-controls { gap: 24px; align-items: flex-end; }
.time-baseline { color: var(--text-dim); font-size: 13px; font-family: var(--mono); padding-bottom: 8px; }
.time-baseline b { color: var(--gold); font-weight: 700; }
.time-table-scroll { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
/* Numeric columns (G, Avg, vs Lg, Shortest, Longest) right-aligned. */
.time-table td:nth-child(n+2), .time-table th:nth-child(n+2) { text-align: right; }
.time-table th[data-sort-col] { cursor: pointer; user-select: none; }
.time-table th[data-sort-col]:hover { color: var(--text); }
.time-td-champ { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.time-champ-portrait { width: 22px; height: 22px; border-radius: 4px; flex: none; }
.time-avg { font-weight: 700; color: var(--gold); }
.time-longer  { color: #f0a868; }  /* appears in longer-than-average games */
.time-shorter { color: #6fc3df; }  /* appears in shorter-than-average games */

/* ── Predicted game length (Match History) ──────────── */
.len-longer  { color: #f0a868; }   /* ran / runs longer than the reference */
.len-shorter { color: #6fc3df; }   /* ran / runs shorter than the reference */

/* ── Draft Simulator — Possible Setups (live confirmed bet-setup matches) ── */
.sim-possible-setups { margin: 18px auto 6px; max-width: 1100px; }
.sps-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--text); text-align: center; margin-bottom: 10px; }
.sps-title-sub { font-weight: 500; color: var(--text-dim); font-size: 12px; margin-left: 8px; letter-spacing: 0; }
/* Over / Under two-column split (Possible Setups) */
.sps-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.sps-col { display: flex; flex-direction: column; gap: 10px; }
.sps-col-head { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-align: center; padding: 4px 0; border-radius: 7px; }
.sps-col-head.over  { color: #2dd4bf; background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.35); }
.sps-col-head.under { color: #f87189; background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.35); }
.sps-col-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 14px 0; border: 1px dashed var(--border); border-radius: 10px; }
@media (max-width: 720px) { .sps-split { grid-template-columns: 1fr; } }
.sps-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(45,212,191,0.35);
  background: radial-gradient(140% 160% at 0% 0%, rgba(45,212,191,0.09), rgba(255,255,255,0.012));
  box-shadow: 0 3px 14px rgba(0,0,0,0.28);
}
.sps-icon { font-size: 1.5rem; line-height: 1; flex: none; }
.sps-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sps-name { font-size: 14px; font-weight: 800; color: var(--text); }
.sps-verdict {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  color: #0c0e13; background: var(--gold); border-radius: 10px; padding: 2px 8px;
  white-space: nowrap;
}
/* One market per line: the chip plus that market's per-team backtest chips. */
.sps-markets { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sps-market {
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 10px; white-space: nowrap;
}
.sps-market b { font-family: var(--mono); margin-left: 4px; }
.sps-market.over  { background: rgba(45,212,191,0.16); color: var(--gold); border: 1px solid rgba(45,212,191,0.5); }
.sps-market.under { background: rgba(251,90,113,0.14); color: var(--red);  border: 1px solid rgba(251,90,113,0.5); }
/* Under-lean cards mirror the teal over card in red. */
.sps-card.under {
  border-color: rgba(251,90,113,0.35);
  background: radial-gradient(140% 160% at 0% 0%, rgba(251,90,113,0.09), rgba(255,255,255,0.012));
}
.sps-spot { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.sps-meta { font-size: 11px; color: var(--text-faint); }

@media (max-width: 760px) {
  .sim-possible-setups { padding: 0 12px; }
}

/* ── Things to consider + Team Tags board, side by side ── */
.consider-row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  max-width: 1500px; margin: 20px auto 8px; padding: 0 12px;
}
.consider-row .sie-wrap { flex: 3 1 560px; margin: 0; max-width: none; }
.consider-row .stb-wrap { flex: 2 1 400px; }

/* ── Things to consider: discovered edges the current draft hits (Draft Sim) ── */
.sie-wrap {
  margin: 20px auto 8px; max-width: 1100px; padding: 12px 14px;
  border: 1px solid rgba(227,178,60,0.45); border-radius: 16px;
  background: radial-gradient(150% 140% at 0% 0%, rgba(227,178,60,0.08), rgba(255,255,255,0.012));
  box-shadow: 0 4px 18px rgba(0,0,0,0.30);
}

/* ── Team Tags board: per-team champion tag chips + over-31:00 checklist ── */
.stb-wrap {
  padding: 12px 14px; border-radius: 16px;
  border: 1px solid rgba(91,141,217,0.45);
  background: radial-gradient(150% 140% at 100% 0%, rgba(91,141,217,0.08), rgba(255,255,255,0.012));
  box-shadow: 0 4px 18px rgba(0,0,0,0.30);
}
.stb-check {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.028); border: 1px solid rgba(255,255,255,0.10);
}
.stb-check-head {
  position: relative;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  font-size: 17px; font-weight: 900; letter-spacing: .07em; color: var(--gold);
  margin-bottom: 8px;
}
.stb-check-head .stb-check-score { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.stb-check-score { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--text-dim); }
.stb-check-score.ok { color: #2dd4bf; }
.stb-check-row {
  display: flex; align-items: baseline; gap: 10px; padding: 5px 8px;
  border-radius: 8px; border-left: 3px solid transparent;
}
.stb-check-row.ok  { border-left-color: #2dd4bf; background: rgba(45,212,191,0.07); }
.stb-check-row.bad { border-left-color: var(--red); background: rgba(251,90,113,0.06); }
.stb-check-row + .stb-check-row { margin-top: 4px; }
.stb-check-mark { font-size: 15px; font-weight: 900; flex: none; width: 18px; text-align: center; }
.stb-check-row.ok  .stb-check-mark { color: #2dd4bf; }
.stb-check-row.bad .stb-check-mark { color: var(--red); }
.stb-check-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.stb-check-count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.stb-check-verdict {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px; text-align: center;
  font-size: 13.5px; font-weight: 900; letter-spacing: .05em; color: #2dd4bf;
  background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.4);
}
.stb-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 560px) { .stb-teams { grid-template-columns: 1fr; } }
.stb-team-head {
  font-size: 12.5px; font-weight: 900; letter-spacing: .06em; text-align: center;
  padding: 5px 6px; border-radius: 7px; margin-bottom: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stb-team-head.blue { color: #7fb3ff; background: rgba(91,141,217,.14); border: 1px solid rgba(91,141,217,.4); }
.stb-team-head.red  { color: #ff8c9e; background: rgba(251,90,113,.12);  border: 1px solid rgba(251,90,113,.4); }
.stb-champ { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.stb-champ:last-child { border-bottom: none; }
.stb-champ-name { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.stb-champ-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.stb-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 8px; white-space: nowrap;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  color: var(--text-dim);
}
.stb-chip.long  { background: rgba(45,212,191,0.12); border-color: rgba(45,212,191,0.45); color: #2dd4bf; }
.stb-chip.short { background: rgba(251,90,113,0.10); border-color: rgba(251,90,113,0.45); color: #ff8c9e; }
.stb-team-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 12px 0; border: 1px dashed var(--border); border-radius: 10px; }
.sie-head { display: flex; align-items: center; justify-content: center; text-align: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 9px; }
.sie-title {
  flex-basis: 100%;
  font-family: 'Cinzel', var(--font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffe44d; /* bright yellow */
}
.sie-warn { color: #ff3b30; margin-left: 8px; } /* warning red sign, right of title */
.sie-sub { flex-basis: 100%; font-size: 12px; color: var(--text-dim); line-height: 1.45; }
/* Over / Under two-column split (Edges this draft hits) */
.sie-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.sie-col { display: flex; flex-direction: column; gap: 5px; }
.sie-col-head { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-align: center; padding: 5px 6px; border-radius: 7px; margin-bottom: 2px; }
.sie-col-head.over  { color: #2dd4bf; background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.35); }
.sie-col-head.under { color: #f87189; background: rgba(244,63,94,.13); border: 1px solid rgba(244,63,94,.42); }
.sie-col-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 12px 0; border: 1px dashed var(--border); border-radius: 10px; }
@media (max-width: 720px) { .sie-split { grid-template-columns: 1fr; } }
.sie-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-radius: 10px; background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.07); border-left-width: 3px;
}
.sie-row.over  { border-left-color: #2dd4bf; }
.sie-row.under { border-left-color: var(--red); }
.sie-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sie-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sie-market { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--gold); white-space: nowrap; }
.sie-cond { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sie-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex: none; }
.sie-nums-top { display: flex; align-items: baseline; gap: 8px; }
.sie-hit { font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.15; }
.sie-edge { font-family: var(--mono); font-size: 12px; font-weight: 700; color: #2dd4bf; }
.sie-sub { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

@media (max-width: 760px) {
  .sie-wrap { padding: 14px; }
  .sie-row { flex-wrap: wrap; }
  .sie-nums { margin-left: 68px; }
}

/* Per-team backtest chips on setups/edges (Draft Simulator) */
.sps-market-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.su-team-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-dim); white-space: nowrap;
}
.su-team-chip b { font-family: var(--mono); font-size: 11.5px; color: var(--text); }
.su-team-chip i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); }
.su-team-chip.amp  { border-color: rgba(45,212,191,0.55); background: rgba(45,212,191,0.08); }
.su-team-chip.amp b  { color: #2dd4bf; }
.su-team-chip.fade { border-color: rgba(251,90,113,0.55); background: rgba(251,90,113,0.07); }
.su-team-chip.fade b { color: var(--red); }

.sie-team-tag {
  font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  color: #0c0e13; background: var(--gold); padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.sie-row.personal { background: rgba(227,178,60,0.035); }

/* Prediction signals under the Draft Simulator board — .pred-aware handles the
   H2H-on-top + two-column row. */
#simSignals { max-width: 880px; margin: 14px auto 24px; padding: 0 14px; }


/* Team Edges page — team selector + amplified/faded row tints */
.st-teamsel-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 16px; }
.st-teamsel-label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.st-teamsel {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--panel, #151a21); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 8px 12px; min-width: 240px; cursor: pointer;
}
.st-teamsel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
tr.te-amp  td { background: rgba(45,212,191,0.05); }
tr.te-fade td { background: rgba(251,90,113,0.05); }

/* ── Tested Edges (Setups sub-tab) ─────────────────────────────────────────── */
.te-cards { display: flex; flex-direction: column; gap: 20px; }
.te-card {
  background: var(--panel, #151a21); border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--text-faint); border-radius: 16px; padding: 20px 22px;
}
.te-card.te-confirmed { border-left-color: #2dd4bf; }
.te-card.te-fading    { border-left-color: var(--gold); }
.te-card.te-mixed     { border-left-color: #6ea8fe; }
.te-card.te-rejected  { border-left-color: var(--red); }
.te-card.te-weak      { border-left-color: var(--text-faint); }

.te-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.te-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.te-verdict { font-size: 11px; font-weight: 900; letter-spacing: .06em; padding: 4px 11px; border-radius: 8px; white-space: nowrap; }
.te-verdict.te-confirmed { color: #073b34; background: #2dd4bf; }
.te-verdict.te-fading    { color: #2a2109; background: var(--gold); }
.te-verdict.te-mixed     { color: #0a1b3a; background: #6ea8fe; }
.te-verdict.te-rejected  { color: #fff; background: var(--red); }
.te-verdict.te-weak      { color: var(--text); background: rgba(255,255,255,0.12); }

.te-hyp {
  margin: 0 0 16px; padding: 11px 15px; border-left: 3px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03); border-radius: 0 10px 10px 0;
  font-size: 14px; color: var(--text); line-height: 1.5; font-style: italic;
}
.te-hyp-label { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }

.te-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-bottom: 12px; }
.te-big { display: flex; align-items: center; gap: 12px; }
.te-side { font-size: 12px; font-weight: 900; letter-spacing: .05em; padding: 4px 10px; border-radius: 8px; }
.te-side.under { color: var(--red); background: rgba(251,90,113,0.16); }
.te-side.over  { color: #2dd4bf; background: rgba(45,212,191,0.18); }
.te-hitbig { font-family: var(--mono); font-size: 40px; font-weight: 800; line-height: 1; color: var(--text); }
.te-hitctx { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--text-dim); line-height: 1.35; }
.te-hitctx span { font-weight: 500; color: var(--text-faint); }
.te-lift { font-family: var(--mono); font-weight: 800; }
.te-lift.pos { color: #2dd4bf; } .te-lift.neg { color: var(--red); }
.te-lift.strong { font-size: 1.05em; }
.te-mech { font-size: 12.5px; color: var(--text-dim); }
.te-mech b { color: var(--text); font-family: var(--mono); }
.te-mech-base { color: var(--text-faint); }

.te-verdict-note {
  font-size: 13.5px; line-height: 1.5; color: var(--text); padding: 11px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.06);
}
.te-verdict-note.te-confirmed { border-color: rgba(45,212,191,0.35); }
.te-verdict-note.te-fading    { border-color: rgba(227,178,60,0.35); }
.te-verdict-note.te-rejected  { border-color: rgba(251,90,113,0.35); }

.te-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; }
@media (max-width: 820px) { .te-grid { grid-template-columns: 1fr; } .te-headline { gap: 10px 16px; } .te-hitbig { font-size: 34px; } }
.te-sec { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.te-sec span { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

.te-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.te-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.te-table th.num, .te-table td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.te-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text); vertical-align: top; }
.te-table tr.te-ing-nil td { color: var(--text-faint); }
.te-table .te-lift { font-weight: 800; }
.te-table .te-n { color: var(--text-faint); }
.te-step { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px;
  background: rgba(255,255,255,0.1); color: var(--text-dim); font-family: var(--mono); font-size: 11px; font-weight: 700; margin-right: 8px; }

.te-hold { display: flex; gap: 10px; align-items: flex-end; min-height: 130px; padding: 6px 4px 0; }
.te-hold-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.te-hold-year { font-size: 12px; font-weight: 800; color: var(--text); font-family: var(--mono); }
.te-hold-barwrap { height: 64px; display: flex; align-items: flex-end; width: 100%; justify-content: center; }
.te-hold-bar { width: 26px; border-radius: 5px 5px 0 0; min-height: 6px; }
.te-hold-bar.pos { background: #2dd4bf; } .te-hold-bar.neg { background: var(--red); }
.te-hold-lift { font-family: var(--mono); font-weight: 800; font-size: 13px; }
.te-hold-lift.pos { color: #2dd4bf; } .te-hold-lift.neg { color: var(--red); }
.te-hold-meta { font-family: var(--mono); font-size: 11px; color: var(--text); text-align: center; line-height: 1.3; }
.te-hold-meta span { color: var(--text-faint); }

.te-method { margin-top: 16px; font-size: 12.5px; }
.te-method summary { cursor: pointer; color: var(--text-dim); font-weight: 700; letter-spacing: .02em; }
.te-method summary:hover { color: var(--text); }
.te-method ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-dim); line-height: 1.5; }
.te-method li { margin-bottom: 6px; }

/* Match History — length chip in the per-game meta bar */
.mh-len-chip { font-family: var(--mono); white-space: nowrap; }

/* ─── Data → Dragons panel ───────────────────────────────────────── */
.dragons-wrap { padding: 4px 2px 24px; }
.dragons-scope { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.dragons-scope b { color: var(--text); font-weight: 700; }
.dragons-table { width: 100%; border-collapse: collapse; }
.dragons-table th { font-size: 12px; }
.dragons-table td { padding: 10px 14px; font-size: 13px; vertical-align: middle; }
.dragons-table td.num { text-align: right; font-family: var(--mono); }
.dragons-rank { width: 34px; text-align: center; color: var(--text-faint); font-family: var(--mono); font-weight: 700; }
.dragons-team { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text); white-space: nowrap; }
.dragons-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.dragons-avg { min-width: 220px; }
.dragons-bar-wrap {
  position: relative; display: flex; align-items: center;
  height: 24px; background: rgba(255,255,255,.04); border-radius: 5px; overflow: hidden;
}
.dragons-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(45,212,191,.55), rgba(45,212,191,.28));
  border-right: 1px solid var(--gold-dim);
}
.dragons-avg-val {
  position: relative; margin-left: 10px; font-family: var(--mono);
  font-size: 13px; font-weight: 700; color: var(--text);
}
.dragons-match { color: var(--text-dim); }
.dragons-diff.pos { color: var(--green); }
.dragons-diff.neg { color: var(--red); }
.dragons-row.nodata { opacity: 0.5; }
.dragons-nodata { font-size: 12px; color: var(--text-faint); font-style: italic; }
.dragons-flag { color: var(--gold); font-weight: 700; margin-left: 2px; }
.dragons-empty { padding: 36px; text-align: center; color: var(--text-dim); font-size: 14px; }
.dragons-empty code, .dragons-note code {
  font-family: var(--mono); font-size: 12px; background: var(--surface2);
  padding: 2px 6px; border-radius: 4px; color: var(--gold);
}
.dragons-note { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--text-faint); }

/* ═══════════════════════ SETUPS PAGE ═══════════════════════ */

.st-wrap { max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem 4rem; }

.st-topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 1.1rem; }
.st-title { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.st-scope { font-size: 13.5px; color: var(--text-dim); letter-spacing: .04em; }

/* Live ↔ Study data-scope toggle (segmented control) */
.st-mode-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel-2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 999px; }
.st-mode { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .02em; color: var(--text-dim); background: transparent; padding: 5px 14px; border-radius: 999px;
  transition: background .12s, color .12s; white-space: nowrap; }
.st-mode:hover { color: var(--text); }
.st-mode.active { color: #12151c; background: var(--gold); }
.st-mode[data-st-mode="study"].active { background: #6ea8fe; color: #0b1220; }

.st-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 1.4rem; }
@media (max-width: 900px) { .st-kpis { grid-template-columns: 1fr 1fr; } }

.st-subtab-bar { margin-bottom: 1.4rem; }

.st-intro {
  font-size: 14px; line-height: 1.55; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.9rem 1.1rem; margin: 0 0 1.3rem;
}
.st-intro b { color: var(--gold); }

/* ── Setup cards ── */
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .st-grid { grid-template-columns: 1fr; } }

.st-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.05rem 1.2rem; display: flex; flex-direction: column; gap: 10px;
  border-left: 4px solid var(--border-strong);
}
.st-card.v-confirmed    { border-left-color: var(--gold); }
.st-card.v-rejected     { border-left-color: var(--red); }
.st-card.v-insufficient { border-left-color: #eab308; }

.st-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-card-icon { font-size: 1.35rem; line-height: 1; }
.st-card-name { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.st-verdict {
  margin-left: auto; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 10px; border-radius: 12px; border: 1px solid;
}
.st-verdict.confirmed    { color: #0c0e13; background: var(--gold); border-color: var(--gold); }
.st-verdict.neutral      { color: var(--text-dim); background: transparent; border-color: var(--border-strong); }
.st-verdict.rejected     { color: #fff; background: var(--red); border-color: var(--red); }
.st-verdict.insufficient { color: #0c0e13; background: #eab308; border-color: #eab308; }

.st-markets { display: flex; flex-direction: column; gap: 7px; }
.st-market {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 10px;
}
.st-market-pill {
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 11px; white-space: nowrap;
}
.st-market-pill.over  { background: rgba(45,212,191,0.16); color: var(--gold);  border: 1px solid rgba(45,212,191,0.5); }
.st-market-pill.under { background: rgba(251,90,113,0.14); color: var(--red);   border: 1px solid rgba(251,90,113,0.5); }
.st-hit { font-size: 1.3rem; font-weight: 800; color: var(--text); font-family: var(--mono); margin-left: auto; }
.st-hit-base { font-size: 12.5px; color: var(--text-dim); }
.st-edge-chip {
  font-size: 12.5px; font-weight: 800; font-family: var(--mono);
  padding: 2px 9px; border-radius: 10px; border: 1px solid var(--border-strong); color: var(--text-dim);
}
.st-edge-chip.pos { color: var(--gold); border-color: rgba(45,212,191,0.55); }
.st-edge-chip.neg { color: var(--red);  border-color: rgba(251,90,113,0.55); }

.st-desc { font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 0; }
.st-spot {
  font-size: 13.5px; line-height: 1.5; color: var(--text);
  background: rgba(45,212,191,0.07); border: 1px dashed rgba(45,212,191,0.4);
  border-radius: 9px; padding: 8px 11px;
}
.st-spot-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 3px;
}
.st-meta { font-size: 12.5px; color: var(--text-dim); }

.st-examples summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--gold-dim);
  padding: 4px 0; user-select: none;
}
.st-examples summary:hover { color: var(--gold); }
.st-ex-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.st-ex-table th {
  text-align: left; font-size: 11.5px; color: var(--text-dim); font-weight: 700;
  padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.st-ex-table td { font-size: 12.5px; color: var(--text); padding: 5px 8px; border-bottom: 1px solid var(--border); }
.st-ex-table th.num, .st-ex-table td.num { text-align: right; white-space: nowrap; }
.st-ex-match .st-ex-win { color: var(--gold); font-weight: 700; }
.st-ex-vs { color: var(--text-faint); font-size: 11px; padding: 0 3px; }
.st-ou {
  display: inline-block; width: 16px; text-align: center; border-radius: 4px;
  font-size: 10.5px; font-weight: 800; margin-left: 4px;
}
.st-ou.over  { background: rgba(45,212,191,0.18); color: var(--gold); }
.st-ou.under { background: rgba(251,90,113,0.16); color: var(--red); }

/* ── Discovered edges ── */
.st-edges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .st-edges-grid { grid-template-columns: 1fr; } }
.st-edges-grid .fb-card-body { max-height: none; }

.st-edges-table { width: 100%; border-collapse: collapse; }
.st-edges-table th {
  text-align: left; font-size: 12px; color: var(--text-dim); font-weight: 700;
  padding: 6px 9px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.st-edges-table td { font-size: 13.5px; color: var(--text); padding: 7px 9px; border-bottom: 1px solid var(--border); }
.st-edges-table th.num, .st-edges-table td.num { text-align: right; white-space: nowrap; font-family: var(--mono); }
.st-edges-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.st-ctx { line-height: 1.4; }
.st-strong { font-weight: 800; }
.st-edge-cell { font-weight: 800; }
.st-edge-cell.pos { color: var(--gold); }
.st-edge-cell.neg { color: var(--red); }
.st-delta { color: var(--text-dim); font-size: 12px; }
.st-lean {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  padding: 2px 9px; border-radius: 10px;
}
.st-lean.over  { background: rgba(45,212,191,0.16); color: var(--gold); border: 1px solid rgba(45,212,191,0.5); }
.st-lean.under { background: rgba(251,90,113,0.14); color: var(--red);  border: 1px solid rgba(251,90,113,0.5); }
.st-table-note { font-size: 12.5px; color: var(--text-dim); padding: 8px 9px 4px; margin: 0; }

/* ── Player props ── */
.st-props-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.st-base-chip {
  display: inline-block; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 12px; padding: 2px 10px; margin: 2px 4px 2px 0;
  font-family: var(--mono);
}
.st-base-chip b { color: var(--gold); font-family: var(--font); }
.st-role-chip {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 1px 9px;
}

/* ── Champion tags reference ── */
.st-tags-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 1.2rem; }
#stTagSearch {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px;
  color: var(--text); font-size: 14px; padding: 8px 13px; width: 280px; font-family: var(--font);
}
#stTagSearch:focus { outline: none; border-color: var(--gold-dim); }
.st-tags-hint { font-size: 12.5px; color: var(--text-dim); }

.st-tag-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.2rem; margin-bottom: 14px;
}
.st-tag-block.untagged { border-style: dashed; }
.st-tag-head { display: flex; align-items: baseline; gap: 12px; }
.st-tag-name { font-size: 1.05rem; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.st-tag-count { font-size: 12.5px; color: var(--text-dim); }
.st-tag-def { font-size: 13.5px; color: var(--text); margin: 5px 0 10px; line-height: 1.45; }

.st-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.st-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 18px;
  padding: 3px 12px 3px 4px; font-size: 13px; font-weight: 600; color: var(--text);
}
.st-chip:hover { border-color: var(--gold-dim); }
.st-chip .champ-portrait, .st-chip .champ-portrait-placeholder {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: inline-block;
  background: var(--surface2);
}

.st-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 1px; border-radius: 50%;
  background: transparent; border: none; color: var(--text-faint);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0; font-family: var(--font);
}
.st-chip-x:hover  { background: var(--red); color: #fff; }
.st-chip-x:disabled { opacity: .4; cursor: default; }

.st-tag-add-wrap { position: relative; margin-top: 10px; max-width: 320px; }
.st-tag-add-input {
  width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px dashed var(--border-strong);
  color: var(--text); padding: 7px 11px; border-radius: 9px; font-size: 12.5px; font-family: var(--font);
}
.st-tag-add-input::placeholder { color: var(--text-faint); }
.st-tag-add-input:focus { outline: none; border-style: solid; border-color: var(--gold-dim); }
.st-tag-add-input:disabled { opacity: .5; }
.st-tag-add-suggest { font-size: 13px; }

@media (max-width: 760px) {
  .st-wrap { padding: 1rem 1rem 3rem; }
  .st-hit { margin-left: 0; }
}

/* ── Towers O/U 11.5 panel ── */
.tw-kpis { grid-template-columns: repeat(3, 1fr); margin-bottom: 1rem; }
@media (max-width: 760px) { .tw-kpis { grid-template-columns: 1fr; } }
.tw-coverage { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.35); color: var(--text); }

.tw-gate-card { margin-bottom: 16px; }
.tw-sweep { margin-top: 4px; }
.tw-sweep-title { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.tw-sweep .st-edges-table td, .tw-sweep .st-edges-table th { padding: 5px 9px; }
.tw-sweep-small { opacity: .55; }

.tw-corr-card { margin-bottom: 16px; }
.tw-pearson { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.tw-pearson-chip {
  font-size: 13px; color: var(--text); background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 4px 11px;
}
.tw-pearson-chip b { font-family: var(--mono); color: var(--gold); font-size: 15px; margin-right: 4px; }
.tw-pearson-note { font-size: 12px; color: var(--text-faint); }

.tw-cond-list { display: flex; flex-direction: column; gap: 9px; }
.tw-cond-baseline { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.tw-cond-baseline b { color: var(--text); font-family: var(--mono); }
.tw-cond-row { display: grid; grid-template-columns: minmax(160px, 260px) 1fr auto auto; align-items: center; gap: 12px; }
.tw-cond-label { font-size: 13px; color: var(--text); }
.tw-cond-bar { height: 12px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.tw-cond-fill { height: 100%; border-radius: 6px; }
.tw-cond-fill.hot  { background: linear-gradient(90deg, rgba(45,212,191,0.5), var(--gold)); }
.tw-cond-fill.cold { background: linear-gradient(90deg, rgba(91,156,248,0.4), var(--blue)); }
.tw-cond-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); min-width: 48px; text-align: right; }
.tw-cond-val.strong { color: var(--gold); }
.tw-cond-n { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); min-width: 40px; text-align: right; }
@media (max-width: 640px) {
  .tw-cond-row { grid-template-columns: 1fr auto; grid-template-areas: 'label val' 'bar bar'; }
  .tw-cond-label { grid-area: label; } .tw-cond-val { grid-area: val; } .tw-cond-bar { grid-area: bar; } .tw-cond-n { display: none; }
}

.tw-lower { grid-template-columns: 1fr 1.4fr; align-items: start; margin-bottom: 16px; }
@media (max-width: 1000px) { .tw-lower { grid-template-columns: 1fr; } }
.tw-sp-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px; }
.tw-sp-card {
  flex: 1 1 130px; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 11px; padding: 12px 14px; text-align: center;
}
.tw-sp-head { font-size: 12.5px; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; }
.tw-sp-lean { font-size: 1.15rem; font-weight: 800; font-family: var(--mono); }
.tw-sp-lean.over  { color: var(--gold); }
.tw-sp-lean.under { color: var(--red); }
.tw-sp-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }

.tw-champs { margin-top: 0; }
.tw-champ-cell { display: flex; align-items: center; gap: 8px; }
.tw-champ-cell .champ-portrait, .tw-champ-cell .champ-portrait-placeholder {
  width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--surface2);
}
.tw-sp-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--gold);
  border: 1px solid rgba(45,212,191,0.5); border-radius: 6px; padding: 1px 5px; margin-left: 2px;
}

/* ── Dragons O/U 4.5 panel ── */
.dr-side-card { margin-bottom: 16px; }
.dr-side-avgs { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 6px 0 16px; }
.dr-side-avg { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dr-side-num { font-family: var(--mono); font-size: 2rem; font-weight: 800; line-height: 1; }
.dr-side-avg.blue .dr-side-num { color: var(--blue); }
.dr-side-avg.red  .dr-side-num { color: var(--red); }
.dr-side-lbl { font-size: 11.5px; color: var(--text-dim); }
.dr-side-vs { font-size: 13px; color: var(--text-faint); font-weight: 700; }

.dr-race-bar { display: flex; height: 24px; border-radius: 7px; overflow: hidden; background: var(--surface2); }
.dr-race-seg { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; font-family: var(--mono); color: #fff; }
.dr-race-seg.blue { background: var(--blue); }
.dr-race-seg.red  { background: var(--red); }
.dr-race-seg.tie  { background: var(--surface3); }
.dr-race-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 9px; font-size: 12px; color: var(--text-dim); }
.dr-race-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dr-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dr-dot.blue { background: var(--blue); } .dr-dot.red { background: var(--red); } .dr-dot.tie { background: var(--surface3); }

/* ── Team Edges panel ── */
.tm-vs { font-family: var(--mono); font-weight: 800; }
.tm-vs.pos { color: var(--gold); }
.tm-vs.neg { color: var(--red); }

.tm-edge-card { }
.tm-edge-group { padding: 6px 4px; }
.tm-edge-group + .tm-edge-group { border-top: 1px solid var(--border); margin-top: 4px; }
.tm-edge-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.tm-edge-label.amp  { color: var(--gold); }
.tm-edge-label.fade { color: var(--red); }
.tm-team-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.tm-none { font-size: 12.5px; color: var(--text-faint); }
.tm-team-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 4px 9px;
  background: rgba(255,255,255,0.03); font-size: 12.5px;
}
.tm-team-pill.amp  { border-color: rgba(45,212,191,0.4); }
.tm-team-pill.fade { border-color: rgba(251,90,113,0.4); }
.tm-team-name { font-weight: 700; color: var(--text); }
.tm-league { font-size: 10px; font-weight: 800; color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0 5px; }
.tm-hit { font-family: var(--mono); font-weight: 700; color: var(--text); }
.tm-lift { font-family: var(--mono); font-weight: 800; }
.tm-lift.pos { color: var(--gold); }
.tm-lift.neg { color: var(--red); }
.tm-n { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }

/* ── Combined / cross-feature Edges panel ── */
.cb-matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.cb-matrix { width: 100%; border-collapse: collapse; min-width: 720px; }
.cb-matrix th {
  font-size: 12px; font-weight: 700; color: var(--text-dim); text-align: center;
  padding: 9px 8px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.cb-matrix th.cb-arch-h, .cb-matrix th.cb-stack-h { text-align: left; }
.cb-th-line { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); font-weight: 500; }
.cb-matrix td { padding: 8px; border-bottom: 1px solid var(--border); }
.cb-matrix tbody tr:hover { background: rgba(255,255,255,0.02); }

.cb-arch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); white-space: nowrap; }
.cb-arch-icon { font-size: 1.05rem; }
.cb-arch-n { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-left: 4px; }

.cb-cell { text-align: center; font-family: var(--mono); }
.cb-cell .cb-arrow { font-size: 10px; margin-right: 3px; }
.cb-cell .cb-edge { font-size: 13.5px; font-weight: 800; }
.cb-over  { color: var(--gold); background: rgba(45,212,191,0.10); }
.cb-under { color: var(--red);  background: rgba(251,90,113,0.10); }
.cb-weak  { color: var(--text-faint); }
.cb-empty { color: var(--text-faint); }

.cb-stack { white-space: nowrap; }
.cb-stack-tag {
  font-size: 11px; font-weight: 700; font-family: var(--mono); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 2px 7px; display: inline-block;
}
.cb-mk-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--text-dim);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 2px 8px;
}
.cb-solo { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }

.dr-buckets { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.dr-bucket {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px;
  padding: 9px 11px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px;
}
.dr-bucket-label { font-size: 13px; color: var(--text); }
.dr-bucket-edge { font-family: var(--mono); font-size: 13px; font-weight: 800; min-width: 42px; text-align: right; }
.dr-bucket-n { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); min-width: 42px; text-align: right; }
@media (max-width: 560px) {
  .dr-bucket { grid-template-columns: 1fr auto; }
  .dr-bucket-edge, .dr-bucket-n { grid-column: 2; text-align: right; }
}

/* ─── Team History (both selected teams' recent matches, side by side) ──────── */
.th-wrap { max-width: 1440px; margin: 0 auto; padding: 6px 4px 30px; }

.th-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Two-up only while each card can still fit the fixed columns PLUS a readable
   opponent name (see .th-row's 120px floor). Below that the cards stack at full
   width, which gives the name far more room than a squeezed side-by-side would. */
@media (max-width: 1340px) { .th-board { grid-template-columns: 1fr; } }

.th-side-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.th-side-blue .th-side-inner, .th-side-inner.th-side-blue { border-top-color: var(--blue); }
.th-side-red  .th-side-inner, .th-side-inner.th-side-red  { border-top-color: var(--red); }

/* Team header — logo + name + record, centered as one cluster */
.th-team-head {
  text-align: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.th-team-head.th-head-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px; min-height: 52px;
}
.th-team-head-inner {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
}
.th-team-logo { width: 33px; height: 33px; object-fit: contain; flex-shrink: 0; }
.th-team-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: center; }
.th-team-name {
  font-size: 18px; font-weight: 700; color: var(--text);
  letter-spacing: .2px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.th-team-rec { font-size: 14.5px; color: var(--text); font-weight: 500; }
.th-team-rec .th-rec-w { color: var(--green); font-weight: 700; }
.th-team-rec .th-rec-l { color: var(--red);   font-weight: 700; }

/* Column labels + match rows share one grid template (res · opponent · game · WR · time · kills)
   The opponent column has a 120px floor so full team names ("Shopify Rebellion",
   "Movistar KOI") render instead of collapsing to "S…". Everything else is fixed
   width, so the floor is what the .th-board breakpoint above is sized against. */
.th-col-head, .th-row {
  display: grid;
  grid-template-columns: 22px minmax(120px, 190px) 44px 74px minmax(155px, 1fr) 56px 66px;
  align-items: center;
  /* 14px so GAME doesn't crowd TEAM WR% and TIME doesn't crowd KILLS. The draft
     column can't go under 155px — five 27px portraits plus their 3px gaps. */
  gap: 10px;
}
.th-col-head {
  padding: 7px 12px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
}
.th-col-head .th-wr, .th-col-head .th-dur, .th-col-head .th-score { text-align: center; }
.th-col-head .th-game { text-align: center; }
.th-col-head .th-draft { text-align: center; }

.th-rows { display: flex; flex-direction: column; }

.th-row {
  padding: 6px 12px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.th-row:last-child { border-bottom: none; }
.th-row.th-win  { background: rgba(52, 211, 153, .11); border-left-color: rgba(52, 211, 153, .75); }
.th-row.th-loss { background: rgba(251, 90, 113, .11); border-left-color: rgba(251, 90, 113, .75); }
.th-row.th-void { background: rgba(255,255,255,.02); }
.th-row.th-win:hover  { background: rgba(52, 211, 153, .17); }
.th-row.th-loss:hover { background: rgba(251, 90, 113, .17); }

/* Result badge */
.th-res {
  width: 22px; height: 22px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; font-family: var(--mono);
}
.th-win  .th-res { background: rgba(52, 211, 153, .22); color: var(--green); }
.th-loss .th-res { background: rgba(251, 90, 113, .22); color: var(--red); }
.th-void .th-res { background: rgba(255,255,255,.06); color: var(--text-faint); }

/* Opponent cell */
.th-vs { display: flex; align-items: center; gap: 7px; min-width: 0; }
.th-opp-logo { width: 21px; height: 21px; object-fit: contain; flex-shrink: 0; }
.th-opp-name {
  font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Opponent 2026 WR% (season-wide, gol.gg) — % stacked over the W-L record */
.th-row .th-wr {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.12; white-space: nowrap;
}
.th-wr-pct  { font-family: var(--mono); font-size: 13.5px; font-weight: 800; color: var(--text); }
.th-wr-rec  { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text-faint); }
.th-wr-na   { font-family: var(--mono); font-weight: 700; color: var(--text-faint); }

/* This team's drafted champions for the game — five role-ordered portraits */
.th-draft { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.th-draft-champ { display: inline-flex; flex-shrink: 0; }
.th-draft-champ .champ-portrait,
.th-draft-champ .champ-portrait-placeholder {
  width: 27px; height: 27px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.12);
}
.th-draft-champ .champ-portrait-placeholder { background: rgba(255,255,255,.06); }
.th-draft-na { color: var(--text-faint); font-family: var(--mono); font-weight: 700; }

/* Duration + kill score */
/* Which game of the series — same yellow as Time so the two read as one family */
.th-game {
  text-align: center; font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  color: #facc15; white-space: nowrap;
}
.th-col-head .th-game { color: var(--text); font-family: inherit; font-weight: 600; font-size: 12px; }
.th-dur { text-align: center; font-family: var(--mono); font-size: 14px; color: #facc15; }
.th-score {
  text-align: center; font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--text); letter-spacing: -.01em; white-space: nowrap;
}
.th-x { color: var(--text-faint); }              /* "x" separator */
.th-k-hi { color: #4ade80; font-weight: 700; }   /* more kills → green */
.th-k-lo { color: #ff7a8a; font-weight: 700; }   /* fewer kills → red   */
.th-k-eq { color: var(--blue); font-weight: 700; } /* tie → both blue   */
.th-score-na { color: var(--text-faint); font-weight: 600; }

.th-empty-rows { padding: 20px 14px; text-align: center; color: var(--text-dim); font-size: 13.5px; }

.th-note {
  margin-top: 12px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* ─── Player Props (drafted champions' K/D/A, both sides) ──────────────────
   Same two-card shell as Team History so switching between the sub-tabs keeps
   the eye in the same place; the rows differ because a pick, not a match, is
   the unit here. A row with a known player is clickable and opens his game log
   on that champion in .pp-modal.                                            */
/* Two cards and a note don't fill the viewport, and pinned to the top they left
   a dead half-screen above the footer. Centre the block in a tall-ish box
   instead: when the content is shorter than the box it sits mid-page, and when
   it's taller (ten picks plus a wrapped note) the box just grows. */
.pp-wrap {
  max-width: 1440px; margin: 0 auto; padding: 6px 4px 30px;
  min-height: min(70vh, 720px);
  display: flex; flex-direction: column; justify-content: center;
}

.pp-title {
  text-align: center;
  margin: 0 0 14px;
  font-size: 22px; font-weight: 700; color: var(--text);
  font-family: var(--font-round);
}

.pp-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Two-up only while each card still fits its four fixed stat columns (442px +
   gaps + padding = 524) PLUS a readable pick column — below that the cards
   stack at full width, as in Team History. */
@media (max-width: 1370px) { .pp-board { grid-template-columns: 1fr; } }

.pp-side-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pp-side-inner.pp-side-blue { border-top-color: var(--blue); }
.pp-side-inner.pp-side-red  { border-top-color: var(--red); }

.pp-team-head { text-align: center; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.pp-team-head.pp-head-empty { padding: 16px 12px; color: var(--text-faint); font-size: 13.5px; }
.pp-team-head-inner { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; }
.pp-team-logo { width: 33px; height: 33px; object-fit: contain; flex-shrink: 0; }
.pp-team-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: center; }
.pp-team-name {
  font-size: 17px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-team-sub { font-size: 12px; color: var(--text-dim); font-weight: 600; }

/* Row grid: pick · champion K/D/A · player K/D/A · KDA · Past Games button.
   The stat columns are sized to their HEADINGS, not their numbers (452px of
   fixed width in total) — "Champion
   K/D/A" is the widest thing in its column, and when the column was narrower
   than the label the label overflowed and stopped sitting centred over the
   figures it names. */
.pp-col-head, .pp-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 145px 145px 64px 98px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}
.pp-col-head {
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.025);
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  letter-spacing: .04em; text-transform: uppercase;
}
/* nowrap so a heading can never break onto a second line and drift off the
   column it labels. */
.pp-col-head .pp-cell { text-align: center; white-space: nowrap; }
/* Indent past the role glyph (19px + the 9px flex gap) so "Pick" starts over
   the champion portraits rather than over the little lane icons. */
.pp-col-head .pp-pick { padding-left: 28px; }

.pp-rows { display: flex; flex-direction: column; }
.pp-row {
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  min-height: 60px;
}
.pp-row:last-child { border-bottom: none; }
.pp-row-live { cursor: pointer; }
.pp-row-live:hover, .pp-row-live:focus-within {
  background: rgba(255,255,255,.05);
  border-left-color: var(--gold);
}

/* Past Games — the row's control, deliberately reading as a pressable square
   rather than another number in a table of numbers. Hovering anywhere on the
   row lights it, so the whole row still advertises that it opens something. */
.pp-past-btn {
  min-width: 62px;
  padding: 9px 10px;
  background: rgba(45, 212, 191, .12);
  border: 1px solid rgba(45, 212, 191, .45);
  border-radius: 8px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.pp-past-btn:hover,
.pp-row-live:hover .pp-past-btn {
  background: rgba(45, 212, 191, .24);
  border-color: var(--gold);
  box-shadow: 0 2px 12px rgba(45, 212, 191, .22);
}
.pp-past-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.pp-past-btn:disabled {
  background: rgba(255,255,255,.03);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: default;
  box-shadow: none;
}

/* Pick cell — role glyph, portrait, then champion over player. */
.pp-pick { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pp-role-icon { width: 19px; height: 19px; flex-shrink: 0; opacity: .8; }
.pp-portrait .champ-portrait,
.pp-portrait .champ-portrait-placeholder {
  width: 42px; height: 42px; border-radius: 8px; display: block;
  border: 1px solid var(--border);
}
.pp-portrait .champ-portrait-placeholder { background: rgba(255,255,255,.06); }
.pp-pick-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pp-champ-name {
  font-family: var(--font-round);
  font-size: 17px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-player-name {
  font-family: var(--font-round);
  font-size: 14.5px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pp-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }

/* K/D/A triple — deaths tinted red so the stat you want LOW never reads like
   the two you want high. */
.pp-kda { font-family: var(--mono); font-size: 17px; font-weight: 700; white-space: nowrap; }
.pp-kda i { font-style: normal; color: var(--text-faint); margin: 0 2px; font-weight: 500; }
.pp-kda .pp-k { color: #4ade80; }
.pp-kda .pp-d { color: #ff7a8a; }
.pp-kda .pp-a { color: var(--blue); }
.pp-kda-own { font-size: 17px; }
.pp-kda-na  { color: var(--text-faint); font-family: var(--mono); font-weight: 700; }

.pp-own-na { font-size: 13.5px; color: var(--text-faint); font-weight: 600; }
.pp-thin { color: #facc15; font-weight: 800; }

.pp-cell-kda { font-family: var(--mono); font-size: 16.5px; font-weight: 800; color: #facc15; }

.pp-empty-rows { padding: 20px 14px; text-align: center; color: var(--text-dim); font-size: 13.5px; }


/* ─── Player game-log modal ────────────────────────────────────────────── */
.pp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  z-index: 9999;
}
/* Sized to its content rather than to a comfortable reading measure: the log
   rows are five short fixed cells plus one name column, so a wide shell just
   opens a gulf between the enemy name and the K/D/A on the right. The width
   below is the fixed columns + padding + a name column with room for the
   longest handles, and no more. Everything inside runs 20% larger than the
   board's rows — this is the view being read closely. */
.pp-modal {
  background: #14141a;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: min(500px, 100%);
  max-height: 86vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pp-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
}
.pp-modal-portrait .champ-portrait,
.pp-modal-portrait .champ-portrait-placeholder {
  width: 50px; height: 50px; border-radius: 10px; display: block; border: 1px solid var(--border);
}
.pp-modal-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pp-modal-title b { font-size: 22px; font-weight: 700; color: var(--text); font-family: var(--font-round); }
.pp-modal-champ { font-size: 15.5px; color: var(--gold); font-weight: 600; }
.pp-modal-close {
  margin-left: auto;
  background: none; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text-dim); font-size: 17px; line-height: 1;
  padding: 8px 12px; cursor: pointer;
}
.pp-modal-close:hover { color: var(--text); border-color: var(--text-dim); }

/* Record + average ride alongside the name rather than in a band of their own:
   they describe the player, so they belong with him. The overall KDA is NOT
   here — it sits in .pp-log-head over the K/D/A column it summarises. */
.pp-modal-rec {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-left: 6px;
  font-size: 16px; color: var(--text);
}
.pp-sum-sep { color: var(--text-faint); }
.pp-sum-rec b { font-weight: 800; }
.pp-rec-w { color: var(--green); }
.pp-rec-l { color: var(--red); }
.pp-sum-avg { display: flex; align-items: center; gap: 6px; }

.pp-modal-body { overflow-y: auto; }

/* One game: result · when · his champ · his K/D/A · vs · enemy team/champ/player.
   The K/D/A sits against his own portrait rather than at the right edge, so the
   line he played and what he did on it read as one unit. */
/* The strip shares the row's grid AND its transparent 3px result-bar gutter, so
   the KDA above lines up exactly with the K/D/A figures below it. Change the
   columns here and both move together — that's the point of the shared rule. */
.pp-log-row, .pp-log-head {
  display: grid;
  /* The K/D/A column was 108px with the numbers left-aligned, which left a gap
     of dead space before the "vs" (his request 2026-08-21): trimmed to the width
     the widest triple actually needs, and the column gap tightened with it. */
  grid-template-columns: 31px 68px 55px 84px 20px minmax(130px, 1fr);
  align-items: center; gap: 10px;
  padding: 10px 16px;
  border-left: 3px solid transparent;
}
.pp-log-row { border-bottom: 1px solid var(--border); }
.pp-log-row:last-child { border-bottom: none; }

/* Sticky, and opaque so rows scroll underneath it rather than through it. */
.pp-log-head {
  position: sticky; top: 0; z-index: 1;
  padding-top: 8px; padding-bottom: 8px;
  background: #14141a;
  border-bottom: 1px solid var(--border);
}
.pp-log-kda-head {
  font-family: var(--mono); font-size: 14.5px; font-weight: 800;
  color: #facc15; white-space: nowrap;
}
.pp-log-win  { background: rgba(52, 211, 153, .10); border-left-color: rgba(52, 211, 153, .75); }
.pp-log-loss { background: rgba(251, 90, 113, .10); border-left-color: rgba(251, 90, 113, .75); }

.pp-log-res {
  width: 29px; height: 29px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.pp-log-win  .pp-log-res { background: rgba(52, 211, 153, .22); color: var(--green); }
.pp-log-loss .pp-log-res { background: rgba(251, 90, 113, .22); color: var(--red); }

.pp-log-when { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pp-log-date   { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text); }
/* Most leagues are 3-5 letters, but the log spans every competition and a few
   ("ASIA MASTER") are far longer than the column. Clip rather than let one rare
   row widen the whole modal. */
.pp-log-league {
  font-size: 12px; font-weight: 700; color: var(--text-faint); letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pp-log-portrait .champ-portrait,
.pp-log-portrait .champ-portrait-placeholder {
  width: 41px; height: 41px; border-radius: 8px; display: block; border: 1px solid var(--border);
}
.pp-log-portrait .champ-portrait-placeholder { background: rgba(255,255,255,.06); }
/* His own portrait sits narrower than its grid column — centre it so the two
   portraits either side of the "vs" line up as a pair. */
.pp-log-mine { display: flex; justify-content: center; }
/* Pulled a few px left of its own column (his request 2026-08-21) so it reads as
   attached to the K/D/A rather than floating mid-row. The freed width goes to the
   enemy-name column, which was ellipsising. */
.pp-log-vs {
  text-align: center; font-size: 12.5px; font-weight: 700;
  color: var(--text-faint); text-transform: uppercase;
  margin-left: -5px;
}

.pp-log-foe { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-log-logo { width: 29px; height: 29px; object-fit: contain; flex-shrink: 0; }
.pp-log-logo-gap { width: 29px; flex-shrink: 0; }
.pp-log-foe-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pp-log-foe-player {
  font-family: var(--font-round); font-size: 17px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-log-foe-champ {
  font-size: 14.5px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Centred, not left-aligned: the column has to hold the widest triple
   ("10/2/14"), and left-aligning parked every shorter one against the portrait
   with a gulf before the "vs". */
.pp-log-kda { text-align: center; }
/* The K/D/A triple is shared with the board, so scale it only in here. */
.pp-modal .pp-kda { font-size: 17.5px; }
.pp-modal .pp-empty-rows { font-size: 16px; padding: 24px 17px; }

/* Narrow screens: drop the "vs" spacer and the enemy team crest, which are the
   two cells carrying the least information once space is scarce. */
@media (max-width: 640px) {
  .pp-log-row, .pp-log-head { grid-template-columns: 29px 64px 41px 108px minmax(110px, 1fr); gap: 9px; padding: 9px 11px; }
  .pp-log-vs, .pp-lh-vs, .pp-log-logo, .pp-log-logo-gap { display: none; }
  /* No room for name + record + close on one line — let the record drop under
     the title instead of crushing both. */
  .pp-modal-head { flex-wrap: wrap; }
  .pp-modal-rec { font-size: 14.5px; width: 100%; margin-left: 0; order: 4; }
  .pp-col-head, .pp-row { grid-template-columns: minmax(90px, 1fr) 108px 108px 0 80px; gap: 8px; padding: 8px; }
  .pp-cell-kda, .pp-col-head .pp-cell-kda { display: none; }
  .pp-col-head { font-size: 11px; letter-spacing: .02em; }
  .pp-kda, .pp-kda-own { font-size: 14.5px; }
  .pp-past-btn { min-width: 54px; padding: 8px 6px; font-size: 14.5px; }
  .pp-champ-name { font-size: 15px; }
  .pp-player-name { font-size: 13px; }
}

/* ── Winner Probability plate (local-only; sits above Draft Success) ──────
   Deliberately NOT another rounded metric bar — it has to read as a different
   instrument from the Draft Success box under it. Three things do that:

     · a cut-cornered silhouette (clip-path octagon) instead of a border-radius
     · a rim drawn as a blue→red gradient, so the frame itself carries the
       side colours rather than a hairline of white
     · no separate track: the plate's own ground is the readout. Blue holds the
       left of it, red the right, and the lit seam where they meet sits at the
       probability — move the number and the whole plate re-splits.

   The rim is the element's background; --pred-ink is a second, inset layer that
   leaves 2px of it showing. Both inherit the clip, so the corners stay cut. */
.draft-metric-bar.pred {
  /* Spans the dashboard's full width, so it centres itself and hugs its two
     figures instead of stretching across the whole row. */
  width: fit-content;
  margin: 2px auto 10px;
  --cut: 11px;
  --b: 50%;
  --pred-blue: 91, 156, 248;
  --pred-red: 251, 90, 113;
  position: relative;
  padding: 11px 22px 12px;
  border: none; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg,
    rgb(var(--pred-blue)), rgba(122, 96, 190, .95) 50%, rgb(var(--pred-red)));
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0,
    100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0 calc(100% - var(--cut)), 0 var(--cut));
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}
/* The ground: two tinted halves meeting at --b, with the seam lit. */
.draft-metric-bar.pred::before {
  content: ''; position: absolute; inset: 2px; z-index: 0;
  clip-path: inherit;
  background:
    linear-gradient(90deg,
      transparent calc(var(--b) - 1.5px),
      rgba(255, 255, 255, .85) calc(var(--b) - 1.5px),
      rgba(255, 255, 255, .85) calc(var(--b) + 1.5px),
      transparent calc(var(--b) + 1.5px)),
    linear-gradient(90deg,
      rgba(var(--pred-blue), .34) 0, rgba(var(--pred-blue), .17) var(--b),
      rgba(var(--pred-red), .17) var(--b), rgba(var(--pred-red), .34) 100%),
    linear-gradient(180deg, #141926, #0b0f18);
  transition: background .45s ease;
}
.draft-metric-bar.pred > * { position: relative; z-index: 1; }

/* The leading side's half of the rim burns brighter; the trailing one dims. */
.draft-metric-bar.pred.lead-blue {
  background: linear-gradient(90deg,
    rgb(var(--pred-blue)), rgba(122, 96, 190, .8) 55%, rgba(var(--pred-red), .45));
}
.draft-metric-bar.pred.lead-red {
  background: linear-gradient(90deg,
    rgba(var(--pred-blue), .45), rgba(122, 96, 190, .8) 45%, rgb(var(--pred-red)));
}
.draft-metric-bar.pred.no-data {
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
  filter: none;
}
.draft-metric-bar.pred.no-data::before { background: linear-gradient(180deg, #141926, #0b0f18); }
.draft-metric-bar.pred.no-data .dmb-val { color: var(--text-faint); }

/* No label between them any more: two cells, each figure pinned to its own
   side, and the lit seam left alone in the middle as the only thing there. */
.draft-metric-bar.pred .dmb-row { grid-template-columns: 1fr 1fr; }
.draft-metric-bar.pred .dmb-val.blue { color: #9cc4ff; text-shadow: 0 0 16px rgba(var(--pred-blue), .5); }
.draft-metric-bar.pred .dmb-val.red  { color: #ff9fae; text-shadow: 0 0 16px rgba(var(--pred-red), .5); }

@media (prefers-reduced-motion: reduce) {
  .draft-metric-bar.pred::before { transition: none; }
}

/* ═══════════════════════ Live Game Stats panel ═══════════════════════ */
/* Consolidates Polymarket's Game / Team Stats / Comparison tabs into one
   view (kills + gold/net-worth + HP + dmg share) from Riot's live feed. */
.lgs-panel {
  margin: 22px auto 0;
  /* Hug the content instead of spanning full width. Sized so the player grid
     (320 + 178 + 320 + gaps ≈ 834px) clears the body's 14px side padding. */
  max-width: 920px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.lgs-panel.open { border-color: var(--border-strong); }

/* ── Idle state (no live game loaded) ──────────────────────────────────────
   Before you load a game this panel has nothing to say, so it shouldn't own the
   middle of an empty board. It drops to the bottom of the simulator's viewport
   and shrinks to a single slim bar: dot, name, game picker, load button. The
   three secondary controls are all inert until a game is loaded, so they don't
   appear yet. Everything below reverts on .open — a loaded game gets the full
   panel back, in normal flow. */
.lgs-panel:not(.open) {
  margin-top: auto;                /* .draft-wrap is a flex column — this pushes it down */
  width: fit-content;
  max-width: 100%;
  border-radius: 11px;
  background: rgba(255, 255, 255, .028);
}
/* Keep the idle bar on ONE row. The compact block further down sets
   `.lgs-panel .lgs-head { flex-wrap: wrap }` and gives .lgs-head-l a 260px
   flex-basis; that is right for the open panel, but on the fit-content idle bar
   it wrapped the controls onto a second line and left a band of dead space under
   the title. Undo both here — the title and controls are narrow enough to share
   a row, which is what this state was designed to be. */
.lgs-panel:not(.open) .lgs-head { padding: 8px 10px 8px 14px; gap: 12px; flex-wrap: nowrap; }
.lgs-panel:not(.open) .lgs-head-l { gap: 8px; flex: 0 1 auto; min-width: 0; }
.lgs-panel:not(.open) .lgs-title { font-size: 13.5px; }
.lgs-panel:not(.open) .lgs-sub { display: none; }
.lgs-panel:not(.open) .lgs-dot { width: 7px; height: 7px; }
.lgs-panel:not(.open) .lgs-head-r { gap: 6px; }
/* Below this the bar genuinely cannot fit on one line, and overflowing sideways
   is worse than the second row this state is trying to avoid. */
@media (max-width: 520px) {
  .lgs-panel:not(.open) .lgs-head { flex-wrap: wrap; }
}
.lgs-panel:not(.open) .lgs-select { padding: 5px 8px; font-size: 12.5px; max-width: 190px; }
.lgs-panel:not(.open) .lgs-btn { padding: 5px 11px; font-size: 12.5px; }
.lgs-panel:not(.open) #lgsToDraft,
.lgs-panel:not(.open) #lgsTimeline,
.lgs-panel:not(.open) #lgsRefresh { display: none; }

/* Fill the simulator's height so the idle bar has somewhere to be pushed to.
   `flex: 1 0 auto` grows into spare space but never shrinks below content, so a
   full board still scrolls normally. The inline display the sub-tab switcher
   sets is '' when active, which leaves these flex rules in charge. */
#draftPanel-simulator { display: flex; flex-direction: column; flex: 1 0 auto; }
#draftPanel-simulator > .draft-wrap { flex: 1 0 auto; }
/* The wrap's 20vh bottom padding exists to give dropdowns room to open near the
   end of a long board; with nothing on the board it would just strand the idle
   bar well above the fold. */
.draft-wrap:has(> .lgs-panel:not(.open)) { padding-bottom: 18px; }

.lgs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.lgs-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lgs-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: .2px; white-space: nowrap; }
.lgs-sub { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-faint); flex-shrink: 0; transition: background .2s;
}
.lgs-dot.on { background: var(--red); box-shadow: 0 0 0 0 rgba(251,90,113,.6); animation: lgsPulse 1.6s infinite; }
@keyframes lgsPulse { 70% { box-shadow: 0 0 0 7px rgba(251,90,113,0); } 100% { box-shadow: 0 0 0 0 rgba(251,90,113,0); } }
.lgs-head-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lgs-select {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; max-width: 260px;
}
.lgs-select:focus { border-color: var(--gold-dim); outline: none; }
/* League headers inside the popup — the default optgroup label renders light
   and italic, which reads as broken next to the dark options. */
.lgs-select optgroup {
  background: #0d121a;
  color: var(--gold);
  font-weight: 800;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .04em;
}
.lgs-select option {
  background: var(--surface2);
  color: var(--text);
  font-weight: 500;
  padding-left: 4px;
}
.lgs-btn {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.lgs-btn:hover { border-color: var(--text-dim); background: var(--surface3); }
.lgs-load { background: var(--gold-dim); border-color: var(--gold-dim); color: #06231f; }
.lgs-load:hover { background: var(--gold); border-color: var(--gold); }
/* "To Draft Sim" — sends the board's champions up to the simulator. Blue so it
   reads as a separate action from the gold load/hide primary. */
.lgs-draft { border-color: var(--blue); color: var(--blue); }
.lgs-draft:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #06172e; }
/* Cap + center the content so it stays dense on ultra-wide screens instead of
   stretching to a sparse full-width strip. */
.lgs-body { padding: 4px 14px 12px; }
/* scoreboard/net-worth band gets a little more room for long team names; the
   player columns stay tight via .lgs-cols' own minmax below. Cap tracks the
   player grid (320 + 78 + 320 + gaps) so the bigger rows aren't squeezed. */
.lgs-body > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.lgs-empty { padding: 26px 10px; text-align: center; color: var(--text-dim); font-size: 14px; }

/* ── Scoreboard header: blue head | kills+clock | red head ── */
.lgs-scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 18px; padding: 6px 6px 5px;
}
/* Both heads hug the centre column so the names read next to the score rather
   than pinned to the panel rails. */
.lgs-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lgs-team.blue { justify-content: flex-end; }
.lgs-team.red  { justify-content: flex-start; }
.lgs-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
/* name over season record — keeps the head compact so the two team names sit
   near the score instead of being flung to the panel edges */
.lgs-tid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lgs-team.red .lgs-tid { align-items: flex-end; }
.lgs-tname { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-twr {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-faint); white-space: nowrap;
}
.lgs-twr b { font-size: 13px; font-weight: 800; color: var(--text-dim); }
.lgs-twr.good b { color: var(--green); }
.lgs-twr.bad  b { color: var(--red); }
.lgs-twr i { font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.lgs-badge { font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
.lgs-badge.blue { color: var(--blue); background: rgba(91,156,248,.14); }
.lgs-badge.red  { color: var(--red);  background: rgba(251,90,113,.14); }
.lgs-center { text-align: center; }
.lgs-kills { display: flex; align-items: center; gap: 14px; font-size: 28px; font-weight: 800; line-height: 1; }
.lgs-kills .blue { color: var(--blue); }
.lgs-kills .red  { color: var(--red); }
.lgs-clock { font-size: 15px; font-weight: 600; color: var(--text); background: var(--surface2); padding: 5px 10px; border-radius: 7px; letter-spacing: .5px; }
.lgs-sr { margin-top: 5px; font-size: 12px; color: var(--text-dim); }
.lgs-paused { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .5px; }
/* Finished game: the clock stops being a running timer and becomes the final
   length, so it is flagged rather than ticking. */
.lgs-over {
  display: block; margin-top: 5px;
  font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--gold);
}
.lgs-clock.over {
  color: var(--gold); background: rgba(250, 204, 21, .10);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .45);
}

/* ── Team gold row (green = ahead, red = behind) ── */
/* Team gold: both totals pulled to the middle, split by a divider, with an
   arrow pointing at the team that's ahead. */
.lgs-nwrow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 6px 2px; }
.lgs-nw-val { font-size: 20px; font-weight: 800; min-width: 56px; color: var(--text); transition: color .3s; }
.lgs-nw-val:first-child { text-align: right; }
.lgs-nw-val:last-child  { text-align: left; }
.lgs-nw-mark { display: inline-flex; align-items: center; gap: 7px; }
.lgs-nw-div  { width: 2px; height: 22px; background: var(--border-strong); border-radius: 1px; }
.lgs-nw-arrow { font-size: 15px; font-weight: 900; line-height: 1; visibility: hidden; }
.lgs-nw-arrow.left  { color: var(--blue); }
.lgs-nw-arrow.right { color: var(--red); }
.lgs-nwrow[data-lead="blue"] .lgs-nw-arrow.left  { visibility: visible; }
.lgs-nwrow[data-lead="red"]  .lgs-nw-arrow.right { visibility: visible; }
.lgs-nwlabel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 6px 8px; }
/* green when ahead in gold, red when behind — used for team totals + per-lane */
.lgs-gup { color: var(--green) !important; }
.lgs-gdn { color: var(--red) !important; }
.lgs-obj { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--text); }
.lgs-obj em { font-style: normal; opacity: .85; margin-left: 6px; }
.lgs-obj:first-child em:first-child { margin-left: 0; }

/* ── Player grid: blue lane | centre gold-diff | red lane ── */
/* Side columns capped near content width so the name sits next to the stats. */
.lgs-cols {
  display: grid;
  grid-template-columns: minmax(0, 320px) 178px minmax(0, 320px);
  justify-content: center; align-items: stretch;
  column-gap: 8px; row-gap: 6px; margin-top: 2px;
}
.lgs-colhead { display: flex; gap: 10px; padding: 0 4px 3px; justify-content: flex-end; align-self: end; }
.lgs-colhead.red { justify-content: flex-start; }
.lgs-colhead span { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; color: var(--text-faint); }
/* header widths match the per-stat cells (blue: K/D/A · HP; red mirrored) */
.lgs-colhead span:nth-child(1) { width: 62px; }
.lgs-colhead span:nth-child(2) { width: 56px; }
.lgs-colhead.red span:nth-child(1) { width: 56px; }
.lgs-colhead.red span:nth-child(2) { width: 62px; }
.lgs-colhead-mid { align-self: end; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--text-faint); padding-bottom: 3px; }
/* centre gold-difference cell: coloured (leader) number in a condensed display
   font + matching arrow → the lead */
.lgs-gd { display: flex; align-items: center; justify-content: center; gap: 6px; }
/* Middle = the gold difference (arrow + number), kept dead-centre; a laner's own
   gold flanks it on each side, coloured blue when ahead / red when behind. */
.lgs-gd-mid { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.lgs-gd-pg {
  font-family: "Bahnschrift", "DIN Condensed", "Oswald", ui-monospace, monospace;
  font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #ffffff;                              /* bright white — advantage shown by the centre diff */
  min-width: 48px; text-align: center;
  padding: 3px 8px; border-radius: 7px;
  border: 1px solid rgba(250, 204, 21, .55);   /* gold-yellow frame, no fill */
  background: transparent;
}
.lgs-gd-num {
  font-family: "Bahnschrift", "DIN Condensed", "Oswald", ui-monospace, monospace;
  font-size: 21px; font-weight: 700; letter-spacing: .5px; color: var(--text);
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.lgs-gd-num.blue { color: var(--blue); }
.lgs-gd-num.red  { color: var(--red); }
.lgs-gd-arw { font-size: 13px; line-height: 1; }
.lgs-gd-arw.blue { color: var(--blue); }
.lgs-gd-arw.red  { color: var(--red); }
.lgs-p {
  display: flex; flex-direction: column; gap: 6px;
  padding: 7px 10px; border-radius: 10px; background: var(--surface2);
  border-left: 3px solid transparent;
}
.lgs-p-main { display: flex; align-items: center; gap: 10px; }
.lgs-p.blue { border-left-color: var(--blue); }
.lgs-p.red  { border-left: none; border-right: 3px solid var(--red); text-align: right; }
.lgs-p.red .lgs-p-main { flex-direction: row-reverse; }
.lgs-p-champ { position: relative; width: 50px; height: 50px; flex-shrink: 0; }
.lgs-p-champ .champ-portrait, .lgs-p-champ .champ-portrait-placeholder {
  width: 50px; height: 50px; border-radius: 9px; display: block;
}
.lgs-lvl {
  position: absolute; bottom: -4px; right: -4px; min-width: 21px; height: 21px;
  padding: 0 4px; border-radius: 6px; background: var(--surface3); color: var(--text);
  font-size: 12px; font-weight: 700; line-height: 21px; text-align: center;
  border: 1px solid var(--border-strong);
}
.lgs-p-id { flex: 1; min-width: 54px; max-width: 100px; display: flex; flex-direction: column; line-height: 1.18; overflow: hidden; }
.lgs-p-name { font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-p-cn { font-size: 13.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgs-p-kda, .lgs-p-hp { flex-shrink: 0; text-align: center; }
.lgs-p-kda { width: 62px; } .lgs-p-hp { width: 56px; }
.lgs-p-kda { font-size: 17px; font-weight: 700; color: var(--text); }
.lgs-p-kda i { color: var(--text-faint); font-style: normal; font-weight: 500; margin: 0 1px; }
.lgs-p-hp { display: flex; align-items: center; }
.lgs-hpbar { width: 100%; height: 12px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.lgs-hpbar span { display: block; height: 100%; background: var(--green); border-radius: 6px; transition: width .9s linear; }

/* inventory strip: 6 slots + a gap + the trinket, mirrored on the red side.
   Icon size drives the player-column width above: 7 × 36 + 7 gaps + spacer
   = 288, which is what the 320px column leaves after padding. The feed
   occasionally reports an 8th entry (an elixir buff alongside a full build),
   so the strip wraps rather than spilling out of the column. */
.lgs-p-items { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.lgs-p.red .lgs-p-items { flex-direction: row-reverse; }
.lgs-item {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 7px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  overflow: hidden; display: block;
}
.lgs-item img { width: 100%; height: 100%; display: block; }
.lgs-item.empty { background: rgba(255,255,255,.03); border-style: dashed; }
.lgs-item-gap { flex: 0 0 8px; }

@media (max-width: 620px) {
  .lgs-cols { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); }
  .lgs-gd { gap: 3px; }
  .lgs-gd-pg { font-size: 12.5px; min-width: 34px; padding: 2px 5px; }
  .lgs-gd-num { font-size: 17px; }
  .lgs-kills { font-size: 26px; gap: 10px; }
  .lgs-p-kda, .lgs-p-hp { width: 44px; }
  .lgs-item { width: 28px; height: 28px; flex-basis: 28px; }
}

/* ── Compact skin for the Live Game Stats panel ──────────────────────────
   The board markup (renderSnapshot) is shared with the Practice trainer, and
   the sizes above are the trainer's. In the simulator the same board is a
   status readout rather than the thing you are studying, so everything here is
   scoped to .lgs-panel and pulled in by roughly 8%: smaller portraits and
   items, tighter columns, smaller display numbers. The Practice board keeps the
   original sizes — nothing in this block can reach it.
   Placed after the 620px block on purpose, with its own nested one, because
   .lgs-panel .x out-specifies the plain .x rules in there. */
.lgs-panel { max-width: 866px; }
/* The head has to carry the same six controls in a narrower panel, so the
   controls give up the width rather than the subtitle (which holds the live
   flag, league and patch); it wraps to a second line before anything clips. */
.lgs-panel .lgs-head { padding: 12px 16px; gap: 11px; flex-wrap: wrap; }
.lgs-panel .lgs-head-l { flex: 1 1 260px; }
.lgs-panel .lgs-head-r { flex-shrink: 0; gap: 6px; }
.lgs-panel .lgs-title { font-size: 15.5px; }
.lgs-panel .lgs-sub { font-size: 12.5px; }
.lgs-panel.open .lgs-select { max-width: 168px; font-size: 12.5px; padding: 6px 8px; }
.lgs-panel.open .lgs-btn { padding: 6px 10px; font-size: 12.5px; }
.lgs-panel .lgs-logo { width: 31px; height: 31px; }
.lgs-panel .lgs-tname { font-size: 13.5px; }
.lgs-panel .lgs-kills { font-size: 26px; gap: 13px; }
.lgs-panel .lgs-clock { font-size: 14.5px; padding: 5px 10px; }
.lgs-panel .lgs-nw-val { font-size: 18.5px; min-width: 53px; }
.lgs-panel .lgs-nw-div { height: 20px; }

.lgs-panel .lgs-cols {
  grid-template-columns: minmax(0, 304px) 168px minmax(0, 304px);
  column-gap: 7px; row-gap: 6px;
}
.lgs-panel .lgs-colhead { gap: 8px; }
.lgs-panel .lgs-colhead span { font-size: 12px; }
.lgs-panel .lgs-colhead span:nth-child(1) { width: 58px; }
.lgs-panel .lgs-colhead span:nth-child(2) { width: 52px; }
.lgs-panel .lgs-colhead.red span:nth-child(1) { width: 52px; }
.lgs-panel .lgs-colhead.red span:nth-child(2) { width: 58px; }
.lgs-panel .lgs-colhead-mid { font-size: 12px; }

.lgs-panel .lgs-p { gap: 6px; padding: 6px 9px; border-radius: 10px; }
.lgs-panel .lgs-p-main { gap: 9px; }
.lgs-panel .lgs-p-champ { width: 46px; height: 46px; }
.lgs-panel .lgs-p-champ .champ-portrait,
.lgs-panel .lgs-p-champ .champ-portrait-placeholder { width: 46px; height: 46px; border-radius: 8px; }
.lgs-panel .lgs-lvl {
  min-width: 20px; height: 20px; line-height: 20px;
  font-size: 11.5px; border-radius: 6px; bottom: -3px; right: -3px;
}
.lgs-panel .lgs-p-id { min-width: 50px; max-width: 98px; }
.lgs-panel .lgs-p-name { font-size: 15.5px; }
.lgs-panel .lgs-p-cn { font-size: 12.5px; }
.lgs-panel .lgs-p-kda { width: 58px; font-size: 15.5px; }
.lgs-panel .lgs-p-hp { width: 52px; }
.lgs-panel .lgs-hpbar { height: 11px; border-radius: 6px; }
.lgs-panel .lgs-hpbar span { border-radius: 6px; }

.lgs-panel .lgs-p-items { gap: 4px; }
.lgs-panel .lgs-item { width: 33px; height: 33px; flex: 0 0 33px; border-radius: 7px; }
.lgs-panel .lgs-item-gap { flex: 0 0 7px; }

.lgs-panel .lgs-gd { gap: 6px; }
.lgs-panel .lgs-gd-pg { font-size: 14.5px; min-width: 45px; padding: 3px 7px; border-radius: 7px; }
.lgs-panel .lgs-gd-num { font-size: 19.5px; }
.lgs-panel .lgs-gd-arw { font-size: 12.5px; }

@media (max-width: 620px) {
  .lgs-panel .lgs-cols { grid-template-columns: minmax(0, 1fr) 122px minmax(0, 1fr); }
  .lgs-panel .lgs-gd { gap: 3px; }
  .lgs-panel .lgs-gd-pg { font-size: 11.5px; min-width: 32px; padding: 2px 4px; }
  .lgs-panel .lgs-gd-num { font-size: 15px; }
  .lgs-panel .lgs-kills { font-size: 22px; gap: 9px; }
  .lgs-panel .lgs-p-kda { width: 43px; }
  .lgs-panel .lgs-p-hp { width: 43px; }
  .lgs-panel .lgs-colhead span:nth-child(1),
  .lgs-panel .lgs-colhead span:nth-child(2),
  .lgs-panel .lgs-colhead.red span:nth-child(1),
  .lgs-panel .lgs-colhead.red span:nth-child(2) { width: 43px; }
  .lgs-panel .lgs-item { width: 27px; height: 27px; flex-basis: 27px; }
}

/* ── Live Game Stats: replay timeline scrubber ── */
.lgs-btn:disabled { opacity: .38; cursor: default; }
.lgs-btn.on { background: var(--gold-dim); border-color: var(--gold-dim); color: #06231f; }
.lgs-scrub { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; }
.lgs-tl-play, .lgs-tl-exit {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border);
  font-size: 13px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.lgs-tl-play:hover, .lgs-tl-exit:hover { border-color: var(--text-dim); background: var(--surface3); }
.lgs-tl-play { color: var(--gold); font-size: 12px; }
.lgs-tl-slider {
  flex: 1; height: 6px; cursor: pointer; accent-color: var(--gold);
  background: transparent;
}
.lgs-tl-clock {
  flex-shrink: 0; min-width: 52px; text-align: center; font-size: 14px; font-weight: 700;
  color: var(--text); background: var(--surface2); padding: 5px 8px; border-radius: 7px;
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
}

/* ─── Tags page ─────────────────────────────────────────────────────────── */
.tags-wrap { width: 100%; max-width: none; margin: 0; padding: 10px 28px 40px; }

.tags-topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 8px 0 18px; }
.tags-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 21px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff4cf 0%, #fbd877 26%, #eaad3e 50%, #b9791f 68%, #f4d06d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tags-newtag { display: flex; gap: 8px; margin-left: auto; }
.tags-newtag input {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-size: 15px; padding: 9px 13px; border-radius: 9px; width: 210px;
}
.tags-newtag input:focus { border-color: var(--gold-dim); outline: none; }
.tags-newtag button {
  background: var(--gold-dim); border: none; color: #06231f; font-size: 15px; font-weight: 800;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
}
.tags-newtag button:hover { background: var(--gold); }

.tags-taglist { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tags-tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border-strong); color: var(--text);
  font-size: 16px; font-weight: 700; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.tags-tag-pill:hover { border-color: var(--gold-dim); }
.tags-tag-pill.active { background: var(--gold-dim); border-color: var(--gold-dim); color: #06231f; }
.tags-pill-n {
  font-size: 13px; font-weight: 800; background: rgba(0,0,0,.28); color: inherit;
  padding: 2px 8px; border-radius: 999px;
}
.tags-tag-pill.active .tags-pill-n { background: rgba(255,255,255,.3); }

.tags-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px 22px;
}
.tags-panel-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.tags-panel-name { font-size: 21px; font-weight: 800; color: var(--text); }
.tags-panel-count { font-size: 15px; color: var(--text-dim); font-weight: 600; }
.tags-del-tag {
  margin-left: auto; background: none; border: 1px solid var(--border-strong); color: var(--red);
  font-size: 14px; font-weight: 700; padding: 7px 13px; border-radius: 9px; cursor: pointer;
}
.tags-del-tag:hover { border-color: var(--red); background: rgba(251,90,113,.09); }

.tags-addchamp { display: flex; gap: 8px; margin-bottom: 18px; }
.tags-addchamp input {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-size: 16px; padding: 10px 14px; border-radius: 9px; flex: 1; max-width: 380px;
}
.tags-addchamp input:focus { border-color: var(--gold-dim); outline: none; }
.tags-addchamp button {
  background: var(--surface3); border: 1px solid var(--border-strong); color: var(--text);
  font-size: 15px; font-weight: 800; padding: 10px 18px; border-radius: 9px; cursor: pointer;
}
.tags-addchamp button:hover { border-color: var(--gold-dim); color: var(--gold); }

.tags-champ-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 9px;
}
.tags-champ-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 11px;
  padding: 6px 8px;
}
.tags-champ-card img, .tags-champ-noimg {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; object-fit: cover;
  background: var(--surface3);
}
.tags-champ-name { font-size: 16px; font-weight: 700; color: var(--text); flex: 1; }
.tags-champ-x {
  background: none; border: none; color: var(--text-dim); font-size: 15px; font-weight: 800;
  cursor: pointer; padding: 6px 8px; border-radius: 7px; line-height: 1;
}
.tags-champ-x:hover { color: var(--red); background: rgba(251,90,113,.12); }

.tags-grid-empty, .tags-empty { font-size: 16px; color: var(--text-dim); padding: 14px 4px; }

/* Add-champion autocomplete dropdown (with portraits) */
.tags-suggest-wrap { position: relative; flex: 1; max-width: 380px; }
.tags-suggest-wrap input { width: 100%; box-sizing: border-box; }
.tags-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface2); border: 1px solid var(--border-strong); border-radius: 11px;
  max-height: 340px; overflow-y: auto; padding: 5px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.tags-suggest-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--text);
}
.tags-suggest-item:hover, .tags-suggest-item.active { background: var(--surface3); color: var(--gold); }
.tags-suggest-item img, .tags-suggest-noimg {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; object-fit: cover;
  background: var(--surface3);
}

/* ═══════════════════════════════════════════════════════════════════
   PRACTICE — hextech skin
   The trainer dressed as the game it studies: deep navy surfaces,
   hextech-gold frames with corner brackets, teal as the action color,
   hard blue/red side identity. Display face Cinzel (the calls),
   data face Chakra Petch (numbers, labels, clocks), body Outfit —
   all already loaded by the site.
   Scope: every selector is .prc-/.pm-/.prcd- (practice-only classes),
   plus a frame on .prc-board that never reaches into .lgs-* internals.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --prc-navy-950: #070c16;
  --prc-navy-900: #0a1120;
  --prc-navy-800: #0d1626;
  --prc-navy-700: #142138;
  --prc-gold: #c8aa6e;
  --prc-gold-bright: #f0d695;
  --prc-gold-line: rgba(200, 170, 110, .34);
  --prc-gold-faint: rgba(200, 170, 110, .14);
  --prc-teal: #0ac8b9;
  --prc-teal-bright: #3df2e1;
  --prc-teal-glow: rgba(10, 200, 185, .35);
  --prc-blue: #4ca4ff;
  --prc-blue-glow: rgba(76, 164, 255, .35);
  --prc-red: #ff5a5e;
  --prc-red-glow: rgba(255, 90, 94, .35);
  --prc-ink: #f0e6d2;
  --prc-body-text: #dce6f7;
  --prc-mute: #a6b8d8;
  --prc-win: #3ddc97;
  --prc-loss: #ff5a5e;
  --prc-push: #e8c15a;
  --prc-plate-cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ─── Page header ─────────────────────────────────────────────── */
.prc-wrap { max-width: 1520px; margin: 0 auto; padding: 10px 8px 48px; }
.prc-top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
  padding-bottom: 18px; margin-bottom: 18px; position: relative; flex-wrap: wrap;
}
.prc-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--prc-gold), var(--prc-gold-faint) 45%, transparent);
}
.prc-eyebrow {
  font-family: 'Chakra Petch', 'Outfit', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--prc-teal-bright);
}
.prc-eyebrow::before { content: '◆ '; color: var(--prc-gold); font-size: 11px; }
.prc-top h2 {
  font-family: 'Cinzel', 'Outfit', serif;
  font-size: 32px; font-weight: 800; margin: 2px 0 0; letter-spacing: 1.5px; line-height: 1.1;
  color: var(--prc-ink);
  text-shadow: 0 0 24px rgba(200, 170, 110, .25);
}
.prc-sub { font-size: 14px; color: var(--prc-mute); margin: 6px 0 0; max-width: 400px; line-height: 1.45; }

/* Running score — three hex-cut plates */
.prc-score { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; margin: 0 auto; }
.prc-score-item {
  display: flex; flex-direction: column; gap: 2px; min-width: 122px;
  align-items: center; text-align: center;
  padding: 10px 16px 9px;
  background: linear-gradient(180deg, var(--prc-navy-700), var(--prc-navy-900));
  clip-path: var(--prc-plate-cut);
  box-shadow: inset 0 1px 0 var(--prc-gold-faint);
}
.prc-score-item span {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--prc-gold);
}
.prc-score-item b {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 23px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.prc-score-item i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--prc-mute); }

/* ─── Controls ────────────────────────────────────────────────── */
.prc-btn {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 12px 22px; border: none; cursor: pointer; color: var(--prc-body-text);
}
.prc-btn.primary {
  background: linear-gradient(135deg, var(--prc-teal), #12a3b4);
  color: #04211f; clip-path: var(--prc-plate-cut);
  filter: drop-shadow(0 0 9px var(--prc-teal-glow));
}
.prc-btn.primary:hover:not(:disabled) { filter: brightness(1.15) drop-shadow(0 0 13px var(--prc-teal-glow)); }
.prc-btn.primary:disabled {
  background: var(--prc-navy-700); color: #5d6e8c; cursor: not-allowed; filter: none;
}
.prc-btn.ghost {
  background: transparent; border: 1px solid var(--prc-gold-line); border-radius: 10px;
  color: var(--prc-gold);
}
.prc-btn.ghost:hover { border-color: var(--prc-gold); color: var(--prc-gold-bright); background: var(--prc-gold-faint); }
/* ─── Empty / loading states ──────────────────────────────────── */
.prc-empty {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 46px 20px; text-align: center;
  font-size: 15.5px; font-weight: 600; color: var(--prc-mute); line-height: 1.6;
  border: 1px dashed var(--prc-gold-line); border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 170, 110, .05), transparent 65%);
}
.prc-spin {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--prc-gold-faint); border-top-color: var(--prc-teal-bright);
  animation: prcSpin .8s linear infinite;
}
@keyframes prcSpin { to { transform: rotate(360deg); } }

/* ─── Round rail — the game's checkpoints ─────────────────────── */
.prc-rail { display: flex; align-items: stretch; gap: 0; margin-bottom: 18px; flex-wrap: wrap; }
.prc-rail-node {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  background: linear-gradient(180deg, var(--prc-navy-800), var(--prc-navy-900));
  clip-path: var(--prc-plate-cut);
  opacity: .62;
}
.prc-rail-node + .prc-rail-node { margin-left: 26px; position: relative; }
.prc-rail-node + .prc-rail-node::before {
  content: '»'; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  color: var(--prc-gold); font-size: 15px; font-weight: 800;
}
.prc-rail-node.now {
  opacity: 1;
  background: linear-gradient(180deg, #0e2b33, var(--prc-navy-900));
  box-shadow: inset 0 0 0 1px var(--prc-teal);
  animation: prcPulse 2.2s ease-in-out infinite;
}
.prc-rail-node.done { opacity: .95; }
@keyframes prcPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--prc-teal); filter: drop-shadow(0 0 5px rgba(10, 200, 185, .18)); }
  50%      { box-shadow: inset 0 0 0 1px var(--prc-teal-bright); filter: drop-shadow(0 0 11px rgba(10, 200, 185, .38)); }
}
.prc-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  border: 1px solid var(--prc-gold-line); color: var(--prc-gold); background: var(--prc-navy-950);
}
.prc-dot.win  { background: #0e2f22; border-color: var(--prc-win);  color: var(--prc-win); }
.prc-dot.loss { background: #331418; border-color: var(--prc-loss); color: var(--prc-loss); }
.prc-dot.push { background: #2f270f; border-color: var(--prc-push); color: var(--prc-push); }
.prc-rail-lab {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--prc-body-text);
}
.prc-rail-tag {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12.5px; font-weight: 700; color: var(--prc-gold); font-variant-numeric: tabular-nums;
}

/* ─── Round header ────────────────────────────────────────────── */
.prc-rhead { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.prc-rq {
  font-family: 'Cinzel', 'Outfit', serif;
  font-size: 23px; font-weight: 700; letter-spacing: .6px; color: var(--prc-ink);
}
.prc-rq em { font-style: normal; color: var(--prc-teal-bright); }

/* ─── Board + side column ─────────────────────────────────────── */
.prc-2col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.prc-board {
  position: relative; padding: 14px;
  background: linear-gradient(180deg, var(--prc-navy-900), var(--prc-navy-950));
  border: 1px solid var(--prc-gold-line); border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .45);
}
.prc-board::before, .prc-board::after {
  content: ''; position: absolute; width: 20px; height: 20px; pointer-events: none;
}
.prc-board::before { top: -1px; left: -1px; border-top: 2px solid var(--prc-gold); border-left: 2px solid var(--prc-gold); }
.prc-board::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--prc-gold); border-right: 2px solid var(--prc-gold); }
.prc-side { display: flex; flex-direction: column; gap: 14px; }

/* ─── The call card ───────────────────────────────────────────── */
.pm-card {
  position: relative; padding: 18px;
  background: linear-gradient(165deg, var(--prc-navy-800), var(--prc-navy-950));
  border: 1px solid var(--prc-gold-line); border-radius: 4px;
}
.pm-card::before, .pm-card::after { content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.pm-card::before { top: -1px; left: -1px; border-top: 2px solid var(--prc-gold-bright); border-left: 2px solid var(--prc-gold-bright); }
.pm-card::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--prc-gold-bright); border-right: 2px solid var(--prc-gold-bright); }
.pm-card.done { opacity: .6; }
.pm-title {
  display: block; font-family: 'Chakra Petch', sans-serif;
  font-size: 16.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--prc-ink);
}
.pm-sub { display: block; font-size: 13px; font-weight: 600; color: var(--prc-mute); margin-top: 4px; }
.pm-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 6px; }
.pm-price {
  position: relative; padding: 18px 12px 15px; cursor: pointer; text-align: center;
  border-radius: 14px; border: 1px solid transparent; color: var(--prc-body-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  animation: prcOptIn .3s ease backwards;
}
.pm-price:nth-child(2) { animation-delay: .07s; }
.pm-price .pm-pt-lg { font-size: 15.5px; font-weight: 800; line-height: 1.25; display: block; }
.pm-price::before {
  display: block; font-family: 'Chakra Petch', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 2px; margin-bottom: 6px;
}
.pm-price.blue {
  background: linear-gradient(180deg, #16294a, #0c1930 60%, #0a1424);
  border-color: rgba(76, 164, 255, .35);
}
.pm-price.blue::before { content: 'BLUE SIDE'; color: var(--prc-blue); }
.pm-price.red {
  background: linear-gradient(180deg, #43202c, #2a1220 60%, #1c0d16);
  border-color: rgba(255, 90, 94, .35);
}
.pm-price.red::before { content: 'RED SIDE'; color: var(--prc-red); }
.pm-price:hover { transform: translateY(-2px) scale(1.04); }
.pm-price.blue:hover { border-color: var(--prc-blue); box-shadow: 0 8px 26px rgba(76, 164, 255, .25); }
.pm-price.red:hover  { border-color: var(--prc-red);  box-shadow: 0 8px 26px rgba(255, 90, 94, .25); }
.pm-price:active { transform: scale(.97); transition-duration: .12s; }
.pm-price.on { color: #fff; animation: prcLockIn .32s cubic-bezier(.2, .8, .3, 1); }
.pm-price.blue.on {
  background: linear-gradient(180deg, #1e3f78, #122647 60%, #0d1a30);
  border-color: var(--prc-blue);
  box-shadow: 0 0 0 2px var(--prc-blue), 0 0 26px var(--prc-blue-glow), 0 8px 22px rgba(0, 0, 0, .4);
}
.pm-price.red.on {
  background: linear-gradient(180deg, #6b2438, #3f1526 60%, #260d18);
  border-color: var(--prc-red);
  box-shadow: 0 0 0 2px var(--prc-red), 0 0 26px var(--prc-red-glow), 0 8px 22px rgba(0, 0, 0, .4);
}
.pm-price.on::after {
  content: '\2713'; position: absolute; top: 8px; right: 11px; font-size: 12.5px; font-weight: 800;
}
.pm-price.blue.on::after { color: var(--prc-blue); }
.pm-price.red.on::after  { color: var(--prc-red); }
@keyframes prcOptIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes prcLockIn { 0% { transform: scale(.95); } 55% { transform: scale(1.045); } 100% { transform: scale(1); } }
.pm-quote {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--prc-gold-faint);
  font-size: 13.5px; font-weight: 500; color: var(--prc-mute); line-height: 1.55;
}

/* Finish time — Over/Under 31:30 */
.pm-len {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--prc-gold-faint);
}
.pm-len-lab {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--prc-gold);
}
.pm-len-ctl { display: flex; gap: 12px; }
.pm-ou {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 8px 12px; cursor: pointer; border-radius: 14px;
  border: 1px solid rgba(10, 200, 185, .3);
  background: linear-gradient(180deg, #102b33, #0b1a26 60%, #0a1420);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  animation: prcOptIn .3s ease backwards;
}
.pm-ou[data-ou="under"] { animation-delay: .07s; }
.pm-ou::before { font-size: 13px; line-height: 1; color: var(--prc-teal-bright); }
.pm-ou[data-ou="over"]::before  { content: '\25B2'; }
.pm-ou[data-ou="under"]::before { content: '\25BC'; }
.pm-ou b {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 15.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--prc-body-text);
}
.pm-ou i {
  font-style: normal; font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 700; color: var(--prc-gold); font-variant-numeric: tabular-nums;
}
.pm-ou:hover { transform: translateY(-2px) scale(1.04); border-color: var(--prc-teal); box-shadow: 0 8px 26px rgba(10, 200, 185, .22); }
.pm-ou:active { transform: scale(.97); transition-duration: .12s; }
.pm-ou.on {
  background: linear-gradient(180deg, #0fa89c, #0a7d8a);
  border-color: var(--prc-teal-bright);
  box-shadow: 0 0 0 2px var(--prc-teal-bright), 0 0 24px var(--prc-teal-glow);
  animation: prcLockIn .32s cubic-bezier(.2, .8, .3, 1);
}
.pm-ou.on::before, .pm-ou.on b, .pm-ou.on i { color: #04211f; }
.pm-card.done .pm-len { pointer-events: none; }

/* ─── Actions + verdicts ──────────────────────────────────────── */
.prc-actions { display: flex; gap: 10px; margin-top: 2px; }
.prc-actions .prc-btn { flex: 1; }
.prc-result { display: flex; flex-direction: column; gap: 10px; }
.prc-verdict {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 4px;
  background: var(--prc-navy-800); border-left: 3px solid var(--prc-gold-line);
}
.prc-verdict.hit  { border-left-color: var(--prc-win);  background: linear-gradient(90deg, rgba(61, 220, 151, .09), var(--prc-navy-800) 55%); }
.prc-verdict.miss { border-left-color: var(--prc-loss); background: linear-gradient(90deg, rgba(255, 90, 94, .09),  var(--prc-navy-800) 55%); }
.prc-verdict.push { border-left-color: var(--prc-push); background: linear-gradient(90deg, rgba(232, 193, 90, .09), var(--prc-navy-800) 55%); }
.prc-verdict.blue { border-left-color: var(--prc-blue); background: linear-gradient(90deg, rgba(76, 164, 255, .09), var(--prc-navy-800) 55%); }
.prc-verdict.red  { border-left-color: var(--prc-red);  background: linear-gradient(90deg, rgba(255, 90, 94, .09),  var(--prc-navy-800) 55%); }
.prc-vmark {
  font-family: 'Chakra Petch', sans-serif; font-size: 16px; font-weight: 800; text-align: center; padding-top: 1px;
}
.prc-verdict.hit  .prc-vmark { color: var(--prc-win); }
.prc-verdict.miss .prc-vmark { color: var(--prc-loss); }
.prc-verdict.push .prc-vmark { color: var(--prc-push); }
.prc-verdict.blue .prc-vmark { color: var(--prc-blue); }
.prc-verdict.red  .prc-vmark { color: var(--prc-red); }
.prc-vtext { font-size: 14.5px; font-weight: 500; color: var(--prc-body-text); line-height: 1.55; }
.prc-vtext b { color: var(--prc-ink); }
.prc-vtext b.blue { color: var(--prc-blue); }
.prc-vtext b.red  { color: var(--prc-red); }

/* ─── End-of-game result screen ───────────────────────────────── */
.prc-gameover {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-top: 4px; padding: 22px 16px 20px; text-align: center;
  border: 1px solid var(--prc-gold-line); border-radius: 4px; background: var(--prc-navy-900);
}
.prc-gameover::before, .prc-gameover::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.prc-gameover::before { top: -1px; left: -1px; border-top: 2px solid var(--prc-gold); border-left: 2px solid var(--prc-gold); }
.prc-gameover::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--prc-gold); border-right: 2px solid var(--prc-gold); }
.prc-gameover.perfect {
  border-color: var(--prc-gold);
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 170, 110, .16), var(--prc-navy-900) 70%);
}
.prc-gameover.good {
  border-color: rgba(10, 200, 185, .5);
  background: radial-gradient(ellipse at 50% 0%, rgba(10, 200, 185, .13), var(--prc-navy-900) 70%);
}
.prc-gameover.rough {
  border-color: rgba(255, 90, 94, .5);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 90, 94, .12), var(--prc-navy-900) 70%);
}
.prc-go-title {
  font-family: 'Cinzel', serif; font-size: 25px; font-weight: 800; letter-spacing: 1px;
}
.prc-gameover.perfect .prc-go-title { color: var(--prc-gold-bright); text-shadow: 0 0 22px rgba(200, 170, 110, .45); }
.prc-gameover.good    .prc-go-title { color: var(--prc-teal-bright); text-shadow: 0 0 22px rgba(10, 200, 185, .4); }
.prc-gameover.rough   .prc-go-title { color: var(--prc-red);         text-shadow: 0 0 22px rgba(255, 90, 94, .35); }
.prc-go-sub { font-size: 14px; font-weight: 600; color: var(--prc-mute); }
.prc-go-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 5px; }
.prc-go-chip {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 6px 12px; clip-path: var(--prc-plate-cut); background: var(--prc-navy-700); color: var(--prc-mute);
}
.prc-go-chip.win  { background: #0e2f22; color: var(--prc-win); }
.prc-go-chip.loss { background: #331418; color: var(--prc-loss); }
.prc-go-chip.push { background: #2f270f; color: var(--prc-push); }

/* ─── Draft Simulator numbers panel ───────────────────────────── */
/* The holder is the second row of .prc-2col, pinned to the board's column —
   centering it across board+sidebar left it visibly shoved right of the board
   it belongs under. Flex centering inside is deliberate: margin:auto proved
   unreliable here. Below 1240px the grid collapses to one column and this
   simply stacks. */
#prcDraftPanel { grid-column: 1; display: flex; justify-content: center; width: 100%; }
.prcd-wrap {
  margin: 18px 0 0; padding: 14px 16px;
  max-width: 880px; width: 100%;
  background: linear-gradient(180deg, var(--prc-navy-900), var(--prc-navy-950));
  border: 1px solid var(--prc-gold-line); border-radius: 6px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .4);
}
.prcd-wrap.loading {
  flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  color: var(--prc-mute); font-size: 14.5px; font-weight: 600; padding: 16px;
}
.prcd-banner, .prcd-pred {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 22px; align-self: center; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--prc-navy-700), var(--prc-navy-900));
  clip-path: var(--prc-plate-cut);
  box-shadow: inset 0 1px 0 var(--prc-gold-faint);
}
.prcd-label {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--prc-gold); white-space: nowrap;
}
.prcd-label i { font-style: normal; color: var(--prc-mute); text-transform: none; letter-spacing: 0; }
.prcd-ds { display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 13px; }
.prcd-ds b {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.prcd-ds i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--prc-mute); }
.prcd-ds.blue { box-shadow: inset 3px 0 0 var(--prc-blue); background: rgba(76, 164, 255, .08); }
.prcd-ds.blue b { color: var(--prc-blue); }
.prcd-ds.red { box-shadow: inset -3px 0 0 var(--prc-red); background: rgba(255, 90, 94, .08); }
.prcd-ds.red b { color: var(--prc-red); }

.prcd-mid { display: grid; grid-template-columns: 118px 1fr 48px 1fr 118px; gap: 10px; align-items: start; }
.prcd-teambox {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 10px; margin-top: 26px; text-align: center;
  background: var(--prc-navy-800); border: 1px solid var(--prc-gold-line); border-radius: 4px;
}
.prcd-teambox::before, .prcd-teambox::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.prcd-teambox::before { top: -1px; left: -1px; border-top: 2px solid var(--prc-gold); border-left: 2px solid var(--prc-gold); }
.prcd-teambox::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--prc-gold); border-right: 2px solid var(--prc-gold); }
.prcd-teambox span {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--prc-gold);
}
.prcd-teambox b { font-family: 'Chakra Petch', sans-serif; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prcd-teambox i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--prc-mute); }

.prcd-col { display: flex; flex-direction: column; gap: 6px; }
.prcd-pick {
  display: flex; align-items: center; gap: 8px; padding: 5px 9px;
  background: linear-gradient(180deg, var(--prc-navy-800), var(--prc-navy-900));
  border-radius: 4px; border: 1px solid rgba(200, 170, 110, .16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.prcd-pick.blue { box-shadow: inset 3px 0 0 var(--prc-blue); }
.prcd-pick.red  { box-shadow: inset -3px 0 0 var(--prc-red); flex-direction: row-reverse; text-align: right; }
.prcd-pick.blue:hover { transform: translateX(2px);  box-shadow: inset 3px 0 0 var(--prc-blue), 0 0 14px rgba(76, 164, 255, .15); }
.prcd-pick.red:hover  { transform: translateX(-2px); box-shadow: inset -3px 0 0 var(--prc-red), 0 0 14px rgba(255, 90, 94, .15); }
.prcd-champ { flex-shrink: 0; width: 36px; height: 36px; }
.prcd-champ .champ-portrait, .prcd-champ .champ-portrait-placeholder {
  width: 36px; height: 36px; border-radius: 3px; object-fit: cover; display: block;
  background: var(--prc-navy-950); border: 1px solid var(--prc-gold-line);
}
.prcd-names { display: flex; flex-direction: column; min-width: 0; }
.prcd-names b { font-size: 14.5px; font-weight: 800; color: var(--prc-body-text); line-height: 1.15; }
.prcd-names i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--prc-teal-bright); }
.prcd-nums { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.prcd-pick.red .prcd-nums { margin-left: 0; margin-right: auto; align-items: flex-start; }
.prcd-nums i {
  font-style: normal; font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 700; color: var(--prc-gold); font-variant-numeric: tabular-nums;
}
.prcd-wr { font-family: 'Chakra Petch', sans-serif; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prcd-wr.good, .prcd-teambox b.good { color: var(--prc-win); }
.prcd-wr.mid,  .prcd-teambox b.mid  { color: var(--prc-blue); }
.prcd-wr.bad,  .prcd-teambox b.bad  { color: var(--prc-loss); }
.prcd-wr.na,   .prcd-teambox b.na   { color: #8496b5; }

/* One slot per pick row, stretched to the columns' height, so each role label
   sits centered next to its own champion/player row between the two teams. */
.prcd-roles { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.prcd-role-slot { flex: 1; display: flex; align-items: center; justify-content: center; }
.prcd-role {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1px; padding: 5px 7px;
  clip-path: var(--prc-plate-cut);
  background: var(--prc-navy-950); color: var(--prc-gold);
  box-shadow: inset 0 0 0 1px var(--prc-gold-line);
}

.prcd-pred { position: relative; padding-bottom: 18px; min-width: 300px; }
.prcd-pp { font-family: 'Chakra Petch', sans-serif; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prcd-pp.blue { color: var(--prc-blue); }
.prcd-pp.red  { color: var(--prc-red); }
.prcd-bar {
  position: absolute; left: 16px; right: 16px; bottom: 8px; height: 6px;
  background: linear-gradient(90deg, #8c3a40, #5c262b); overflow: hidden;
}
.prcd-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #2f6cb8, var(--prc-blue));
  box-shadow: 2px 0 8px var(--prc-blue-glow);
}

/* "Skip" sits with Over/Under but must not look like a third prediction:
   no side colour, muted until chosen. */
.pm-ou.ou-skip { border-style: dashed; }
.pm-ou.ou-skip b { color: var(--prc-mute); }
.pm-ou.ou-skip i { text-transform: none; letter-spacing: .2px; }
.pm-ou.ou-skip.on { border-style: solid; }
.pm-ou.ou-skip.on b { color: var(--prc-ink); }

/* Scope cleared — every match in the chosen leagues/days has been played. */
.prc-cleared {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 18px auto 0; padding: 22px 26px; max-width: 620px; text-align: center;
  background: linear-gradient(180deg, var(--prc-navy-800), var(--prc-navy-950));
  border: 1px solid var(--prc-gold); border-radius: 6px;
  box-shadow: 0 0 26px rgba(200, 170, 110, .18);
}
.prc-cleared-title {
  font-family: 'Cinzel', serif; font-size: 25px; font-weight: 800; letter-spacing: 1px;
  color: var(--prc-gold-bright); text-shadow: 0 0 22px rgba(200, 170, 110, .35);
}
.prc-cleared-sub { font-size: 15px; color: var(--prc-body-text); line-height: 1.5; }
.prc-cleared-sub b { color: var(--prc-gold-bright); }

/* ─── Accessibility + responsive ──────────────────────────────── */
.prc-btn:focus-visible, .pm-price:focus-visible, .pm-ou:focus-visible, .smw-select:focus-visible {
  outline: 2px solid var(--prc-teal-bright); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .prc-rail-node.now { animation: none; }
  .smw-item.on .smw-cur, .smw-title-main { animation: none; }
  .pm-price, .pm-ou { animation: none; transition: none; }
  .pm-price:hover, .pm-ou:hover { transform: none; }
  .prcd-pick { transition: none; }
}
@media (max-width: 1240px) {
  .prc-2col { grid-template-columns: 1fr; }
  .prc-side { position: static; }
}
@media (max-width: 1100px) {
  .prcd-mid { grid-template-columns: 1fr 52px 1fr; }
  .prcd-teambox { display: none; }
}
@media (max-width: 760px) {
  .prc-top { align-items: flex-start; flex-direction: column; }
  .prc-top h2 { font-size: 26px; }
  .prc-rail-node { padding: 8px 12px; }
  .prc-rail-node + .prc-rail-node { margin-left: 22px; }
  .pm-prices { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRACTICE MENU — Super Mario World file select (.smw-*)
   The trainer opens as a little console game: a sky with clouds and hills,
   a chunky outlined logo, and a mushroom cursor on a menu you drive with
   the arrow keys. Settings scopes which real matches get dealt (leagues,
   day, team); the pause overlay sits on top of a game in progress.
   Every selector here is .smw-* and lives inside #tab-practice — it never
   reaches into the hextech .prc-/.pm-/.prcd- board styling below it.
   Visibility is class-driven (.on), never [hidden]: an author display rule
   in this file would out-specify the attribute selector.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --smw-sky-top: #4a7cf0;
  --smw-sky-bot: #7fb2ff;
  --smw-box: #2b1a52;          /* the deep purple SMW menu plate */
  --smw-box-2: #180d33;
  --smw-edge: #f8e08c;
  --smw-edge-dark: #b8862b;
  --smw-ink: #fffdf2;
  --smw-red: #e52521;
  --smw-yellow: #ffd83d;
  --smw-green: #43b047;
  --smw-shadow: 3px 3px 0 #150a26;
}

/* Pixel display face. Falls back to the site's data face if the webfont is
   blocked (the desktop shell can run offline). */
.smw-menu, .smw-pause, .smw-hud {
  font-family: 'Press Start 2P', 'Chakra Petch', monospace;
  -webkit-font-smoothing: none;
}

.smw-menu { display: none; }
.smw-menu.on { display: block; margin-bottom: 18px; }

/* ─── The screen: sky, clouds, hills, ground ──────────────────── */
.smw-screen {
  position: relative; overflow: hidden;
  border: 4px solid #0d0718;
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--smw-edge-dark), 0 14px 40px rgba(0, 0, 0, .55);
  background: linear-gradient(180deg, var(--smw-sky-top), var(--smw-sky-bot) 78%, #a8d3ff);
  padding: 30px 24px 34px;
  min-height: 430px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.smw-screen.settings { min-height: 0; padding: 22px 18px 26px; }

.smw-sky { position: absolute; inset: 0; pointer-events: none; }
.smw-cloud {
  position: absolute; display: block;
  width: 74px; height: 24px; background: #fff; border-radius: 999px;
  box-shadow: 22px -12px 0 -2px #fff, -20px -8px 0 -5px #fff, 0 0 0 3px rgba(255, 255, 255, .35);
  opacity: .92;
}
.smw-cloud.a { top: 16px;  left: 6%;  animation: smwDrift 46s linear infinite; }
.smw-cloud.b { top: 214px; left: 62%; transform: scale(.8); animation: smwDrift 68s linear infinite; }
.smw-cloud.c { top: 312px; left: 32%; transform: scale(1.15); opacity: .7; animation: smwDrift 88s linear infinite; }
@keyframes smwDrift { from { margin-left: -120px; } to { margin-left: 108%; } }

.smw-hill {
  position: absolute; bottom: 26px; display: block;
  background: #3f9e3f; border-radius: 50% 50% 0 0;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12);
}
.smw-hill.h1 { left: 4%;  width: 190px; height: 96px; }
.smw-hill.h2 { right: 8%; width: 126px; height: 66px; background: #348a35; }
.smw-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px; display: block;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #c8813c 0 8px, #9c5a25 8px);
  border-top: 4px solid #6d3c15;
}

/* ─── Logo plate ──────────────────────────────────────────────── */
.smw-title { position: relative; text-align: center; line-height: 1; margin-top: 6px; }
.smw-title-top {
  display: block; font-size: 13px; color: var(--smw-ink);
  letter-spacing: 5px; text-shadow: var(--smw-shadow);
}
.smw-title-main {
  display: block; margin: 10px 0 12px;
  font-size: clamp(20px, 3.4vw, 38px); letter-spacing: 2px;
  color: var(--smw-yellow);
  -webkit-text-stroke: 3px #2a1352;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 #a8391a, 0 8px 0 #2a1352;
  animation: smwBob 3.4s ease-in-out infinite;
}
@keyframes smwBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.smw-title-sub {
  display: inline-block; font-size: 11px; letter-spacing: 2px;
  color: #fff; background: var(--smw-red);
  border: 3px solid #7b1410; border-radius: 3px;
  padding: 7px 12px; box-shadow: var(--smw-shadow);
}

/* ─── Cursor menu ─────────────────────────────────────────────── */
.smw-list {
  list-style: none; margin: 0; padding: 14px 16px; position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-width: min(460px, 94%);
  background: linear-gradient(180deg, var(--smw-box), var(--smw-box-2));
  border: 4px solid var(--smw-edge);
  border-radius: 4px;
  box-shadow: 0 0 0 4px #0d0718, 6px 8px 0 rgba(0, 0, 0, .35);
}
.smw-item {
  display: grid; grid-template-columns: 30px 1fr; align-items: center;
  column-gap: 6px; row-gap: 2px;
  padding: 10px 12px; cursor: pointer; border-radius: 3px;
  color: var(--smw-ink);
}
.smw-item.dis { cursor: not-allowed; opacity: .45; }
.smw-item.on { background: rgba(255, 216, 61, .16); box-shadow: inset 0 0 0 2px rgba(255, 216, 61, .5); }
.smw-cur-slot { width: 26px; height: 26px; }
.smw-cur { width: 26px; height: 26px; opacity: 0; }
.smw-item.on .smw-cur { opacity: 1; animation: smwHop .7s steps(2) infinite; }
@keyframes smwHop { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.smw-lab {
  font-size: 15px; letter-spacing: 1px; text-shadow: var(--smw-shadow);
}
.smw-item.on .smw-lab { color: var(--smw-yellow); }
.smw-note {
  grid-column: 2; font-family: 'Chakra Petch', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .3px; color: #b9a9e8;
}
.smw-item.on .smw-note { color: #e6dcff; }

.smw-hint {
  position: relative; z-index: 1; margin-top: auto;
  font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600;
  color: #e8f0ff; letter-spacing: .4px; text-align: center;
  background: rgba(13, 7, 24, .74); border: 2px solid rgba(248, 224, 140, .35);
  border-radius: 3px; padding: 6px 12px;
}
.smw-hint kbd {
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; font-weight: 700;
  background: #fffdf2; color: #23124a; border: 2px solid #23124a; border-radius: 3px;
  padding: 2px 6px; margin: 0 2px;
}
.smw-boot {
  font-family: 'Chakra Petch', sans-serif; font-size: 15px; font-weight: 700;
  color: #fffdf2; text-shadow: var(--smw-shadow);
  display: flex; align-items: center; gap: 10px; margin: auto;
}

/* ─── Settings panel ──────────────────────────────────────────── */
.smw-panel {
  position: relative; width: min(1020px, 100%);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, var(--smw-box), var(--smw-box-2));
  border: 4px solid var(--smw-edge); border-radius: 4px;
  box-shadow: 0 0 0 4px #0d0718, 6px 8px 0 rgba(0, 0, 0, .35);
}
.smw-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; border-bottom: 3px solid rgba(248, 224, 140, .3); padding-bottom: 10px;
}
.smw-h { font-size: 17px; color: var(--smw-yellow); letter-spacing: 2px; text-shadow: var(--smw-shadow); }
.smw-scope { font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 700; color: #e6dcff; }

.smw-block { display: flex; flex-direction: column; gap: 8px; }
.smw-blab { font-size: 11px; letter-spacing: 1.5px; color: #fffdf2; text-shadow: var(--smw-shadow); }
.smw-blab em {
  font-family: 'Chakra Petch', sans-serif; font-style: normal;
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: #a996df; margin-left: 8px;
}

.smw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.smw-chips.days { max-height: 152px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; align-content: flex-start; }
.smw-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: .5px;
  color: #efe7ff; padding: 9px 11px;
  background: #3a2470; border: 3px solid #0d0718; border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .4);
}
.smw-chip:hover { background: #4b2f8f; }
.smw-chip.on {
  background: linear-gradient(180deg, #ffd83d, #e8a81f); color: #2a1352;
  border-color: #7b4d05; text-shadow: none;
}
.smw-chip i {
  font-style: normal; font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 700; color: #b9a9e8;
}
.smw-chip.on i { color: #5a3c06; }
.smw-chip.empty { opacity: .5; }
.smw-chip.empty:hover { opacity: .8; }

.smw-select {
  font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 700;
  color: #efe7ff; background: #3a2470; padding: 9px 11px;
  border: 3px solid #0d0718; border-radius: 3px; max-width: 340px;
}

.smw-games {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 6px;
  max-height: 230px; overflow-y: auto; padding: 2px 4px 2px 2px;
}
.smw-game {
  display: grid; grid-template-columns: 54px 56px minmax(0, 1fr) 12px; align-items: center; gap: 7px;
  cursor: pointer; text-align: left;
  font-family: 'Chakra Petch', sans-serif; font-size: 13.5px; font-weight: 700;
  color: #efe7ff; padding: 8px 10px;
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(248, 224, 140, .22); border-radius: 3px;
}
.smw-game:hover { background: rgba(255, 216, 61, .18); border-color: var(--smw-edge); }
.smw-g-day { color: var(--smw-yellow); }
.smw-g-lg  { color: #b9a9e8; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smw-g-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smw-g-done { color: var(--smw-green); font-size: 14px; text-align: right; }
.smw-game.done { opacity: .55; }
.smw-game.done:hover { opacity: .9; }
.smw-none { font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 600; color: #b9a9e8; }

.smw-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.smw-btn {
  font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px;
  cursor: pointer; color: #fffdf2; padding: 12px 18px;
  background: #3a2470; border: 3px solid #0d0718; border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
}
.smw-btn:hover { background: #4b2f8f; }
.smw-btn.go { background: linear-gradient(180deg, #56c95a, var(--smw-green)); color: #08260a; }
.smw-btn.go:hover { filter: brightness(1.1); }
.smw-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.smw-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, .45); }

/* ─── In-game HUD bar ─────────────────────────────────────────── */
.smw-hud { display: none; }
.smw-hud.on {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 8px 12px;
  background: linear-gradient(180deg, var(--smw-box), var(--smw-box-2));
  border: 3px solid var(--smw-edge); border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
}
.smw-hud-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1px;
  color: #2a1352; padding: 10px 14px;
  background: linear-gradient(180deg, #ffd83d, #e8a81f);
  border: 3px solid #7b4d05; border-radius: 3px;
}
.smw-hud-btn:hover { filter: brightness(1.08); }
.smw-hud-btn:active { transform: translateY(2px); }
.smw-hud-ico { font-size: 13px; }
.smw-hud-btn kbd {
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  background: #2a1352; color: #ffd83d; border-radius: 2px; padding: 3px 4px;
}
.smw-hud-scope {
  font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 700;
  color: #e6dcff; letter-spacing: .3px;
}

/* ─── Pause overlay ───────────────────────────────────────────── */
.smw-pause { display: none; }
.smw-pause.on {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 900;
  background: rgba(6, 10, 22, .78);
  backdrop-filter: blur(3px);
}
.smw-pause-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 26px 26px 22px;
  background: linear-gradient(180deg, #4a7cf0, #7fb2ff);
  border: 4px solid #0d0718; border-radius: 4px;
  box-shadow: 0 0 0 4px var(--smw-edge-dark), 0 22px 60px rgba(0, 0, 0, .6);
  animation: smwPop .16s ease-out;
}
@keyframes smwPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.smw-pause-title {
  font-family: 'Press Start 2P', monospace; font-size: 20px; letter-spacing: 4px;
  color: var(--smw-yellow); -webkit-text-stroke: 3px #2a1352; paint-order: stroke fill;
  text-shadow: 0 5px 0 #2a1352;
}
.smw-list.pause { min-width: min(400px, 84vw); }
.smw-pause-card .smw-hint { margin-top: 0; }

/* ─── Accessibility + responsive ──────────────────────────────── */
.smw-chip:focus-visible, .smw-btn:focus-visible, .smw-game:focus-visible, .smw-hud-btn:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .smw-cloud, .smw-title-main, .smw-item.on .smw-cur, .smw-pause-card { animation: none; }
}
@media (max-width: 760px) {
  .smw-screen { padding: 22px 12px 26px; min-height: 360px; }
  .smw-title-main { font-size: 22px; -webkit-text-stroke-width: 2px; }
  .smw-lab { font-size: 12px; }
  .smw-item { grid-template-columns: 24px 1fr; }
  .smw-cur, .smw-cur-slot { width: 20px; height: 20px; }
  .smw-games { grid-template-columns: 1fr; }
  .smw-hud.on { gap: 8px; }
}

/* ═══════════════ LANGUAGE SWITCHER (i18n.js) ═══════════════ */
.lang-switch {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
}
.lang-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s ease, border-color .15s ease;
}
.lang-btn:hover { opacity: .85; }
.lang-btn.active { opacity: 1; border-color: rgba(255, 255, 255, .35); }
.lang-btn svg { display: block; border-radius: 2px; }

/* ─── Site footer (disclaimers + contact) ──────────────────────────
   Sits outside the tab sections, so it renders under every tab. It is a
   direct body child, which means it picks up --ui-zoom like the rest of
   the UI. Text is kept at readable sizes on purpose — legal text nobody
   can read is legal text that does not do its job. */
.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  background: rgba(9, 14, 23, 0.75);
  flex-shrink: 0;
}
.foot-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px 28px 30px;
  display: grid;
  /* disclaimer · contact · Discord CTA, clustered as one centred group: the
     columns size to their content, the row sits mid-page, and all three centre
     vertically on a shared midline. No translateX nudge — the CTA is the last
     column rather than the middle one, so the row is genuinely centred. */
  grid-template-columns: auto auto auto;
  justify-content: center;
  gap: 22px 80px;
  align-items: center;
}
.foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* Fixed-height heading row so every column's title sits on the same line,
   whether or not it carries the 18+ badge. */
.foot-head { display: flex; align-items: center; gap: 9px; min-height: 22px; }
.foot-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
}
.foot-age {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Boxed so the legal text reads as one contained block instead of a loose
   run of prose, and capped so the line length stays comfortable. */
.foot-text-box {
  max-width: 540px;
  padding: 13px 17px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.foot-text {
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-dim);
  margin: 0;
}
.site-footer a { text-decoration: none; transition: color .15s ease; }

/* Contact: plain text next to the brand mark — no accent colour, no chip.
   The logos carry the emphasis, so the addresses stay neutral. */
.foot-col-contact { align-items: flex-start; gap: 10px; }

.foot-col-main .foot-title { color: var(--text-dim); }
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}
.foot-link-icon { width: 20px; height: 16px; flex-shrink: 0; display: block; }
.foot-link-text { border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.foot-link:hover .foot-link-text { border-bottom-color: var(--border-strong); }

/* ── Discord CTA ──────────────────────────────────────────────────
   The only element in the footer meant to be clicked, so it reads as a
   card rather than a link: blurple field, brand mark at real size, and
   an arrow that slides on hover. */
.foot-discord {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.22), rgba(88, 101, 242, 0.10));
  border: 1px solid rgba(88, 101, 242, 0.45);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.foot-discord:hover {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.34), rgba(88, 101, 242, 0.18));
  border-color: rgba(88, 101, 242, 0.75);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.22);
}
.foot-discord-logo {
  width: 29px;
  height: 22px;
  flex-shrink: 0;
  color: #7d89ff;
  transition: color .18s ease;
}
.foot-discord:hover .foot-discord-logo { color: #a3acff; }
.foot-discord-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.foot-discord-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.foot-discord-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: #9aa3e8;
  white-space: nowrap;
}
.foot-discord-arrow {
  margin-left: 4px;
  font-size: 15px;
  color: #7d89ff;
  transition: transform .18s ease;
}
.foot-discord:hover .foot-discord-arrow { transform: translateX(3px); }

/* Below ~1250px the three columns stop fitting side by side: stack them and
   let the CTA size to its content instead of stretching full width. */
@media (max-width: 1250px) {
  .foot-inner { grid-template-columns: 1fr; gap: 24px; justify-items: start; justify-content: start; }
}