@font-face { font-family: 'Cinzel'; font-weight: 400; src: url('/fonts/cinzel/cinzel-latin-400-normal.woff2') format('woff2'); font-display: swap; }
/* ==========================================================================
   DraftPlus — design tokens
   Blue = your team, red = the enemy, gold = highlights (League's own palette).
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #080c14;
  --bg-2: #0c111b;
  --surface: #111827;
  --surface-2: #161f30;
  --surface-3: #1c2639;
  --border: #212b3d;
  --border-2: #2c384f;
  --text: #e8edf5;
  --text-2: #b6c0d1;
  --muted: #7d889d;
  --faint: #4c5669;

  --gold: #c8aa6e;
  --gold-2: #f0e6d2;
  --gold-dim: rgba(200, 170, 110, 0.14);
  --ally: #3d8bff;
  --ally-dim: rgba(61, 139, 255, 0.14);
  --enemy: #ff5a5f;
  --enemy-dim: rgba(255, 90, 95, 0.13);
  --good: #3ccf8e;
  --bad: #ff6b6b;
  --warn: #f5b942;
  --phys: #f0904a;
  --magic: #5e8cff;
  --true: #dfe4ec;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 3px rgba(200, 170, 110, 0.25);
}

* { box-sizing: border-box; }
/* Author `display` rules would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font: 13.5px/1.45 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(61, 139, 255, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(200, 170, 110, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
td, .win-big, .chip, .status, .profile-status { font-variant-numeric: tabular-nums; }
b { font-weight: 600; }

::selection { background: rgba(200, 170, 110, 0.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- form controls ---------- */
input, select, button { font: inherit; color: inherit; }
input, select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input::placeholder { color: var(--faint); }
input:hover, select:hover { border-color: var(--border-2); }
input:focus, select:focus { border-color: var(--gold); box-shadow: var(--ring); }
select { appearance: none; padding-right: 26px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px, calc(100% - 10px) 15px; background-size: 4px 4px; background-repeat: no-repeat; }
input.invalid { border-color: var(--bad); }

.btn {
  height: 34px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-2); font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-2); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn.icon { width: 34px; padding: 0; font-size: 15px; }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; }

.btn-primary {
  width: 100%; height: 44px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 700; font-size: 14px; letter-spacing: 0.02em; color: #1a1408;
  background: linear-gradient(180deg, #e2c98f, #c8aa6e 55%, #a88a50);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 18px rgba(200, 170, 110, 0.2);
  transition: filter 0.15s, transform 0.05s;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { filter: grayscale(0.4) brightness(0.8); cursor: wait; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 24px;
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { margin: 0; line-height: 0; }
.logo { height: 38px; width: auto; display: block; }

.live-status {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
}
.live-status:empty { display: none; }
.live-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.live-status.idle::before { background: var(--gold); }
.live-status.live { color: var(--text); border-color: rgba(60, 207, 142, 0.35); background: rgba(60, 207, 142, 0.08); }
.live-status.live::before { background: var(--good); box-shadow: 0 0 0 3px rgba(60, 207, 142, 0.2); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(60, 207, 142, 0); } }

.profile { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.profile-icon { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; cursor: help; box-shadow: 0 0 0 3px var(--gold-dim); }
.profile-field { display: flex; position: relative; }
.ac-list.player-suggest { left: 0; right: 0; max-height: 340px; overflow-y: auto; }
.player-suggest li img { border-radius: 50%; }
.player-suggest .tag { color: var(--muted); font-weight: 400; }
.player-suggest li.active .tag { color: var(--gold); }
.player-suggest .lvl { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; }
.player-suggest .note { color: var(--muted); font-size: 12px; cursor: default; font-weight: 400; }
.player-suggest .note:hover { background: none; }
.profile-field input { width: 210px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.profile-field select { width: 74px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.profile-status { color: var(--muted); font-size: 12px; max-width: 200px; cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-status.error { color: var(--bad); }
.profile-status.partial { color: var(--warn); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; padding: 20px 24px 16px; align-items: start; }
.sidebar > * { flex-shrink: 0; }
.sidebar { display: flex; flex-direction: column; gap: 12px; }
.content { min-width: 0; display: flex; flex-direction: column; }

.card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.card-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ---------- lane picker ---------- */
.lane-icon {
  display: inline-block; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.lane-top { --icon: url('img/lanes/top.svg'); }
.lane-jungle { --icon: url('img/lanes/jungle.svg'); }
.lane-middle { --icon: url('img/lanes/middle.svg'); }
.lane-bottom { --icon: url('img/lanes/bottom.svg'); }
.lane-support { --icon: url('img/lanes/support.svg'); }

.lane-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lane-picker button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0 6px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--muted);
  font-size: 11px; font-weight: 600; transition: all 0.15s;
}
.lane-picker button .lane-icon { width: 22px; height: 22px; }
.lane-picker button:hover { color: var(--text); border-color: var(--border-2); }
.lane-picker button.active { color: var(--gold-2); border-color: var(--gold); background: linear-gradient(180deg, rgba(200, 170, 110, 0.2), rgba(200, 170, 110, 0.05)); box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.25) inset; }
.lane-picker button.active .lane-icon { color: var(--gold); }

/* ---------- team slots ---------- */
.team { --team: var(--ally); --team-dim: var(--ally-dim); }
.team.enemy { --team: var(--enemy); --team-dim: var(--enemy-dim); }
.team { border-top: 2px solid var(--team); }
.team-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--team); box-shadow: 0 0 10px var(--team); }
.slots { display: grid; gap: 5px; }

.pick {
  position: relative;
  display: grid; grid-template-columns: 22px 38px 1fr; align-items: center; gap: 10px;
  padding: 5px 6px 5px 8px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border);
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.pick:hover { border-color: var(--border-2); }
.pick:focus-within { border-color: var(--team); background: var(--surface); }
.pick .lane { position: relative; display: grid; place-items: center; color: var(--muted); cursor: grab; }
.pick .portrait {
  position: relative; width: 34px; height: 34px; border-radius: 7px; overflow: hidden; cursor: grab;
  display: grid; place-items: center;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--border-2) inset;
}
.pick .portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.pick .portrait .lane-icon { display: none; }
.pick .portrait.empty img { display: none; }
.pick .portrait.empty { background: transparent; box-shadow: none; border: 1px dashed var(--border-2); }
.pick:not(:has(.portrait.empty)) .portrait { box-shadow: 0 0 0 2px var(--team); }
.pick input { height: 34px; background: transparent; border-color: transparent; padding-left: 4px; font-weight: 600; font-size: 14px; }
.pick input:hover { border-color: transparent; }
.pick input:focus { box-shadow: none; border-color: transparent; }
.pick input::placeholder { font-weight: 500; color: var(--faint); }
.pick input.hover { font-style: italic; font-weight: 500; color: var(--text-2); }
.pick:has(input.hover) .portrait { box-shadow: 0 0 0 2px var(--team); opacity: 0.75; }
.pick:has(input.hover) { border-style: dashed; }
/* Only flag unknown names once you've left the field, not while typing. */
.pick:has(input.invalid:not(:focus)) { border-color: var(--bad); }
.pick input.invalid { border-color: transparent; }
.pick input.invalid:not(:focus) { color: var(--bad); }

/* Guessed lane (?) and pinned lane (•) markers on the lane icon. */
.pick.inferred .lane::after, .pick.pinned .lane::after {
  position: absolute; right: -6px; top: -6px; width: 13px; height: 13px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 800; line-height: 1;
}
.pick.inferred .lane::after { content: '?'; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border-2); }
.pick.pinned .lane::after { content: ''; background: var(--gold); border: 2px solid var(--bg-2); }

/* Your own slot in your team. */
.pick.mine { border-color: rgba(200, 170, 110, 0.5); background: linear-gradient(90deg, var(--gold-dim), transparent 70%); }
.pick.mine .lane { color: var(--gold); cursor: default; }
.pick.mine .portrait { cursor: default; opacity: 0.6; filter: grayscale(0.7); }
.pick.mine input { opacity: 0.65; }
.pick.mine input::placeholder { color: var(--gold); font-weight: 700; }

.pick.dragging { opacity: 0.35; }
.pick.drop-target { border-color: var(--gold); background: var(--gold-dim); box-shadow: var(--ring); }

/* Autocomplete */
.ac { position: relative; min-width: 0; }
.ac-list {
  position: absolute; top: calc(100% + 6px); left: -54px; right: -6px; z-index: 30;
  margin: 0; padding: 4px; list-style: none;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.ac-list li { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.ac-list.up { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.6); }
.ac-list li img { width: 24px; height: 24px; border-radius: 5px; }
.ac-list li:hover { background: var(--surface-3); }
.ac-list li.active { background: var(--gold-dim); color: var(--gold-2); }

.swap-row { display: flex; justify-content: center; margin: -4px 0; position: relative; z-index: 1; }
.swap {
  height: 30px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-2);
  font-size: 12px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); transition: all 0.15s;
}
.swap:hover { color: var(--gold-2); border-color: var(--gold); }

.bans { display: flex; flex-wrap: wrap; gap: 6px; }
.bans img { width: 32px; height: 32px; border-radius: 6px; filter: grayscale(1) brightness(0.7); box-shadow: 0 0 0 1px var(--border-2); }

.status { margin: 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; }
.status.error { color: var(--bad); }

/* ---------- settings ---------- */
.field { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--text-2); }
.field input, .field select { height: 30px; }
.toggle { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; color: var(--text-2); }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch { position: relative; width: 32px; height: 18px; flex: none; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-2); transition: background 0.15s, border-color 0.15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.toggle input:checked + .switch { background: rgba(200, 170, 110, 0.3); border-color: var(--gold); }
.toggle input:checked + .switch::after { transform: translateX(14px); background: var(--gold-2); }
.toggle input:focus-visible + .switch { box-shadow: var(--ring); }

