/* Fantasy LoL, dark Runeterra-style theme */

:root {
  --bg: #010a13;
  --panel: #091428;
  --panel-2: #0e1e38;
  --border: #1e3a5c;
  --gold: #c89b3c;
  --gold-bright: #f0c66a;
  --teal: #0ac8b9;
  --text: #f0e6d2;
  --muted: #a09b8c;
  --red: #e8434f;
  --blue: #4596e6;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 500px at 80% -10%, #0a2a3c 0%, transparent 60%),
    radial-gradient(900px 420px at 0% 0%, #12203a 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { margin: 0; letter-spacing: 0.02em; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(9, 20, 40, 0.6);
}

.brand h1 { font-size: 26px; font-weight: 800; }
.brand h1 span { color: var(--gold); }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

/* Once signed in, the tagline is onboarding copy nobody needs again, drop it
   and shrink the bar so it stops competing with the app for vertical space. */
body:not(.landed) .topbar { padding: 12px 24px; }
body:not(.landed) .brand p { display: none; }
body:not(.landed) .brand h1 { font-size: 20px; }

/* ── "Just played" ticker ────────────────────────────────────────────────── */
#results-ticker {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: rgba(9, 20, 40, 0.9);
  font-size: 12px;
  line-height: 32px;
  white-space: nowrap;
}
.rt-track { display: inline-flex; will-change: transform; }
#results-ticker:not(.rt-static) .rt-track {
  animation: rt-scroll calc(var(--rt-count, 4) * 4s) linear infinite;
}
#results-ticker:not(.rt-static):hover .rt-track { animation-play-state: paused; }
#results-ticker.rt-static { text-align: center; }
#results-ticker.rt-static .rt-track { display: inline-flex; }
@keyframes rt-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  #results-ticker { overflow-x: auto; }
  #results-ticker .rt-track { animation: none; }
}
.rt-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; }
.rt-item + .rt-item { border-left: 1px solid var(--border); }
.rt-league {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
}
.rt-logo { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }
.rt-item b { font-weight: 700; color: var(--muted); }
.rt-item b.rt-won { color: var(--gold-bright); }
.rt-score { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.rt-close {
  position: absolute; top: 0; right: 0; z-index: 2; height: 100%; width: 44px;
  border: 0; background: linear-gradient(90deg, transparent, rgba(9, 20, 40, 0.95) 45%);
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.rt-close:hover { color: var(--text); }
/* Phones: the dismiss target was 40x32, which is fine for a mouse and mean for
   a thumb. Widened to 44 above; the banner grows to give it real height too.
   .rt-close is height:100%, so a 44px line-height makes the button exactly
   44x44, the banner ends up 45px with its border, 4px more than the 41px it
   already needed for a 40px target. Cheaper than it first looks, and it can't
   be done with an ::after overlay because #results-ticker is overflow:hidden,
   which would clip the extra hit area and swallow the taps. */
@media (max-width: 760px) {
  #results-ticker { line-height: 44px; }
}

.hud { display: flex; gap: 28px; align-items: flex-start; }
.hud-item { display: flex; flex-direction: column; min-width: 72px; }
.hud-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.hud-value { font-size: 22px; font-weight: 700; }
.hud-value.gold { color: var(--gold-bright); }
.hud-sub { font-size: 12px; color: var(--muted); }

.capbar {
  height: 5px;
  margin: 5px 0 3px;
  border-radius: 3px;
  background: var(--panel-2);
  overflow: hidden;
}
#capbar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width 0.25s ease;
}

.draft-league-hud {
  display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 14px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
}
.draft-hud-item { display: flex; flex-direction: column; min-width: 140px; }

/* ── Layout ──────────────────────────────────────────────────────────── */
main {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  padding: 24px 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.roster-panel h2, .pool-head h2 { font-size: 17px; margin-bottom: 12px; }
.pool-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.auto-draft {
  margin-left: auto; padding: 6px 12px; border-radius: 8px; font-size: 12.5px;
  font-weight: 700; cursor: pointer; color: var(--gold-bright);
  border: 1px solid var(--gold); background: rgba(200, 155, 60, 0.12);
}
.auto-draft:hover { background: rgba(200, 155, 60, 0.22); }
.pool-head p { margin: 0 0 12px; color: var(--teal); font-size: 13px; }

/* ── Summoner's Rift roster map ──────────────────────────────────────── */
#rift-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: url('assets/rift-map.png') center / cover no-repeat, #0c1f14;
  box-shadow: inset 0 0 70px rgba(1, 10, 19, 0.55), 0 4px 24px rgba(0, 0, 0, 0.35);
}

.map-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 1;
}
.map-slot.selected { z-index: 2; }

.map-slot .avatar {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: rgba(1, 10, 19, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.map-slot .avatar img, .pf-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}
.map-slot .role-letters { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--gold); }

/* photoless players fall back to their team logo, everywhere */
img.logo-fallback { object-fit: contain !important; padding: 14%; box-sizing: border-box; }

.map-slot.empty .avatar { border-style: dashed; border-color: rgba(200, 155, 60, 0.75); background: rgba(1, 10, 19, 0.6); }
.map-slot:hover .avatar { border-color: var(--gold-bright); }
.map-slot.selected .avatar {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(10, 200, 185, 0.3), 0 0 20px rgba(10, 200, 185, 0.55);
}

.role-tag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  color: var(--teal);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  z-index: 2;
}

.map-remove {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
}
.map-slot:hover .map-remove { opacity: 1; }
.map-remove:hover { color: var(--red); border-color: var(--red); }
/* Hover-to-reveal has no touch equivalent: on a phone `.map-slot:hover` never
   matches, so this button sat at opacity 0 forever and there was no way to drop
   a pick from the board at all. Show it wherever hover isn't available. */
@media (hover: none) {
  .map-remove { opacity: 1; }
}
/* 20x20 also failed WCAG 2.2 AA (2.5.8 wants 24x24). Grow the hit area with a
   pseudo-element rather than padding, because this button is absolutely
   positioned off the avatar's corner and padding would move it. */
.map-remove::after { content: ''; position: absolute; inset: -12px; }

.map-label {
  margin-top: 5px;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  background: rgba(1, 10, 19, 0.78);
  border: 1px solid rgba(30, 58, 92, 0.6);
  padding: 2px 8px;
  border-radius: 8px;
  max-width: 120px;
  white-space: nowrap;
}
.map-label strong { display: block; font-size: 12px; }
.map-label small { color: var(--muted); }

/* ── View switcher ───────────────────────────────────────────────────── */
.views {
  display: flex;
  gap: 8px;
  padding: 14px 28px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.view-btn {
  padding: 8px 20px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.view-btn:hover { border-color: var(--gold); color: var(--text); }
.view-btn.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(200, 155, 60, 0.1); }

/* Thumb-reach nav: below 640px the tab row pins to the bottom of the screen
   instead of pushing content down from the top. */
@media (max-width: 640px) {
  body:not(.landed) { padding-bottom: 60px; }
  .views {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    max-width: none; margin: 0; gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--border);
  }
  .view-btn { flex: 1; padding: 8px 4px; font-size: 12.5px; border-radius: 8px; }
  #toast-stack { bottom: 76px; }
}

