:root {
  --bg: #0e1116;
  --bg-elev: #161b22;
  --bg-elev2: #1f2630;
  --border: #2a3140;
  --text: #e6edf3;
  --text-dim: #9aa4b2;
  --accent: #5b8def;
  --accent-2: #7d6df0;
  --good: #3fb950;
  --bad: #f85149;
  --warn: #d29922;
  --row-hover: #1a2230;
  --chip-bg: #243044;
  --chip-bg-main: #3a2f5a;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.55);
  --radius: 6px;
  --maxw: 1320px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must win over component display rules (e.g. .grid sets
   display:grid, which would otherwise override the UA [hidden]{display:none}). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
body { min-height: 100vh; }

/* ----- Top bar / lane tabs ----- */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em 1em;
  margin: 0;
  padding: 0.7em 1.2em;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.topbar h1 {
  font-size: 1.15em;
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lane-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}
.lane-tab {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4em 1em;
  cursor: pointer;
  font-size: 0.95em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lane-tab:hover { background: var(--bg-elev2); color: var(--text); }
.lane-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lane-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.status {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-align: right;
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.status.ok { color: var(--ok, #4ec98f); }
.status.warn { color: var(--warn); }
.status.bad { color: var(--bad); }

/* ----- Data-source notice banner ----- */
.data-notice {
  max-width: var(--maxw);
  margin: 1em auto -0.2em;
  padding: 0.7em 1em;
  border-radius: var(--radius);
  font-size: 0.88em;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
}
.data-notice[hidden] { display: none; }
.data-notice strong { color: var(--text); }
.data-notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--bg-elev2);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}
.data-notice.warn { border-color: rgba(210,153,34,0.5); background: rgba(210,153,34,0.10); }
.data-notice.warn strong { color: var(--warn); }
.data-notice.bad { border-color: rgba(248,81,73,0.5); background: rgba(248,81,73,0.10); }
.data-notice.bad strong { color: var(--bad); }

@media (min-width: 901px) { .data-notice { margin-top: 1.2em; } }
@media (max-width: 900px) { .data-notice { margin-left: 1em; margin-right: 1em; } }
@media (max-width: 520px) { .data-notice { margin-left: 0.8em; margin-right: 0.8em; } }

/* ----- Layout grid ----- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
  padding: 1.2em;
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: start;
}
.panel {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1em 1.2em;
  box-shadow: var(--shadow);
  min-width: 0;
}
/* Raise a panel above its neighbours while its search input is focused so the
   results dropdown floats over adjacent panels instead of being painted under. */
.panel:focus-within { z-index: 60; }
.panel h2 {
  margin: 0 0 0.8em 0;
  font-size: 1em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.45em;
}
.panel.wide { grid-column: span 2; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; padding: 1em; }
  .panel.wide { grid-column: span 1; }
}
@media (max-width: 520px) {
  .grid { gap: 0.8em; padding: 0.8em; }
  .panel { padding: 0.9em; }
  .topbar { padding: 0.6em 0.9em; }
}

.hint { color: var(--text-dim); font-size: 0.85em; margin: 0.7em 0 0 0; }

/* ----- Chips ----- */
.chip-input { position: relative; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  min-height: 1.9em;
  margin-bottom: 0.5em;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  background: var(--chip-bg);
  color: var(--text);
  border-radius: 100px;
  padding: 0.18em 0.28em 0.18em 0.32em;
  font-size: 0.85em;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.chip.main { background: var(--chip-bg-main); border-color: var(--accent-2); }
.chip img { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-elev2); }
.chip .chip-name { padding: 0 0.15em; white-space: nowrap; }
.chip-star, .chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  border: none; background: transparent; cursor: pointer; padding: 0;
  line-height: 1; font-size: 0.95em; transition: background 0.12s, color 0.12s;
}
.chip-star { color: var(--text-dim); }
.chip-star:hover, .chip-star:focus-visible { color: var(--accent-2); background: rgba(125,109,240,0.18); outline: none; }
.chip-star.on { color: #f5c542; }            /* gold star = main */
.chip-star.on:hover { background: rgba(245,197,66,0.16); }
.chip-x { color: var(--text-dim); font-weight: bold; }
.chip-x:hover, .chip-x:focus-visible { color: #fff; background: var(--bad); outline: none; }
.hint-star { color: #f5c542; }
.hint-x { color: var(--text-dim); font-weight: bold; }

/* ----- Your pool: champ-select tiles ----- */
.pool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 10px; margin-top: 0.9em; }
.pool-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4em;
  border: 2px solid transparent; border-radius: 10px; padding: 8px 6px 9px; background: var(--bg-elev2);
}
.pool-tile.main { border-color: var(--accent-2); background: var(--chip-bg-main); }
.pool-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px; background: var(--bg); display: block; }
.pool-tile .pt-name { font-size: 0.85em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pt-star, .pt-x {
  position: absolute; top: 5px; width: 1.55em; height: 1.55em; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.82em; line-height: 1; padding: 0;
  background: rgba(0,0,0,0.62); color: var(--text-dim); z-index: 1; transition: color .12s, background .12s;
}
.pt-star { left: 5px; }
.pt-x { right: 5px; font-weight: bold; }
.pt-star:hover, .pt-star:focus-visible { color: var(--accent-2); outline: none; }
.pt-star.on { color: #f5c542; background: rgba(0,0,0,0.74); }
.pt-x:hover, .pt-x:focus-visible { color: #fff; background: var(--bad); outline: none; }

/* ----- Search + dropdown ----- */
.search-wrap { position: relative; }
.search-wrap input {
  width: 100%;
  padding: 0.55em 0.7em;
  background: var(--bg-elev2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9em;
}
.search-wrap input::placeholder { color: var(--text-dim); }
.search-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,141,239,0.25); }
.search-results {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  top: calc(100% + 0.25em);
  margin: 0;
  padding: 0.25em;
  background: var(--bg-elev2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  display: none;
  box-shadow: var(--shadow-pop);
}
.search-results.open { display: block; }
.search-results li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.6em;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}
.search-results li:hover, .search-results li.active { background: var(--row-hover); }
.search-results img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-elev); }

/* ----- Settings ----- */
.setting { margin-bottom: 1em; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4em; }
.settings-grid .setting { margin-bottom: 0.6em; }
@media (max-width: 520px) { .settings-grid { grid-template-columns: 1fr; } }
.setting:last-child { margin-bottom: 0; }
.setting > label { display: block; color: var(--text-dim); font-size: 0.85em; margin-bottom: 0.35em; }
.setting > label small { color: var(--text-dim); font-weight: normal; }
.setting > label span { color: var(--text); font-variant-numeric: tabular-nums; }
.setting input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; }

