:root {
  color-scheme: light;
  --ink: #172033;
  --ink-soft: #475569;
  --muted: #64748b;
  --line: #d8dee8;
  --paper: #f4f6f8;
  --card: #ffffff;
  --surface-hover: #eef2f7;
  --button: #2457d6;
  --button-text: #ffffff;
  --official: #24324a;
  --live: #0f766e;
  --down: #b42318;
  --accent-soft: rgba(15, 118, 110, .11);
  --danger-soft: rgba(180, 35, 24, .09);
  --focus: rgba(36, 87, 214, .2);
  --placeholder: #94a3b8;
  --board: rgba(23, 32, 51, .65);

  --radius: 14px;
  --shadow: 0 18px 44px -24px rgba(30, 41, 59, .3);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --ink: #f8fafc; --ink-soft: #dbeafe; --muted: #94a3b8; --line: #273449;
  --paper: #080b14; --card: #111827; --surface-hover: #1e293b; --button: #7c3aed;
  --official: #a78bfa; --live: #2dd4bf; --down: #fb7185;
  --accent-soft: rgba(45, 212, 191, .14); --danger-soft: rgba(251, 113, 133, .14);
  --focus: rgba(167, 139, 250, .28); --placeholder: #64748b; --board: rgba(255, 255, 255, .8);
  --shadow: 0 18px 48px -24px rgba(0, 0, 0, .72);
}

:root[data-theme="electric"] {
  color-scheme: dark;
  --ink: #fff7ed; --ink-soft: #f5d0fe; --muted: #c4b5fd; --line: #5b2a86;
  --paper: #160b2d; --card: #261442; --surface-hover: #3b1c5c; --button: #db2777;
  --official: #f472b6; --live: #a3e635; --down: #fb7185;
  --accent-soft: rgba(163, 230, 53, .14); --danger-soft: rgba(251, 113, 133, .15);
  --focus: rgba(244, 114, 182, .3); --placeholder: #8b78b4;
}

:root[data-theme="cobalt"] {
  color-scheme: dark;
  --ink: #f8fafc; --ink-soft: #dbeafe; --muted: #93c5fd; --line: #185477;
  --paper: #071a2f; --card: #0c2947; --surface-hover: #103b61; --button: #2563eb;
  --official: #38bdf8; --live: #fb923c; --down: #fb7185;
  --accent-soft: rgba(251, 146, 60, .14); --danger-soft: rgba(251, 113, 133, .15);
  --focus: rgba(56, 189, 248, .3); --placeholder: #6396bf;
}

:root[data-theme="ember"] {
  color-scheme: dark;
  --ink: #fff7ed; --ink-soft: #fed7aa; --muted: #fdba74; --line: #713018;
  --paper: #1a0d0a; --card: #2a1511; --surface-hover: #442016; --button: #ea580c;
  --official: #fb923c; --live: #facc15; --down: #f87171;
  --accent-soft: rgba(250, 204, 21, .14); --danger-soft: rgba(248, 113, 113, .14);
  --focus: rgba(251, 146, 60, .3); --placeholder: #a76542;
}

:root[data-theme="forest"] {
  color-scheme: dark;
  --ink: #eafff2; --ink-soft: #b9e6cb; --muted: #7fb596; --line: #245a40;
  --paper: #071b12; --card: #0d2b1d; --surface-hover: #17432d; --button: #16a05d;
  --official: #72d69d; --live: #f0c95b; --down: #ff7a7a;
  --accent-soft: rgba(114, 214, 157, .14); --danger-soft: rgba(255, 122, 122, .14);
  --focus: rgba(114, 214, 157, .28); --placeholder: #57816a;
}

:root[data-theme="forest-light"] {
  color-scheme: light;
  --ink: #103426; --ink-soft: #285c46; --muted: #4d8069; --line: #afd9c4;
  --paper: #edfff5; --card: #f8fffb; --surface-hover: #d9f6e7; --button: #128650;
  --official: #176b48; --live: #b26c00; --down: #b42318;
  --accent-soft: rgba(18, 134, 80, .11); --focus: rgba(18, 134, 80, .2); --placeholder: #82aa98;
}

:root[data-theme="rosewood"] {
  color-scheme: dark;
  --ink: #fff3f4; --ink-soft: #e8c1c5; --muted: #bd858d; --line: #653039;
  --paper: #210c11; --card: #35141b; --surface-hover: #50212b; --button: #c13d58;
  --official: #ff8fa3; --live: #f5c76b; --down: #ff728a;
  --accent-soft: rgba(245, 199, 107, .14); --focus: rgba(255, 143, 163, .28); --placeholder: #92636a;
}

