:root {
  --bg: #0e1015;
  --panel: #171a21;
  --panel-2: #1e222b;
  --border: #2b3040;
  --text: #e8e6e3;
  --dim: #8a8f9e;
  --gold: #c8aa6e;
  --ally: #4fa3ff;
  --enemy: #ff5f6b;
  --good: #57c785;
  --bad: #e06c75;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border);
}
header h1 { margin: 0; font-size: 22px; letter-spacing: 0.5px; }
header h1 span { color: var(--gold); }
.header-meta { color: var(--dim); font-size: 12.5px; flex: 1; }

/* --- one control family for the whole top bar -----------------------------
   Buttons and dropdown triggers share this box exactly. Dropdown menus are
   custom-drawn (a native <select> popup is painted by the OS and cannot be
   themed), so the open list matches the site rather than the platform. */
.ctl {
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.ctl:hover { border-color: var(--gold); }
.ctl:focus-visible { border-color: var(--gold); outline: none; }
.ctl i { font-style: normal; color: var(--dim); font-size: 11px;
         text-transform: uppercase; letter-spacing: 1px; }
.ctl b { font-weight: 600; }

/* dropdown */
.dd { position: relative; }
.dd > summary { list-style: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after {                      /* chevron, drawn not inherited */
  content: ""; width: 8px; height: 8px; margin-left: 1px;
  border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim);
  transform: translateY(-2px) rotate(45deg);
}
.dd[open] > summary { border-color: var(--gold); background: var(--panel); }
.dd[open] > summary::after { transform: translateY(1px) rotate(-135deg); border-color: var(--gold); }
.dd-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 15;
  min-width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.dd-wide { left: auto; right: 0; padding: 8px 10px; font-size: 12.5px; color: var(--dim); }
.dd-wide td { padding: 2px 8px; border: none; white-space: nowrap; }
.dd-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 5px; cursor: pointer;
  font-size: 13px; color: var(--text);
}
.dd-opt:hover { background: var(--panel-2); }
.dd-opt.active { color: var(--gold); }
.dd-opt.active::before { content: "\2713"; margin-left: -6px; font-size: 11px; }
.dd-opt:not(.active)::before { content: ""; width: 6px; margin-left: -6px; }
.dd-opt.disabled { color: var(--dim); cursor: not-allowed; opacity: .55; }
.dd-opt.disabled:hover { background: none; }
.dd-opt .note { color: var(--dim); font-size: 11px; }

button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
button:hover { border-color: var(--gold); }
button.ghost { background: transparent; color: var(--dim); }
button.ghost:hover { color: var(--gold); }

#key-hint { color: var(--gold); font-size: 12px; display: inline-flex; align-items: center; }
.reset-bar {
  display: inline-block; width: 96px; height: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden;
}
.reset-bar i {
  display: block; height: 100%; width: 0;
  background: var(--bad);
  animation: reset-fill 1s linear forwards;
}
@keyframes reset-fill { to { width: 100%; } }
#reset.arming {
  color: var(--bad);
  border-color: var(--bad);
  animation: arm-pulse 1s linear infinite;
}
@keyframes arm-pulse { 50% { opacity: 0.45; } }

kbd {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 0 5px; font-size: 11px; color: var(--text);
}

#live.live-on { color: var(--gold); border-color: var(--gold); }
#live.live-synced { color: var(--good); border-color: var(--good); }
#live.live-synced::before { content: "\25CF\00a0"; }
.live-status {
  padding: 6px 20px;
  color: var(--dim);
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.live-status a { color: var(--gold); }
.live-status code { color: var(--text); }
body.live-locked .slot { cursor: default; }
body.live-locked .slot:hover { border-color: var(--border); }
body.live-locked .slot .clear,
body.live-locked .ban-chip button,
body.live-locked #add-ban,
body.live-locked #reset { visibility: hidden; }

.bans-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  min-height: 46px;
}
.bans-label { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
#bans { display: flex; gap: 6px; flex-wrap: wrap; }
.ban-chip {
  display: flex; align-items: center; gap: 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px 2px 2px;
  font-size: 13px;
}
.ban-chip img { width: 22px; height: 22px; border-radius: 4px; filter: grayscale(0.8); }
.ban-chip button { border: none; background: none; color: var(--dim); padding: 0 2px; font-size: 14px; }
.ban-chip button:hover { color: var(--enemy); }

main {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 250px;
  gap: 16px;
  padding: 16px 20px;
  max-width: 1250px;
  margin: 0 auto;
}

.team h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; margin: 2px 0 10px; }
.ally-h { color: var(--ally); }
.enemy-h { color: var(--enemy); }