.mains-list { display: flex; flex-wrap: wrap; gap: 0.4em; }
.mains-list .toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 0.22em 0.7em 0.22em 0.28em;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.15s, border-color 0.15s;
}
.mains-list .toggle:hover { border-color: var(--accent-2); }
.mains-list .toggle.on { background: var(--chip-bg-main); border-color: var(--accent-2); }
.mains-list .toggle img { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elev2); }
.mains-list .empty { color: var(--text-dim); font-size: 0.85em; }

/* ----- Tables ----- */
.scroll-x { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.results-table th, .results-table td {
  text-align: left;
  padding: 0.45em 0.6em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.results-table tbody tr:last-child td { border-bottom: none; }
.results-table th {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  background: var(--bg-elev);
}
.results-table tbody tr:hover { background: var(--row-hover); }
.results-table .champ-cell { display: inline-flex; align-items: center; gap: 0.45em; }
.results-table .champ-cell img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-elev2); }
/* Larger captioned champion cell (worst-matchups counters/answers, best-adds candidates) */
.champ-cell-lg { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; vertical-align: middle; }
.champ-cell-lg img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--bg-elev2); }
.champ-cell-lg .ccl-name { font-size: 0.76em; line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.results-table th.pool-col { text-align: center; vertical-align: bottom; }
.results-table th.pool-col .champ-cell-lg { margin: 0 auto; }
.add-cand-lg { align-items: flex-start; }
.add-cand-lg .add-plus { margin-top: 15px; }
.results-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.results-table .d2-cell { font-variant-numeric: tabular-nums; padding: 0.25em 0.5em; border-radius: 3px; text-align: right; }
.d2-cell.thin-sample { opacity: 0.45; }
.thin-mark { color: var(--text-dim); font-weight: 700; margin-left: 1px; }
.d2-pos { color: var(--good); }
.d2-neg { color: var(--bad); }
.d2-zero { color: var(--text-dim); }
.cell-pos { background: rgba(63, 185, 80, 0.12); }
.cell-neg { background: rgba(248, 81, 73, 0.14); }
.tag { font-size: 0.72em; padding: 0.12em 0.5em; border-radius: 3px; background: var(--bg-elev2); color: var(--text-dim); margin-left: 0.4em; white-space: nowrap; }
.tag.keep { background: var(--good); color: #04240c; }
.tag.cut { background: var(--bad); color: #fff; }
.tag.main { background: var(--accent-2); color: #fff; }

/* Handles: a fixed grid of N slots so columns line up across every row. */
.contribs {
  color: var(--text-dim);
  font-size: 0.82em;
  display: grid;
  grid-template-columns: repeat(var(--slots, 6), minmax(104px, 1fr));
  gap: 4px 14px;
  align-items: center;
}
.contribs .c-item { display: inline-flex; align-items: center; gap: 0.3em; min-width: 0; }
.contribs .c-item .champ-cell { min-width: 0; }
.contribs .c-item .champ-cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contribs .c-item.c-empty { visibility: hidden; }
.c-val { color: var(--text-dim); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.c-meta { display: inline-flex; align-items: baseline; gap: 0.3em; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.c-d2 { font-weight: 600; }
.c-d2.pos { color: var(--good); }
.c-d2.neg { color: var(--bad); }
.c-pr { color: var(--text-dim); font-size: 0.92em; }

/* Clickable candidate in Best adds — click to add to your pool. */
.add-cand {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  cursor: pointer;
  padding: 2px 7px;
  margin: -2px -7px;
  border-radius: var(--radius);
}
.add-cand:hover, .add-cand:focus-visible { background: var(--row-hover); outline: 1px solid var(--accent); }
.add-cand .add-plus { color: var(--accent); font-weight: 700; opacity: 0; transition: opacity .12s; }
.add-cand:hover .add-plus, .add-cand:focus-visible .add-plus { opacity: 1; }

/* ----- Usage bars ----- */
.usage-bars { display: flex; flex-direction: column; gap: 0.45em; }
.usage-bar { display: grid; grid-template-columns: minmax(120px, 180px) 1fr 56px; gap: 0.6em; align-items: center; }
.usage-bar .name { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.9em; min-width: 0; }
.usage-bar .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-bar .name img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-elev2); }
.usage-bar .track { background: var(--bg-elev2); border-radius: 3px; height: 16px; overflow: hidden; position: relative; }
.usage-bar .fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); height: 100%; min-width: 1px; transition: width 0.2s ease; }
.usage-bar .pct { font-variant-numeric: tabular-nums; text-align: right; font-size: 0.85em; color: var(--text-dim); }

@media (max-width: 520px) {
  .usage-bar { grid-template-columns: 110px 1fr 48px; gap: 0.4em; }
}

/* ----- Empty states ----- */
.empty-state {
  color: var(--text-dim);
  font-style: italic;
  padding: 1.1em;
  text-align: center;
  line-height: 1.5;
}
.empty-state.no-data { font-style: normal; }
.empty-state.no-data strong { color: var(--warn); font-style: normal; }
td.empty-state { white-space: normal; }

/* ----- Hero / intro ----- */
.hero {
  max-width: var(--maxw);
  margin: 1.2em auto 0;
  padding: 0 1.2em;
}
.hero-lead {
  margin: 0;
  color: var(--text);
  font-size: 1.02em;
  line-height: 1.55;
  max-width: 70ch;
}
.hero-lead strong { color: var(--text); }

/* ----- Methodology <details> ----- */
.methodology {
  margin-top: 0.9em;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9em;
}
.methodology > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.65em 1em;
  color: var(--accent);
  font-weight: 500;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.methodology > summary::-webkit-details-marker { display: none; }
.methodology > summary::before {
  content: "▸";
  font-size: 0.85em;
  color: var(--text-dim);
  transition: transform 0.15s;
}
.methodology[open] > summary::before { transform: rotate(90deg); }
.methodology > summary:hover { color: var(--accent-2); }
.methodology > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.methodology-body {
  padding: 0.2em 1.2em 1em;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  line-height: 1.6;
}
.methodology-body p { margin: 0.8em 0; max-width: 80ch; }
.methodology-body strong { color: var(--text); }
.methodology-body em { color: var(--text); font-style: normal; }
.methodology-body ul { margin: 0.8em 0; padding-left: 1.2em; max-width: 80ch; }
.methodology-body li { margin: 0.55em 0; }
.methodology-note { font-size: 0.95em; opacity: 0.92; }

/* ----- Panel descriptions ----- */
.panel-desc {
  margin: -0.4em 0 0.9em 0;
  color: var(--text-dim);
  font-size: 0.85em;
  line-height: 1.45;
}

/* ----- Buttons ----- */
.btn {
  font: inherit;
  font-size: 0.85em;
  border-radius: var(--radius);
  padding: 0.45em 0.9em;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elev2);
  color: var(--text);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:hover { background: var(--row-hover); border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn-subtle { background: transparent; color: var(--text-dim); }
.btn-subtle:hover { color: var(--text); border-color: var(--bad); background: var(--bg-elev2); }

/* ----- Pool CTA + actions ----- */
.pool-cta {
  margin-top: 0.5em;
  padding: 0.9em 1em;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev2);
}
.pool-cta[hidden] { display: none; }
.pool-cta p {
  margin: 0 0 0.7em 0;
  color: var(--text-dim);
  font-size: 0.88em;
  line-height: 1.5;
}
.pool-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8em;
  flex-wrap: wrap;
}
.pool-actions .hint { flex: 1 1 auto; }
.pool-actions .btn[hidden] { display: none; }

/* ----- Footer ----- */
.site-footer {
  max-width: var(--maxw);
  margin: 0.5em auto 2.4em;
  padding: 1.3em 1.2em 0;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.82em;
  line-height: 1.55;
}
.site-footer p { margin: 0.55em 0; }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-freshness {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.footer-freshness:empty { display: none; }
.patch-blend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.5em;
  margin: 0.55em 0;
  font-size: 0.92em;
}
.patch-blend-label { color: var(--text-dim); cursor: help; }
.patch-blend-list { display: inline-flex; flex-wrap: wrap; gap: 0.4em; }
.patch-chip {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1em 0.6em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.patch-chip strong { color: var(--text); font-weight: 600; }
.patch-chip:first-child { border-color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4em 0.6em; align-items: baseline; }
.footer-sep { color: var(--border); }
.footer-legal {
  font-size: 0.92em;
  opacity: 0.8;
  max-width: 100ch;
  margin-top: 0.8em;
}

@media (max-width: 900px) {
  .hero { margin-left: 1em; margin-right: 1em; padding: 0; }
  .site-footer { margin-left: 1em; margin-right: 1em; }
}
@media (max-width: 520px) {
  .hero { margin-left: 0.8em; margin-right: 0.8em; }
  .site-footer { margin-left: 0.8em; margin-right: 0.8em; }
  .hero-lead { font-size: 0.98em; }
}

/* ============================================================
   Draft assistant — League champ-select-style large tiles
   ============================================================ */

/* Mode toggle (Pool analysis / Draft assistant) */
.mode-switch {
  max-width: var(--maxw);
  margin: 0.2em auto -0.4em;
  padding: 0 1.2em;
  display: flex;
  gap: 0.5em;
}
.mode-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 0.45em 1.2em;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
}
.mode-btn:hover { color: var(--text); border-color: var(--accent); }
.mode-btn.active { background: var(--accent); color: #06122b; border-color: var(--accent); }

/* Draft layout */
.draft-view { max-width: var(--maxw); margin: 1em auto; padding: 0 1.2em; }
.draft-empty {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2em 1.4em; color: var(--text-dim);
}
.draft-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1em; align-items: start; }
.draft-reco { position: sticky; top: 64px; }
.draft-flag {
  margin: 0.8em 0 0; padding: 0.6em 0.8em; border-radius: var(--radius);
  font-size: 0.92em; background: rgba(248,81,73,0.12); border: 1px solid var(--bad); color: var(--bad);
}
.enemy-bar { display: flex; gap: 0.5em; margin-bottom: 0.9em; }
.enemy-search {
  flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: 0.6em 0.8em; font-size: 1em;
}
.enemy-search:focus { outline: none; border-color: var(--accent); }

/* Champion tiles — big square portrait + name caption (champ-select feel) */
.champ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
}
.enemy-grid { max-height: 64vh; overflow-y: auto; padding: 2px 6px 2px 2px; }
.reco-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.champ-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.45em;
  cursor: pointer;
  border: 2px solid transparent; border-radius: 9px;
  padding: 7px 5px 9px; background: var(--bg-elev2);
  transition: transform .1s ease, border-color .1s ease, background .1s ease;
}
.champ-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 6px; display: block; background: var(--bg);
}
.champ-tile .tile-name {
  font-size: 0.9em; text-align: center; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.champ-tile .tile-name .star { color: var(--accent-2); }
.champ-tile:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--row-hover); }
.champ-tile.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-pop); }
.champ-tile.nodata { opacity: 0.45; }