.sync { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.sync .status { text-align: left; font-size: 11.5px; }

/* ---------- draft card ---------- */
.draft { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-bottom: 18px; }
.draft-panel { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: help; }
.conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: help; }
.win-figures { display: flex; align-items: baseline; gap: 10px; }
.win-big { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.win-big.good { color: var(--good); }
.win-big.bad { color: var(--bad); }
.win-vs { color: var(--muted); font-size: 13px; }
.winbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); cursor: help; }
.winbar .ally { background: linear-gradient(90deg, #2563eb, var(--ally)); }
.winbar .enemy { background: linear-gradient(90deg, var(--enemy), #c0303a); }
.winbar > div { transition: width 0.4s ease; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border); }
.chip b { color: var(--text); }
.chip b.good { color: var(--good); }
.chip b.bad { color: var(--bad); }
.chip.accent { color: var(--gold-2); border-color: rgba(200, 170, 110, 0.4); background: var(--gold-dim); }

.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend i { width: 8px; height: 8px; border-radius: 2px; margin-left: 4px; }
.legend .phys { background: var(--phys); }
.legend .magic { background: var(--magic); }
.legend .true { background: var(--true); }
.dmg-team { display: grid; grid-template-columns: 52px 1fr 112px; align-items: center; gap: 10px; font-size: 12px; cursor: help; }
.dmg-team-label { font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.dmg-team-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ally); }
.dmg-team.enemy .dmg-team-label::before { background: var(--enemy); }
.dmg-team-pct { color: var(--muted); text-align: right; }
.dmg-empty { color: var(--faint); font-size: 12px; }
.note { font-size: 12px; padding: 7px 10px; border-radius: var(--radius-sm); }
.note.warn { color: var(--warn); background: rgba(245, 185, 66, 0.08); border: 1px solid rgba(245, 185, 66, 0.25); }
.note.info { color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); }

.dmg { display: inline-flex; align-items: center; gap: 6px; }
.dmg-bar { display: inline-flex; width: 52px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.dmg-bar.wide { width: 100%; height: 8px; }
.dmg-bar i { display: block; height: 100%; }
.dmg-bar .phys { background: var(--phys); }
.dmg-bar .magic { background: var(--magic); }
.dmg-bar .true { background: var(--true); }
.dmg-label { color: var(--muted); font-size: 11px; width: 36px; text-align: left; }
td.balances .dmg-label { color: var(--gold); font-weight: 600; }
.helps { color: var(--gold); font-size: 11px; width: 10px; }

/* ---------- tabs & caption ---------- */
.toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 42px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.toolbar .tabs { border-bottom: 0; margin-bottom: -1px; }
.toolbar .status { text-align: right; padding-bottom: 10px; }
.tabs { display: flex; gap: 22px; }
.tabs button {
  position: relative; padding: 10px 2px; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 14px; transition: color 0.15s;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--gold-2); }
.tabs button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 12px rgba(200, 170, 110, 0.6); }
.caption { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ---------- results table ---------- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: auto; max-height: calc(100vh - 330px); min-height: 240px; }
.table-wrap:has(> table[hidden]) { display: none; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 0 10px; height: 46px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
th {
  position: sticky; top: 0; z-index: 2; height: 40px;
  background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
th:nth-child(-n + 2), td:nth-child(-n + 2) { text-align: left; }
/* Rank and champion shrink to fit; the extra width goes to the number columns. */
th:nth-child(-n + 2) { width: 1%; }
td:first-child { color: var(--faint); font-size: 12px; width: 1%; }
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:first-child td { background: rgba(200, 170, 110, 0.07); }
tbody tr:first-child td:first-child { color: var(--gold); font-weight: 700; box-shadow: 2px 0 0 var(--gold) inset; }
th img { width: 24px; height: 24px; border-radius: 6px; vertical-align: middle; }
/* Champion portrait headers: centred and as large as the header row allows */
th.col-ally, th.col-enemy { text-align: center; padding: 0 4px; }
th.col-ally img, th.col-enemy img { width: 34px; height: 34px; }
th.sortable { cursor: pointer; user-select: none; transition: color 0.15s; }
th.sortable:hover { color: var(--text); }
th.sorted { color: var(--gold); }
th .arrow { font-size: 8px; margin-left: 4px; }
th.col-enemy { box-shadow: inset 0 -2px 0 var(--enemy); }
th.col-ally { box-shadow: inset 0 -2px 0 var(--ally); }
th.col-blind { box-shadow: inset 0 -2px 0 var(--warn); }
th.col-dmg, td.col-dmg, th.col-conf, td.col-conf { text-align: center; }

.champ { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.champ img { width: 32px; height: 32px; border-radius: 7px; box-shadow: 0 0 0 1px var(--border-2); }
.score { font-weight: 700; font-size: 14px; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.na, .muted { color: var(--faint); }
.risky { color: var(--warn); font-size: 13px; cursor: help; }
.mini { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.mini img { width: 20px; height: 20px; border-radius: 5px; }

.pool-games { font-size: 10.5px; font-weight: 700; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--text-2); background: var(--surface-3); cursor: help; }
.pool-games.a-lot { color: #1a1408; background: var(--gold); }
.pool-mastery { width: 22px; height: 22px; flex: none; display: inline-block; background: url('img/mastery-4.webp') center / contain no-repeat; cursor: help; }
.pool-mastery.best { background-image: url('img/mastery-7.webp'); filter: drop-shadow(0 0 4px rgba(200, 170, 110, 0.5)); }

.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; vertical-align: middle; }
.signal i { display: block; width: 4px; border-radius: 1px; background: var(--surface-3); }
.signal i:nth-child(1) { height: 5px; }
.signal i:nth-child(2) { height: 9px; }
.signal i:nth-child(3) { height: 13px; }
.signal.high i.on { background: var(--good); }
.signal.medium i.on { background: var(--warn); }
.signal.low i.on { background: var(--bad); }

/* ---------- empty state ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 72px 24px; border: 1px dashed var(--border-2); border-radius: var(--radius);
  background: radial-gradient(400px 200px at 50% 0%, rgba(200, 170, 110, 0.07), transparent 70%);
}
.empty-state img { opacity: 0.35; height: 38px; width: auto; margin-bottom: 8px; }
.empty-state h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }
.empty-state p { margin: 0; max-width: 460px; color: var(--muted); line-height: 1.6; }
.empty-state b { color: var(--gold-2); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .draft { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; overflow: visible; }
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; }
  .profile { margin-left: 0; width: 100%; }
  .table-wrap { max-height: none; }
}

/* ---------- top-bar actions ---------- */
.btn-go {
  height: 34px; padding: 0 18px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 700; color: #1a1408; white-space: nowrap;
  background: linear-gradient(180deg, #e2c98f, #c8aa6e 55%, #a88a50);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 4px 14px rgba(200, 170, 110, 0.2);
  transition: filter 0.15s, transform 0.05s;
}
.btn-go:hover:not(:disabled) { filter: brightness(1.08); }
.btn-go:active:not(:disabled) { transform: translateY(1px); }
.btn-go:disabled { filter: grayscale(0.4) brightness(0.8); cursor: wait; }

.settings-menu { position: relative; }
.settings-menu summary { list-style: none; display: grid; place-items: center; font-size: 16px; }
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-menu[open] summary { border-color: var(--gold); color: var(--gold-2); background: var(--gold-dim); }
.settings-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 330px;
  padding: 16px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.settings-panel .card-title { margin-bottom: 10px; }
.settings-panel .sync-title { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings-panel .sync { padding: 0; }
.settings-panel .sync .btn { flex: none; white-space: nowrap; }

/* ==========================================================================
   Motion & graphics
   ========================================================================== */

/* ---------- splash-art backdrop behind the draft card ---------- */
.content { position: relative; }
.content > :not(.backdrop) { position: relative; z-index: 1; }
.backdrop {
  position: absolute; z-index: 0; top: -20px; left: -10px; right: -24px; height: 440px;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%), linear-gradient(to right, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to bottom, #000 25%, transparent 100%), linear-gradient(to right, transparent 0%, #000 30%);
}
.backdrop-layer {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center 22%;
  filter: saturate(1.15) brightness(0.9);
  transition: opacity 0.9s ease;
}
.backdrop-layer.shown { opacity: 0.3; }
.draft-panel { background: linear-gradient(180deg, rgba(17, 24, 39, 0.82), rgba(12, 17, 27, 0.9)); backdrop-filter: blur(10px); }

/* ---------- table rows ---------- */
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
tbody tr.row-in { animation: row-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- bars ---------- */
.winbar > div { transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.dmg-bar i { transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- pick slots ---------- */
@keyframes slot-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.025); box-shadow: 0 0 0 1px var(--team), 0 0 22px -2px var(--team); border-color: var(--team); }
  100% { transform: scale(1); }
}
@keyframes portrait-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.pick.pop { animation: slot-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pick.pop .portrait img { animation: portrait-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes hover-pulse { 50% { opacity: 0.45; } }
.pick:has(input.hover) .portrait { animation: hover-pulse 1.8s ease-in-out infinite; }

/* ---------- loading ---------- */
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.table-wrap { position: relative; }
.table-wrap.loading::before {
  content: ''; position: sticky; top: 0; left: 0; z-index: 5; display: block; height: 2px; margin-bottom: -2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) 0 0 / 50% 100% no-repeat;
  animation: shimmer 1.1s linear infinite;
}
.table-wrap.loading tbody, .draft.loading .draft-panel { opacity: 0.6; transition: opacity 0.2s; }
.skeleton { display: grid; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); }
.skeleton i {
  display: block; height: 46px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%) 0 0 / 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton i:first-child { height: 40px; background-color: var(--surface-2); }

/* ---------- your turn ---------- */
@keyframes turn-glow { 50% { box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.7), 0 0 26px rgba(200, 170, 110, 0.45); } }
@keyframes turn-row { 50% { background: rgba(200, 170, 110, 0.2); } }
body.my-turn .live-status { color: var(--gold-2); border-color: var(--gold); background: var(--gold-dim); animation: turn-glow 1.4s ease-in-out infinite; }
body.my-turn .live-status::before { background: var(--gold); box-shadow: none; animation: none; }
body.my-turn-pick .live-status::after { content: '· Your pick'; font-weight: 700; }
body.my-turn-ban .live-status::after { content: '· Your ban'; font-weight: 700; }
body.my-turn .topbar { box-shadow: 0 1px 0 var(--gold), 0 6px 30px -10px rgba(200, 170, 110, 0.5); }
body.my-turn tbody tr:first-child td { animation: turn-row 1.4s ease-in-out infinite; }
body.my-turn .tabs button.active::after { animation: turn-glow 1.4s ease-in-out infinite; }

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- see-through results table over the splash art ---------- */
/* The splash extends down behind the table and fades out towards the bottom. */
.backdrop { bottom: 0; height: auto; }
.backdrop {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 45%, transparent 100%), linear-gradient(to right, transparent 0%, #000 30%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 45%, transparent 100%), linear-gradient(to right, transparent 0%, #000 30%);
}
.table-wrap {
  --table-alpha: 0.72;
  background: rgba(17, 24, 39, var(--table-alpha));
  backdrop-filter: blur(6px) saturate(1.1);
}
/* Header stays nearly opaque so scrolled rows never clash with the labels. */
th { background: rgba(22, 31, 48, 0.96); backdrop-filter: blur(12px); }

/* ==========================================================================
   Team planner
   ========================================================================== */
.view-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.view-switch button { height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: all 0.15s; }
.view-switch button:hover { color: var(--text); }
.view-switch button.active { color: #1a1408; background: linear-gradient(180deg, #e2c98f, #c8aa6e); }
body.view-planner #go, body.view-clash #go { display: none; }

.card-help { margin: -4px 0 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.pool-lanes { display: grid; gap: 8px; }
.pool-lane { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--border); transition: border-color 0.15s; }
.pool-lane:focus-within { border-color: var(--gold); }
.pool-lane.locked { border-color: rgba(200, 170, 110, 0.45); }
.pool-lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 600; color: var(--text-2); }
.pool-lane-head .lane-icon { color: var(--muted); }
.pool-lane.locked .pool-lane-head .lane-icon { color: var(--gold); }
.pool-mode { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.pool-lane.locked .pool-mode { color: var(--gold); }
.pool-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pool-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 2px 0 3px; border-radius: 6px; background: var(--surface-3); font-size: 12px; font-weight: 600; }
.pool-chip img { width: 20px; height: 20px; border-radius: 4px; }
.chip-x { width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.chip-x:hover { color: var(--bad); background: rgba(255, 107, 107, 0.12); }
.pool-input { flex: 1; min-width: 120px; }
.pool-input input { height: 26px; padding: 0 6px; border-color: transparent; background: transparent; font-size: 12.5px; }
.pool-input input:focus { box-shadow: none; border-color: transparent; }
.pool-input .ac-list { left: -4px; right: -4px; }
.pool-actions { display: flex; gap: 8px; margin-top: 12px; }
.pool-actions .btn { flex: 1; }

.planner-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.planner-bar .toggle { padding: 0; }
.planner-bar .status { margin-left: auto; text-align: right; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--border); }
.segmented button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-weight: 600; cursor: pointer; transition: all 0.15s; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface-3); color: var(--gold-2); box-shadow: 0 0 0 1px var(--border-2) inset; }

.teams { display: grid; gap: 10px; transition: opacity 0.2s, filter 0.2s; }
.teams.stale { opacity: 0.4; filter: grayscale(0.6); pointer-events: none; }
.team-card {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 120px minmax(240px, 300px) auto; align-items: center; gap: 18px;
  padding: 12px 16px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(12, 17, 27, 0.95)); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s;
}
.team-card:hover { border-color: var(--border-2); }
.team-card.best { border-color: rgba(200, 170, 110, 0.5); background: linear-gradient(90deg, rgba(200, 170, 110, 0.1), rgba(17, 24, 39, 0.92) 40%); }
.team-card.row-in { animation: row-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.team-rank { font-size: 18px; font-weight: 800; color: var(--faint); text-align: center; }
.team-card.best .team-rank { color: var(--gold); }
.team-members { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.member { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.member-portrait { position: relative; width: 48px; height: 48px; }
.member-portrait img { width: 48px; height: 48px; border-radius: 10px; box-shadow: 0 0 0 2px var(--ally); }
.member-lane { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); }
.member-lane .lane-icon { width: 12px; height: 12px; }
.member-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text-2); }
.member .pool-games, .member .pool-mastery { margin-top: -2px; }
.team-score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.team-wr { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; cursor: help; }
.team-wr.good { color: var(--good); }
.team-wr.bad { color: var(--bad); }
.team-conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: help; }
.team-detail { display: grid; gap: 7px; min-width: 0; }
.chip.ranked { border-color: rgba(200, 170, 110, 0.45); }
.team-pairs { display: grid; gap: 2px; font-size: 12px; color: var(--muted); cursor: help; }
.team-pairs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-pairs b { font-weight: 600; }
.team-damage { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-size: 12px; cursor: help; }
.team-actions .btn { white-space: nowrap; }

@media (max-width: 1300px) {
  .team-card { grid-template-columns: 34px minmax(0, 1fr) 110px; }
  .team-detail, .team-actions { grid-column: 2 / -1; }
}
.member-badges { display: flex; align-items: center; gap: 4px; min-height: 18px; }
.pool-lane-head .mini-toggle { padding: 0; margin-left: 2px; }
.pool-lane.excluded { opacity: 0.55; border-style: dashed; padding-bottom: 6px; }
.pool-lane.excluded .pool-lane-head { margin-bottom: 0; }
.pool-lane.excluded .pool-mode { color: var(--muted); }
.member.excluded { opacity: 0.4; }
.member-empty { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; border: 1px dashed var(--border-2); color: var(--faint); }

/* ---------- most lopsided matchups ---------- */
.matchup-card { grid-template-columns: 34px minmax(0, 1fr) 120px minmax(240px, 300px) auto; }
.versus { display: grid; gap: 6px; min-width: 0; }
.versus .team-members { gap: 6px; }
.versus .member-portrait, .versus .member-portrait img, .versus .member-empty { width: 40px; height: 40px; }
.side-enemy .member-portrait img { box-shadow: 0 0 0 2px var(--enemy); }
.vs-divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: 0.2em; }
.vs-divider::before, .vs-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); }
.matchup-card .team-pairs b { font-weight: 600; }

/* ==========================================================================
   Runes & build panel (right of the recommendations)
   ========================================================================== */
.results-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
body.build-open .results-split { grid-template-columns: minmax(0, 1fr) 470px; }
body.build-open .col-ally, body.build-open .col-enemy, body.build-open .col-dmg, body.build-open .col-pr { display: none; }
tbody tr.clickable { cursor: pointer; }