:root[data-theme="rosewood-light"] {
  color-scheme: light;
  --ink: #4b1722; --ink-soft: #743344; --muted: #9c6070; --line: #e6bcc6;
  --paper: #fff3f5; --card: #fffafb; --surface-hover: #f8dfe5; --button: #b83955;
  --official: #8e2c42; --live: #8b6811; --down: #b42318;
  --accent-soft: rgba(184, 57, 85, .1); --focus: rgba(184, 57, 85, .2); --placeholder: #bf8d99;
}

:root[data-theme="deep-sea"] {
  color-scheme: dark;
  --ink: #ecffff; --ink-soft: #b9e5e7; --muted: #79abb1; --line: #1d5661;
  --paper: #04181d; --card: #0a2930; --surface-hover: #103f48; --button: #0796a6;
  --official: #55d8df; --live: #a7e66f; --down: #ff7b7b;
  --accent-soft: rgba(85, 216, 223, .14); --focus: rgba(85, 216, 223, .28); --placeholder: #507d84;
}

:root[data-theme="deep-sea-light"] {
  color-scheme: light;
  --ink: #12383e; --ink-soft: #2f636b; --muted: #56858d; --line: #b6dce0;
  --paper: #effcfd; --card: #fbffff; --surface-hover: #d9f2f4; --button: #087f8e;
  --official: #116d78; --live: #4d7d1e; --down: #b42318;
  --accent-soft: rgba(8, 127, 142, .1); --focus: rgba(8, 127, 142, .2); --placeholder: #89adb2;
}

:root[data-theme="nord"] {
  color-scheme: dark;
  --ink: #eceff4; --ink-soft: #d8dee9; --muted: #9aa8bd; --line: #4c566a;
  --paper: #242933; --card: #2e3440; --surface-hover: #3b4252; --button: #5e81ac;
  --official: #88c0d0; --live: #a3be8c; --down: #bf616a;
  --accent-soft: rgba(163, 190, 140, .14); --focus: rgba(136, 192, 208, .28); --placeholder: #7f8b9d;
}

:root[data-theme="nord-light"] {
  color-scheme: light;
  --ink: #2e3440; --ink-soft: #4c566a; --muted: #68758a; --line: #c7d0dc;
  --paper: #eceff4; --card: #f8fafc; --surface-hover: #e1e6ee; --button: #5e81ac;
  --official: #4c7393; --live: #4f772d; --down: #a94750;
  --accent-soft: rgba(94, 129, 172, .11); --focus: rgba(94, 129, 172, .2); --placeholder: #909bab;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  transition: background-color .22s ease, color .22s ease;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) 20px 48px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- masthead --- */
.masthead { margin-bottom: 28px; }
.eyebrow {
  margin: 0 0 10px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px var(--accent-soft); }
h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 7vw, 52px);
  letter-spacing: -0.02em; line-height: 1.02; font-weight: 760;
}
.lede { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: 16px; }

/* --- search bar --- */
.searchbar {
  display: flex; gap: 8px; align-items: stretch;
  margin: 28px 0 8px;
}
.search-area { position: relative; }
.field { position: relative; flex: 1 1 auto; min-width: 0; }
.field.state { flex: 0 0 132px; }

input, select, .lookup {
  height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font: inherit; color: var(--ink);
  padding: 0 14px;
}
input { width: 100%; }
input::placeholder { color: var(--placeholder); }
select { width: 100%; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23767c8a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px;
}
input:focus-visible, select:focus-visible, .lookup:focus-visible {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--focus);
}

.lookup {
  flex: 0 0 auto; padding: 0 22px; cursor: pointer;
  background: var(--button); color: var(--button-text); border-color: var(--button);
  font-weight: 620; letter-spacing: 0.01em;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.lookup:hover { opacity: 0.92; }
.lookup:active { transform: translateY(1px); }
.lookup[disabled] { opacity: 0.5; cursor: progress; }

/* --- autocomplete --- */
.suggestions {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 320px; overflow: auto;
}
.suggestions li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.suggestions .suggestion-state { display: block; color: var(--muted); cursor: default; padding: 12px; }
.suggestions .suggestion-state:hover { background: transparent; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--surface-hover); }
.suggestions .s-name { font-weight: 560; }
.suggestions .s-meta { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* --- status / messages --- */
.status {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); color: var(--ink-soft);
}
.status.error { border-color: var(--down); background: var(--danger-soft); color: var(--down); }