/* Recommendation tile extras: Δ2 badge, best/main ribbons */
.champ-tile .tile-d2 {
  position: absolute; top: 9px; right: 9px;
  font-size: 0.82em; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(0,0,0,0.62); font-variant-numeric: tabular-nums;
}
.tile-d2.pos { color: var(--good); }
.tile-d2.neg { color: var(--bad); }
.tile-d2.na { color: var(--text-dim); }
.champ-tile.best { border-color: var(--good); box-shadow: inset 0 0 0 2px var(--good); }
.tile-tag {
  position: absolute; top: 7px; left: 7px; z-index: 1;
  font-size: 0.66em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
}
.tile-tag.best { background: var(--good); color: #04210f; }
.tile-tag.blind { background: var(--accent); color: #06122b; }
.reco-empty { color: var(--text-dim); padding: 0.4em 0; }

/* Combined win% caption under reco tiles (multi-role draft) */
.champ-tile .tile-win {
  font-size: 0.78em; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums; margin-top: -0.2em;
}
.champ-tile.best .tile-win { color: var(--good); }

/* Enemy-team slots (Draft mode) — one big tile per role */
.enemy-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 0.9em; }
.enemy-slot {
  position: relative; cursor: pointer; min-height: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px solid var(--border); border-radius: 9px; padding: 6px 4px; background: var(--bg-elev2);
  transition: border-color .1s, background .1s, transform .1s;
}
.enemy-slot:hover { transform: translateY(-1px); border-color: var(--accent); }
.enemy-slot:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.enemy-slot.focused { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.enemy-slot.your-role { background: rgba(125,109,240,0.12); }
.enemy-slot .slot-role {
  font-size: 0.64em; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-dim); display: flex; align-items: center; gap: 3px;
}
.enemy-slot .slot-you { font-size: 0.9em; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--accent-2); }
.enemy-slot img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; background: var(--bg); }
.enemy-slot .slot-plus { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1.7em; color: var(--text-dim); min-height: 46px; }
.enemy-slot .slot-clear {
  position: absolute; top: 3px; right: 3px; width: 1.4em; height: 1.4em; border-radius: 50%;
  border: none; cursor: pointer; background: rgba(0,0,0,0.6); color: #fff; font-weight: bold;
  line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center;
}
.enemy-slot .slot-clear:hover { background: var(--bad); }
.enemy-picker-label-row { color: var(--text-dim); font-size: 0.85em; margin: 0 0 0.5em; }
.enemy-picker-label-row strong { color: var(--accent); text-transform: capitalize; }