.build-panel {
  position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: rgba(17, 24, 39, 0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.build-head { display: flex; align-items: center; gap: 12px; }
.build-head > img { width: 48px; height: 48px; border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--gold); }
.build-title { min-width: 0; flex: 1; }
.build-name { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.build-source { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); padding: 2px 6px; border: 1px solid var(--gold-dim); background: var(--gold-dim); border-radius: var(--radius-sm); }
.build-sub { font-size: 12px; color: var(--muted); }
.build-close { align-self: flex-start; }
.build-variant { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.build-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.build-toggles > .segmented { flex: 1 1 100%; }
body.build-expanded .build-toggles > .segmented { flex: 1 1 auto; }
body.build-expanded .build-toggles button { white-space: nowrap; }
body.build-expanded .build-toggles > .build-mode { flex: none; }
.build-vs { display: grid; grid-template-columns: 1fr 1fr; }
.build-head > .build-rank { margin: 0 8px 0 auto; align-self: center; flex: none; }
.build-head > .build-splash { margin-right: 12px; align-self: center; flex: none; }
.build-epithet { font-size: 12px; font-style: italic; color: var(--gold-2); opacity: 0.85; margin: -1px 0 1px; }
body:not(.build-expanded) :is(.build-rank, .build-splash, .build-epithet, .build-mode) { display: none; }
.build-vs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.build-vs img { width: 18px; height: 18px; border-radius: 3px; }

.build-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.build-sec h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.build-stat { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--faint); }
.build-stat b { font-weight: 700; }
.build-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.build-pair .build-sec h3 { flex-direction: column; gap: 2px; }

img.bi { display: block; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border-2); background: var(--bg-2); }
.rune-page { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.rune-col { display: flex; flex-direction: column; gap: 8px; }
.rune-tree { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.rune-tree img.bi { box-shadow: none; background: none; }
.keystone { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gold-2); }
.keystone img.bi { border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
.rune-row { display: flex; gap: 6px; }
.rune-row img.bi { border-radius: 50%; }
.rune-row.shards img.bi { background: var(--surface-3); }

.item-row { display: flex; align-items: center; gap: 6px; }
.item-row.core { gap: 4px; }
.item-row .arrow { color: var(--faint); font-size: 18px; }
.item-count { position: relative; }
.item-count i { position: absolute; right: -4px; bottom: -4px; font-size: 10px; font-style: normal; font-weight: 700; padding: 0 3px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 4px; }

.opt-list { display: flex; flex-direction: column; gap: 4px; }
.opt { display: grid; grid-template-columns: 76px minmax(0, 1fr) 46px 40px 44px; gap: 7px; align-items: center; gap: 8px; font-size: 12.5px; }
.opt-icons { display: flex; gap: 2px; }
.opt-group { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.opt-group h4 { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.opt-list.runes img.bi { border-radius: 50%; }
.opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 500; }
.opt-bar { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.opt-bar i { display: block; height: 100%; background: var(--gold); }
.opt-pr { color: var(--muted); text-align: right; font-size: 11.5px; }
.opt-wr { text-align: right; font-weight: 600; }

.skill-prio { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.skill-prio b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--gold); color: var(--gold-2); background: var(--gold-dim); border-radius: var(--radius-sm); }
.skill-prio .gt { color: var(--faint); }
.skill-grid { display: grid; gap: 2px; margin-top: 8px; }
.skill-line { display: grid; grid-template-columns: 18px repeat(15, 1fr); gap: 2px; }
.skill-line span { height: 18px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; background: var(--bg-2); border-radius: 2px; color: var(--bg); }
.skill-line .skill-key { background: none; color: var(--muted); font-size: 11px; }
.skill-line span.on { background: var(--ally); color: #fff; }
.skill-line span.on.r { background: var(--gold); color: #1a1408; }

.later-row { display: flex; align-items: center; gap: 10px; }
.later-slot { width: 26px; font-size: 11px; color: var(--faint); font-weight: 700; }
.later-opt { display: flex; align-items: center; gap: 5px; font-size: 12px; }

@media (max-width: 1400px) {
  body.build-open .results-split { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* Build panel open: it runs from the top of the content down the right side;
   the draft cards (win estimate, damage) sit compactly above the table. */
body.build-open #view-draft .content { display: grid; grid-template-columns: minmax(0, 1fr) 470px; grid-template-rows: auto 1fr; column-gap: 16px; align-items: start; }
body.build-open #view-draft .content > .draft { grid-column: 1; grid-row: 1; }
body.build-open .results-split { display: contents; }
body.build-open .results-main { grid-column: 1; grid-row: 2; min-width: 0; }
body.build-open #build-wrap { grid-column: 2; grid-row: 1 / span 2; }
body.build-open .dmg-team { grid-template-columns: 52px 1fr auto; }
body.build-open .dmg-team-pct { white-space: nowrap; }
@media (max-width: 1400px) {
  body.build-open #view-draft .content { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* Row whose build is shown in the panel */
tbody tr.selected td { background: rgba(200, 170, 110, 0.16); box-shadow: inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--gold), inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); color: var(--gold); font-weight: 700; }
tbody tr.selected td:last-child { box-shadow: inset -1px 0 0 var(--gold), inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
tbody tr.selected .champ { color: var(--gold-2); }
tbody tr.clickable:hover td { background: rgba(255, 255, 255, 0.045); }
tbody tr.selected:hover td { background: rgba(200, 170, 110, 0.2); }

/* Rune page drawn like the in-game picker: every option, chosen ones lit */
.rune-page { grid-template-columns: 1.15fr 1fr; gap: 14px; }
.rune-col { gap: 10px; }
.rune-tree b { color: var(--gold-2); font-weight: 700; }
.rune-grid { display: flex; justify-content: space-around; align-items: center; gap: 6px; }
.rune-grid.keystones { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
img.bi.rune { border-radius: 50%; box-shadow: none; background: transparent; transition: filter 0.15s, opacity 0.15s; }
img.bi.rune.off { filter: grayscale(1) brightness(0.7); opacity: 0.38; }
img.bi.rune.off:hover { opacity: 0.8; filter: grayscale(0.4); }
img.bi.rune.on { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(200, 170, 110, 0.35); background: var(--bg); }
img.bi.rune.key.on { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(200, 170, 110, 0.5); }
img.bi.rune.key.off { box-shadow: none; }
img.bi.rune.shard { background: var(--surface-3); padding: 2px; }
img.bi.rune.shard.on { background: var(--bg); }
.shard-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--border); }

/* Pick rate and win rate under every rune */
.rune-grid { align-items: flex-start; gap: 4px; }
.rune-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; flex: 1; }
.rune-cell img.bi { margin-bottom: 3px; }
.rune-cell small { font-size: 9.5px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rune-cell .rune-pr { color: var(--faint); }
.rune-cell .rune-wr { color: var(--faint); opacity: 0.8; }
.rune-cell.on .rune-pr { color: var(--text-2); font-weight: 600; }
.rune-cell.on .rune-wr { opacity: 1; font-weight: 600; }
.rune-cell:not(.on) .rune-wr.good, .rune-cell:not(.on) .rune-wr.bad { opacity: 0.65; }
.shard-grid { gap: 4px; }

/* Bans: a strip in the toolbar next to the tabs (keeps the sidebar short) */
.bans-strip { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-right: auto; margin-left: 20px; min-width: 0; }
/* Recommendation options, between the tabs and the bans */
.quick-opts { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; margin-left: 22px; flex-wrap: wrap; }
.qo-field, .qo-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted);
  font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.qo-field > span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.qo-field select, .qo-field input {
  background: transparent; border: 0; padding: 0; height: 22px; color: var(--text); font: inherit; font-size: 12px; outline: none;
}
.qo-field select { cursor: pointer; text-transform: capitalize; }
.qo-field select option { background: var(--surface-2); color: var(--text); }
.qo-field input { width: 32px; text-align: right; -moz-appearance: textfield; }
.qo-field input::-webkit-inner-spin-button, .qo-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qo-field i { font-style: normal; color: var(--muted); margin-left: -3px; }
.qo-step { display: flex; flex-direction: column; gap: 1px; margin: 0 -4px 0 2px; }
.qo-step button {
  display: grid; place-items: center; width: 14px; height: 10px; padding: 0; border: 0; border-radius: 2px;
  background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, background 0.15s;
}
.qo-step button::before { content: ''; width: 5px; height: 5px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: translateY(1.5px) rotate(45deg); }
.qo-step button[data-dir='-1']::before { transform: translateY(-1.5px) rotate(225deg); }
.qo-step button:hover { color: var(--gold-2); background: rgba(200, 170, 110, 0.14); }
.qo-step button:active { color: var(--text); background: rgba(200, 170, 110, 0.28); }
.qo-step button:focus-visible { outline: none; box-shadow: var(--ring); }
.qo-field:hover, .qo-chip:hover { border-color: var(--gold); color: var(--text-2); }
.qo-field:has(input:focus, select:focus) { border-color: var(--gold); color: var(--text-2); background: rgba(200, 170, 110, 0.1); }
/* The stepper arrows have their own hover; the field stays as it is around them */
.qo-field:has(.qo-step:hover):not(:has(input:focus)) { border-color: var(--border-2); color: var(--muted); }
/* The field as a whole shows focus, not the bare control inside it */
.qo-field select:focus, .qo-field input:focus { box-shadow: none; }
.qo-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.qo-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-2); transition: background 0.15s, border-color 0.15s; }
.qo-chip:has(input:checked) { color: var(--gold-2); border-color: rgba(200, 170, 110, 0.55); background: rgba(200, 170, 110, 0.12); }
.qo-chip:has(input:checked)::before { background: var(--gold-2); border-color: var(--gold-2); }
.qo-chip:has(input:focus-visible) { box-shadow: var(--ring); }
.quick-opts + .bans-strip { margin-left: 14px; }
.bans-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bans-strip .bans { flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.bans-strip .bans img { width: 24px; height: 24px; flex: none; }

/* Guessed lane: show how likely it is (e.g. "72%") instead of a bare "?" */
.pick.inferred .lane[data-conf]::after {
  content: attr(data-conf); width: auto; min-width: 22px; height: 13px; padding: 0 3px; right: -12px; top: -7px;
  border-radius: 7px; font-size: 8.5px; letter-spacing: -0.02em;
}
.pick.inferred .lane[data-level='high']::after { color: var(--good); border-color: rgba(60, 207, 142, 0.5); }
.pick.inferred .lane[data-level='medium']::after { color: var(--warn); border-color: rgba(245, 185, 66, 0.5); }
.pick.inferred .lane[data-level='low']::after { color: var(--bad); border-color: rgba(255, 107, 107, 0.5); }

/* Bans split by team */
.bans-strip .bans { gap: 10px; }
.ban-group { display: inline-flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 2px solid var(--border-2); }
.ban-group:first-child { padding-left: 0; border-left: 0; }
.ban-team { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 2px; }
.ban-group.ally .ban-team { color: var(--ally); }
.ban-group.enemy .ban-team { color: var(--enemy); }
.ban-group.unknown .ban-team { color: var(--muted); }
.ban-group.ally img { box-shadow: 0 0 0 1px var(--ally); }
.ban-group.enemy img { box-shadow: 0 0 0 1px var(--enemy); }

/* Narrower draft cards with the build panel open: keep the chips on one row (the known-picks count is in the title's tooltip) */
body.build-open .draft .known-chip { display: none; }
body.build-open .draft .chips { flex-wrap: nowrap; overflow: hidden; }

/* Build panel motion: slides in from the right, sections cascade in (closing is instant) */
@keyframes panel-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes section-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.build-panel.panel-in { animation: panel-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.build-panel.content-in > * { animation: section-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.build-panel.content-in > :nth-child(2) { animation-delay: 30ms; }
.build-panel.content-in > :nth-child(3) { animation-delay: 60ms; }
.build-panel.content-in > :nth-child(4) { animation-delay: 90ms; }
.build-panel.content-in > :nth-child(5) { animation-delay: 120ms; }
.build-panel.content-in > :nth-child(6) { animation-delay: 150ms; }
.build-panel.content-in > :nth-child(7) { animation-delay: 180ms; }
.build-panel.content-in > :nth-child(n + 8) { animation-delay: 210ms; }

/* Web version (DRAFTPLUS_MODE=web): no League client, no manual sync */
.web-only { display: none; }
body.web-mode .web-only { display: inline; }
body.web-mode .desktop-only, body.web-mode #sync { display: none; }
.live-status.web::before { background: var(--muted); }

/* Your lane opponent's column in the picks table */
th.col-lane, td.col-lane { background: rgba(255, 90, 95, 0.09); box-shadow: inset 1px 0 0 rgba(255, 90, 95, 0.35), inset -1px 0 0 rgba(255, 90, 95, 0.35); }
th.col-lane { box-shadow: inset 1px 0 0 rgba(255, 90, 95, 0.35), inset -1px 0 0 rgba(255, 90, 95, 0.35), inset 0 -2px 0 var(--enemy); }
td.col-lane { font-weight: 700; }
th.col-lane img { box-shadow: 0 0 0 2px var(--enemy); }
/* Stays visible when the build panel hides the other per-champion columns. */
body.build-open th.col-lane, body.build-open td.col-lane { display: table-cell; }

/* Lane matchup card (sidebar, after you lock in) */
.lane-matchup { padding: 10px 14px; }
.lane-matchup .card-title { margin-bottom: 8px; }
.lm-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.lm-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lm-side.enemy { justify-content: flex-end; }
.lm-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-portrait { width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); object-fit: cover; }
.lm-portrait.ally { box-shadow: 0 0 0 2px var(--ally); }
.lm-portrait.enemy { box-shadow: 0 0 0 2px var(--enemy); }
.lm-portrait.empty { display: grid; place-items: center; color: var(--faint); font-weight: 700; border: 1px dashed var(--border-2); box-shadow: none; }
.lm-delta { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lm-delta.muted { font-size: 13px; font-weight: 600; color: var(--faint); text-transform: uppercase; }
.lm-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.lm-conf { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; color: var(--text-2); cursor: help; }
.lm-conf .signal { height: 11px; }
.lm-conf .signal i:nth-child(1) { height: 4px; }
.lm-conf .signal i:nth-child(2) { height: 7px; }
.lm-conf .signal i:nth-child(3) { height: 11px; }
body.locked-in .lane-card { display: none; }

/* Locked-in champion pinned to the top of the picks table */
tbody tr.locked-row td { background: rgba(10, 200, 185, 0.08); }
tbody tr.locked-row td:first-child { box-shadow: inset 3px 0 0 var(--ally); color: var(--ally); }
.lock-tag { margin-left: 8px; padding: 1px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ally); border: 1px solid var(--ally); border-radius: var(--radius-sm); }
/* Hovered in champ select: pinned on top, pulsing until you lock in. */
tbody tr.hover-row td { animation: hover-pulse 1.6s ease-in-out infinite; }
tbody tr.hover-row td:first-child { box-shadow: inset 3px 0 0 var(--gold); color: var(--gold); }
.lock-tag.hover-tag { color: var(--gold); border-color: var(--gold); animation: hover-tag-pulse 1.6s ease-in-out infinite; }
@keyframes hover-pulse {
  0%, 100% { background-color: color-mix(in srgb, var(--gold) 4%, transparent); }
  50% { background-color: color-mix(in srgb, var(--gold) 16%, transparent); }
}
@keyframes hover-tag-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* Lock-in effect: the row blurs under a "LOCKED" banner, then clears */
tbody tr.lock-blur td { animation: lock-blur 1.7s ease both; }
@keyframes lock-blur { 0% { filter: none; } 15%, 70% { filter: blur(3px); } 100% { filter: none; } }
.lock-flash {
  position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  display: grid; place-items: center;
  background: linear-gradient(90deg, transparent, rgba(10, 200, 185, 0.22) 30%, rgba(10, 200, 185, 0.22) 70%, transparent);
  animation: lock-flash 1.7s ease forwards;
}
.lock-flash span { font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 0 14px var(--ally), 0 0 4px var(--ally); animation: lock-text 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes lock-flash { 0% { opacity: 0; } 12%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lock-text { 0% { letter-spacing: 1.4em; opacity: 0; } 30% { letter-spacing: 0.55em; opacity: 1; } 72% { letter-spacing: 0.5em; opacity: 1; } 100% { letter-spacing: 0.45em; opacity: 0; } }
/* LOCKED banner: solid dark band with gold edges, easy to read */
.lock-flash { background: rgba(4, 8, 14, 0.92); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); box-shadow: 0 0 24px rgba(200, 170, 110, 0.35); }
.lock-flash span { color: var(--gold-2); text-shadow: 0 0 12px rgba(200, 170, 110, 0.9); }

/* Win rate by game length (lane matchup card) */
.lm-chart { margin-top: 8px; }
.lm-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
.lm-legend { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.lm-legend i { display: inline-block; width: 10px; height: 2px; margin-left: 4px; }
.lm-legend i.ally { background: var(--ally); }
.lm-legend i.enemy { background: var(--enemy); }
.lm-svg { display: block; width: 100%; height: auto; margin-top: 2px; overflow: visible; }
.lm-svg .lm-mid { stroke: var(--border-2); stroke-dasharray: 3 3; }
.lm-svg .lm-axis { font-size: 8px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.lm-svg .lm-ally path { stroke: var(--ally); stroke-width: 2; }
.lm-svg .lm-ally circle { fill: var(--ally); }
.lm-svg .lm-enemy path { stroke: var(--enemy); stroke-width: 2; }
.lm-svg .lm-enemy circle { fill: var(--enemy); }
.lm-chart-note { margin: 2px 0 0; font-size: 9.5px; color: var(--faint); text-align: center; }

/* Locked in: team rows get more compact to make room for the matchup card */
body.locked-in .slots { gap: 3px; }
body.locked-in .pick { padding-top: 2px; padding-bottom: 2px; grid-template-columns: 22px 30px 1fr; }
body.locked-in .pick .portrait { width: 28px; height: 28px; }
body.locked-in .pick input { height: 28px; font-size: 13px; }
body.locked-in .team .card-title { margin-bottom: 8px; }
.pick, .pick .portrait, .pick input { transition: padding 0.3s, width 0.3s, height 0.3s; }

/* Results table: scrollable without a visible scrollbar */
.table-wrap { scrollbar-width: none; }
.table-wrap::-webkit-scrollbar { display: none; }

/* Damage legend: the League wiki's damage-type icons (in their own colours) */
.legend i { width: 14px; height: 14px; border-radius: 0; margin-left: 6px; background-position: center; background-size: contain; background-repeat: no-repeat; background-color: transparent; }
.legend i.phys, .legend i.magic, .legend i.true { background-size: contain; background-position: center; background-repeat: no-repeat; }
.legend i.phys { background-image: url('img/damage/physical.svg'); background-color: transparent; }
.legend i.magic { background-image: url('img/damage/magic.svg'); background-color: transparent; }
.legend i.true { background-image: url('img/damage/true.png'); background-color: transparent; }
/* Build panel wrapper: an expand strip runs down its left edge */
.build-wrap { position: sticky; top: 80px; display: flex; align-items: stretch; min-width: 0; }
.build-wrap:has(> #build[hidden]) { display: none; }
.build-wrap > .build-panel { position: static; flex: 1; min-width: 0; }
.build-expand {
  flex: none; width: 18px; margin-right: -1px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: color 0.15s, background 0.15s, border-color 0.15s, width 0.15s;
}
.build-expand span { font-size: 18px; font-weight: 700; line-height: 1; }
.build-expand:hover { width: 22px; color: var(--gold-2); border-color: var(--gold); background: var(--gold-dim); }
.build-wrap:has(.panel-in) .build-expand { animation: panel-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Expanded: the build panel fills everything right of the teams */
body.build-expanded #view-draft .content { grid-template-columns: minmax(0, 1fr); }
body.build-expanded #view-draft .content > .draft, body.build-expanded .results-main { display: none; }
body.build-expanded #build-wrap { grid-column: 1; grid-row: 1 / span 2; }
body.build-expanded .build-panel { display: grid; grid-template-columns: minmax(360px, 540px) minmax(0, 1fr); align-items: start; gap: 10px 24px; }
body.build-expanded .build-panel > .build-toggles { align-self: center; justify-self: end; width: 100%; max-width: 760px; margin-right: 34px; flex-wrap: nowrap; }
body.build-expanded .build-close { position: absolute; top: 12px; right: 12px; }
/* No transform on the header while it fades in, or the × would be placed relative to it for a moment. */
@keyframes head-in { from { opacity: 0; } }
body.build-expanded .build-panel.content-in > .build-head { animation-name: head-in; }
body.build-expanded .build-panel > .compact-only { display: none; }

/* Expanded build: lolalytics-style strips, each option with win rate, pick rate and games under its icon */
.xb-side, .xb-items, .xb-paths { display: none; }
body.build-expanded .xb-side { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
body.build-expanded .xb-items { display: flex; flex-direction: column; gap: 2px; grid-column: 1; padding-top: 10px; border-top: 1px solid var(--border); }
.xb-items h3, .xb-paths h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.xb-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px; }
.xb-row + .xb-row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.xb-label { display: flex; flex-direction: column; gap: 1px; }
.xb-label b { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xb-label small { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.xb-strip { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; padding: 2px 0; }
.xb-cell {
  flex: none; min-width: 50px; display: flex; flex-direction: column; align-items: center; padding: 4px 3px 3px;
  line-height: 1.15; font-variant-numeric: tabular-nums; border-radius: var(--radius-sm); cursor: default;
}
.xb-cell:hover { background: rgba(255, 255, 255, 0.05); }
/* In the build shown (not clickable): a light marker, an underline rather than a frame */
.xb-cell { position: relative; }
.xb-cell.chosen { background: linear-gradient(180deg, transparent 30%, rgba(200, 170, 110, 0.09)); box-shadow: inset 0 -2px 0 rgba(200, 170, 110, 0.75); }
/* Keystones filter the items: clickable, framed like the build-order options */
.xb-cell.xb-filter { cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.12s, border-color 0.12s; }
.xb-cell.xb-filter:hover, .xb-cell.xb-filter:focus-visible { border-color: rgba(200, 170, 110, 0.45); outline: none; }
.xb-cell.xb-filter.on { background: linear-gradient(180deg, rgba(200, 170, 110, 0.24), rgba(200, 170, 110, 0.07)); border-color: var(--gold); box-shadow: 0 0 10px rgba(200, 170, 110, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.xb-icons { display: flex; gap: 2px; margin-bottom: 3px; }
.xb-icons img { border-radius: 4px; }
.xb-wr { font-size: 11.5px; font-weight: 700; }
.xb-pr { font-size: 10.5px; color: var(--text); opacity: 0.8; }
.xb-n { font-size: 9.5px; color: var(--faint); }
.xb-none { font-size: 11px; padding: 8px 0; }
/* Expanded: the sidebar condenses. Teams become one row of portraits each, plus a mini summary card. */
body.build-expanded .lane-card, body.build-expanded .swap-row, body.build-expanded .sidebar .team { display: none; }
.mini-draft { display: none; padding: 10px 14px; }
body.build-expanded .mini-draft:not(:empty) { display: flex; flex-direction: column; gap: 6px; }
.mini-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
.mini-win { font-size: 20px; font-weight: 800; }
.dmg-team.mini { grid-template-columns: 46px 1fr auto; font-size: 11.5px; }

/* Expanded build view: lane-by-lane matchups in the sidebar */
.lane-versus { display: none; padding: 10px 12px; }
body.build-expanded .lane-versus { display: flex; flex-direction: column; gap: 4px; }
.lv-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 96px 40px minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 2px; border-radius: var(--radius-sm); }
.lv-row.mine { background: rgba(200, 170, 110, 0.08); box-shadow: inset 2px 0 0 var(--gold); }
.lv-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.lv-name.enemy { text-align: left; }
.lv-portrait { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; }
.lv-portrait.ally { box-shadow: 0 0 0 2px var(--ally); }
.lv-portrait.enemy { box-shadow: 0 0 0 2px var(--enemy); }
.lv-portrait.empty { display: grid; place-items: center; border: 1px dashed var(--border-2); box-shadow: none; color: var(--faint); }
.lv-portrait.empty svg, .lv-portrait.empty img { width: 18px; height: 18px; opacity: 0.6; }
.lv-delta { text-align: center; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-delta.muted { font-size: 10.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; }
/* A faint lane icon behind each lane's matchup number */
.lv-mid { position: relative; display: grid; place-items: center; align-self: stretch; }
.lv-mid > .lane-icon, .lv-bg > .lane-icon { width: 36px; height: 36px; color: var(--text); opacity: 0.13; pointer-events: none; }
.lv-mid > .lane-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lv-mid > .lv-delta { position: relative; }

.xb-strip { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 28px; }

/* Expanded build: build order explorer (right of the item rows) */
body.build-expanded .xb-paths { display: flex; flex-direction: column; gap: 4px; grid-column: 2; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
.xbp-hint { font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); }
.xbp-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 6px; }
.xbp-row + .xbp-row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.xbp-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.xbp-opts { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.xbp-opt, .xbp-common {
  cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: background 0.12s, border-color 0.12s;
}
.xbp-opt { flex: none; min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 3px 3px; line-height: 1.15; }
.xbp-opt img { margin-bottom: 3px; }
.xbp-opt b { font-size: 13.5px; font-weight: 700; }
.xbp-opt span { font-size: 12px; opacity: 0.85; }
.xbp-opt small { font-size: 11px; color: var(--faint); }
.xbp-opt:hover, .xbp-common:hover { background: rgba(255, 255, 255, 0.05); }
/* Clickable options read as buttons; the selected one gets a full gold frame */
.xbp-opt, .xbp-common { border-color: rgba(255, 255, 255, 0.06); }
.xbp-opt:hover, .xbp-common:hover { border-color: rgba(200, 170, 110, 0.45); }
.xbp-opt.on, .xbp-common.on { background: linear-gradient(180deg, rgba(200, 170, 110, 0.24), rgba(200, 170, 110, 0.07)); border-color: var(--gold); box-shadow: 0 0 10px rgba(200, 170, 110, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.xbp-opt img, .xbp-common img { border-radius: 4px; }
.xbp-sub { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xbp-commons { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 2px 8px; }
.xbp-common { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 3px 6px; font-size: 13px; text-align: right; }
.xbp-common span:not(.xbp-chain) { opacity: 0.85; }
.xbp-common small { font-size: 11px; color: var(--faint); }
.xbp-chain { display: flex; align-items: center; gap: 3px; }
.xbp-chain i { font-style: normal; color: var(--faint); }
.quick-opts:has(+ .bans-strip[hidden]) { margin-right: auto; }
.options-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; min-height: 28px; }
.options-row .quick-opts { margin: 0; padding: 0; flex-wrap: nowrap; }
.options-row .status { margin-left: auto; text-align: right; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Bot lane 2v2 block: stacked portraits per team, synergy pill between them, crossing arrows for the cross matchups */
.lv-duo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px 96px 40px minmax(0, 1fr); grid-template-rows: 48px 48px auto; row-gap: 4px; column-gap: 6px; align-items: center; padding: 0 2px; margin-top: 2px; }
.lv-duo > .lv-name { grid-column: 1; }
.lv-duo > .lv-name.enemy { grid-column: 5; }
.lv-hl { grid-column: 1 / -1; align-self: stretch; margin: 0 -2px; border-radius: var(--radius-sm); background: rgba(200, 170, 110, 0.08); box-shadow: inset 2px 0 0 var(--gold); }
.lv-stack { grid-column: 2; grid-row: 1 / 3; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
.lv-stack.enemy { grid-column: 4; }
.lv-stack::before { content: ''; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 2px; margin-left: -1px; background: var(--border-2); }
.lv-stack.enemy::before { background: var(--enemy); opacity: 0.45; }
.lv-stack:not(.enemy)::before { background: var(--ally); opacity: 0.45; }
.lv-syn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; min-width: 34px; padding: 1px 5px; border-radius: 999px; text-align: center; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2); }
.lv-syn.empty { display: none; }
.lv-syn.good { border-color: var(--good); }
.lv-syn.bad { border-color: var(--bad); }
.lv-cross { grid-column: 3; grid-row: 1 / 3; position: relative; align-self: stretch; }
.lv-arrows { position: absolute; inset: 0; width: 96px; height: 100px; overflow: visible; }
.lv-arrows line { stroke-width: 1.75; stroke-dasharray: 4 3; }
.lv-arrows line.good { stroke: var(--good); opacity: 0.85; }
.lv-arrows line.bad { stroke: var(--bad); opacity: 0.85; }
.lv-arrows line.neutral { stroke: var(--muted); opacity: 0.6; }
.lv-arrows line.none { stroke: var(--border-2); opacity: 0.6; }
.lv-head.good { fill: var(--good); }
.lv-head.bad { fill: var(--bad); }
.lv-head.neutral { fill: var(--muted); }
.lv-head.none { fill: var(--border-2); }
.lv-cross .lv-delta { position: absolute; left: 50%; transform: translate(-50%, -50%); line-height: 1; }
.lv-cross .lv-d-top { top: 24px; }
.lv-cross .lv-d-bottom { top: 76px; }
.lv-cross .lv-d-x1, .lv-cross .lv-d-x2 { left: 22px; font-size: 11px; font-weight: 700; padding: 1px 3px; border-radius: 4px; background: var(--surface); }
.lv-cross .lv-d-x1 { top: 37px; }
.lv-cross .lv-d-x2 { top: 63px; }
.lv-bg { position: absolute; left: 50%; transform: translate(-50%, -50%); display: grid; line-height: 0; }
.lv-total { grid-column: 2 / 5; grid-row: 3; justify-self: center; display: flex; align-items: baseline; gap: 8px; padding: 3px 14px; border: 1px solid var(--border-2); background: linear-gradient(180deg, rgba(9, 21, 33, 0.94), rgba(1, 10, 19, 0.96)); box-shadow: inset 0 1px 0 rgba(200, 170, 110, 0.12); --cut: 6px; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.lv-portrait[draggable='true'] { cursor: grab; }
.lv-portrait.dragging { opacity: 0.35; }
.lv-portrait.drop-target { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(200, 170, 110, 0.5); }
.lv-total span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lv-total b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Expanded build, In game view: item gold per lane (in place of runes) and ability cooldowns (in place of the side strips) */
.game-only { display: none; }
body.build-expanded .build-panel.mode-game .build-only { display: none; }
body.build-expanded .build-panel.mode-game .game-only { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
body.build-expanded .build-panel > .xg-gold { grid-column: 1; }
body.build-expanded .build-panel.mode-game .xb-side > .xg-cds { border-top: 0; padding-top: 0; margin-bottom: 6px; }
.xg-gold h3, .xg-cds h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.xg-empty { font-size: 12px; margin: 4px 0; }
.xg-total { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.xg-total .ally { color: var(--ally); }
.xg-total .enemy { color: var(--enemy); }
.xg-total small { color: var(--faint); font-weight: 400; }
.xg-lane { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 0; }
.xg-lane + .xg-lane { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.xg-side { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 4px; border-radius: var(--radius-sm); }
.xg-side.enemy { flex-direction: row-reverse; text-align: right; }
.xg-side.me { background: rgba(200, 170, 110, 0.08); box-shadow: inset 2px 0 0 var(--gold); }
.xg-champ { position: relative; flex: none; }
.xg-champ img { width: 34px; height: 34px; border-radius: var(--radius-sm); display: block; }
.xg-side.ally .xg-champ img { box-shadow: 0 0 0 2px var(--ally); }
.xg-side.enemy .xg-champ img { box-shadow: 0 0 0 2px var(--enemy); }
.xg-champ i { position: absolute; right: -4px; bottom: -4px; min-width: 15px; padding: 0 2px; font-size: 9.5px; font-style: normal; font-weight: 700; line-height: 14px; text-align: center; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 7px; }
.xg-side.enemy .xg-champ i { right: auto; left: -4px; }
.xg-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xg-side.enemy .xg-info { align-items: flex-end; }
.xg-line { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.xg-side.enemy .xg-line { flex-direction: row-reverse; }
.xg-line b { font-size: 13px; color: var(--gold-2); }
.xg-line small { font-size: 10px; color: var(--faint); white-space: nowrap; }
.xg-items { display: flex; gap: 2px; min-height: 22px; }
.xg-side.enemy .xg-items { flex-direction: row-reverse; }
.xg-items img { border-radius: 3px; display: block; }
.xg-diff { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.xg-diff .lane-icon { opacity: 0.7; }
.xg-note { margin: 2px 0 0; font-size: 10.5px; color: var(--faint); }
.xg-title { display: inline-flex; align-items: center; gap: 8px; }
.xg-view { padding: 2px; letter-spacing: 0; text-transform: none; }
.xg-view button { height: 20px; padding: 0 8px; font-size: 11px; }
/* Gold bars: one scale for all ten players. In lanes they grow out from the middle (a butterfly chart). */
.xg-side { position: relative; isolation: isolate; }
.xg-side > .xg-bar { position: absolute; top: 0; bottom: 0; right: 0; z-index: -1; max-width: 100%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to left, color-mix(in srgb, var(--ally) 22%, transparent), color-mix(in srgb, var(--ally) 6%, transparent));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ally) 75%, transparent); }
.xg-side.enemy > .xg-bar { right: auto; left: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--enemy) 22%, transparent), color-mix(in srgb, var(--enemy) 6%, transparent));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--enemy) 75%, transparent); }
.xg-line .xg-pos { font-size: 10px; font-weight: 700; color: var(--muted); }
.xg-ranked { display: flex; flex-direction: column; gap: 3px; }
.xg-rk { display: grid; grid-template-columns: 16px 30px minmax(0, 1fr) 58px; align-items: center; gap: 7px; padding: 1px 4px; border-radius: var(--radius-sm); }
.xg-rk.me { background: rgba(200, 170, 110, 0.08); box-shadow: inset 2px 0 0 var(--gold); }
.xg-rk > .xg-pos { font-size: 11px; font-weight: 700; text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.xg-rk .xg-champ img { width: 28px; height: 28px; }
.xg-rk.ally .xg-champ img { box-shadow: 0 0 0 2px var(--ally); }
.xg-rk.enemy .xg-champ img { box-shadow: 0 0 0 2px var(--enemy); }
.xg-rk .xg-champ i { right: -5px; bottom: -5px; min-width: 13px; font-size: 9px; line-height: 12px; }
.xg-track { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 26px; padding: 0 8px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); }
.xg-track > .xg-bar { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(to right, color-mix(in srgb, var(--ally) 14%, transparent), color-mix(in srgb, var(--ally) 34%, transparent));
  box-shadow: inset -2px 0 0 var(--ally); }
.xg-rk.enemy .xg-track > .xg-bar { background: linear-gradient(to right, color-mix(in srgb, var(--enemy) 14%, transparent), color-mix(in srgb, var(--enemy) 34%, transparent)); box-shadow: inset -2px 0 0 var(--enemy); }
.xg-label { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.xg-label b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.xg-label small { font-size: 10px; color: var(--faint); }
.xg-gold-n { flex: none; font-size: 12.5px; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.xg-rk-diff { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.xg-rk-diff .lane-icon { width: 14px; height: 14px; opacity: 0.6; }

/* Post game: a summary of the last game across the whole expanded panel */
.post-only { display: none; }
body.build-expanded .build-panel.mode-post > :not(.build-head, .build-toggles, .build-close, .post-only) { display: none; }
body.build-expanded .build-panel.mode-post .build-toggles > :not(.build-mode) { display: none; }
body.build-expanded .build-panel.mode-post > .post-only { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px 24px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
.pg h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pg-sub { font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); }
.pg-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pg-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; padding: 12px 16px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 14%, transparent), transparent 70%); }
.pg-banner.win { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--good) 16%, transparent), transparent 70%); }
.pg-banner.loss { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 16%, transparent), transparent 70%); }
.pg-result { display: flex; flex-direction: column; min-width: 150px; }
.pg-result strong { font-size: 28px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1; color: var(--gold-2); }
.pg-banner.win .pg-result strong { color: var(--good); }
.pg-banner.loss .pg-result strong { color: var(--bad); }
.pg-result small { font-size: 11.5px; color: var(--muted); }
.pg-me { display: flex; align-items: center; gap: 22px; min-width: 0; }
.pg-me img { width: 46px; height: 46px; border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--gold); }
.pg-me-name { display: flex; flex-direction: column; margin-left: -12px; }
.pg-me-name b { font-size: 15px; }
.pg-me-name small, .pg-stat small { font-size: 10.5px; color: var(--faint); }
.pg-stat { display: flex; flex-direction: column; align-items: center; font-variant-numeric: tabular-nums; }
.pg-stat b { font-size: 17px; font-weight: 700; }
.pg-win { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.pg-win .win-big { font-size: 28px; }
.pg-win-text { display: flex; flex-direction: column; gap: 1px; }
.pg-win-text small { font-size: 10.5px; color: var(--faint); }
.pg-win-text b { font-size: 13px; }
.pg-win-text b.good { color: var(--good); }
.pg-win-text b.bad { color: var(--bad); }
.pg-lane { display: grid; grid-template-columns: 22px 30px 30px minmax(48px, 1fr) minmax(56px, 1fr) 76px; align-items: center; gap: 8px; padding: 4px; min-height: 72px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.pg-lane + .pg-lane { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.pg-lane.mine { background: rgba(200, 170, 110, 0.08); box-shadow: inset 2px 0 0 var(--gold); }
.pg-lane-icon .lane-icon { opacity: 0.7; }
.pg-face { width: 28px; height: 28px; border-radius: var(--radius-sm); display: block; }
.pg-face.ally { box-shadow: 0 0 0 2px var(--ally); }
.pg-face.enemy { box-shadow: 0 0 0 2px var(--enemy); }
.pg-face.empty { background: var(--surface-3); }
.pg-pred, .pg-gold { position: relative; z-index: 1; grid-row: 1; font-size: 13.5px; text-align: right; text-shadow: 0 0 4px var(--bg), 0 0 2px var(--bg); }
.pg-pred { grid-column: 4; }
.pg-gold { grid-column: 5; }
/* The lane's gold lead over the game runs behind the two numbers, from the portraits to the end value. */
.pg-spark-wrap { grid-column: 4 / 6; grid-row: 1; align-self: stretch; margin: 2px 0; position: relative; }
.pg-lane-axis { min-height: 0; padding-top: 2px; padding-bottom: 0; }
.pg-lane.pg-lane-axis + .pg-lane, .pg-lane + .pg-lane.pg-lane-axis { border-top-color: transparent; }
.pg-axis { grid-column: 4 / 6; grid-row: 1; position: relative; height: 14px; }
.pg-axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-axis span::before { content: ''; position: absolute; left: 50%; top: -5px; height: 4px; border-left: 1px solid var(--border-2); }
.pg-spark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pg-spark .zero { stroke: var(--border-2); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.pg-spark .ahead { fill: color-mix(in srgb, var(--good) 20%, transparent); }
.pg-spark .behind { fill: color-mix(in srgb, var(--bad) 20%, transparent); }
.pg-spark .spark-line { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.8; }
.pg-pred.muted, .pg-gold.muted { color: var(--faint); }
.pg-mark { grid-column: 6; grid-row: 1; font-size: 11px; font-weight: 700; text-align: right; color: var(--faint); white-space: nowrap; }
.pg-mark.held { color: var(--good); }
.pg-mark.flipped { color: var(--bad); }
.pg-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); }
.pg-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--gold-2); margin-left: 6px; }
.pg-legend i.lane { border-top-style: dashed; border-color: var(--text); }
.pg-src { margin-right: auto; font-size: 10px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted); padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; }
.pg-src.wait { animation: pg-pulse 1.6s ease-in-out infinite; }
@keyframes pg-pulse { 50% { opacity: 0.45; } }
.pg-chart { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* The chart stretches to the lanes' height beside it; the SVG is drawn at the box's size. */
.pg-svg-box { flex: 1; position: relative; min-height: 190px; }
.pg-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.pg-svg .grid { stroke: rgba(255, 255, 255, 0.05); }
.pg-svg .zero { stroke: var(--border-2); }
.pg-svg .axis { font-size: 9.5px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.pg-svg .ahead { fill: color-mix(in srgb, var(--good) 22%, transparent); }
.pg-svg .behind { fill: color-mix(in srgb, var(--bad) 22%, transparent); }
.pg-svg .team-line { fill: none; stroke: var(--gold-2); stroke-width: 2; stroke-linejoin: round; }
.pg-svg .lane-line { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.75; }
.pg-board { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.pg-row { display: grid; grid-template-columns: 34px minmax(90px, 1.3fr) 70px 44px 56px minmax(0, 2.4fr); align-items: center; gap: 10px; padding: 2px 4px; border-radius: var(--radius-sm); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pg-board.full .pg-row { grid-template-columns: 34px minmax(90px, 1.3fr) 70px 44px minmax(90px, 1.3fr) 56px 46px minmax(0, 2fr); }
.pg-row.me { background: rgba(200, 170, 110, 0.08); box-shadow: inset 2px 0 0 var(--gold); }
.pg-cols { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pg-team { display: flex; flex-direction: column; gap: 2px; padding-left: 6px; border-left: 2px solid var(--ally); }
.pg-team.enemy { border-left-color: var(--enemy); margin-top: 6px; }
.pg-team-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px; font-size: 11.5px; }
.pg-team.ally .pg-team-head b { color: var(--ally); }
.pg-team.enemy .pg-team-head b { color: var(--enemy); }
.pg-team-head small { color: var(--faint); }
.pg-row .xg-champ img { width: 30px; height: 30px; }
.pg-team.ally .xg-champ img { box-shadow: 0 0 0 2px var(--ally); }
.pg-team.enemy .xg-champ img { box-shadow: 0 0 0 2px var(--enemy); }
.pg-name { display: flex; flex-direction: column; min-width: 0; }
.pg-name b, .pg-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-name small { font-size: 10.5px; color: var(--faint); }
.pg-kda { font-weight: 600; }
.pg-num { color: var(--muted); }
.pg-dmg { position: relative; display: flex; align-items: center; height: 16px; background: rgba(255, 255, 255, 0.04); border-radius: 2px; }
.pg-dmg i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 2px; }
.pg-dmg small { position: relative; padding-left: 5px; font-size: 10.5px; color: var(--text); }
.pg-row .xg-items { min-height: 20px; }.xg-cd-row { display: grid; grid-template-columns: 112px repeat(3, minmax(0, 1fr)) 128px; align-items: center; gap: 8px; padding: 4px; border-radius: var(--radius-sm); }
.xg-cd-row + .xg-cd-row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.xg-cd-row.me { background: rgba(200, 170, 110, 0.08); box-shadow: inset 2px 0 0 var(--gold); }
.xg-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xg-who img { width: 38px; height: 38px; border-radius: var(--radius-sm); flex: none; }
.xg-who > span { display: flex; flex-direction: column; min-width: 0; }
.xg-who b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xg-who small { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xg-ab { display: flex; align-items: center; gap: 5px; min-width: 0; }
.xg-ab-icon { position: relative; flex: none; }
.xg-ab-icon img { display: block; border-radius: 4px; }
.xg-ab-icon i { position: absolute; left: -3px; bottom: -3px; padding: 0 3px; font-size: 9px; font-style: normal; font-weight: 800; line-height: 13px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 3px; }
.xg-ab.r .xg-ab-icon img { box-shadow: 0 0 0 1px var(--gold); }
.xg-cd { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.3; }
.xg-rank { display: inline-block; white-space: nowrap; }
.xg-cd small { color: var(--faint); margin: 0 1px; }
.xg-cd .good { color: var(--good); }
.xg-cd .bad { color: var(--bad); }
.xg-cd .on { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.xg-ab.r .xg-cd { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }

/* Lock-in banner across the build panel's header (the panel opens expanded on lock-in) */
.lock-flash.panel-lock { top: 8px; left: 18px; height: 66px; z-index: 5; }
.lock-flash.panel-lock span { font-size: 22px; }
/* ---------- desktop app update prompt (web/update.ts) ---------- */
.upd-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(1, 6, 12, 0.62); backdrop-filter: blur(4px); animation: upd-fade 0.18s ease-out; }
.upd-overlay[hidden] { display: none; }
.upd { width: min(460px, 100%); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); animation: upd-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.upd-head { display: flex; flex-direction: column; gap: 4px; }
.upd-head .card-title { margin: 0; }
.upd-version { font-size: 22px; font-weight: 800; letter-spacing: 0.01em; color: var(--text); }
.upd-sub { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.upd-notes { padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.upd-notes h3 { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.upd-notes ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.upd-notes li::marker { color: var(--gold); }
.upd-fine { margin: 0; font-size: 11.5px; color: var(--faint); }
.upd-error { margin: 0; padding: 8px 10px; font-size: 12px; color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.upd-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.upd-actions .btn, .upd-actions .btn-primary { width: auto; flex: none; height: 36px; padding: 0 18px; white-space: nowrap; }
.upd-link { margin-right: auto; white-space: nowrap; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.upd-link:hover { color: var(--gold-2); text-decoration: underline; }
.upd-bar { height: 8px; margin-top: 4px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.upd-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: inherit; transition: width 0.25s ease-out; }
.upd-is-installing .upd-bar i { animation: upd-pulse 1.1s ease-in-out infinite alternate; }
@keyframes upd-fade { from { opacity: 0; } }
@keyframes upd-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes upd-pulse { to { opacity: 0.55; } }
.app-version { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.legal-links { display: flex; align-items: baseline; gap: 6px; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--gold); text-decoration: underline; }
.legal-links #app-version { margin-left: auto; }
/* ---------- champion splash behind the expanded build view ---------- */
/* Its own element beside the scrolling panel (in the sticky wrapper, pinned to the panel with anchor positioning),
   so it stays put while the panel scrolls without any scroll syncing. The panel's own background steps aside while
   it shows (and while it fades out). A scrim in the theme's panel colour keeps text readable: nearly solid on the
   left, where runes and numbers are dense, thinning towards the right where the splash shows, and fading out at
   the bottom. */
body.build-expanded .build-wrap > .build-panel { anchor-name: --build-panel; position: relative; top: 0; z-index: 1; }
.build-backdrop { display: none; }
body.build-expanded .build-backdrop {
  --scrim: var(--bg-2);
  display: block; position: absolute; z-index: 0; pointer-events: none;
  position-anchor: --build-panel;
  top: anchor(top); bottom: anchor(bottom); left: anchor(left); right: anchor(right);
  border-radius: var(--radius); overflow: hidden;
  background: var(--scrim);
  opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s 0.45s;
}
body.build-expanded .build-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--scrim) 90%, transparent) 0%, color-mix(in srgb, var(--scrim) 80%, transparent) 30%, color-mix(in srgb, var(--scrim) 62%, transparent) 62%, color-mix(in srgb, var(--scrim) 50%, transparent) 100%),
    linear-gradient(to bottom, transparent 0%, transparent 50%, var(--scrim) 96%),
    var(--build-splash, none);
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, right 20%;
  background-repeat: no-repeat;
}
body.build-expanded .build-panel.has-splash.splash-on + .build-backdrop { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
body.build-expanded .build-panel.has-splash:is(.splash-on, .splash-out) { background: transparent; backdrop-filter: none; }
body.build-expanded .build-panel.has-splash.splash-on {
  --faint: var(--muted);
  /* Keeps small and faint text legible over bright parts of the art. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
}

/* --- Clash scouting ------------------------------------------------------------- */
#clash-tab.has-scout { color: var(--gold-2); }
#clash-tab.has-scout::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--gold); vertical-align: middle; box-shadow: 0 0 6px var(--gold); }
.clash-form { display: grid; gap: 10px; }
.clash-entries { display: grid; gap: 6px; }
.clash-entry { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px; }
.clash-entry input, .clash-entry select { min-width: 0; }
.clash-ours-box summary { cursor: pointer; color: var(--text-2); font-size: 12.5px; padding: 2px 0 6px; }
.clash-ours-box[open] summary { margin-bottom: 4px; }
.clash-bar .clash-title { font-weight: 600; color: var(--gold-2); letter-spacing: 0.02em; }
.clash-bar .status { margin-left: auto; }

/* Your lock-in's expanded build over the Clash view: the build's sidebar cards replace the scouting form,
   the build replaces the Clash tools (they come back with × or "Back to Clash"). */
.clash-build-side { display: none; }
body.clash-build #view-clash.layout { grid-template-columns: 340px minmax(0, 1fr); }
body.clash-build #view-clash .clash-side, body.clash-build #view-clash .content > :not(#build-wrap) { display: none; }
body.clash-build #view-clash .clash-build-side { display: flex; }
body.clash-build .build-expand { display: none; }
body.clash-build #view-clash #build-wrap { position: sticky; }
body.clash-build .build-panel { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.build-back { align-self: stretch; padding: 9px 12px; font-weight: 600; letter-spacing: 0.04em; }
/* "Runes & build" in the top bar (Clash view only), left of the Riot ID: a hextech frame like Find best pick */
.clash-build-btn {
  display: none; align-items: center; gap: 9px; height: 34px; margin-left: auto; padding: 0 14px 0 4px;
  font: inherit; white-space: nowrap; cursor: not-allowed; color: var(--faint);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
body.view-clash .clash-build-btn { display: inline-flex; }
body.view-clash .profile { margin-left: 12px; }
.clash-build-btn img, .cbb-empty { width: 26px; height: 26px; flex: none; border-radius: var(--radius-sm); }
.cbb-empty { display: grid; place-items: center; font-size: 12px; font-weight: 800; border: 1px dashed var(--border-2); }
.clash-build-btn b { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.clash-build-btn small { font-size: 12px; color: var(--muted); }
.clash-build-btn small:empty { display: none; }
.clash-build-btn:is(.ready, .open) { cursor: pointer; color: var(--gold-2); border-color: var(--gold); }
.clash-build-btn.ready { box-shadow: 0 0 14px rgba(200, 170, 110, 0.3); animation: cbb-pulse 2.6s ease-in-out infinite; }
.clash-build-btn.ready small { color: var(--text); }
.clash-build-btn:is(.ready, .open) img { box-shadow: 0 0 0 1px var(--gold); }
.clash-build-btn:is(.ready, .open):hover { background: var(--gold-dim); box-shadow: 0 0 18px rgba(200, 170, 110, 0.45); }
@keyframes cbb-pulse { 50% { box-shadow: 0 0 22px rgba(200, 170, 110, 0.5); } }
@media (prefers-reduced-motion: reduce) { .clash-build-btn.ready { animation: none; } }
@media (max-width: 1100px) { body.clash-build #view-clash.layout { grid-template-columns: minmax(0, 1fr); } }

/* Scout form folds into a slim rail once a team is scouted; opened again, it floats over the page. */
.clash-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clash-side-head .card-title { margin: 0; }
.clash-collapse { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; font-size: 18px; line-height: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text-2); cursor: pointer; }
.clash-collapse:hover { color: var(--gold-2); border-color: var(--gold); }
.layout.clash:not(.scouted) .clash-collapse { display: none; }
.clash-rail { display: none; }
.layout.clash.scouted { grid-template-columns: 44px minmax(0, 1fr); }
.layout.clash.collapsed .clash-scout-card { display: none; }
.layout.clash.scouted:not(.collapsed) .clash-scout-card {
  position: fixed; z-index: 40; top: 76px; left: 24px; width: 340px; max-height: calc(100vh - 92px); overflow: auto;
  background: linear-gradient(180deg, #0b1824, #010a13); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--border-2); animation: scout-in 0.18s ease-out;
}
@keyframes scout-in { from { opacity: 0; transform: translateX(-12px); } }
.layout.clash.scouted .clash-rail {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 44px; padding: 14px 0; position: sticky; top: 76px;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--bg-2)); color: var(--gold); cursor: pointer;
}
.clash-rail:hover { border-color: var(--gold); color: var(--gold-2); box-shadow: 0 0 14px rgba(200, 170, 110, 0.18); }
.clash-rail-arrow { font-size: 20px; line-height: 1; }
.clash-rail-text { writing-mode: vertical-rl; font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 900px) {
  .layout.clash.scouted { grid-template-columns: minmax(0, 1fr); }
  .layout.clash.scouted .clash-rail { flex-direction: row; width: auto; padding: 8px 14px; position: static; }
  .clash-rail-text { writing-mode: horizontal-tb; }
}

.clash-body { display: grid; gap: 22px; }
.clash-team-head, .clash-sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; }
.clash-team-title, .clash-sec-title { margin: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.clash-team.side-theirs .clash-team-title { color: var(--enemy); }
.clash-team.side-ours .clash-team-title { color: var(--ally); }
.clash-team-name { color: var(--gold-2); font-weight: 600; }
.clash-team-avg { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--text-2); cursor: help; }
.clash-team-avg img { width: 26px; height: 26px; object-fit: contain; }
.clash-sec-note { font-size: 12px; color: var(--muted); cursor: help; }

/* Rank colours for the player cards */
.clash-player { --tier: #59636e; --tier-glow: rgba(89, 99, 110, 0.25); }
.tier-iron { --tier: #7d6a61; --tier-glow: rgba(125, 106, 97, 0.28); }
.tier-bronze { --tier: #b0714f; --tier-glow: rgba(176, 113, 79, 0.3); }
.tier-silver { --tier: #a8b6c3; --tier-glow: rgba(168, 182, 195, 0.28); }
.tier-gold { --tier: #e0b45a; --tier-glow: rgba(224, 180, 90, 0.32); }
.tier-platinum { --tier: #4cc4b2; --tier-glow: rgba(76, 196, 178, 0.3); }
.tier-emerald { --tier: #34c97a; --tier-glow: rgba(52, 201, 122, 0.3); }
.tier-diamond { --tier: #7d97ff; --tier-glow: rgba(125, 151, 255, 0.34); }
.tier-master { --tier: #c066ec; --tier-glow: rgba(192, 102, 236, 0.36); }
.tier-grandmaster { --tier: #ee5246; --tier-glow: rgba(238, 82, 70, 0.38); }
.tier-challenger { --tier: #f6d27e; --tier-glow: rgba(246, 210, 126, 0.42); }

.clash-players { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1500px) { .layout.clash:not(.scouted) .clash-players { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 1250px) { .clash-players { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.clash-player {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px 12px;
  border: 1px solid var(--border); border-top: 3px solid var(--tier); border-radius: var(--radius);
  background: radial-gradient(120% 70% at 50% 0, var(--tier-glow), transparent 62%), linear-gradient(180deg, var(--surface), var(--bg-2));
  box-shadow: var(--shadow);
}
.cp-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
.cp-lane { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--gold-dim); color: var(--gold-2); cursor: help; }
.cp-lane img { width: 14px; height: 14px; }
.cp-lane.guessed { background: var(--surface-3); color: var(--text-2); }
.cp-lane small { color: var(--muted); font-weight: 400; margin-left: 2px; }
.side-theirs .cp-lane:not(.guessed) { background: rgba(232, 64, 87, 0.14); }
.side-ours .cp-lane:not(.guessed) { background: var(--ally-dim); }
.cp-captain { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-2, var(--gold)); background: linear-gradient(90deg, rgba(200, 170, 110, 0.28), rgba(200, 170, 110, 0.08)); border: 1px solid rgba(200, 170, 110, 0.7); border-radius: 999px; box-shadow: 0 0 12px rgba(200, 170, 110, 0.3); cursor: help; position: relative; overflow: hidden; }
.cp-captain svg { width: 16px; height: 12px; flex: none; filter: drop-shadow(0 0 4px rgba(240, 210, 140, 0.7)); }
.cp-captain .crown-body { fill: #f0d28c; stroke: #8a6d2f; stroke-width: 0.8; stroke-linejoin: round; }
.cp-captain .crown-band { fill: #c8aa6e; }
.cp-captain .crown-gem { fill: #0ac8b9; }
.cp-captain::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, 0.45) 50%, transparent 65%); transform: translateX(-120%); animation: cp-shine 4.5s ease-in-out infinite; }
@keyframes cp-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.clash-player:has(.cp-captain) .cp-icon { box-shadow: 0 0 0 2px #f0d28c, 0 0 16px rgba(240, 210, 140, 0.5); }
.cp-regalia { position: relative; height: 92px; display: grid; place-items: center; margin: -2px 0 0; }
.cp-emblem { position: absolute; width: 132px; height: 92px; object-fit: contain; opacity: 0.9; filter: drop-shadow(0 0 10px var(--tier-glow)); pointer-events: none; }
.cp-icon { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--tier); background: var(--surface-3); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 0 16px var(--tier-glow); }
.tier-unranked .cp-icon { width: 62px; height: 62px; }
.cp-name { display: flex; align-items: baseline; justify-content: center; gap: 2px; min-width: 0; font-size: 14px; }
.cp-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-name span { flex: none; font-size: 12px; color: var(--muted); }
.cp-rank { text-align: center; font-size: 12.5px; color: var(--text-2); margin-top: -4px; }
.cp-tier { color: var(--tier); font-weight: 700; }
.tier-unranked .cp-tier { color: var(--muted); font-weight: 600; }
.cp-record { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: -5px; }
.cp-sec { display: grid; gap: 5px; padding-top: 7px; border-top: 1px solid var(--border); }
.cp-sec h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cp-sec h4 small { font-weight: 600; letter-spacing: 0.06em; color: var(--text-2); }
.cp-sec h4 > span:last-child:not(:first-child) { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cp-sec h4 .warn { color: var(--warn); }
.cp-sec h4 b.good { color: var(--good); }
.cp-sec h4 b.bad { color: var(--bad); }
.cp-champs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.cp-champ { position: relative; display: grid; justify-items: center; gap: 1px; min-width: 0; cursor: help; }
.cp-champ img { width: 100%; max-width: 40px; aspect-ratio: 1; border: 1px solid var(--border-2); border-radius: var(--radius-sm); display: block; }
.cp-champ.main img { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(200, 170, 110, 0.35); }
.cp-badge { position: absolute; top: calc(min(100%, 40px) - 15px); right: 0; min-width: 16px; padding: 0 3px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; background: var(--bg); border: 1px solid var(--border-2); color: var(--text); }
.cp-champ.mastery .cp-badge { color: var(--gold-2); border-color: var(--gold); }
.cp-sub { display: inline-flex; align-items: center; gap: 2px; min-height: 13px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cp-flair { display: inline-block; width: 11px; height: 11px; background: url(img/mastery-4.webp) center / contain no-repeat; }
.cp-flair.best { background-image: url(img/mastery-7.webp); }
.cp-champ.skeleton i { width: 100%; max-width: 40px; aspect-ratio: 1; display: block; border-radius: var(--radius-sm); background: var(--surface-3); animation: clash-pulse 1.4s ease-in-out infinite; }
.cp-empty { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
p.cp-empty { margin: 0; }
.cp-recent { display: flex; gap: 5px; }
.cp-game { position: relative; cursor: help; }
.cp-game img { width: 26px; height: 26px; display: block; border: 1px solid; border-radius: var(--radius-sm); }
.cp-game.won img { border-color: var(--good); }
.cp-game.lost img { border-color: var(--bad); filter: saturate(0.6); opacity: 0.8; }
.cp-game small { position: absolute; right: -2px; bottom: -3px; font-size: 9px; font-weight: 800; line-height: 1; padding: 1px 2px; background: var(--bg); }
.cp-game.won small { color: var(--good); }
.cp-game.lost small { color: var(--bad); }
.clash-loading { color: var(--gold-2); animation: clash-pulse 1.4s ease-in-out infinite; }
@keyframes clash-pulse { 50% { opacity: 0.45; } }

/* Ban targets beside team comps */
.clash-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 14px; align-items: stretch; }
@media (max-width: 1350px) { .clash-mid { grid-template-columns: minmax(0, 1fr); } }
.clash-panel { padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: var(--shadow); }
.clash-ban-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
/* 12 ban targets and 12 priority picks: three across, four down. */
@media (min-width: 1351px) { .clash-mid-col .clash-ban-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, 68px); } }
.clash-ban { display: grid; grid-template-columns: 14px 34px minmax(0, 1fr) 36px; align-items: center; gap: 7px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-2); cursor: help; transition: opacity 0.3s; }
.clash-ban-rank { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.clash-ban img { width: 34px; height: 34px; border-radius: var(--radius-sm); }
.clash-ban-text { display: grid; min-width: 0; font-size: 13px; }
.clash-ban-text .muted { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clash-ban-bar { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.clash-ban-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--enemy), var(--warn)); }
.clash-ban.gone { opacity: 0.4; }
.clash-ban.gone img { filter: grayscale(1); }
.clash-ban.gone b { text-decoration: line-through; }
.clash-mid-col { display: grid; gap: 14px; min-width: 0; align-content: start; }
/* Personal picks: a lite Draft table in place of bans & priority, the same height so nothing moves. */
.clash-personal { height: var(--clash-mid-h, 747px); display: flex; flex-direction: column; min-height: 0; }
.clash-personal .clash-sec-head { align-items: center; }
.clash-personal-lanes { display: flex; gap: 4px; margin-left: auto; }
.clash-personal-lanes .chip { padding: 3px 6px; cursor: pointer; opacity: 0.7; }
.clash-personal-lanes .chip:hover { opacity: 0.85; }
.clash-personal-lanes .chip.active { opacity: 1; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.clash-personal-lanes .chip img { width: 16px; height: 16px; display: block; }
.clash-personal-caption { margin: 0 0 8px; font-size: 12px; line-height: 1.4; }
.clash-personal-wrap { flex: 1; min-height: 0; max-height: none; }
.clash-personal-wrap.stale tbody { opacity: 0.55; transition: opacity 0.2s; }
.lite-table th, .lite-table td { padding: 0 7px; height: 40px; font-size: 12.5px; }
.lite-table th { height: 34px; font-size: 10px; }
.lite-table th:nth-child(2), .lite-table td:nth-child(2) { text-align: right; width: auto; }
.lite-table th:first-child, .lite-table td:first-child { width: 1%; color: var(--text); font-size: 12.5px; text-align: left; }
.lite-table tbody tr:first-child td:first-child { color: var(--gold); }
.lite-table .champ img { width: 26px; height: 26px; }
.lite-table th.col-lane img { width: 24px; height: 24px; }
.lite-table th.col-lane { text-align: center; }
tbody tr.planned-row td { background: rgba(200, 170, 110, 0.1); }
tbody tr.planned-row td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.lock-tag.plan-tag { color: var(--gold); border-color: var(--gold); border-style: dashed; }
/* Switch between bans & priority and personal picks: tabs on the left edge of the column they switch.
   With the form folded they sit in the rail's gutter; with it open they take a slim first column. */
.clash-mid { position: relative; }
.clash-mode { display: flex; flex-direction: column; align-self: start; width: 44px; border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; }
.clash-mode { position: absolute; top: 0; left: -64px; }
.clash-mode button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; border: 0; background: var(--bg-2); color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, background 0.15s; }
.clash-mode button + button { border-top: 1px solid var(--border-2); }
.clash-mode button:hover { color: var(--text); }
.clash-mode button.active { color: var(--gold-2); background: linear-gradient(90deg, rgba(200, 170, 110, 0.18), rgba(200, 170, 110, 0.05)); box-shadow: inset 2px 0 0 var(--gold); }
.clash-mode-icon { font-size: 14px; line-height: 1; }
.clash-mode-text { writing-mode: vertical-rl; }
@media (max-width: 1350px) {
  .clash-mode { position: static; flex-direction: row; width: auto; }
  .clash-mode button { flex: 1; flex-direction: row; justify-content: center; padding: 9px 8px; }
  .clash-mode button + button { border-top: 0; border-left: 1px solid var(--border-2); }
  .clash-mode-text { writing-mode: horizontal-tb; }
}
/* Team comps stretch to the ban/priority column's height. */
.clash-comps { display: flex; flex-direction: column; }
.clash-comps .clash-comp-list { flex: 1; grid-auto-rows: 1fr; }

/* The plan: click to plan bans and picks; drag players to swap lanes. */
.clash-ban.plannable, .cp-champ.plannable, .clash-comp-member.plannable { cursor: pointer; }
.clash-ban.plannable { transition: border-color 0.15s, background 0.15s, opacity 0.3s; }
.clash-ban.plannable:hover { border-color: var(--border-2); }
.clash-ban.planned { border-color: var(--enemy); background: linear-gradient(90deg, rgba(232, 64, 87, 0.16), var(--bg-2) 70%); }
.clash-ban.planned img { filter: grayscale(0.85); box-shadow: 0 0 0 2px var(--enemy); }
.clash-ban.planned .clash-ban-text .muted:last-child { color: var(--enemy); font-weight: 600; }
.clash-prio-pick.planned { border-color: var(--ally); background: linear-gradient(90deg, var(--ally-dim), var(--bg-2) 70%); box-shadow: 0 0 10px var(--ally-dim); }
.clash-prio-pick.planned img { box-shadow: 0 0 0 2px var(--ally); }
.cp-champ.plannable:hover img { border-color: var(--gold); }
.cp-champ.planned img { border-color: var(--ally); box-shadow: 0 0 0 2px var(--ally), 0 0 10px var(--ally-dim); }
.clash-comp-member.plannable:hover .clash-comp-portrait img:first-child { border-color: var(--gold); }
.clash-comp-member.planned .clash-comp-portrait img:first-child { border: 1px dashed var(--ally); box-shadow: 0 0 0 1px var(--ally-dim), 0 0 10px var(--ally-dim); }
.cp-plan { display: grid; padding-top: 6px; border-top: 1px solid var(--border); }
.cp-plan input { width: 100%; padding: 5px 8px; font-size: 12px; border-radius: var(--radius-sm); }
.cp-plan .ac-list { left: 0; right: 0; }
.cp-plan.set { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.cp-plan.set img { width: 30px; height: 30px; border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--ally), 0 0 10px var(--ally-dim); }
.cp-plan.set span { display: grid; min-width: 0; line-height: 1.15; }
.cp-plan.set small { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ally); }
.cp-plan.set b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-plan-x { width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 15px; line-height: 1; }
.clash-player .cp-lane[draggable='true'], .clash-player .cp-regalia[draggable='true'] { cursor: grab; }
.clash-player.dragging { opacity: 0.4; }
/* Locked in: the champion's loading-screen art behind the top of the card, fading into it */
.clash-player.locked { isolation: isolate; }
.cp-splash {
  position: absolute; inset: 0 0 auto; height: 340px; z-index: -1; pointer-events: none;
  background: center 12% / cover no-repeat; opacity: 0; transition: opacity 0.5s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.cp-splash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 10, 19, 0.15), rgba(1, 10, 19, 0.55) 55%, rgba(1, 10, 19, 0.85)); }
.cp-splash.loaded { opacity: 0.75; }
.clash-player.locked .cp-name, .clash-player.locked .cp-rank, .clash-player.locked .cp-record { text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
.cp-locked {
  display: flex; align-items: center; justify-content: center; gap: 8px; align-self: center; margin: 2px 0;
  padding: 3px 14px 3px 3px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--ally); border-radius: 999px; background: rgba(1, 10, 19, 0.7); color: var(--text);
  box-shadow: 0 0 14px var(--ally-dim);
}
.side-theirs .cp-locked { border-color: var(--enemy); box-shadow: 0 0 14px rgba(232, 64, 87, 0.3); }
.cp-locked img { width: 26px; height: 26px; border-radius: 50%; }
.clash-player.drop-target { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: var(--ring), var(--shadow); }
.clash-team-spacer { display: flex; align-items: center; }
.clash-reset-lanes { padding: 4px 10px; font-size: 12px; }
.clash-plan-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 2px 4px 2px 10px; border-radius: 999px; font-size: 11.5px; color: var(--gold-2); background: var(--gold-dim); border: 1px solid rgba(200, 170, 110, 0.45); white-space: nowrap; }
.clash-plan-chip button { padding: 1px 8px; font-size: 11px; border-radius: 999px; }
.clash-demo-draft { margin-left: auto; padding: 2px 10px; font-size: 11.5px; border-radius: 999px; }
.clash-plan-chip + .clash-demo-draft { margin-left: 0; }
.clash-demo-draft.on { color: var(--bad); border-color: rgba(232, 64, 87, 0.5); }
.clash-draft-row { display: flex; align-items: center; gap: 12px; margin: -2px 0 10px; padding: 6px 10px; min-height: 46px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.clash-draft-label { flex: none; width: 112px; white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; color: var(--bad); }
.clash-draft-slots { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.clash-slot { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm); }
.clash-slot img:first-child { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--enemy); }
.clash-slot.empty { border: 1px dashed var(--border-2); background: var(--surface-3); opacity: 0.55; }
.clash-slot.empty .member-lane { opacity: 0.8; }
.clash-slot .member-lane { width: 14px; height: 14px; left: -4px; top: -4px; }
.clash-slot .member-lane img { width: 10px; height: 10px; }
.clash-slot.banned img { filter: grayscale(1) brightness(0.75); }
.clash-slot.banned::after, .clash-slot.planned-ban::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, transparent 46%, var(--enemy) 46%, var(--enemy) 54%, transparent 54%); pointer-events: none; }
.clash-slot.planned-ban img { border-style: dashed; filter: grayscale(0.6); }
.clash-slot.planned-ban::after { opacity: 0.6; }
.clash-slot.plannable { cursor: pointer; }
.clash-slot.plannable:hover img { border-color: var(--warn); }
.clash-prio-pick .clash-ban-bar i { background: linear-gradient(90deg, var(--ally), var(--good, #3ecf8e)); }
/* Always four rows tall so fewer suggestions (decided lanes) don't shift the layout. */
.clash-prio-list { grid-template-rows: repeat(4, 68px); }
.clash-prio-pick.ours { border-color: color-mix(in srgb, var(--ally) 45%, var(--border)); }
.clash-prio-ours { margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--ally); white-space: nowrap; }

.clash-live { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bad); background: rgba(232, 64, 87, 0.12); }
.clash-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: clash-pulse 1.2s ease-in-out infinite; }
.clash-comps.stale .clash-comp-list { opacity: 0.55; transition: opacity 0.2s; }
.clash-comp-list { display: grid; gap: 6px; }
.clash-comp { display: grid; grid-template-columns: 18px minmax(0, 1fr) 74px; grid-template-areas: 'rank members score' 'rank chips chips'; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.clash-comp.best { border-color: rgba(200, 170, 110, 0.55); background: linear-gradient(90deg, var(--gold-dim), var(--bg-2) 55%); }
.clash-comp-rank { grid-area: rank; align-self: start; padding-top: 12px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.clash-comp.best .clash-comp-rank { color: var(--gold); }
.clash-comp-members { grid-area: members; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.clash-comp-member { display: grid; justify-items: center; gap: 1px; min-width: 0; text-align: center; cursor: help; }
.clash-comp-portrait { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.clash-comp-portrait img:first-child { width: 40px; height: 40px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); }
.clash-comp-member.empty .clash-comp-portrait { border: 1px dashed var(--border); opacity: 0.5; }
.member-lane { position: absolute; left: -5px; top: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-2); }
.member-lane img { width: 11px; height: 11px; }
.clash-comp-member.locked .clash-comp-portrait img:first-child { border-color: var(--ally); box-shadow: 0 0 0 1px var(--ally), 0 0 10px var(--ally-dim); }
.clash-comp-name { max-width: 100%; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clash-comp-player { max-width: 100%; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clash-comp-score { grid-area: score; display: grid; justify-items: end; gap: 3px; }
.clash-comp-score .team-wr { font-size: 22px; }
.clash-comp-score .muted { font-size: 11px; color: var(--muted); cursor: help; }
.clash-comp-chips { grid-area: chips; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.clash-comp-chips .chip { height: 22px; cursor: help; }
.clash-comp-damage { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; cursor: help; }
.clash-comp-damage .warn { color: var(--warn); }
.clash-comp-damage .muted { color: var(--muted); }
/* Team emblems (Clash logo, or a crest placeholder) */
.clash-emblem { flex: none; display: grid; place-items: center; }
.clash-emblem img { width: 100%; height: 100%; object-fit: contain; }
.clash-emblem.large { width: 64px; height: 64px; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)); }
.clash-emblem.small { width: 24px; height: 24px; }
.clash-emblem svg { width: 100%; height: 100%; overflow: visible; }
.clash-emblem { --crest: var(--gold); }
.clash-emblem.side-theirs { --crest: var(--enemy); }
.clash-emblem.side-ours { --crest: var(--ally); }
.crest-shield { fill: color-mix(in srgb, var(--crest) 16%, var(--bg-2)); stroke: var(--crest); stroke-width: 2.5; }
.crest-ring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0.85; }
.crest-core { fill: var(--crest); }
.clash-emblem.large.crest { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--crest) 35%, transparent)); }
.clash-team-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 76px; }
.clash-team-head .clash-team-avg { justify-self: end; margin-left: 0; }
.clash-team-banner { position: relative; display: flex; align-items: center; min-width: 0; }
.clash-team-banner > .clash-emblem { position: absolute; left: calc(100% + 18px); top: 50%; transform: translateY(-50%); }
.clash-team-id { display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; }
.clash-team-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.clash-team-eyebrow::before, .clash-team-eyebrow::after { content: ''; display: inline-block; width: 26px; height: 1px; margin: 0 10px; vertical-align: middle; background: currentColor; opacity: 0.6; }
.clash-team-name {
  --name: #f0d28c; --name-glow: rgba(240, 210, 140, 0.45);
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: 0.06em; word-spacing: 0.15em; text-transform: uppercase;
  color: var(--name);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px var(--name-glow));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; padding: 0 2px;
}
.clash-team.side-theirs .clash-team-name { --name: #ff6b7f; --name-glow: rgba(232, 64, 87, 0.5); }
.clash-team.side-ours .clash-team-name { --name: #2fe0cf; --name-glow: rgba(10, 200, 185, 0.5); }
.clash-team.side-theirs .clash-team-eyebrow { color: var(--enemy); }
.clash-team.side-ours .clash-team-eyebrow { color: var(--ally); }
.clash-team-head .clash-team-title { display: flex; align-items: center; gap: 12px; }
.clash-team-tag { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 1px 7px; border: 1px solid currentColor; border-radius: var(--radius-sm); opacity: 0.8; }

/* Tournament bracket: both halves meet at the final in the middle */
.clash-bracket { padding-bottom: 16px; }
.bk-status { color: var(--text-2); font-weight: 600; }
.bk-heads { display: grid; margin: 2px 0 6px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bk-area { position: relative; margin-top: 26px; }
.bk-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bk-lines path { fill: none; stroke: var(--border-2); stroke-width: 1.5; }
.bk-lines path.done { stroke: color-mix(in srgb, var(--gold) 45%, var(--border-2)); }
.bk-lines path.theirs { stroke: var(--enemy); }
.bk-lines path.ours { stroke: var(--ally); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--ally)); }
.bk-match { position: absolute; transform: translateY(-50%); display: grid; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.bk-match.final { border-color: var(--gold); }
.bk-match.current { border-color: var(--ally); box-shadow: 0 0 0 1px var(--ally), 0 0 18px var(--ally-dim); animation: bk-glow 2.2s ease-in-out infinite; }
.bk-match.started::after { content: 'Live'; position: absolute; top: -9px; right: 6px; padding: 0 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg); background: var(--bad); }
@keyframes bk-glow { 50% { box-shadow: 0 0 0 1px var(--ally), 0 0 28px color-mix(in srgb, var(--ally) 45%, transparent); } }
.bk-team { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 5px; font-size: 12.5px; cursor: default; }
.bk-team + .bk-team { border-top: 1px solid var(--border); }
.bk-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.bk-name b { flex: none; font-size: 11px; letter-spacing: 0.06em; color: var(--text-2); }
.bk-name span { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.bk-team.side-ours { background: linear-gradient(90deg, var(--ally-dim), transparent); }
.bk-team.side-ours .bk-name b, .bk-team.side-ours .bk-name span { color: var(--ally); }
.bk-team.side-theirs { background: linear-gradient(90deg, rgba(232, 64, 87, 0.14), transparent); }
.bk-team.side-theirs .bk-name b, .bk-team.side-theirs .bk-name span { color: var(--enemy); }
.bk-team.lost { opacity: 0.42; }
.bk-team.lost .bk-name span { text-decoration: line-through; }
.bk-team.tbd .bk-name span { color: var(--faint); font-style: italic; }
.bk-team.tbd .clash-emblem { opacity: 0.35; }
.bk-result { font-size: 11px; font-weight: 800; }
.bk-team.won .bk-result { color: var(--good); }
.bk-team.lost .bk-result { color: var(--bad); }
.bk-trophy { position: absolute; transform: translate(-50%, calc(-100% - 34px)); display: grid; justify-items: center; gap: 1px; pointer-events: none; }
.bk-cup { width: 42px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(10, 200, 185, 0.35)) drop-shadow(0 0 14px rgba(200, 170, 110, 0.35)); }
.bk-trophy small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.bk-trophy.ours small { color: var(--ally); }
@media (max-width: 1100px) { .bk-name b { display: none; } .bk-team { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 5px; font-size: 11.5px; } .clash-emblem.small { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .clash-loading, .clash-live::before, .cp-champ.skeleton i, .bk-match.current, .cp-captain::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .clash-loading { animation: none; } }

/* ---------- match history ---------- */
body.view-history #go { display: none; }
.hx-form { display: grid; grid-template-columns: minmax(0, 1fr) 74px; gap: 8px; }
.hx-form input, .hx-form select { height: 34px; }
.hx-form .btn-go { grid-column: 1 / -1; }
.hx-me { margin-top: 8px; width: 100%; }
.hx-profile { display: flex; flex-direction: column; gap: 12px; }
.hx-head { display: flex; align-items: center; gap: 12px; }
.hx-icon { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
.hx-who { display: flex; flex-direction: column; min-width: 0; }
.hx-who b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-who small { color: var(--muted); font-size: 12px; }
.hx-ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hx-rank { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hx-rank small { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.hx-rank b { font-size: 15px; color: var(--gold-2); }
.hx-rank.none b { color: var(--muted); font-weight: 600; }
.hx-rank span { font-size: 11.5px; color: var(--muted); }
.hx-recent-row { display: flex; align-items: center; gap: 14px; }
.hx-ring { --wr: 50%; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--good) 0 var(--wr), color-mix(in srgb, var(--bad) 70%, transparent) var(--wr) 100%); }
.hx-ring b { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 14px; }
.hx-recent-stats { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.hx-recent-stats b { font-size: 15px; color: var(--text); }
.hx-champs { display: flex; flex-direction: column; gap: 6px; }
.hx-champ { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.hx-champ img, .hx-champ .hx-blank { border-radius: var(--radius-sm); }
.hx-champ-name { display: flex; flex-direction: column; min-width: 0; }
.hx-champ-name b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-champ-name small, .hx-champ-games { font-size: 11px; color: var(--faint); }
.hx-champ-wr { font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-champ-wr.good { color: var(--good); }
.hx-champ-wr.bad { color: var(--bad); }
.hx-champ-games { min-width: 52px; text-align: right; }
.hx-role-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hx-role { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }
.hx-role-bar { width: 14px; height: 54px; display: flex; align-items: flex-end; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.hx-role-bar i { display: block; width: 100%; background: linear-gradient(180deg, var(--gold-2), var(--gold)); }

.hx-bar { flex-wrap: wrap; }
.hx-list { display: flex; flex-direction: column; gap: 6px; }
.hx-list:empty { display: none; }
.hx-list:not(:empty) ~ #hx-hint { display: none; }
.hx-list.loading { opacity: 0.55; pointer-events: none; }
.hx-match { --res: var(--muted); border: 1px solid var(--border); border-left: 4px solid var(--res); border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--res) 12%, var(--surface)), var(--surface) 55%); }
.hx-match.win { --res: var(--good); }
.hx-match.loss { --res: var(--bad); }
.hx-row { display: grid; grid-template-columns: 100px auto 96px 110px auto minmax(0, 1fr) 18px; align-items: center; gap: 16px;
  width: 100%; padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.hx-row:hover { background: rgba(255, 255, 255, 0.03); }
.hx-row:focus-visible { outline: none; box-shadow: var(--ring); }
.hx-game { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hx-game b { font-size: 12px; color: var(--res); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-game small { font-size: 11px; color: var(--faint); }
.hx-result { font-size: 13px; font-weight: 700; color: var(--text); }
.hx-loadout { display: flex; align-items: center; gap: 4px; }
.hx-champ-icon { position: relative; display: block; margin-right: 2px; }
.hx-champ-icon img, .hx-champ-icon .hx-blank { display: block; border-radius: 50%; }
.hx-champ-icon i { position: absolute; right: -3px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; display: grid; place-items: center;
  font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--bg); border: 1px solid var(--border-2); }
.hx-stack { display: flex; flex-direction: column; gap: 3px; }
.hx-stack img, .hx-stack .hx-blank { border-radius: 4px; display: block; }
.hx-stack img.hx-keystone { border-radius: 50%; background: var(--bg); }
.hx-stack img.hx-tree { padding: 2px; }
.hx-kda, .hx-cs { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.hx-kda b { font-size: 14px; white-space: nowrap; }
.hx-kda em { font-style: normal; color: var(--bad); }
.hx-kda small, .hx-cs small { font-size: 11px; color: var(--faint); }
.hx-cs span { font-size: 12px; white-space: nowrap; }
.hx-items { display: grid; grid-template-columns: repeat(4, 24px); gap: 2px; }
.hx-items img, .hx-items .hx-blank { border-radius: 4px; display: block; }
.hx-blank { display: inline-block; background: var(--bg-2); border-radius: 4px; }
.hx-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.hx-teams.arena { grid-template-columns: 1fr; }
.hx-team { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hx-p { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); min-width: 0; }
.hx-p img, .hx-p .hx-blank { border-radius: 3px; flex: none; }
.hx-p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-p.me { color: var(--text); font-weight: 700; }
.hx-chev { font-size: 20px; color: var(--muted); transition: transform 0.15s; justify-self: end; }
.hx-match.open .hx-chev { transform: rotate(90deg); }
.hx-detail { display: none; padding: 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.hx-match.open .hx-detail { display: block; }
.hx-more { align-self: center; margin-top: 6px; min-width: 140px; }
.hx-empty { margin: 8px 0; font-size: 12.5px; color: var(--muted); }
.hx-empty.error, #hx-status.error { color: var(--bad); }
.hx-pg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px 24px; }
.pg-player { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pg-player:hover, .pg-player:focus-visible { color: var(--gold-2); text-decoration: underline; outline: none; }

.hx-build { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.hx-build h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hx-build-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hx-build-champ { padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; opacity: 0.55; transition: opacity 0.15s; }
.hx-build-champ img, .hx-build-champ .hx-blank { display: block; border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--team, var(--border)); }
.hx-build-champ.ally { --team: var(--ally); }
.hx-build-champ.enemy { --team: var(--enemy); }
.hx-build-champ.enemy:not(.enemy ~ .enemy) { margin-left: 12px; }
.hx-build-champ:hover { opacity: 0.85; }
.hx-build-champ.active { opacity: 1; }
.hx-build-champ.active img { box-shadow: 0 0 0 2px var(--gold-2), 0 0 10px var(--gold); }
.hx-build-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 28px; align-items: start; }
.hx-buys-block { grid-column: 1 / -1; }
.hx-build-block h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.hx-build-block h4 small { margin-left: 6px; color: var(--gold-2); text-transform: none; letter-spacing: 0; font-size: 12px; }
.hx-runes { display: flex; flex-direction: column; gap: 8px; }
.hx-spells, .hx-tree { display: flex; align-items: center; gap: 6px; }
.hx-spells img { border-radius: 4px; }
.hx-tree img { border-radius: 50%; background: var(--bg); }
.hx-tree img.hx-tree-icon { background: none; opacity: 0.8; }
.hx-tree img.hx-keystone { box-shadow: 0 0 0 1px var(--gold); }
.hx-shards { padding-left: 24px; }
.hx-skills { display: grid; grid-template-columns: 18px repeat(var(--levels), 20px); gap: 2px; }
.hx-skill-key { display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.hx-lvl { height: 20px; border-radius: 3px; background: var(--bg-2); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-lvl.on { color: var(--bg); background: var(--gold); }
.hx-lvl.on.k1 { background: #4fa3e0; }
.hx-lvl.on.k2 { background: #57c38a; }
.hx-lvl.on.k3 { background: #c98be6; }
.hx-lvl.on.k4 { background: var(--gold-2); }
.hx-buys { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 4px; }
.hx-buys > img { border-radius: 4px; }
.hx-trip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hx-trip:not(:last-child)::after { content: none; }
.hx-trip + .hx-trip { padding-left: 14px; position: relative; }
.hx-trip + .hx-trip::before { content: '›'; position: absolute; left: 2px; top: 3px; color: var(--faint); }
.hx-trip-items { display: flex; gap: 2px; }
.hx-trip small { font-size: 10.5px; color: var(--faint); }
.hx-buy { position: relative; display: block; }
.hx-buy img { display: block; border-radius: 4px; }
.hx-buy i { position: absolute; right: -2px; bottom: -2px; font-style: normal; font-size: 9.5px; font-weight: 700; padding: 0 3px; border-radius: 6px; background: var(--bg); }
@media (max-width: 1400px) {
  .hx-row { grid-template-columns: 96px auto 92px 104px auto 18px; }
  .hx-teams { display: none; }
}
@media (max-width: 1100px) {
  .hx-pg, .hx-build-body { grid-template-columns: minmax(0, 1fr); }
}