/* --- results table --- */
.results { margin-top: 18px; overflow-x: auto; }
.results-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.results-table thead th {
  padding: 10px 14px; text-align: left;
  font-size: 11px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-hover); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.results-table tbody .r-row { cursor: pointer; }
.results-table tbody .r-row:hover { background: var(--surface-hover); }
.results-table tbody .r-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.results-table tbody .r-row + .r-row { border-top: 1px solid var(--line); }
.results-table td { padding: 11px 14px; vertical-align: middle; }
.r-name { font-weight: 580; }
.r-id   { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.r-rating { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.r-state { font-size: 13px; }
.r-exp  { font-size: 13px; color: var(--muted); white-space: nowrap; }

.badge {
  display: inline-block; font-size: 11px; font-weight: 650; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.badge-active  { background: var(--accent-soft); color: var(--live); }
.badge-expired { background: var(--danger-soft); color: var(--down); }
.badge-none    { background: var(--surface-hover); color: var(--muted); }

/* --- the rating card (hero) --- */
.card {
  position: relative; overflow: hidden;
  margin-top: 22px; padding: 26px 24px 24px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow);
}
/* faint 8x8 board, grounding the page in the subject without shouting */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.025;
  background-image: conic-gradient(var(--board) 90deg, transparent 90deg 180deg, var(--board) 180deg 270deg, transparent 270deg);
  background-size: 56px 56px; background-position: top right;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; position: relative; }
.card-actions { display: flex; align-items: center; gap: 10px; }
.battle-add,
.battle-reset {
  min-height: 30px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); background: var(--surface-hover);
  font: 700 10px var(--sans); cursor: pointer;
}
.battle-add:hover,
.battle-reset:hover { border-color: var(--ink); }
.p-name { margin: 0; font-size: 22px; font-weight: 680; letter-spacing: -0.01em; }
.p-id { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.p-state { color: var(--muted); font-size: 14px; margin: 2px 0 0; position: relative; }

.plates {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 22px;
}
.plate { padding: 4px 2px; }
.plate + .plate { border-left: 1px solid var(--line); padding-left: 18px; }
.plate-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 650; color: var(--muted); margin-bottom: 6px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.dot.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--live); } 50% { box-shadow: 0 0 0 6px transparent; } }
.plate-sub { font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; }

.num {
  font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 13vw, 86px); line-height: 0.95; letter-spacing: -0.03em;
}
.plate.official .num { color: var(--official); }
.plate.live .num { color: var(--live); }
.num.na { color: var(--muted); font-size: clamp(28px, 7vw, 40px); }

.delta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.delta.up { color: var(--live); background: var(--accent-soft); }
.delta.down { color: var(--down); background: var(--danger-soft); }
.delta.flat { color: var(--muted); background: var(--surface-hover); }