/* Per-role breakdown for the recommended pick */
.reco-breakdown { display: block; margin-top: 0.4em; font-size: 0.85em; }
.reco-breakdown .bk-item { display: inline-block; margin: 0 0.6em 0.2em 0; color: var(--text-dim); }
.reco-breakdown .bk-item .pos { color: var(--good); font-weight: 700; }
.reco-breakdown .bk-item .neg { color: var(--bad); font-weight: 700; }

/* Cross-role threat opt-in bar (Pool analysis) */
.xrole-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7em 0.9em;
}
.xrole-text { flex: 1; min-width: 220px; font-size: 0.9em; }
.xrole-text .xrole-hint { color: var(--text-dim); }
.xrole-opts { display: flex; flex-wrap: wrap; gap: 0.4em; }
.xrole-opt {
  cursor: pointer; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev2);
  color: var(--text-dim); padding: 0.3em 0.8em; font-size: 0.85em; font-weight: 600;
}
.xrole-opt:hover { border-color: var(--accent-2); color: var(--text); }
.xrole-opt.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Role pill marking a cross-role (off-lane) threat in tables */
.role-badge {
  display: inline-block; font-size: 0.62em; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle;
  padding: 1px 4px; border-radius: 4px; margin-left: 3px; background: var(--accent-2); color: #fff;
}