/* ── Weekly matchup (champ-select style) ─────────────────────────────── */
#view-matchup { max-width: 900px; margin: 0 auto; padding: 24px 28px 48px; }
.mu-head { margin-bottom: 16px; }
.mu-head h2 { font-size: 20px; margin: 0 0 6px; }
.mu-note { color: var(--muted); margin: 0; font-size: 14px; }
.mu-grid, .pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.mu-empty {
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  padding: 22px; text-align: center; max-width: 460px;
}
.mu-empty p { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.mu-card, .pf-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; cursor: pointer;
}
.mu-card:hover:not(.muted) { border-color: var(--gold); }
.mu-card.muted { opacity: 0.75; cursor: default; }
.mu-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mu-card-head h3 { font-size: 15px; flex: 1; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-meta { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.mu-vs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mu-side { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mu-vs-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.mu-line { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.mu-whatif-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.mu-whatif-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
}
.mu-whatif-delta { flex: 1; min-width: 140px; }
.mu-whatif-locked { color: var(--muted); font-size: 13px; }
.lane-side.whatif { cursor: pointer; border-radius: 6px; }
.lane-side.whatif:hover { outline: 1px solid var(--gold); }
/* No-show / bye flag on a lane */
.lane-side.bye { opacity: 0.72; }
.lane-bye { display: block; color: #ff9b54; font-size: 11px; font-weight: 700; margin-top: 2px; }
.lane-side.bye .lane-games { color: #ff9b54; font-weight: 700; }
/* "hasn't played yet", informational, not the orange bye alarm */
.lane-upcoming { display: block; color: var(--muted); font-size: 11px; font-weight: 700; margin-top: 2px; }
.bye-warning {
  margin: 4px 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  color: #ffb37a; border: 1px solid #7a4a24; background: rgba(255, 155, 84, 0.08);
}
/* Real vs simulated week badge */
.wk-badge {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; cursor: default;
}
.wk-badge.real { color: #59c135; border: 1px solid #2f6a1f; background: rgba(89, 193, 53, 0.1); }
.wk-badge.sim { color: var(--muted); border: 1px solid var(--border); background: var(--panel-2); }
.mu-swap-pool {
  margin: 12px 0 16px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--panel);
}
.mu-swap-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
/* 22x22 failed WCAG 2.2 AA (2.5.8 wants 24x24) and was a mean thumb target on
   the one control that dismisses this panel. The box stays visually small; the
   tap area is grown past it with padding so the layout doesn't move. */
.mu-swap-head button {
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 6px; width: 22px; height: 22px; line-height: 1; font-size: 12px; cursor: pointer;
  box-sizing: content-box; padding: 11px; margin: -11px;
}
.mu-swap-head button:hover { color: var(--text); border-color: var(--teal); }
.mu-swap-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.mu-swap-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.mu-swap-list li:last-child { border-bottom: 0; }
.mu-swap-list li.over { opacity: 0.55; }
.mu-swap-list li.on { color: var(--gold-bright, var(--gold)); }
/* The whole row carries data-whatif-pick (see src/matchup.js), so the row is the
   tap target, ~60px tall, set by the button's own 44px floor plus the padding.
   Only .pick rows: 'current' and over-cap rows are inert. */
.mu-swap-list li.pick { cursor: pointer; }
@media (hover: hover) {
  .mu-swap-list li.pick:hover { background: rgba(10, 200, 185, 0.07); }
  .mu-swap-list li.pick:hover button { background: var(--teal); color: #04222b; }
}
.mu-swap-list small { color: var(--muted); margin-left: 6px; }
.mu-swap-list em { color: var(--muted); font-style: normal; font-size: 12px; }
.mu-swap-list button, .moves-list button {
  border: 1px solid var(--teal); background: rgba(10, 200, 185, 0.08); color: var(--teal);
  border-radius: 7px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  /* 45x26 cleared the AA floor but not a thumb. The row is the real target now
     (.mu-swap-list li.pick above), but this floor stays: it's what makes the row
     ~60px tall, and .moves-list shares this rule with no tappable row of its own. */
  min-height: 44px; min-width: 44px;
}
.mu-swap-list button:hover { background: var(--teal); color: #04222b; }
.mu-swap-list button:disabled {
  border-color: var(--border); background: none; color: var(--muted); cursor: default; opacity: 0.7;
}
.matchup-empty { text-align: center; padding: 60px 0; }
.matchup-empty p { color: var(--muted); }

.cta {
  display: inline-block;
  padding: 11px 28px;
  border-radius: 9px;
  border: 1px solid var(--teal);
  background: linear-gradient(180deg, rgba(10, 200, 185, 0.25), rgba(10, 200, 185, 0.08));
  color: var(--teal);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.cta:hover:not(:disabled) { background: var(--teal); color: #04222b; }
.cta:disabled { opacity: 0.55; cursor: default; }

.vs-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.vs-team { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border); background: var(--panel); }
.vs-team.blue { border-left: 3px solid var(--blue); }
.vs-team.red { border-right: 3px solid var(--red); text-align: right; }
.vs-team.winner { box-shadow: 0 0 24px rgba(200, 155, 60, 0.35); border-color: var(--gold); }
.vs-name { font-size: 16px; font-weight: 800; }
.vs-team.blue .vs-name { color: var(--blue); }
.vs-team.red .vs-name { color: var(--red); }
.ai-chip {
  font-size: 9px;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
/* Hover-for-explanation hints (e.g. the "N games" figure on player cards). */
.tip { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.lane-prob, .lane-games { cursor: help; }

/* Own-lineup lock indicator (draft board heading, matchup blue side). */
.lock-chip {
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1px 6px;
}
.vs-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.vs-score { font-size: 30px; font-weight: 900; color: var(--gold-bright); margin-top: 6px; }
.vs-mid { text-align: center; }
.vs-vs { display: block; font-size: 26px; font-weight: 900; color: var(--gold); letter-spacing: 0.1em; }
.vs-week { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }

.prob-row { display: flex; align-items: center; gap: 10px; }
.prob-label { font-weight: 800; font-size: 14px; min-width: 42px; }
.prob-label.blue { color: var(--blue); text-align: right; }
.prob-label.red { color: var(--red); }
.prob-bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(232, 67, 79, 0.45); overflow: hidden; }
.prob-fill { height: 100%; background: linear-gradient(90deg, var(--blue), rgba(69, 150, 230, 0.75)); border-radius: 5px 0 0 5px; }
.prob-note { text-align: center; color: var(--muted); font-size: 11.5px; margin: 6px 0 20px; }

.lane-row {
  display: grid;
  grid-template-columns: 1fr 74px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.lane-row.blue-won { border-left: 3px solid var(--blue); }
.lane-row.red-won { border-right: 3px solid var(--red); }

.lane-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lane-side.red { flex-direction: row-reverse; text-align: right; }
.lane-avatar {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: rgba(1, 10, 19, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lane-side.blue .lane-avatar { border-color: rgba(69, 150, 230, 0.7); }
.lane-side.red .lane-avatar { border-color: rgba(232, 67, 79, 0.7); }
.lane-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lane-info { min-width: 0; }
.lane-info strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-info small { color: var(--muted); font-size: 11.5px; }
.lane-totals { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.lane-side.red .lane-totals { margin-left: 0; margin-right: auto; align-items: flex-start; }
.lane-score {
  font-size: 20px;
  font-weight: 900;
  color: var(--gold-bright);
  min-width: 52px;
  text-align: right;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.lane-side.red .lane-score { text-align: left; }
.lane-games { color: var(--muted); font-size: 10.5px; opacity: 0; transition: opacity 0.35s ease; }
.lane-row.revealed .lane-score, .lane-row.revealed .lane-games { opacity: 1; transform: none; }

.lane-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lane-role {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--teal);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  background: rgba(10, 200, 185, 0.06);
}
.lane-prob { font-size: 11px; color: var(--muted); }

.matchup-controls { display: flex; gap: 10px; justify-content: center; margin: 22px 0 10px; }
.matchup-controls #new-rival {
  padding: 11px 20px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.matchup-controls #new-rival:hover { border-color: var(--red); color: var(--red); }

#matchup-banner .banner {
  text-align: center;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin: 16px 0 6px;
  animation: lockin-track 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#matchup-banner .banner.blue { color: var(--gold-bright); text-shadow: 0 2px 26px rgba(200, 155, 60, 0.5); }
#matchup-banner .banner.red { color: var(--red); text-shadow: 0 2px 26px rgba(232, 67, 79, 0.4); }
#matchup-banner .banner.tie { color: var(--muted); }
#matchup-banner .banner small {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 4px;
  text-transform: none;
}

#moments {
  list-style: none;
  margin: 14px auto 0;
  padding: 0;
  max-width: 560px;
  max-height: 300px;
  overflow-y: auto;
}

/* "Your five · last real game", recent-form strip under the matchup */
.mu-form-strip { max-width: 560px; margin: 18px auto 0; }
.mu-form-strip:empty { display: none; }
.mu-form-title {
  margin: 0 0 8px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.mu-form-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.mu-form-tile {
  flex: 1 1 152px; min-width: 0;
  display: grid; grid-template-columns: 34px 1fr; align-items: center;
  column-gap: 8px; row-gap: 3px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border);
}
.mu-form-tile.won { border-left: 3px solid var(--blue); }
.mu-form-tile.lost { border-left: 3px solid var(--red); }
.mu-form-tile.empty { opacity: 0.6; }
.mu-form-tile .lane-avatar { flex: none; width: 34px; height: 34px; grid-row: 1 / span 3; }
.mu-form-who { min-width: 0; }
.mu-form-who strong {
  display: block; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-form-who small { color: var(--muted); font-size: 11px; }
.mu-form-line { grid-column: 2; display: flex; align-items: baseline; gap: 6px; font-size: 12px; min-width: 0; }
.mu-form-res { font-weight: 900; }
.mu-form-tile.won .mu-form-res { color: var(--blue); }
.mu-form-tile.lost .mu-form-res { color: var(--red); }
.mu-form-vs { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-form-pts { font-size: 16px; font-weight: 900; color: var(--gold-bright); }
.mu-form-kda { margin-left: auto; font-variant-numeric: tabular-nums; }
.mu-form-none { grid-column: 2; font-size: 12px; color: var(--muted); }
.moment {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 13px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  animation: lockin-fade 0.4s ease both;
}
.moment.blue { border-left: 3px solid var(--blue); }
.moment.red { border-left: 3px solid var(--red); }
.moment .tag { font-weight: 800; }
.moment em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--teal); }

@media (max-width: 700px) {
  .lane-info small { display: none; }
  .lane-row { grid-template-columns: 1fr 56px 1fr; }
  .vs-score { font-size: 22px; }
}

/* ── League view ─────────────────────────────────────────────────────── */
#view-league { max-width: 820px; margin: 0 auto; padding: 24px 28px 48px; }
.league-intro h2 { margin-bottom: 6px; }
.league-intro p { color: var(--muted); }
.league-intro strong { color: var(--gold-bright); }

.league-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.league-card h3 { font-size: 15px; }
.league-card input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(1, 10, 19, 0.6);
  color: var(--text);
  font-size: 14px;
}
.league-card input:focus { outline: none; border-color: var(--gold); }

#lg-comp-row { display: flex; align-items: center; gap: 10px; }
@media (max-width: 560px) {
  #lg-comp-row { flex-direction: column; align-items: stretch; }
  #lg-comp-row .league-status { margin: 4px 0 0; }
}
.comp-label { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.lg-public-toggle {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0; font-size: 13.5px; color: var(--text); cursor: pointer;
}
/* Undo .league-card input's text-field styling (padding/border/dark fill),
   this is a native checkbox, not a text field, and should look like one. */
#lg-public { all: revert; cursor: pointer; }
#lg-comp {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(1, 10, 19, 0.6);
  color: var(--text);
  font-size: 13.5px;
}
#lg-comp:focus { outline: none; border-color: var(--gold); }
.league-status.pre-event { color: var(--gold-bright); border-left: 3px solid var(--gold); padding-left: 10px; }

.identity-card { margin-top: 18px; }
.identity-row { display: flex; gap: 10px; }
.identity-row input { flex: 1; min-width: 0; }
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px currentColor; }

.lock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.lock-row #lg-lock {
  border: 1px solid var(--teal);
  background: rgba(10, 200, 185, 0.08);
  color: var(--teal);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.lock-row #lg-lock:hover { background: var(--teal); color: #04222b; }
.lock-badge.locked { color: var(--gold-bright); font-weight: 700; }

.team-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.standings td small.mgr { display: block; color: var(--muted); font-size: 11px; margin-left: 17px; }
.muted-inline { color: var(--muted); font-size: 12px; }

/* format toggle */
.format-toggle { display: flex; gap: 10px; }
@media (max-width: 560px) { .format-toggle { flex-direction: column; } }
.format-toggle .fmt {
  flex: 1;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.format-toggle .fmt strong { display: block; font-size: 14px; }
.format-toggle .fmt small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.35; }
.format-toggle .fmt.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.format-toggle .fmt.active strong { color: var(--gold-bright); }
.practice-opts { margin: 12px 0; }
.practice-opts input[type="number"] {
  width: 72px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel); color: inherit; font: inherit;
}
.practice-opts input[type="range"] { width: 100%; max-width: 360px; display: block; margin: 6px 0; }

/* waiting room + draft room */
.member-list, .draft-order, .draft-myroster { list-style: none; margin: 0 0 16px; padding: 0; }
.member-list li, .draft-myroster li { padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.lg-kick {
  float: right; border: 1px solid var(--border); background: var(--panel); color: inherit;
  border-radius: 6px; width: 22px; height: 22px; line-height: 1; font-size: 12px; cursor: pointer;
}
.draft-myroster .slot-role { flex: none; display: inline-block; margin-right: 8px; padding: 3px 7px; }

.draft-order { counter-reset: pick; }
.draft-order li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; margin-bottom: 5px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 13.5px;
}
.draft-order li.on-clock { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.draft-order li.on-clock::after { content: 'on the clock'; margin-left: auto; color: var(--teal); font-size: 11px; font-weight: 700; }

.draft-status {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  padding: 14px 18px; margin-bottom: 18px;
}
.draft-status.my-turn { border-color: var(--teal); box-shadow: 0 0 22px rgba(10, 200, 185, 0.25); }
.draft-round { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.draft-onclock { font-size: 17px; }

/* roster moves (waivers + trades) */
.moves-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.moves-tab {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.moves-tab.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(200, 155, 60, 0.1); }
/* A role with a free-agent upgrade available: gold hint even when not the active tab. */
.moves-tab.has-upgrade:not(.active) { border-color: var(--gold); color: var(--gold-bright); }
.moves-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .moves-grid { grid-template-columns: 1fr; } }
.moves-col h4 { margin: 0 0 4px; font-size: 14px; }
.moves-list { list-style: none; margin: 8px 0 0; padding: 0; }
.moves-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  margin-bottom: 6px; font-size: 13.5px;
}
.moves-list.pending li.incoming { border-left: 3px solid var(--teal); }
/* The single best free-agent upgrade at this role, the pick to make. */
.moves-list li.fa-best { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(200, 155, 60, 0.3); }
.moves-list button:hover { background: var(--teal); color: #04222b; }
.moves-list .trade-actions { display: flex; gap: 6px; }
.moves-list [data-trade-reject], .moves-list [data-trade-cancel] { border-color: var(--red); background: rgba(232, 67, 79, 0.08); color: var(--red); }
.moves-list [data-trade-reject]:hover, .moves-list [data-trade-cancel]:hover { background: var(--red); color: #fff; }

.league-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.code-chip {
  border: 1px dashed var(--gold);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--muted);
  font-size: 13px;
}
.code-chip strong { color: var(--gold-bright); letter-spacing: 0.15em; margin-left: 4px; }
.code-chip button { border: none; background: none; color: var(--teal); cursor: pointer; font-size: 14px; margin-left: 6px; }

.league-status { color: var(--muted); font-size: 13px; margin: 8px 0; }
.league-matchline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  background: var(--panel);
  padding: 12px 16px;
  margin: 14px 0 22px;
}
.league-subhead { font-size: 15px; margin-bottom: 10px; }

.moments-feed {
  margin: 18px 0; padding: 14px 16px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.moments-feed .league-subhead { margin-bottom: 2px; }
.mf-sim { color: var(--muted); font-size: 12px; font-weight: 400; }
.mf-weeklabel { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.mf-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 10px 0 4px; }
.mf-top { list-style: none; margin: 0; padding: 0; }
.mf-top li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border); }
.mf-top li:first-child { border-top: none; }
.mf-rank { color: var(--muted); font-size: 12px; width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.mf-main { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mf-pts { font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.mf-notable { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mf-notable li { padding: 3px 0; }
.mf-line { font-size: 13px; margin: 8px 0 0; }

.chat { margin-bottom: 18px; }
.chat-log {
  list-style: none; margin: 0 0 8px; padding: 10px 12px;
  max-height: 300px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.chat-msg { padding: 5px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.chat-msg:first-child { border-top: none; }
.chat-who { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.chat-who strong { font-weight: 700; }
.chat-who time { color: var(--muted); font-size: 11px; }
.chat-msg.mine .chat-who strong { color: var(--gold-bright); }
.chat-body { display: block; margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-empty { color: var(--muted); font-size: 13px; font-style: italic; }
.chat-form { display: flex; gap: 8px; }
.chat-form input {
  flex: 1; min-width: 0; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
.chat-form input:focus { outline: none; border-color: var(--gold); }

.standings { width: 100%; border-collapse: collapse; font-size: 13.5px; display: block; overflow-x: auto; }
.standings th, .standings td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.standings th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.standings tr.me td { background: rgba(200, 155, 60, 0.07); }
.standings tr.me td:first-child { color: var(--gold-bright); font-weight: 700; }
.roster-cell { color: var(--muted); font-size: 12px; }
/* Roster (always the last column) is the widest and least essential for a quick
   rank check, drop it below 640px instead of squeezing every column. */
@media (max-width: 640px) {
  .standings th:last-child, .standings td:last-child { display: none; }
}
.playoff-badge { font-size: 11px; }
/* Marks where the field splits into playoff teams vs everyone else. */
.standings tr.standings-cutoff td {
  padding: 4px 10px; text-align: center; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px dashed var(--border);
}

.league-foot { margin-top: 18px; }
.league-foot button {
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 12.5px;
}
.league-foot button:hover { border-color: var(--red); color: var(--red); }

/* ── Champion-select lock-in flash ───────────────────────────────────── */
#lockin {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(1, 10, 19, 0.4) 0%, rgba(1, 10, 19, 0.92) 75%);
  opacity: 0;
  pointer-events: none; /* pure celebration, never blocks drafting */
}
#lockin.show { animation: lockin-overlay 2.2s ease forwards; }
@keyframes lockin-overlay {
  0% { opacity: 0; }
  5% { opacity: 1; }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

.lockin-card { text-align: center; }

.lockin-ring {
  position: relative;
  width: 216px;
  height: 216px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: rgba(1, 10, 19, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lockin-glow 2.2s 0.75s ease both;
}
.lockin-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--gold-bright);
  animation: lockin-shockwave 0.9s 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes lockin-glow {
  0% { box-shadow: 0 0 0 rgba(200, 155, 60, 0); }
  25% { box-shadow: 0 0 70px rgba(200, 155, 60, 0.85); }
  100% { box-shadow: 0 0 24px rgba(200, 155, 60, 0.35); }
}
@keyframes lockin-shockwave {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.45); opacity: 0; }
}

/* Phase 1: team logo scales in, holds, then fades as the player arrives. */
.lockin-ring .lockin-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 44px;
  object-fit: contain;
  z-index: 1;
  animation: lockin-logo 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes lockin-logo {
  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  22% { transform: scale(1) rotate(0); opacity: 1; }
  62% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Team code caption under the ring during the logo phase. */
.lockin-team {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--gold);
  animation: lockin-team 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes lockin-team {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; transform: none; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Phase 2: player portrait slams in over the fading logo. */
.lockin-ring .lockin-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  z-index: 2;
  animation: lockin-photo 0.6s 0.75s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes lockin-photo {
  0% { transform: scale(1.5); filter: brightness(2.2) saturate(0.2); opacity: 0; }
  100% { transform: scale(1); filter: none; opacity: 1; }
}

.lockin-caption {
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.55em;
  animation: lockin-fade 0.45s 1.05s ease both;
}
.lockin-name {
  margin-top: 4px;
  font-size: 44px;
  font-weight: 900;
  color: var(--gold-bright);
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(200, 155, 60, 0.45);
  animation: lockin-track 0.7s 0.82s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes lockin-track {
  from { letter-spacing: 0.55em; opacity: 0; }
  to { letter-spacing: 0.05em; opacity: 1; }
}
.lockin-lines {
  width: 320px;
  max-width: 70vw;
  height: 1px;
  margin: 12px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: lockin-line 0.6s 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes lockin-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.lockin-role { color: var(--muted); font-size: 14px; animation: lockin-fade 0.45s 1.2s ease both; }
@keyframes lockin-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* portrait landing on its map slot */
.map-slot.locked-pop .avatar { animation: slot-pop 0.65s 1.45s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
@keyframes slot-pop {
  0% { transform: scale(0.25); box-shadow: 0 0 0 rgba(200, 155, 60, 0); }
  60% { transform: scale(1.18); box-shadow: 0 0 30px rgba(200, 155, 60, 0.9); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(200, 155, 60, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  #lockin, #lockin.show { display: none; animation: none; }
  .map-slot.locked-pop .avatar { animation: none; }
  #matchresult, #matchresult.show { display: none; animation: none; }
  /* Belt and braces, landing.js already refuses to arm the intro here. */
  #landing.intro .gates { display: none; }
  #landing.intro-run, #landing.intro-run * { animation: none !important; }
}

/* ── Match-result flash, the VICTORY/DEFEAT pop-up an official week's play
   reveals, once the last lane's score has counted up. Same overlay shape as
   #lockin (fixed, dimmed, pointer-events: none, a celebration, never a
   blocker) but built around a burst + big text instead of a portrait ring. */
#matchresult {
  position: fixed;
  inset: 0;
  z-index: 51;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(1, 10, 19, 0.55) 0%, rgba(1, 10, 19, 0.94) 78%);
  opacity: 0;
  pointer-events: none;
}
#matchresult.show { animation: matchresult-overlay 2.8s ease forwards; }
@keyframes matchresult-overlay {
  0% { opacity: 0; }
  6% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; }
}
.matchresult-card { text-align: center; position: relative; }
.matchresult-burst {
  position: absolute;
  inset: -140px;
  border-radius: 50%;
  z-index: -1;
  animation: matchresult-burst 1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.matchresult-card.blue .matchresult-burst { background: radial-gradient(circle, rgba(200, 155, 60, 0.5), transparent 70%); }
.matchresult-card.red .matchresult-burst { background: radial-gradient(circle, rgba(232, 67, 79, 0.4), transparent 70%); }
.matchresult-card.tie .matchresult-burst { background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%); }
@keyframes matchresult-burst {
  0% { transform: scale(0.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}
.matchresult-title {
  font-size: 92px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: matchresult-title 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.matchresult-card.blue .matchresult-title { color: var(--gold-bright); text-shadow: 0 4px 46px rgba(200, 155, 60, 0.65); }
.matchresult-card.red .matchresult-title { color: var(--red); text-shadow: 0 4px 40px rgba(232, 67, 79, 0.55); }
.matchresult-card.tie .matchresult-title { color: var(--muted); text-shadow: none; }
@keyframes matchresult-title {
  0% { transform: scale(0.6); opacity: 0; letter-spacing: 0.4em; }
  70% { transform: scale(1.06); opacity: 1; letter-spacing: 0.05em; }
  100% { transform: scale(1); opacity: 1; }
}
.matchresult-sub {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  animation: lockin-fade 0.5s 0.4s ease both;
}
@media (max-width: 640px) {
  .matchresult-title { font-size: 56px; }
  .matchresult-burst { inset: -90px; }
}

/* ── Roster slots ────────────────────────────────────────────────────── */
.slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.slot:hover { border-color: var(--gold); }
.slot.selected { border-color: var(--gold); background: var(--panel-2); box-shadow: 0 0 0 1px var(--gold) inset; }

.slot-role {
  flex: 0 0 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--teal);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 0;
  background: rgba(10, 200, 185, 0.06);
}

/* ── Pool controls ───────────────────────────────────────────────────── */
.pool-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pool-search, .pool-sort {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}
.pool-search { flex: 1; min-width: 0; }
.pool-search::placeholder { color: var(--muted); }
/* A <select> is intrinsically as wide as its longest option ("Sort: Salary
   (high→low)"), and a flex item's default min-width:auto means it will refuse
   to shrink below that, which is what pushed the draft board into horizontal
   scroll on a phone. Let it shrink and truncate instead. */
.pool-sort { cursor: pointer; min-width: 0; }
@media (max-width: 560px) {
  /* Side by side there isn't room for both, so give each its own row rather
     than leaving the search box a sliver. */
  .pool-search, .pool-sort { flex: 1 1 100%; }
}
.pool-search:focus, .pool-sort:focus { outline: none; border-color: var(--gold); }
.pool-empty { color: var(--muted); font-size: 13px; padding: 10px 2px; }
.pool-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.chip, #view-toggle {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.chip:hover { border-color: var(--gold); color: var(--text); }
.chip.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(200, 155, 60, 0.1); }
#view-toggle { margin-left: auto; border-color: var(--teal); color: var(--teal); }
#view-toggle:hover { background: rgba(10, 200, 185, 0.1); }

/* Stat glossary (draft board), a discoverable, tap-friendly legend so a newcomer
   isn't left guessing what KDA / GD@15 / DMG% mean. */
.stat-guide-toggle {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--panel);
  color: var(--gold-bright); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.stat-guide-toggle:hover { background: rgba(200, 155, 60, 0.1); }
.stat-guide-toggle[aria-expanded="true"] { background: rgba(200, 155, 60, 0.14); }
.stat-guide {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); padding: 12px 16px 14px; margin-bottom: 14px;
}
.stat-guide-title { font-size: 13px; margin: 0 0 10px; color: var(--text); }
.stat-guide dl {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 22px; margin: 0;
}
.stat-guide dl > div { display: flex; gap: 8px; align-items: baseline; }
.stat-guide dt {
  color: var(--gold-bright); font-weight: 700; font-size: 12px;
  white-space: nowrap; min-width: 62px;
}
.stat-guide dd { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 640px) { .stat-guide dl { grid-template-columns: 1fr; } }

/* ── Player pool ─────────────────────────────────────────────────────── */
.card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.card.drafted { border-color: var(--teal); }
.card.locked { opacity: 0.55; }

.card h3 { font-size: 16px; }
.team { color: var(--muted); font-size: 12px; font-weight: 600; margin-left: 4px; }

.statline { margin: 6px 0 0; font-size: 13px; color: var(--text); }
.statline.sub { color: var(--muted); font-size: 12px; }

.card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 110px;
}
.proj { font-size: 18px; font-weight: 700; color: var(--gold-bright); }
.proj em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; }
.salary { font-size: 13px; color: var(--teal); font-weight: 600; }

button.draft {
  margin-top: 2px;
  padding: 6px 18px;
  border-radius: 7px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(200, 155, 60, 0.25), rgba(200, 155, 60, 0.1));
  color: var(--gold-bright);
  font-weight: 700;
  cursor: pointer;
}
button.draft:hover:not(:disabled) { background: var(--gold); color: #131313; }
button.draft:disabled { border-color: var(--border); color: var(--muted); background: none; cursor: default; }

/* ── Simulation ──────────────────────────────────────────────────────── */
.simulate {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 28px 40px;
  text-align: center;
}

#simulate-btn {
  padding: 12px 34px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 9px;
  border: 1px solid var(--teal);
  background: linear-gradient(180deg, rgba(10, 200, 185, 0.25), rgba(10, 200, 185, 0.08));
  color: var(--teal);
  cursor: pointer;
}
#simulate-btn.cta {
  border-color: var(--gold);
  background: var(--gold);
  color: #1a1408;
}
#simulate-btn:hover:not(:disabled) { background: var(--teal); color: #04222b; }
#simulate-btn.cta:hover:not(:disabled) { background: var(--gold-bright); color: #1a1408; }
#simulate-btn:disabled { border-color: var(--border); color: var(--muted); background: none; cursor: default; }

#simulate-hint { color: var(--muted); font-size: 13px; }

.results-banner {
  margin: 18px auto 16px;
  padding: 12px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: rgba(200, 155, 60, 0.08);
  font-size: 17px;
}
.results-banner strong { color: var(--gold-bright); }

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  text-align: left;
}

.result-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 14px 16px;
}
.result-card.win { border-left: 3px solid var(--teal); }
.result-card.loss { border-left: 3px solid var(--red); }

.result-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.result-card .outcome { font-size: 12px; color: var(--muted); }
.result-card .pts { margin-left: auto; font-size: 19px; font-weight: 800; color: var(--gold-bright); }

.breakdown {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}
.breakdown li { display: flex; justify-content: space-between; padding: 1.5px 0; }
.breakdown .pos { color: var(--teal); }
.breakdown .neg { color: var(--red); }

footer {
  padding: 18px 28px 30px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  border-top: 1px solid var(--border);
}
footer code { color: var(--teal); }
footer a { color: var(--teal); }
.footer-thanks {
  display: block;
  max-width: 620px;
  margin: 0 auto 14px;
  font-size: 13.5px;
  line-height: 1.65;
  text-align: center;
  color: var(--text, #f0e6d2);
}
.landing-thanks { margin-top: 32px; }

@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
}
/* A grid item's default min-width is auto, so ONE child that won't shrink
   widens its whole column past the container and puts the page into
   horizontal scroll, the column stops tracking the viewport and every row
   on the board runs off the right edge. Capping the panels at min-width 0
   keeps a future wide child (a long <select>, a wide table) contained
   instead of taking the layout with it. */
.roster-panel, .pool-panel { min-width: 0; }

/* ── Touch target sizes (WCAG 2.2 · 2.5.8) ───────────────────────────────────
   Audited at 375px across every view. Standalone controls are brought to a
   comfortable 44x44 where hover isn't available; several were failing the 24x24
   AA floor outright (the account chip at 71x17, Sign out at 71x20).

   Where a control's visual box must stay small, the hit area is grown with a
   ::after overlay instead of padding, so nothing shifts.

   NOT touched, deliberately: links inline in a sentence, the patch-notes links
   in Research, "How it works & rules" and "Replay tour" in the footer. WCAG
   2.5.8 explicitly exempts targets "in a sentence or otherwise constrained by
   the line-height of non-target text", and padding them would break the prose
   they sit in. */
@media (hover: none) {
  /* Header account chip + sign out, both were under the AA floor (71x17 and
     71x20). Real height here, NOT an ::after overlay: they sit 4px apart in a
     column, so two 44px overlays would intersect, and since Sign out comes
     later in the DOM its overlay would win, tapping your own username could
     have signed you out. The topbar is position: static, so the extra height
     scrolls away rather than costing permanent screen. */
  .account-name {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end;
  }
  .hud-item.account #sign-out { min-height: 44px; }

  /* Standalone buttons: give them real height without changing their look. */
  .pf-open,
  .stat-guide-toggle,
  .chip, #view-toggle,
  button.draft,
  .rs-result,
  .mu-empty .cta,
  #rs-region, #rs-search,
  #pool-search, #pool-sort,
  /* The logged-out front door. Every new visitor's first interaction is here,
     and it lives under body.landed, which the selectors above never reach. */
  #ld-user, #ld-pass, #ld-submit, .lt,
  /* The draft banner only exists while a draft is running, so this button was
     invisible to every audit until a snake draft was actually started. */
  #draft-banner button,
  /* Only rendered once a league exists and a week can be played, so neither
     showed up until a league reached mid-season. .lg-back-hub was 90x15,
     another AA failure. */
  .lg-back-hub,
  /* three ids for the same action across matchup.js and league.js */
  #play-week, #lg-play-week, #force-play-week { min-height: 44px; }

  /* The bottom nav's own buttons, and the room the bar needs for them. */
  .view-btn { min-height: 44px; }
  body:not(.landed) { padding-bottom: 72px; }
  #toast-stack { bottom: 88px; }
}

/* ── Static rules/SEO page (rules.html) ──────────────────────────────── */
/* Overrides the bare `main` grid above (360px sidebar + 1fr), this page is
   single-column prose, not the app shell. */
.rules-page { display: block; max-width: 720px; margin: 0 auto; padding: 40px 28px 60px; }
.rules-page h1 { font-size: 30px; }
.rules-page .tag { color: var(--muted); margin: 12px 0 28px; line-height: 1.65; }
.rules-page h2 { margin-top: 32px; margin-bottom: 8px; font-size: 19px; color: var(--gold-bright); }
.rules-page p, .rules-page li { line-height: 1.65; }
.rules-page ul { padding-left: 20px; margin: 8px 0; }
.rules-page li { margin: 4px 0; }
.rules-page a { color: var(--teal); }
.rules-page .cta-row { text-align: center; margin-top: 40px; }

/* rules.html is a public marketing page, not a signed-in app view, it never
   toggles `body.landed` the way index.html does, so without this it would
   silently inherit the compact "already signed in" header treatment below
   (tagline hidden, smaller wordmark) instead of the full marketing header. */
body.rules-static .topbar { padding: 22px 28px; }
body.rules-static .brand p { display: block; }
body.rules-static .brand h1 { font-size: 26px; }

/* ── Scoring legend (proj / sim / real) ──────────────────────────────── */
.scoring-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  max-width: 760px;
  margin: -2px auto 14px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.scoring-legend span { white-space: normal; }
.scoring-legend b { color: var(--gold-bright); font-weight: 700; }
.scoring-legend em { color: var(--text); font-style: normal; font-weight: 600; }

.standings-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.standings-note em { color: var(--text); font-style: normal; font-weight: 600; }

/* ── Live-update toasts ──────────────────────────────────────────────── */
#toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 40px));
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-msg { flex: 1; font-size: 13.5px; color: var(--text); }

.toast-action {
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(200, 155, 60, 0.25), rgba(200, 155, 60, 0.1));
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
.toast-action:hover { background: var(--gold); color: #131313; }

.toast-close {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.toast-close:hover { color: var(--text); }

/* ── Season structure: progress line, playoff bracket, champion ─────────── */
.season-line {
  margin: 4px 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.season-line.playoffs { color: var(--gold-bright); }
.season-line.complete { color: var(--teal); }

.champion-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(200, 155, 60, 0.16), rgba(200, 155, 60, 0.04));
}
.champion-banner.mine { box-shadow: 0 0 24px rgba(240, 198, 106, 0.25); }
.champ-trophy { font-size: 34px; line-height: 1; }
.champ-text { font-size: 15px; color: var(--text); }
.champ-text strong { font-size: 17px; margin-right: 6px; }
.champ-text small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.bracket {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 4px 0 14px;
  margin-bottom: 10px;
}
.bracket-round { min-width: 200px; display: flex; flex-direction: column; gap: 14px; }
.bracket-round h4 {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bracket-match {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.bm-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--text);
}
.bm-team + .bm-team { border-top: 1px solid var(--border); }
.bm-team.won { background: rgba(200, 155, 60, 0.12); font-weight: 700; }
.bm-team.out { color: var(--muted); }
.bm-seed {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  min-width: 14px;
  text-align: center;
}
.bm-score { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.bm-tbd { color: var(--muted); font-style: italic; }

/* Matchup season-end takeover (champion / eliminated). */
.matchup-empty.season-end .season-end-trophy { font-size: 56px; margin-bottom: 8px; }
.matchup-empty.season-end.win h2 { color: var(--gold-bright); }

/* ── Profile (username click; not a nav tab) ─────────────────────────────── */
#view-profile { max-width: 820px; margin: 0 auto; padding: 24px 28px 48px; }
.profile-head h2 { margin: 0 0 4px; font-size: 28px; }
.profile-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.intro-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.profile-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px 18px; margin: 0;
}
.profile-stats div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.profile-stats dt {
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.profile-stats dd { margin: 0; font-size: 22px; font-weight: 700; }
.profile-stats dd.gold { color: var(--gold-bright); }
.account-name {
  display: block; margin: 0; padding: 0; background: none; border: none;
  color: var(--teal); font-size: 15px; font-weight: 700; cursor: pointer; text-align: inherit;
}
.account-name:hover { color: var(--gold-bright); text-decoration: underline; }

/* Draft context banner (not a nav tab) */
.draft-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 1100px; margin: 12px auto 0; padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--gold);
  border-radius: 8px; font-size: 13px; color: var(--text);
}
.draft-banner[hidden] { display: none !important; }
.draft-banner button {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 12.5px;
}
.draft-banner button:hover { border-color: var(--gold); color: var(--gold-bright); }
.draft-banner .cta { background: var(--gold); color: #1a1408; border-color: var(--gold); font-weight: 700; }
.lg-back-hub {
  background: transparent; color: var(--muted); border: none;
  cursor: pointer; font-size: 13px; padding: 0; margin-bottom: 10px;
}
.lg-back-hub:hover { color: var(--gold-bright); }
.footer-link {
  background: none; border: none; color: var(--teal); cursor: pointer;
  font-size: inherit; text-decoration: underline; padding: 0; margin-left: 6px;
}

/* First-run tutorial */
#tour-root { position: fixed; inset: 0; z-index: 9000; }
#tour-root[hidden] { display: none !important; }
.tour-backdrop { position: absolute; inset: 0; background: rgba(4, 10, 22, 0.72); }
.tour-spot {
  position: fixed; border: 2px solid var(--gold-bright); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(4, 10, 22, 0.55); pointer-events: none;
  transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
}
.tour-tip {
  position: fixed; z-index: 1; width: min(320px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--gold); border-radius: 10px;
  padding: 14px 16px; color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.tour-title { margin: 0 0 6px; font-size: 16px; color: var(--gold-bright); }
.tour-body { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.tour-actions { display: flex; align-items: center; gap: 10px; }
.tour-skip {
  background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12.5px;
}
.tour-skip:hover { color: var(--text); }
.tour-dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.tour-dot.on { background: var(--gold-bright); }
.tour-next { margin-left: auto; }

/* Profile-style cards now live under #view-league */
#view-league .pf-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#view-league .pf-head h2 { font-size: 20px; }
#view-league .pf-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.hub-tab {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px;
}
.hub-tab:hover, .hub-tab.active {
  border-color: var(--gold); color: var(--text, #eee);
}
.hub-tab.active { color: var(--gold-bright); }

.pf-card:hover { border-color: var(--gold); }
.pf-card.gone { opacity: 0.55; cursor: default; }
.pf-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pf-card-head h3 { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-format { font-weight: 600; color: var(--gold-bright, var(--gold)); }
.pf-champ { font-size: 16px; }
.pf-open { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.pf-open:hover { border-color: var(--gold); color: var(--gold-bright); }
.pf-line { color: var(--muted); font-size: 13px; line-height: 1.5; }
.pf-line strong { color: var(--text); }

/* Scoreboard row: your five, at a glance, next to the number that matters. */
.pf-score-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.pf-roster-strip { display: flex; }
.pf-avatar {
  position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 2px solid var(--panel); background: rgba(1, 10, 19, 0.82);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  margin-left: -8px;
}
.pf-avatar:first-child { margin-left: 0; }
.pf-avatar.empty { border-style: dashed; border-color: rgba(200, 155, 60, 0.6); }
.pf-avatar .role-letters { font-size: 8px; }
.pf-score { text-align: right; font-variant-numeric: tabular-nums; }
.pf-score strong { font-size: 20px; color: var(--gold-bright); }
.pf-score span { display: block; color: var(--muted); font-size: 11.5px; }
.pf-watch-note { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.pf-watch { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pf-watch li { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; }
.pf-watch li.down { border-left-color: var(--red); }
.pf-watch li.up { border-left-color: var(--teal); }
.pf-watch-who small { color: var(--muted); margin-left: 6px; }
.pf-watch-delta { font-variant-numeric: tabular-nums; color: var(--gold-bright); }
.pf-watch li.down .pf-watch-delta { color: var(--red); }
.pf-watch li.up .pf-watch-delta { color: var(--teal); }
.pf-watch-hint { flex-basis: 100%; color: var(--muted); }

/* ── Landing (logged-out front door) ────────────────────────────────────── */
body.landed > :not(#landing) { display: none; }
#landing {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  /* `safe` centering: when the hero is taller than the screen, fall back to
     top-aligned instead of clipping the title off the unscrollable top edge. */
  display: flex; flex-direction: column; justify-content: safe center;
  padding: 40px 24px 16px;
  background:
    linear-gradient(160deg, rgba(1, 10, 19, 0.92) 30%, rgba(9, 20, 40, 0.82)),
    url('assets/rift-map.png') center / cover no-repeat,
    var(--bg);
}
/* Blue side / red side wash over the Rift, the two-team frame of every match. */
#landing::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 0% 40%, rgba(69, 150, 230, 0.16), transparent 70%),
    radial-gradient(60% 70% at 100% 60%, rgba(232, 67, 79, 0.13), transparent 70%);
}
.landing-inner, .landing-foot { position: relative; }
.landing-inner {
  display: flex; gap: 48px; align-items: center; justify-content: center;
  flex-wrap: wrap; max-width: 1040px; margin: 0 auto; width: 100%;
}
.landing-hero { flex: 1 1 460px; max-width: 560px; }
.landing-kicker {
  color: var(--teal); font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase; margin-bottom: 10px;
}
.landing-hero h1 { font-size: 44px; letter-spacing: 0.04em; }
.landing-hero h1 span { color: var(--gold-bright); }
.landing-tag { color: var(--muted); margin: 12px 0 22px; line-height: 1.65; font-size: 15px; }
/* Rotating pitch lines (landing.js rotateTaglines). Every line sits in the SAME
   grid cell, so the paragraph is always as tall as the tallest one AT THIS WIDTH
  , no min-height guess to fall out of date when copy or viewport changes, and
   no layout shift when the line swaps. Only the lit one is visible (and read:
   `visibility` keeps the rest out of the a11y tree while still holding space). */
.landing-tag { display: grid; }
.landing-tag .lt-line {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
/* Delay applies only on the way IN, so the outgoing line clears before the
   incoming one arrives, a straight crossfade would overlap two texts. */
.landing-tag .lt-line.is-on { opacity: 1; visibility: visible; transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .landing-tag .lt-line { transition: none; }
  .landing-tag .lt-line.is-on { transition-delay: 0s; }
}

/* Hero draft-board preview: a frozen, non-interactive #rift-map (see
   heroMapHTML in landing.js), the actual champ-select-style board, not a
   redrawn imitation of it. Slightly shorter than the real in-app map
   (aspect-ratio 16/11 vs 1/1) since it only has to read as a teaser here. */
#landing-rift-preview {
  position: relative; width: 100%; aspect-ratio: 16 / 11; margin: 0 0 22px;
  border-radius: 14px; border: 1px solid var(--border);
  background: url('assets/rift-map.png') center / cover no-repeat, #0c1f14;
  box-shadow: inset 0 0 70px rgba(1, 10, 19, 0.55), 0 4px 24px rgba(0, 0, 0, 0.35);
}
#landing-rift-preview .map-slot { cursor: default; }
#landing-rift-preview .avatar { width: 50px; height: 50px; }

/* Lane-up: the current best pro at each lane, real faces on the front door. */
.lane-up { margin: 0 0 22px; }
.lu-head {
  margin: 0 0 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
/* Always one row of five, the lanes are a fixed set, never a wrapping list. */
.lu-row {
  list-style: none; margin: 0; padding: 0; gap: 10px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lu-card {
  text-align: center;
  padding: 10px 6px 8px; background: rgba(9, 20, 40, 0.72);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color 0.15s, transform 0.15s;
}
.lu-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.lu-face {
  position: relative; display: block; width: 54px; height: 54px; margin: 0 auto 8px;
  border-radius: 50%; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--gold);
}
.lu-initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gold-bright); font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
}
/* Portraits are transparent PNGs, so the monogram behind them shows through the
   empty space around the head. Matching on the img rather than hiding it up
   front keeps onerror="this.remove()" working: drop the image, get the monogram. */
.lu-face:has(img) .lu-initials { display: none; }
.lu-face img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lu-face img.logo-fallback { object-fit: contain; padding: 7px; }
.lu-role {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; background: rgba(1, 10, 19, 0.82); color: var(--gold-bright);
}
.lu-card b { display: block; font-size: 12.5px; color: var(--text); }
.lu-card small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }

/* Live proof line, fills in from /api/meta, hidden until it does. */
.landing-proof {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12px; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.landing-feats { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.landing-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.landing-feats b { display: block; color: var(--text); margin-bottom: 2px; }
.lf-ico {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--gold-bright); font-size: 15px;
}
.landing-card {
  position: relative;
  flex: 0 1 340px; background: var(--panel); border: 1px solid var(--gold);
  border-radius: 12px; padding: 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
/* Champ-select corner brackets, the gold frame every LoL lobby wears. */
.landing-card::before, .landing-card::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--gold-bright); pointer-events: none;
}
.landing-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 12px 0 0 0; }
.landing-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 12px 0; }
.lc-head {
  margin: 0 0 14px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-bright); text-align: center;
}
.landing-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.landing-tabs .lt {
  flex: 1; padding: 9px 0; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.landing-tabs .lt.active { color: var(--gold-bright); border-color: var(--gold); }
#landing-form { display: flex; flex-direction: column; gap: 10px; }
#landing-form input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 12px; font-size: 14px;
}
#landing-form input:focus { outline: none; border-color: var(--gold); }
.landing-hint { color: var(--muted); font-size: 12px; line-height: 1.5; min-height: 30px; }
/* Session-expiry notice: readable, not alarming, nothing went wrong, the clock ran out. */
.landing-hint.expired { color: var(--gold-bright); font-weight: 600; }
.landing-err { color: var(--red); font-size: 12.5px; min-height: 16px; }
.landing-foot { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 34px; }
.landing-foot a { color: var(--teal); }

/* ── Landing intro: the champ-select gates ────────────────────────────────
   League's own opening beat, five lanes light up on a rune, then the fountain
   gates part on the Rift and the board is already sitting there.

   Scoped entirely to `#landing.intro` / `.intro-run`, and the markup ships
   inert (`.gates { display: none }`): if the JS in landing.js never runs, or
   throws, the front door just renders normally with no gate to be stuck behind.

   Everything animated below is `transform` or `opacity` only, so the run stays
   on the compositor and never triggers layout, that's the whole "no hiccups"
   budget. landing.js decides *when* to start (once per tab, after fonts and
   portraits have settled) and strips the classes at the end, which also
   releases the `both` fill so .lu-card / .landing-card hovers work again. */
#landing {
  --gate-lane-lead: 220ms;                           /* first lane lights */
  --gate-lane-step: 185ms;                           /* each next lane follows */
  --gate-lane-in: 420ms;                             /* one lane's flare and settle */
  /* All five lit. The cup and the gear are both gated on this rather than on a
     hand-picked delay, so retiming the lanes above can't leave either of them
     firing early, the whole point is that the completed circuit causes them. */
  --gate-lit: calc(var(--gate-lane-lead) + 4 * var(--gate-lane-step) + var(--gate-lane-in));
  --gate-rune: 300px;                                /* emblem size; the seam's gap derives from it */
  --gate-charge: 1660ms;                             /* lanes light, cup lands, hold */
  --gate-open: 960ms;                                /* gates part */
  --gate-settle: 560ms;                              /* hero eases up behind them */
  --gate-ease: cubic-bezier(0.85, 0, 0.15, 1);       /* anticipate, cover, soft settle */
  --gate-ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* snappy without being abrupt */
}
.gates { display: none; }
#landing.intro .gates {
  display: block; position: fixed; inset: 0; z-index: 70;
  overflow: hidden;      /* the parting halves must not grow #landing's scroll */
  pointer-events: none;  /* an impatient visitor can type straight through it */
}

/* Blue side / red side, the two-team frame, same wash as #landing::before. */
.gate { position: absolute; top: -1px; bottom: -1px; width: 50.4%; will-change: transform; }
.gate-l { left: 0; background: linear-gradient(105deg, #08182e, #010a13 72%); }
.gate-r { right: 0; background: linear-gradient(255deg, #1b0c11, #010a13 72%); }

/* Hairline where the doors meet, lit during the charge and gone as they split.
   The radial mask punches a hole exactly where the emblem sits so the line
   never crosses it. Sized off --gate-rune in absolute units, which is why it
   holds at any viewport height, a percentage gap could not. */
.gate-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--gold-bright) 24%, var(--gold-bright) 76%, transparent);
  mask: radial-gradient(circle at center,
    transparent calc(var(--gate-rune) / 2 + 6px),
    #000 calc(var(--gate-rune) / 2 + 22px));
  opacity: 0;
}

.gate-core { position: absolute; inset: 0; display: grid; place-items: center; }
/* The rune scales in as one piece, which is what keeps each dot sitting exactly
   on its pentagon vertex, animating the ring separately would slide the
   corners out from under them mid-entrance. */
.gate-rune { width: var(--gate-rune); height: var(--gate-rune); overflow: visible; opacity: 0; }
/* The gear that houses the pentagon. Teeth are a thick dashed circle rather
   than a computed tooth path, twelve dashes of 11 over a 36.65 period at
   r=70 close the circle exactly. A *static* dasharray only rasterises once,
   so this stays inside the transform/opacity-only budget; it's animating
   `stroke-dashoffset` that would repaint every frame. */
.gate-gear {
  fill: none; stroke: var(--gold); stroke-width: 2;
  transform-box: fill-box; transform-origin: center; will-change: transform;
}
.gate-teeth { stroke-width: 10; stroke-dasharray: 11 25.65; }
/* One slice of the pentagon per lane. The five tile it exactly, so the slice
   itself only fades, scaling each about its own centre would pull it away from
   its neighbours and tear the seams. The icon inside is what pops. */
.gate-lane { opacity: 0; will-change: opacity; }
.gate-slice { fill: rgba(200, 155, 60, 0.16); stroke: var(--gold); stroke-width: 1.5; }
/* The highlight each lane flashes on the way in, then gives up to land on
   .gate-slice's resting fill. It's a plain fill whose *opacity* is animated
   rather than an animated colour or filter: those repaint every frame, and the
   whole run's budget is transform/opacity. Reaches the centre, so a lane's
   piece of the cup brightens with its slice. */
.gate-flare { fill: rgba(240, 198, 106, 0.42); opacity: 0; will-change: opacity; }
/* Riot's official filled position icons; the dim layer is the client's
   secondary bronze. transform-box pops each about its own centre. */
.gate-lane-icon {
  fill: var(--gold-bright);
  transform-box: fill-box; transform-origin: center; will-change: transform;
}
.gate-lane-dim { fill: #785a28; opacity: 0.55; }
/* Each slice's fifth of the ring around the cup, and its fifth of the cup,
   both live inside .gate-lane, so they ride that slice's fade rather than
   arriving on their own once the pentagon is closed. The cup is clipped to the
   slice's sector in landing.js, which is what makes the fifths line up. */
.gate-hub { fill: none; stroke: var(--gold-bright); stroke-width: 1.5; }
.gate-cup {
  fill: none; stroke: var(--gold-bright); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.gate-wave {
  position: absolute; width: var(--gate-rune); height: var(--gate-rune); border-radius: 50%;
  border: 2px solid var(--gold-bright); opacity: 0;
}

/* Beat 1, charge: the pentagon snaps in, its five lanes light up one at a
   time in a shuffled order (gatesHTML picks it), and only once the fifth is in
   does the cup appear and the gear advance. */
#landing.intro-run .gate-rune { animation: gate-rune 540ms var(--gate-ease-out) both; }
@keyframes gate-rune {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: none; }
}
/* The gear holds dead still until all five lanes are lit, then advances exactly
   one tooth, 360°/12, counter-clockwise. Landing on a tooth pitch is what
   makes it read as a mechanism indexing over rather than a spinner, and a
   single deliberate notch avoids the "still loading" connotation of sustained
   rotation. It's also the only thing in the run that rotates. */
#landing.intro-run .gate-gear {
  animation: gate-gear calc(var(--gate-charge) + 340ms - var(--gate-lit)) var(--gate-lit) var(--gate-ease-out) both;
}
@keyframes gate-gear {
  from { transform: rotate(0deg); }
  to { transform: rotate(-30deg); }
}
/* All three share one delay: a lane arrives as a single event. The group comes
   up fast, the flare peaks just after and decays across the rest of the window,
   so each lane reads as highlight-then-settle rather than a plain fade. */
#landing.intro-run .gate-lane,
#landing.intro-run .gate-flare {
  animation-duration: var(--gate-lane-in);
  animation-delay: calc(var(--gate-lane-lead) + var(--i) * var(--gate-lane-step));
  animation-timing-function: ease;
  animation-fill-mode: both;
}
#landing.intro-run .gate-lane { animation-name: gate-fade; }
#landing.intro-run .gate-flare { animation-name: gate-flare; }
#landing.intro-run .gate-lane-icon {
  animation: gate-lane-icon var(--gate-lane-in)
    calc(var(--gate-lane-lead) + var(--i) * var(--gate-lane-step)) var(--gate-ease-out) both;
}
/* Reaches full opacity early so the flare flashes at full strength rather than
   being multiplied down by a group still fading. */
@keyframes gate-fade {
  from { opacity: 0; }
  25% { opacity: 1; }
  to { opacity: 1; }
}
@keyframes gate-flare {
  from { opacity: 0; }
  30% { opacity: 1; }
  to { opacity: 0; }
}
@keyframes gate-lane-icon {
  from { transform: scale(0.35); }
  35% { transform: scale(1.18); }
  60% { transform: scale(1); }
  to { transform: scale(1); }
}
/* Nothing to animate for the hub ring or the cup: each lane owns a fifth of
   both, so they assemble as the slices fade in. --gate-lit is still what the
   gear waits on. */
#landing.intro-run .gate-seam {
  animation: gate-seam calc(var(--gate-charge) + 240ms) var(--gate-ease-out) both;
}
/* Fade only, the mask hole is in the seam's own box, so scaling the element
   would shrink the hole with it and clip the emblem on the way in. */
@keyframes gate-seam {
  from { opacity: 0; }
  55% { opacity: 1; }
  74% { opacity: 1; }
  to { opacity: 0; }
}

/* Beat 2, snap: a shockwave off the rune, then the whole core clears out. */
#landing.intro-run .gate-wave {
  animation: gate-wave 620ms calc(var(--gate-charge) - 140ms) var(--gate-ease-out) both;
}
@keyframes gate-wave {
  from { opacity: 0.85; transform: scale(0.7); }
  to { opacity: 0; transform: scale(2.6); }
}
/* The core clears straight out; the turn belongs to the gear alone. */
#landing.intro-run .gate-core { animation: gate-core 340ms var(--gate-charge) ease both; }
@keyframes gate-core {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.18); }
}

/* Beat 3, the gates part. */
#landing.intro-run .gate-l { animation: gate-part-l var(--gate-open) var(--gate-charge) var(--gate-ease) both; }
#landing.intro-run .gate-r { animation: gate-part-r var(--gate-open) var(--gate-charge) var(--gate-ease) both; }
@keyframes gate-part-l { to { transform: translate3d(-100%, 0, 0); } }
@keyframes gate-part-r { to { transform: translate3d(100%, 0, 0); } }

/* Beat 4, the hero eases up *while* the doors are still moving, so the page
   is already alive when it comes into view instead of animating after the
   reveal. `--i` is the stagger index; lane-up cards get theirs inline from
   laneUpHTML so five cards don't need five rules here. */
#landing.intro-run .landing-hero > :not(.lane-up),
#landing.intro-run .lu-head,
#landing.intro-run .lu-card,
#landing.intro-run .landing-card,
#landing.intro-run .landing-thanks,
#landing.intro-run .landing-foot {
  animation: gate-rise var(--gate-settle) var(--gate-ease-out) both;
  animation-delay: calc(var(--gate-charge) + 200ms + var(--i, 0) * 55ms);
}
@keyframes gate-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}
#landing.intro-run .landing-hero > :nth-child(2) { --i: 1; }  /* wordmark */
#landing.intro-run .landing-hero > :nth-child(3) { --i: 2; }  /* tagline */
#landing.intro-run .lu-head { --i: 3; }                       /* lane-up: cards are 4–8 */
#landing.intro-run .landing-feats { --i: 4; }
#landing.intro-run .landing-proof { --i: 5; }
#landing.intro-run .landing-card { --i: 2; }
#landing.intro-run .landing-thanks { --i: 6; }
#landing.intro-run .landing-foot { --i: 7; }

/* Account chip (header) */
.hud-item.account { text-align: right; }
.hud-item.account #sign-out {
  margin-top: 4px; background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.hud-item.account #sign-out:hover { color: var(--red); border-color: var(--red); }

/* Narrow phones: let the HUD wrap instead of clipping the account chip off-edge. */
@media (max-width: 560px) {
  .hud { flex-wrap: wrap; gap: 12px 20px; }
  .hud-item { min-width: 0; }
  .hud-item.account { text-align: left; }
}

/* Phones: trim the hero's vertical spend so the Sign in button clears the fold
  , the front door is useless if the primary action needs a scroll. */
@media (max-width: 760px) {
  #landing { padding: 24px 18px 12px; }
  .landing-hero h1 { font-size: 34px; }
  .landing-inner { gap: 22px; }
  .landing-tag { margin: 10px 0 16px; font-size: 14px; }
  #landing-rift-preview { margin-bottom: 16px; }
  #landing-rift-preview .map-label { display: none; }
  .lane-up { margin-bottom: 16px; }
  .lu-row { gap: 6px; }
  .lu-card { padding: 8px 3px 6px; }
  .lu-card b { font-size: 11.5px; }
  .lu-card small { font-size: 9.5px; }
  .lu-face { width: 42px; height: 42px; }
  .lu-initials { font-size: 13px; }
  /* "KC · 34.2 pts" doesn't fit one line in a fifth of a phone, and wrapping it
     stranded "pts" alone on the second. Break it deliberately instead: team,
     then score. */
  .lu-sep { display: none; }
  .lu-pts { display: block; }
  /* The blurbs used to be display:none here, to keep Sign in above the fold.
     The hero has since grown (map preview, lane-up, proof) and the button now
     starts ~995px down an 812px screen, so hiding them no longer buys that,
     it just withheld the pitch from phone visitors. Show them BELOW the form
     instead: `display: contents` drops the hero's box so its children and
     .landing-card share one flex context, and `order` puts the blurbs after
     the card. Everything above the form keeps its position. The hero's
     flex-basis/max-width are moot at this width, and gap goes to 0 so the
     children keep spacing from their own margins rather than gaining 22px
     between every one of them. */
  .landing-inner { flex-direction: column; align-items: stretch; gap: 0; }
  .landing-hero { display: contents; }
  .landing-card { order: 1; margin-top: 22px; }
  .landing-feats { order: 2; margin-top: 26px; }
  .landing-proof { margin-top: 12px; padding-top: 10px; }
  .landing-foot { margin-top: 20px; }
}

/* Short phones (SE-class): drop the garnish so the form still fits unscrolled. */
@media (max-width: 760px) and (max-height: 700px) {
  .landing-kicker, .landing-proof { display: none; }
  .landing-tag { margin-bottom: 12px; }
}

/* ── Draft-board analytics (slice 1) ────────────────────────────────────── */
.rank-chip, .form-chip, .rec-chip, .warn-chip, .prior-chip {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; border: 1px solid var(--border); color: var(--muted);
  background: var(--panel-2); cursor: default;
}
.form-chip.hot { color: #ff9b54; border-color: #7a4a24; }
.form-chip.cold { color: var(--teal); border-color: #145551; }
.rec-chip { color: var(--gold-bright); border-color: var(--gold); background: rgba(200, 155, 60, 0.12); }
.card.recommended { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(200, 155, 60, 0.35); }
.warn-chip { color: #ff9b54; border-color: #7a4a24; background: rgba(255, 155, 84, 0.1); }
/* Stats are last split's because this pro's org hasn't played the current one.
   Muted rather than orange: it's a provenance note, not a problem with the pick. */
.prior-chip { color: var(--teal); border-color: #145551; background: rgba(20, 85, 81, 0.12); }
.draft.warn { color: #ff9b54; border-color: #7a4a24; background: linear-gradient(180deg, rgba(255, 155, 84, 0.22), rgba(255, 155, 84, 0.08)); }
.draft.warn:hover:not(:disabled) { background: #ff9b54; color: #131313; }
.card-side .value { color: var(--muted); font-size: 11px; cursor: default; }

/* ── Research tab ───────────────────────────────────────────────────────── */
#view-research { max-width: 980px; margin: 24px auto; padding: 0 20px; }
.rs-intro h2 { font-size: 20px; margin-bottom: 8px; }
.rs-patch { color: var(--text); font-size: 13.5px; margin-bottom: 6px; }
.rs-patch a, .rs-note a { color: var(--teal); text-decoration: none; }
.rs-patch a:hover { text-decoration: underline; }
.rs-note { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.rs-note code { font-size: 11.5px; color: var(--gold-bright); }
.rs-section-title { font-size: 14px; margin: 0 0 8px; color: var(--text); }

/* Patch summary */
.rs-patch-summary {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin-bottom: 20px;
}
.rs-league-tracker h4,
.rs-kinds h4 {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.rs-tracker-note { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.rs-league-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rs-league-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--text);
}
.rs-league-chip.current { border-color: var(--teal); color: var(--teal); }
.rs-league-chip.behind { border-color: var(--gold); }
.rs-league-chip.behind-far { border-color: var(--red); color: #f0b0b6; }
.rs-league-chip.muted { color: var(--muted); }
/* Stale feed is a data-trust problem, not a patch-cadence one, mark it apart
   from "behind" so the two never read as the same condition. */
.rs-league-chip.feed-gap { border-style: dashed; border-color: var(--red); }
.rs-feed-gap {
  margin: 0 0 10px; padding: 8px 10px; font-size: 12px; line-height: 1.5;
  color: #f0b0b6; background: rgba(200, 60, 70, 0.08);
  border: 1px solid rgba(200, 60, 70, 0.4); border-radius: 6px;
}
.rs-feed-gap strong { color: var(--red); }
.rs-pending-rollup {
  margin: 0 0 16px; padding-left: 18px; color: var(--muted);
  font-size: 12px; line-height: 1.5;
}
.rs-pending-rollup strong { color: var(--text); }

.rs-kind-icon { font-size: 11px; }
.rs-kind-legend {
  margin: 0 0 8px; font-size: 11px; color: var(--muted); letter-spacing: 0.02em;
}
.rs-kind-legend .buff { color: var(--teal); }
.rs-kind-legend .nerf { color: var(--red); }
.rs-kind-legend .adjusted { color: var(--gold-bright); }
.rs-table tr.buff td:first-child { color: var(--teal); }
.rs-table tr.nerf td:first-child { color: var(--red); }
.rs-table tr.adjusted td:first-child { color: var(--gold-bright); }
.rs-table .rs-kind-icon.buff { color: var(--teal); }
.rs-table .rs-kind-icon.nerf { color: var(--red); }
.rs-table .rs-kind-icon.adjusted { color: var(--gold-bright); }

.rs-kind-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 4px; font-weight: 700;
}
.rs-kind-badge.nerf { background: var(--red); color: #2b0c10; }
.rs-kind-badge.buff { background: var(--teal); color: #0c281f; }
.rs-kind-badge.adjusted { background: var(--gold); color: #1a1408; }

.rs-pool-patch {
  margin: 12px 0; padding: 12px 14px;
  background: var(--panel-2); border-radius: 8px;
  border-left: 3px solid var(--border);
}
.rs-pool-patch.nerf { border-left-color: var(--red); }
.rs-pool-patch.buff { border-left-color: var(--teal); }
.rs-pool-patch.adjusted { border-left-color: var(--gold); }
.rs-pool-patch h4 { font-size: 14px; margin: 0 0 2px; }
.rs-pool-patch.none {
  color: var(--muted); font-size: 12.5px; font-style: italic;
  border-left-color: var(--border);
}
.rs-pool-changes { list-style: none; margin: 0; padding: 0; }
.rs-pool-change {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--border); font-size: 12.5px;
}
.rs-pool-change:first-child { border-top: 0; }
.rs-pool-champ { font-weight: 600; }
.rs-pool-change.nerf .rs-kind-icon { color: var(--red); }
.rs-pool-change.buff .rs-kind-icon { color: var(--teal); }
.rs-pool-change.adjusted .rs-kind-icon { color: var(--gold-bright); }
.rs-pool-count { color: var(--muted); font-size: 11px; }
.rs-pool-blurb { flex-basis: 100%; color: var(--muted); line-height: 1.4; }

.rs-picker { margin-bottom: 8px; }
.rs-picker-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 4px;
}
.rs-region-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); font-weight: 600;
}
.rs-region-filter select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.rs-region-filter select:focus { outline: none; border-color: var(--gold); }
.rs-picker input[type="search"] {
  flex: 1 1 220px; max-width: 440px; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
.rs-picker input[type="search"]:focus { outline: none; border-color: var(--gold); }
.rs-count { color: var(--muted); font-size: 12px; margin: 4px 0 0; min-height: 14px; }
.rs-results {
  margin-top: 8px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start;
}
.rs-result-region {
  flex-basis: 100%; margin: 6px 2px 2px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-bright);
}
.rs-result-region:first-child { margin-top: 2px; }
.rs-result {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; font-size: 12.5px; font-weight: 600;
}
.rs-result:hover { border-color: var(--gold); }
.rs-result[aria-current] { border-color: var(--gold-bright); background: rgba(200, 155, 60, 0.12); }
.rs-result-meta { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.rs-no-results { color: var(--muted); font-size: 13px; margin: 8px 2px; }
.rs-more { margin-top: 8px; }
.rs-more summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 4px 0; }
.rs-more summary:hover { color: var(--text); }
.rs-head { margin: 18px 0 4px; }
.rs-head h3 { font-size: 17px; }
.rs-sub { color: var(--muted); font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 12px; }
.rs-grid h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-table th { text-align: left; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rs-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rs-wr { position: relative; min-width: 88px; }
/* Parked under the number rather than centred behind it: at 45% opacity a bar
   crossing the digits reads as a strikethrough, and the Avg pts column narrowed
   this cell enough to make that the common case. */
.rs-bar { position: absolute; left: 8px; bottom: 3px; height: 4px; max-width: calc(100% - 16px); background: var(--teal); opacity: 0.5; border-radius: 2px; }
.rs-wr em { position: relative; font-style: normal; font-variant-numeric: tabular-nums; }
.rs-pill { display: inline-block; width: 20px; text-align: center; border-radius: 4px; font-size: 11px; font-weight: 700; }
.rs-pill.w { color: #0c281f; background: var(--teal); }
.rs-pill.l { color: #2b0c10; background: var(--red); }
.rs-pts { font-variant-numeric: tabular-nums; }
/* Champion pool gets an average-points column, so its win-rate bar can't keep
   the widest min-width or the two number columns wrap on a narrow panel. */
.rs-table th:last-child, .rs-table td.rs-pts { text-align: right; }

/* Per-game points chart, the spread behind every average on this panel. */
.rs-chart { margin: 0 0 10px; }
.rs-chart svg { display: block; width: 100%; height: 96px; overflow: visible; }
.rs-cbar.w { fill: var(--teal); opacity: 0.75; }
.rs-cbar.l { fill: var(--red); opacity: 0.6; }
.rs-cavg { stroke: var(--gold-bright); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.9; }
.rs-cbase { stroke: var(--border); stroke-width: 1; }
.rs-chart figcaption {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  margin-top: 4px; font-size: 11px; color: var(--muted);
}
.rs-chart-avg { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.rs-chart-avg::before {
  content: ''; display: inline-block; width: 12px; height: 0;
  margin-right: 5px; vertical-align: middle;
  border-top: 1px dashed var(--gold-bright);
}
.rs-chart-range { font-variant-numeric: tabular-nums; }
.rs-chart-axis { margin-left: auto; letter-spacing: 0.04em; }