.slot {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
  cursor: pointer;
  min-height: 52px;
}
.slot:hover { border-color: var(--gold); }
.slot .lane-tag {
  width: 34px;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  flex-shrink: 0;
}
.slot img { width: 36px; height: 36px; border-radius: 6px; }
.slot .champ-name { flex: 1; font-size: 13.5px; }
.slot .empty { color: var(--dim); font-size: 13px; flex: 1; }
.slot .clear {
  border: 1px solid var(--border); border-radius: 5px; background: none;
  color: var(--dim); font-size: 14px; padding: 1px 6px;
}
.slot .clear:hover { color: var(--enemy); border-color: var(--enemy); }
.slot .build {
  border: 1px solid var(--border); border-radius: 5px;
  color: var(--dim); text-decoration: none;
  /* same box as the clear button, centered on the icon */
  min-width: 23px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.slot .build:hover { color: var(--gold); border-color: var(--gold); }

/* Rows carry the same vertical rhythm as the main table, but the box is
   content-sized: the ally column is grid-stretched to the center panel, and
   the center panel grows when "show all" expands the list - the bans box must
   not follow it. */
#team-ally { display: flex; flex-direction: column; }
.panel.ban-panel {
  min-height: 0;   /* .panel sets 420px for the center column; not here */
  padding: 8px 8px 6px;
  flex: 0 0 auto;  /* never absorb the column's leftover height */
}
.ban-h {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px;
  margin: 14px 0 8px; color: var(--gold);
}
#ban-context { margin-bottom: 5px; display: block; line-height: 1.25; }
.ban-row {
  display: flex; align-items: center; gap: 7px;
  padding: 1px 3px; border-radius: 5px;
  font-size: 12.5px;
  height: 31px;   /* matches the main table's row rhythm */
}
.ban-row.low { opacity: 0.45; }
.ban-rank { color: var(--dim); font-size: 11px; width: 14px; text-align: right; }
.ban-row img { width: 22px; height: 22px; border-radius: 4px; }
.ban-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ban-lane { color: var(--dim); font-size: 10px; letter-spacing: 0.5px; }
.ban-threat { color: var(--enemy); font-variant-numeric: tabular-nums; font-size: 12px; }
.ban-hint { color: var(--dim); font-size: 12px; padding: 6px 2px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 420px;
}

#lane-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#lane-tabs button { flex: 1; padding: 7px 0; color: var(--dim); }
#lane-tabs button.active {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--panel-2);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  min-height: 22px;
}
#mode-line { color: var(--dim); font-size: 12.5px; }
#mode-line b { color: var(--text); font-weight: 600; }
.explain-toggle { color: var(--dim); font-size: 12.5px; user-select: none; cursor: pointer; white-space: nowrap; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  color: var(--dim);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 4px 8px; border-bottom: 1px solid rgba(43, 48, 64, 0.5); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.champ-cell { display: flex; align-items: center; gap: 7px; }
.champ-cell img { width: 26px; height: 26px; border-radius: 5px; }
tr.low { opacity: 0.45; }
tr.pickable { cursor: pointer; }
tr.pickable:hover td { background: var(--panel-2); }
tr.pickable:hover .champ-cell { color: var(--gold); }
.wpa-pos { color: var(--good); }
.wpa-neg { color: var(--bad); }
.rank { color: var(--dim); width: 20px; }
.note { color: var(--dim); font-size: 12px; white-space: normal; }
.sub { color: var(--dim); font-size: 11px; }
.results-scroll { overflow-x: auto; }
.hint { color: var(--dim); padding: 30px 10px; text-align: center; }
.show-more { margin: 10px auto 0; display: block; }

footer .disclaimer { display: inline-block; margin-top: 6px; opacity: .75; max-width: 720px; }

footer {
  color: var(--dim);
  font-size: 12px;
  text-align: center;
  padding: 14px 20px 22px;
}

/* picker */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5, 6, 10, 0.75);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8vh;
  z-index: 10;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(640px, 92vw);
  max-height: 74vh;
  display: flex; flex-direction: column;
}
.modal-head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
#picker-search {
  flex: 1;
  font: inherit;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
}
#picker-search:focus { border-color: var(--gold); }
.champ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
}
.champ-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}
.champ-tile:hover { border-color: var(--gold); background: var(--panel-2); }
.champ-tile img { width: 44px; height: 44px; border-radius: 8px; }
.champ-tile span { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.champ-tile.taken { opacity: 0.25; pointer-events: none; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr 1fr; }
  /* Rows carry the same vertical rhythm as the main table, but the box is
   content-sized: the ally column is grid-stretched to the center panel, and
   the center panel grows when "show all" expands the list - the bans box must
   not follow it. */
#team-ally { display: flex; flex-direction: column; }
.panel.ban-panel {
  min-height: 0;   /* .panel sets 420px for the center column; not here */
  padding: 8px 8px 6px;
  flex: 0 0 auto;  /* never absorb the column's leftover height */
}
.ban-h {
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px;
  margin: 14px 0 8px; color: var(--gold);
}
#ban-context { margin-bottom: 5px; display: block; line-height: 1.25; }
.ban-row {
  display: flex; align-items: center; gap: 7px;
  padding: 1px 3px; border-radius: 5px;
  font-size: 12.5px;
  height: 31px;   /* matches the main table's row rhythm */
}
.ban-row.low { opacity: 0.45; }
.ban-rank { color: var(--dim); font-size: 11px; width: 14px; text-align: right; }
.ban-row img { width: 22px; height: 22px; border-radius: 4px; }
.ban-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ban-lane { color: var(--dim); font-size: 10px; letter-spacing: 0.5px; }
.ban-threat { color: var(--enemy); font-variant-numeric: tabular-nums; font-size: 12px; }
.ban-hint { color: var(--dim); font-size: 12px; padding: 6px 2px; }
.panel { grid-column: 1 / -1; grid-row: 2; }
}