/* "Good against" per-role matchup lists in the simulated best-adds table */
/* One row: TOP group, then JNG group to its right; each group is one icon tall.
   nowrap so JNG never drops below TOP — it always starts past the reserved
   7-top track (the table cell widens; .scroll-x handles narrow viewports). */
.shines { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 18px; }
.shines-group { display: flex; align-items: center; gap: 8px; }
.shines-label {
  flex: 0 0 auto; font-size: 0.68em; font-weight: 800; letter-spacing: 0.04em; color: var(--text-dim);
}
.shines-foes { display: flex; flex-wrap: nowrap; gap: 8px; }
/* Reserve the lane track at 7 chips (34px each + 8px gaps) so the next role's
   group always begins at the same x, no matter how many tops a row has. */
.shines-lane .shines-foes { width: calc(7 * 34px + 6 * 8px); }
/* Default (single-role) Best adds reuses the same chips but wraps freely. */
.handles-chips { flex-wrap: wrap; gap: 8px 10px; }
.muted-dash { color: var(--text-dim); font-size: 0.85em; align-self: center; }

/* Best blind picks — responsive card grid (fills the wide panel, stays short) */
.blindpicks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 8px; }
.bp-card {
  display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left;
  background: var(--bg-elev2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; color: var(--text);
  transition: border-color .12s, background .12s, transform .1s;
}
.bp-card:hover { border-color: var(--accent); background: var(--row-hover); transform: translateY(-1px); }
.bp-img { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--bg); }
.bp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-name { font-size: 0.9em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-meta { font-size: 0.78em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bp-meta .pos { color: var(--good); font-weight: 700; }
.bp-meta .neg { color: var(--bad); font-weight: 700; }
.bp-meta .bp-risk { color: var(--text); font-weight: 700; }
.bp-meta .bp-dim { color: var(--text-dim); }
.bp-card .add-plus { margin-left: auto; color: var(--text-dim); font-weight: 700; flex: 0 0 auto; }
.bp-card:hover .add-plus { color: var(--good); }
.shines-foe { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; width: 34px; }
.shines-foe img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  background: var(--bg-elev2); border: 1px solid var(--border);
}
/* Lead with the improvement (always positive); raw Δ2 is quiet fine print. */
.shines-improve { margin-top: 1px; font-size: 0.74em; font-weight: 700; line-height: 1; color: var(--good); font-variant-numeric: tabular-nums; }
.shines-d2 { font-size: 0.58em; font-weight: 600; line-height: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; opacity: 0.8; }

@media (max-width: 900px) {
  .draft-cols { grid-template-columns: 1fr; }
  .draft-reco { position: static; }
  .enemy-grid { max-height: none; }
}
@media (max-width: 520px) {
  .draft-view, .mode-switch { padding-left: 0.8em; padding-right: 0.8em; }
  .champ-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
}