/* --- rating progression --- */
.rating-progression {
  position: relative;
  margin-top: 24px;
  padding: 18px 18px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 76%, var(--surface-hover));
}
.progression-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.progression-head h3 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.progression-head p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.progression-range-line { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.progression-range {
  width: 56px;
  height: 22px;
  padding: 0 17px 0 6px;
  border-radius: 999px;
  background-color: var(--surface-hover);
  background-position: right 6px center;
  background-size: 7px auto;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.progression-range:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 2px var(--focus); }
.progression-average { font-family: var(--mono); font-weight: 700; }
.progression-average.up { color: var(--live); }
.progression-average.down { color: var(--down); }
.progression-average.flat { color: var(--muted); }
.progression-change {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font: 700 12px/1.3 var(--mono);
}
.progression-change.up { color: var(--live); background: var(--accent-soft); }
.progression-change.down { color: var(--down); background: var(--danger-soft); }
.progression-change.flat { color: var(--muted); background: var(--surface-hover); }
.progression-chart { position: relative; margin: 10px -4px 0; }
.progression-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: var(--line); stroke-width: 1; opacity: .72; }
.chart-grid text,
.chart-date,
.chart-axis-label { fill: var(--muted); font: 10px var(--mono); }
.chart-axis-label { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.rating-area { fill: url("#ratingAreaGradient"); }
.rating-power-trend {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .62;
}
.rating-power-label {
  fill: var(--ink);
  font: 650 8px var(--mono);
  letter-spacing: .13em;
  opacity: .62;
}
.rating-line-halo { fill: none; stroke: var(--card); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.rating-line { fill: none; stroke: var(--live); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.rating-point {
  fill: var(--card);
  stroke: var(--live);
  stroke-width: 2.25;
  filter: drop-shadow(0 0 4px var(--live));
  cursor: help;
  transition: r .12s ease, fill .12s ease;
}
.rating-point.point-down { stroke: var(--down); filter: drop-shadow(0 0 4px var(--down)); }
.rating-point.point-flat { stroke: var(--muted); filter: drop-shadow(0 0 3px var(--muted)); }
.rating-point.point-dense { fill: var(--live); stroke: var(--live); stroke-width: 1; filter: drop-shadow(0 0 3px var(--live)); }
.rating-point.point-dense.point-down { fill: var(--down); stroke: var(--down); filter: drop-shadow(0 0 3px var(--down)); }
.rating-point.point-dense.point-flat { fill: var(--muted); stroke: var(--muted); filter: drop-shadow(0 0 2px var(--muted)); }
.rating-point:hover,
.rating-point:focus { r: 7px; fill: var(--live); outline: none; }
.rating-point.point-down:hover,
.rating-point.point-down:focus { fill: var(--down); }
.rating-point.point-flat:hover,
.rating-point.point-flat:focus { fill: var(--muted); }
.progression-tooltip {
  position: absolute;
  z-index: 4;
  width: min(230px, calc(100% - 12px));
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.progression-tooltip[hidden] { display: none; }
.progression-tooltip strong,
.progression-tooltip span,
.progression-tooltip b { display: block; }
.progression-tooltip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.progression-tooltip span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.progression-tooltip b { margin-top: 4px; font: 700 11px var(--mono); }
.progression-tooltip b.up { color: var(--live); }
.progression-tooltip b.down { color: var(--down); }
.progression-tooltip b.flat { color: var(--muted); }

/* --- projection and two-player comparison --- */
.rating-projector {
  position: relative; margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--card));
}
.projector-head,
.battle-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.projector-head h3,
.battle-head h2 { margin: 2px 0 0; color: var(--ink); font-size: 15px; }
.battle-kicker {
  color: var(--muted); font-size: 9px; font-weight: 750;
  letter-spacing: .14em; text-transform: uppercase;
}
.projector-equation { color: var(--muted); font: 600 10px var(--mono); white-space: nowrap; }
.projector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
.projector-grid > div {
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
.projector-grid span,
.projector-grid b { display: block; color: var(--muted); font-size: 9px; }
.projector-grid strong {
  display: block; margin: 4px 0 2px; color: var(--live);
  font: 700 25px var(--mono);
}
.projector-grid b { color: var(--live); font-family: var(--mono); }
.rating-projector > p,
.battle-note,
.battle-waiting p { margin: 10px 0 0; color: var(--muted); font-size: 10px; }
.battle-card {
  margin-top: 22px; padding: 22px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow);
}
.battle-head h2 { font-size: 20px; }
.battle-players {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 15px; margin-top: 20px;
}
.battle-players > div:not(.battle-vs) { display: grid; gap: 3px; }
.battle-players > div:last-child { text-align: right; }
.battle-players span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.battle-players strong { color: var(--ink); font-size: 16px; }
.battle-players b { color: var(--live); font: 700 32px var(--mono); }
.battle-vs { color: var(--muted); font: 750 11px var(--mono); }
.battle-odds {
  height: 9px; margin-top: 15px; overflow: hidden;
  border-radius: 999px; background: var(--down);
}
.battle-odds > div { height: 100%; background: var(--live); }
.battle-odds-label { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font: 600 9px var(--mono); }
.battle-metrics { margin-top: 18px; border-top: 1px solid var(--line); }
.battle-metric {
  display: grid; grid-template-columns: 1fr minmax(130px, auto) 1fr;
  align-items: baseline; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.battle-metric strong { color: var(--ink); font: 700 13px var(--mono); }
.battle-metric strong:last-child { text-align: right; }
.battle-metric span { color: var(--muted); font-size: 10px; text-align: center; }
.battle-waiting strong { display: block; margin-top: 5px; color: var(--ink); font-size: 17px; }

.lastevent { position: relative; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; }
.lastevent span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.lastevent time { color: var(--muted); white-space: nowrap; }
.lastevent strong { color: var(--ink); font-weight: 600; }
.checked { margin-top: 14px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .03em; }

/* --- footer --- */
.foot {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  color: var(--muted); font-size: 13px;
}
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 6px; background: var(--surface-hover); color: var(--ink-soft);
}

/* --- floating theme picker --- */
.theme-picker {
  position: fixed;
  z-index: 50;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  width: 50px;
  min-height: 50px;
  padding: 3px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 2px solid color-mix(in srgb, var(--ink) 34%, var(--line));
  border-radius: 999px;
  box-shadow: 0 18px 42px -18px rgba(15, 23, 42, .42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background-color .22s ease, border-color .22s ease, transform .18s ease;
}
.theme-picker:hover { transform: translateY(-2px); }
.theme-picker-content { display: flex; align-items: center; }
.theme-menu-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 76%, transparent);
  font: inherit;
  cursor: pointer;
}
.theme-menu-button:hover,
.theme-menu-button[aria-expanded="true"] { background: var(--surface-hover); }
.theme-menu-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.theme-orbs { display: flex; width: 30px; }
.theme-orbs i { width: 19px; height: 19px; margin-right: -11px; border: 1.5px solid var(--card); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.theme-orbs i:nth-child(1) { background: var(--official); }
.theme-orbs i:nth-child(2) { background: var(--live); }
.theme-orbs i:nth-child(3) { background: var(--button); margin-right: 0; }
.theme-menu {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 10px);
  width: min(390px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 110px));
  overflow: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  box-shadow: 0 24px 64px -24px rgba(15, 23, 42, .55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.theme-menu[hidden] { display: none; }
.theme-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.theme-menu-heading {
  padding: 6px 8px 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.theme-menu-heading:not(:first-child) { margin-top: 9px; padding-top: 13px; border-top: 1px solid var(--line); }
.theme-menu-random {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font: 720 12px/1 var(--sans);
  cursor: pointer;
}
.theme-menu-random span { color: var(--live); font-size: 16px; line-height: 1; }
.theme-menu-random:hover,
.theme-menu-random:focus-visible { background: var(--surface-hover); outline: none; }
.theme-menu-random:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.theme-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.theme-menu-grid button {
  display: grid;
  grid-template-columns: 18px 1fr 16px;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  font: 650 13px/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
}
.theme-menu-grid button:hover,
.theme-menu-grid button:focus-visible { background: var(--surface-hover); outline: none; }
.theme-menu-grid button:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.theme-menu-grid button b { visibility: hidden; color: var(--live); font-size: 13px; }
.theme-menu-grid button[aria-checked="true"] { background: var(--surface-hover); }
.theme-menu-grid button[aria-checked="true"] b { visibility: visible; }
.option-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.option-dot.midnight { background: #7c3aed; }
.option-dot.cobalt { background: #2563eb; }
.option-dot.forest { background: #16a05d; }
.option-dot.ember { background: #ea580c; }
.option-dot.rosewood { background: #c13d58; }
.option-dot.deep-sea { background: #0796a6; }
.option-dot.nord { background: #5e81ac; }
.option-dot.electric { background: #db2777; }
.option-dot.studio { background: #f4f6f8; border: 1px solid #9aa6b6; }
.option-dot.forest-light { background: #bcebd2; }
.option-dot.rosewood-light { background: #f1c7d0; }
.option-dot.deep-sea-light { background: #bce9ed; }
.option-dot.nord-light { background: #d8dee9; }

@media (max-width: 560px) {
  .searchbar { flex-wrap: wrap; }
  .field { flex: 1 1 100%; }
  .field.state { flex: 1 1 calc(50% - 4px); }
  .lookup { flex: 1 1 calc(50% - 4px); }
  .theme-picker { right: 12px; bottom: 12px; min-height: 50px; padding: 3px; }
  .theme-menu-grid { grid-template-columns: 1fr; }
  .rating-progression { padding: 15px 10px 8px; }
  .card-head { align-items: flex-start; }
  .card-actions { align-items: flex-end; flex-direction: column-reverse; }
  .projector-grid { grid-template-columns: 1fr; }
  .projector-head { display: block; }
  .projector-equation { display: block; margin-top: 7px; }
  .battle-card { padding: 18px 15px; }
  .battle-players { gap: 8px; }
  .battle-players strong { font-size: 13px; }
  .battle-players b { font-size: 25px; }
  .battle-metric { grid-template-columns: 1fr 105px 1fr; gap: 8px; }
}

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