/* layout */
.board-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--gap);
  padding: var(--gap);
}
/* each team is marked by a coloured edge on its outer side instead of a heading */
.team { --team-color: var(--ally); --edge: 2px; grid-row: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--slot-gap); padding: var(--space-2); border-radius: var(--radius-xl); background: linear-gradient(90deg, color-mix(in oklch, var(--team-color) 9%, transparent), transparent 80%); box-shadow: inset var(--edge) 0 0 var(--team-color); }
.team.ally { grid-column: 1; }
.team.enemy { --team-color: var(--enemy); --edge: -2px; grid-column: 3; background: linear-gradient(270deg, color-mix(in oklch, var(--team-color) 9%, transparent), transparent 80%); }
/* the client pulses a team's edge 10 times when its pick has under 11 seconds left */
.team.urgent { animation: urgent-edge 1s ease-in-out 10; animation-delay: var(--urgent-delay); }
@keyframes urgent-edge {
  0%, 100% { box-shadow: var(--edge-light), inset 0 2px 0 var(--team-color); }
  50% { box-shadow: var(--edge-light), inset 0 2px 0 var(--team-color), inset 0 0 34px -8px var(--team-color), 0 0 0 1px var(--team-color); }
}

/* pick slots */
.slot {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-slot);
  border: 1px solid var(--line-slot);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.slot.you { background: color-mix(in oklch, var(--amber) 6%, transparent); border-color: color-mix(in oklch, var(--amber) 45%, transparent); cursor: grab; }
.slot.you.locked { cursor: default; }
.slot.you::before { content: ""; position: absolute; left: 3px; top: 50%; translate: 0 -50%; border: 5px solid transparent; border-left: 6px solid var(--amber); }
.slot-portrait { position: relative; flex: none; }
/* the role sits on the portrait's outer corner, like the client's position icon */
.slot-portrait .role-badge { position: absolute; right: -8px; bottom: -8px; box-shadow: 0 0 0 2px var(--bg-slot), inset 0 0 0 1.5px var(--line-3); }
.team.enemy .slot-portrait .role-badge { right: auto; left: -8px; }
.slot-portrait .role-badge.auto, .slot-portrait .role-badge.guessed { box-shadow: 0 0 0 2px var(--bg-slot); }
.slot-portrait .role-badge.you { box-shadow: 0 0 0 2px var(--bg-slot), inset 0 0 0 1.5px var(--amber); }
.slot.active {
  background: color-mix(in oklch, var(--amber) 7%, transparent);
  border-color: var(--amber);
  box-shadow: var(--ring-amber), 0 0 22px color-mix(in oklch, var(--amber) 16%, transparent);
}
.slot.menu-open { z-index: 30; }
.slot-icon {
  flex: none;
  width: var(--slot-icon);
  height: var(--slot-icon);
  border-radius: var(--radius-md);
  border: 1px dashed var(--line-soft);
}
.team.ally .slot.filled .slot-icon { border-style: solid; border-color: color-mix(in oklch, var(--ally) 55%, transparent); }
.team.enemy .slot.filled .slot-icon { border-style: solid; border-color: color-mix(in oklch, var(--enemy) 55%, transparent); }
.slot.you .slot-icon { border-style: solid; border-color: color-mix(in oklch, var(--amber) 60%, transparent); }
.slot.active .slot-icon { border-color: var(--amber); }
.slot-ph { font: 600 14px/1 var(--font-display); color: var(--line-2); }
.slot.active .slot-ph { color: var(--amber); }
.slot.landed .slot-icon img { animation: land var(--dur-fast) ease-out; }
/* a hover is counted like a pick, so it has to look unfinished: grey, dimmed, dashed */
.slot.hovering .slot-icon { border-style: dashed; border-color: var(--text-3); }
.slot.hovering .slot-icon img { filter: grayscale(1) brightness(.8); opacity: .7; }
.slot.hovering .slot-name { color: var(--text-2); font-style: italic; }
/* the client's own lock-in: a gold ring shrinks around the portrait while a light band sweeps across, 600 ms */
.slot.lock-in .slot-icon { animation: lockin-pop var(--dur-lockin) var(--ease-snap) both; animation-delay: var(--lockin-delay); }
.slot.lock-in .slot-icon::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -70%;
  width: 46%;
  background: linear-gradient(100deg, transparent, oklch(0.97 0.05 85 / .85), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
  animation: lockin-shine var(--dur-lockin) var(--ease-sweep) both;
  animation-delay: var(--lockin-delay);
}
@keyframes lockin-pop {
  0% { box-shadow: 0 0 0 6px oklch(0.93 0.13 100 / .95), 0 0 22px 8px oklch(0.85 0.12 85 / .7); }
  38% { box-shadow: 0 0 0 2px oklch(0.90 0.12 90 / .85), 0 0 12px 4px oklch(0.85 0.12 85 / .45); }
  100% { box-shadow: 0 0 0 0 oklch(0.90 0.12 90 / 0), 0 0 0 0 oklch(0.85 0.12 85 / 0); }
}
@keyframes lockin-shine { from { left: -70%; } to { left: 130%; } }
/* only your own slot names its champion; the others show theirs in the hover card */
.slot-name { max-width: 100%; font: 600 13px/1.1 var(--font-ui); color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* countdown of the pick or ban that runs now, in the colour of who is acting */
@property --turn-left { syntax: "<number>"; inherits: false; initial-value: 1; }
.turn-ring {
  --ring-color: var(--ally);
  position: absolute;
  inset: -5px;
  padding: 2.5px;
  border-radius: var(--radius-xl);
  pointer-events: none;
  background: conic-gradient(var(--ring-color) calc(var(--turn-left) * 1turn), oklch(1 0 0 / .08) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: turn-countdown linear both;
  animation-duration: var(--turn-total);
  animation-delay: var(--turn-delay);
}
.turn-ring.you { --ring-color: var(--amber); }
.turn-ring.enemy { --ring-color: var(--enemy); }
@keyframes turn-countdown { from { --turn-left: 1; } to { --turn-left: 0; } }
/* pick snipe: the champion you hovered was banned or taken; grey, slashed, shaken, with a red flash */
.slot.sniped { animation: snipe-flash 1.13s ease-out both; animation-delay: var(--snipe-delay); }
.slot.sniped .slot-portrait { animation: snipe-shake .3s ease-in-out; animation-delay: var(--snipe-delay); }
.slot.sniped .slot-icon img { filter: grayscale(1) brightness(.6); }
.snipe-slash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, transparent 46%, var(--neg) 47%, var(--neg) 53%, transparent 54%); }
@keyframes snipe-flash { from { box-shadow: inset 0 0 0 1px var(--neg), inset 0 0 26px color-mix(in oklch, var(--neg) 45%, transparent); } to { box-shadow: inset 0 0 0 1px transparent, inset 0 0 26px transparent; } }
@keyframes snipe-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.tag {
  flex: none;
  font: 600 9px/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--live);
  border: 1px solid color-mix(in oklch, var(--live) 50%, transparent);
  cursor: default;
}
.tag.neutral { color: var(--text-2); border-color: var(--line-3); }

/* role icons are the client's own position SVGs, coloured by the text colour */
.role-svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.role-badge {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-1);
  box-shadow: inset 0 0 0 1.5px var(--line-3);
  cursor: pointer;
}
.role-badge .role-svg { width: 15px; height: 15px; }
.role-badge.auto { box-shadow: none; outline: 1.5px dashed var(--line-2); outline-offset: -1.5px; color: var(--text-4); }
/* a guessed role: the ring fills to the share of their games in that role */
.role-badge.guessed { box-shadow: none; color: var(--text-2); }
.role-badge.guessed::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--space-1);
  border-radius: 50%;
  background: conic-gradient(var(--text-2) calc(var(--share) * 1turn), var(--line-2) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.role-badge.you { box-shadow: inset 0 0 0 1.5px var(--amber); color: var(--amber); cursor: default; }
.role-badge.locked { cursor: default; }
.role-badge:not(.locked):not(.you):hover { color: var(--text-1); }
@media (max-width: 1199px) {
  .slot { gap: var(--space-2); padding: var(--space-2); }
  .role-badge { width: 20px; height: 20px; }
  .role-badge .role-svg { width: 13px; height: 13px; }
  .slot-portrait .role-badge { right: -6px; bottom: -6px; }
  .team.enemy .slot-portrait .role-badge { left: -6px; }
}

.slot-x {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-raised-2);
  color: var(--text-2);
  font: 500 14px/18px var(--font-ui);
  cursor: pointer;
}
.team.enemy .slot-x { right: auto; left: 4px; }
.slot:hover .slot-x { display: block; }
body.dragging .slot-x { display: none; }
.slot-x:hover { background: var(--bg-chip); color: var(--text-1); }

.menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  width: 164px;
  padding: var(--space-2);
  background: var(--bg-raised-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: 1px;
  cursor: default;
}
.menu.up { top: auto; bottom: calc(100% + 4px); }
.team.enemy .menu { left: auto; right: 0; }
.menu-title { padding: var(--space-3) var(--space-4) 5px; font: 600 10px/1 var(--font-display); letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--text-3); }
.menu-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: 500 13px/1 var(--font-ui);
  cursor: pointer;
  text-align: left;
}
.menu-option:hover, .menu-option.current { background: var(--bg-chip); }
.menu-option.current { color: var(--text-1); }
.menu-option .abbr { display: grid; place-items: center; width: 14px; height: 14px; color: var(--text-3); }
.menu-option.current .abbr { color: var(--text-1); }

/* bans, under their own team */
/* three bans on top, two centred below */
.ban-row { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); max-width: calc(var(--ban) * 3 + 8px); margin-inline: auto; }
.ban {
  flex: none;
  width: var(--ban);
  height: var(--ban);
  border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in oklch, var(--ally) 25%, transparent);
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ban.enemy-ban { border-color: color-mix(in oklch, var(--enemy) 25%, transparent); }
.ban.filled { border-style: solid; }
.ban.active { border-style: solid; border-color: var(--amber); box-shadow: var(--ring-amber); }
.ban-ph { font: 600 10px var(--font-mono); color: var(--amber); }
.ban img { filter: grayscale(.85) brightness(.75); }
.ban-slash { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 46%, rgba(231, 233, 238, .6) 47%, rgba(231, 233, 238, .6) 53%, transparent 54%); }
.ban-empty { position: static !important; width: 55% !important; height: 55% !important; opacity: .28; filter: grayscale(1) !important; }
/* a new ban slams in like the client's, then the slash draws across it */
.ban.ban-in img { animation: ban-slam var(--dur-count) var(--ease-out) both; animation-delay: var(--lockin-delay); }
.ban.ban-in .ban-slash { animation: ban-slash .22s cubic-bezier(.5, 0, .2, 1) both; animation-delay: calc(var(--lockin-delay) + var(--dur-base)); }
@keyframes ban-slam { 0% { transform: scale(1.8); opacity: 0; filter: none; } 45% { transform: scale(1); opacity: 1; filter: none; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ban-slash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* drag states, shared by slots and bans */
.drop-ok { border-style: dashed !important; border-color: var(--line-3) !important; }
.drop-over {
  border-style: dashed !important;
  border-color: var(--amber) !important;
  background: color-mix(in oklch, var(--amber) 12%, transparent) !important;
  box-shadow: var(--ring-amber) !important;
}
.drop-bad {
  border-style: dashed !important;
  border-color: var(--neg) !important;
  background: color-mix(in oklch, var(--neg) 10%, transparent) !important;
  box-shadow: none !important;
}
.drag-source { opacity: .4; }

/* centre column */
.centre { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--slot-gap); }

.dmg-card {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--dmg-gap);
  padding: var(--dmg-pad);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.dmg-half { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); cursor: default; }
.dmg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.dmg-team { flex: none; align-self: center; width: 14px; height: 4px; border-radius: var(--radius-xs); background: var(--ally); }
.dmg-team.enemy { background: var(--enemy); }
.dmg-who { flex: none; display: flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.dmg-label { min-width: 0; display: flex; align-items: center; gap: var(--space-5); font: 600 12px/1.1 var(--font-ui); white-space: nowrap; overflow: hidden; }
.dmg-type { display: inline-flex; align-items: center; gap: 3px; font: 500 12px/1 var(--font-mono); color: var(--text-3); }
.dmg-type b { font: 700 11px/1 var(--font-display); letter-spacing: var(--tracking-label); }
.dmg-type.main { color: var(--text-1); font-weight: 700; }
.dmg-warn { display: inline-flex; color: var(--neg); }
.dmg-bar { position: relative; height: 10px; border-radius: var(--radius-sm); background: var(--bg-raised-2); outline: 1px solid transparent; outline-offset: 1px; overflow: hidden; display: flex; }
.dmg-bar.empty, .dmg-bar.likely { outline: 1px dashed var(--line-soft); }
.dmg-seg { flex: none; height: 100%; box-shadow: inset -1px 0 0 var(--bg-panel); transition: opacity .15s; }

.search-row { flex: none; display: flex; align-items: center; gap: var(--space-4); }
.search-row .choices { flex: none; flex-wrap: nowrap; }
.board-clear { flex: none; display: flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line-slot); background: var(--bg-panel); color: var(--text-2); font: 600 12px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; }
.board-clear:hover:not(:disabled) { border-color: var(--neg); color: var(--neg); }
.board-clear:disabled { color: var(--text-4); cursor: default; }
.board-clear[hidden] { display: none; }
.board-clear .ui-svg { width: 12px; height: 12px; }
.search-wrap { position: relative; flex: 1; min-width: 0; }
.search {
  width: 100%;
  height: 34px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-slot);
  background: var(--bg-panel);
  color: var(--text-1);
  font: 500 14px var(--font-ui);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.search:focus { border-color: var(--line-3); }
.search.hinting { border-color: color-mix(in oklch, var(--amber) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--amber) 25%, transparent); }
.search.hinting.full { border-color: var(--neg); box-shadow: none; }
.search-hint { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; font: 500 14px/1 var(--font-ui); color: var(--amber); white-space: nowrap; }
.search-hint.full { color: var(--neg); }

.grid-well { position: relative; flex: 1; min-height: 0; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--bg-bar); overflow: hidden; }
.grid-scroll { position: absolute; inset: 0; overflow-y: auto; padding: var(--space-5); }
@media (max-width: 1199px) { .grid-scroll { padding: var(--space-4); } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: var(--tile-gap); }
.grid-empty { padding: 40px var(--space-6); text-align: center; font: 500 13px/1.4 var(--font-ui); color: var(--text-3); }
.tile { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.tile-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  border: 1px solid var(--line-slot);
  transition: transform .1s, border-color .1s, box-shadow .1s;
}
.tile-icon img { transition: filter var(--dur-fast); }
/* names live in the hover card; a dot marks the team that took a champion, a slash a ban */
.tile { position: relative; }
.tile-mark { position: absolute; top: 3px; left: 3px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-bar); }
.tile-mark.ally { background: var(--ally); }
.tile-mark.enemy { background: var(--enemy); }
.tile-ban { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); background: linear-gradient(135deg, transparent 46%, color-mix(in oklch, var(--neg) 80%, transparent) 47%, color-mix(in oklch, var(--neg) 80%, transparent) 53%, transparent 54%); }
.tile:not(.used):hover .tile-icon { border-color: var(--line-hover); transform: translateY(-1px); }
body.picking .tile:not(.used):hover .tile-icon { border-color: var(--amber); box-shadow: var(--ring-amber); }
.tile.used { cursor: not-allowed; }
body.following .slot, body.following .ban, body.following .tile { cursor: default; }
body.following .tile:not(.used):hover .tile-icon { border-color: var(--line-slot); transform: none; }
.tile.used img { filter: grayscale(1) brightness(.4); }
.grid-remove {
  position: absolute;
  inset: 6px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-3);
  background: rgba(12, 14, 18, .55);
  display: none;
  place-items: center;
  pointer-events: none;
}
body.dragging-slot .grid-remove { display: grid; }
.grid-well.remove-over .grid-remove { border-color: var(--neg); background: color-mix(in oklch, var(--neg) 10%, transparent); }
.grid-remove span { font: 600 13px/1 var(--font-display); letter-spacing: var(--tracking-title); text-transform: uppercase; padding: var(--space-5) 14px; border-radius: var(--radius-md); background: var(--bg-app); }

/* suggestions */
.suggestions { grid-column: 4; grid-row: 1 / span 2; min-height: 0; display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
.sug-head { flex: none; padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-5); }
.sug-head .label { color: var(--text-2); }
/* your role: five equal tabs across the suggestions column */
.role-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.role-seg .choice { padding: 0 var(--space-2); }
.sug-body { flex: 1; min-height: 0; overflow-y: auto; }
.draft-page { height: calc(100vh - var(--top-h)); display: flex; flex-direction: column; }
.ui-svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.details-link { flex: none; display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); cursor: pointer; }
.details-link:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.details-link:disabled { cursor: default; color: var(--text-4); border-color: var(--line-slot); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.sug-body.stale { opacity: .75; transition: opacity .08s; }
.note { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--bg-raised-2); font: 400 13px/1.4 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.note.locked { background: color-mix(in oklch, var(--live) 7%, transparent); font-weight: 500; color: var(--text-1); }
.box { margin: 12px; padding: 14px var(--space-6); border-radius: var(--radius-lg); border: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: var(--space-3); }
.box-title { font: 600 14px/1.2 var(--font-ui); }
.box-text { font: 400 13px/1.4 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.box.error { padding: var(--space-6); gap: var(--space-2); border: 1px solid color-mix(in oklch, var(--neg) 35%, transparent); background: color-mix(in oklch, var(--neg) 8%, transparent); }
.box.error .box-title { font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--neg); }
.box.error .box-text { font: 500 13px/1.4 var(--font-ui); color: var(--text-1); }

.sug { border-bottom: 1px solid var(--bg-raised-2); }
.sug-row:hover { background: var(--bg-slot); }
.sug.open, .sug.open .sug-row:hover { background: var(--bg-open); }
.sug.picked, .sug.picked .sug-row:hover { background: color-mix(in oklch, var(--amber) 6%, transparent); }
.sug-row { display: grid; grid-template-columns: var(--sug-icon) minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; padding: var(--sug-pad); cursor: pointer; }
.sug-icon { width: var(--sug-icon); height: var(--sug-icon); border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--line-slot); }
.sug.picked .sug-icon { border-color: var(--amber); }
.sug-name-row { min-width: 0; display: flex; align-items: center; gap: var(--space-4); }
.sug-name { font: 600 14px/1.1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* your own champion at the top: a solid amber frame once locked or picked, the hover look while hovering */
.sug.focus-locked .sug-icon, .sug.focus-picked .sug-icon { border-color: var(--amber); box-shadow: var(--ring-amber); }
.sug.focus-locked .sug-name { color: var(--amber); }
.sug.focus-hover .sug-icon { border-style: dashed; border-color: var(--text-3); }
.sug.focus-hover .sug-icon img { filter: grayscale(1) brightness(.8); opacity: .7; }
.sug.focus-hover .sug-name { color: var(--text-2); font-style: italic; }
.sug-types { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.sug-types img { width: 18px; height: 18px; }
/* the damage it deals as a small coloured chip, in the damage bars' colours */
.sug-dmg { padding: 2px var(--space-2); border-radius: var(--radius-xs); font: 700 10px/1 var(--font-display); letter-spacing: var(--tracking-label); color: var(--bg-app); }
.sug-dmg.physical { background: var(--dmg-physical); }
.sug-dmg.magic { background: var(--dmg-magic); }
.sug-dmg.mixed { background: linear-gradient(90deg, var(--dmg-physical) 50%, var(--dmg-magic) 50%); }
.role-seg[hidden] { display: none; }
.sug.ban-idea .sug-row { cursor: default; }
.sug.ban-idea .sug-row:hover { background: transparent; }
/* after a new pick, rows that moved show how far for a moment */
.sug-move { flex: none; font: 600 10px/1 var(--font-mono); animation: move-fade 2.6s ease-in both; }
.sug-move.up { color: var(--pos); }
.sug-move.down { color: var(--neg); }
@keyframes move-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.ban-role { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.sug-score-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sug-score { font: 600 16px/1 var(--font-mono); }
.sug-diff { font: 500 11px/1 var(--font-mono); }
.pos-text { color: var(--pos); }
.neg-text { color: var(--neg); }
.zero-text { color: var(--text-3); }

.breakdown { padding: 0 var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.part { display: grid; grid-template-columns: minmax(0, 1fr) var(--bar-w) 38px; gap: var(--space-5); align-items: center; min-height: var(--bd-row); cursor: default; }
.part-pick { display: flex; align-items: center; gap: 7px; min-width: 0; }
.part-icon { flex: none; width: 20px; height: 20px; border-radius: var(--radius-sm); background: var(--bg-raised); }
.part-name { min-width: 0; font: 500 12px/1.1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-rel { font-weight: 600; }
.part-lane { flex: none; padding: 2px var(--space-2); border-radius: var(--radius-xs); border: 1px solid color-mix(in oklch, var(--enemy) 55%, transparent); font: 600 9px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--enemy); }
/* opens the champion page under the board for this suggestion */
.sug-details { align-self: flex-end; display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); height: 22px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; }
.sug-details:hover { border-color: var(--amber); color: var(--amber); }
.sug-details .ui-svg { width: 12px; height: 12px; }
.part-rel.with { color: var(--ally); }
.part-rel.vs { color: var(--enemy); }
.team-icon { display: grid; place-items: center; font: 700 10px/1 var(--font-mono); color: var(--bg-app); }
.team-icon.enemy { background: var(--enemy); }
.team-icon.ally { background: var(--ally); }
.team-icon.small { background: var(--line-2); color: var(--text-2); }
.bar { position: relative; height: 8px; border-radius: var(--radius-xs); background: var(--bg-raised-2); }
.bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.bar span { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-xs); }
.part-pts { font: 600 12px/1 var(--font-mono); text-align: right; }
.no-parts { padding: var(--space-2) 0; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }

/* build row */
.build { grid-column: 1 / span 3; grid-row: 2; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--build-pad); background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-xl); }
@media (max-width: 1199px) { .build { gap: var(--space-3); } }
.build-head { flex: none; height: 18px; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.build-head .label { flex: none; color: var(--text-2); }
.build-sep { flex: none; width: 1px; height: 12px; background: var(--line-soft); }
/* the build's champion opens its page under the board, like the chevron at the right */
.build-who { flex: none; display: flex; align-items: center; gap: 7px; height: 24px; margin: -3px 0; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-1); cursor: pointer; }
.build-who:hover { border-color: var(--line-2); background: var(--bg-slot); }
.build .adjusted-mark { cursor: default; }
.build-who .pic { width: 18px; height: 18px; border-radius: var(--radius-sm); background: var(--bg-raised); }
.build-name { font: 600 14px/1 var(--font-ui); white-space: nowrap; }
.build-role { flex: none; width: 15px; height: 15px; color: var(--text-2); }
/* where the build's champion comes from shows on its frame: solid amber when locked or picked, dashed when only selected */
.build-who.locked .pic { box-shadow: 0 0 0 1.5px var(--amber); }
.build-who.selected .pic { outline: 1px dashed var(--text-3); outline-offset: 2px; }
.build-status { min-width: 0; margin-left: 6px; font: 500 12px/1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.updating { flex: none; display: flex; align-items: center; gap: var(--space-3); font: 500 11px/1 var(--font-mono); color: var(--text-3); }
.updating::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-sm); background: var(--amber); animation: pulse 1s ease-in-out infinite; }
.low-data { flex: none; display: flex; color: var(--amber); cursor: default; }
.tips-hint { flex: none; font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-title); text-transform: uppercase; color: var(--text-3); }
.build-body { flex: none; height: var(--build-body); display: flex; align-items: flex-start; gap: var(--build-group-gap); padding-top: var(--space-3); min-width: 0; transition: opacity .15s; }
.build-body.low { opacity: .55; }
.inventory { flex: none; display: flex; align-items: flex-start; gap: var(--item-gap); }
.inv-slot { flex: none; width: var(--item); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); cursor: default; }
.inv-icon { position: relative; width: var(--item); height: var(--item); }
.inv-icon .pic { position: absolute; inset: 0; border-radius: var(--radius-sm); border: 1px solid var(--line-slot); }
.inv-chips { position: absolute; top: -6px; right: -3px; display: flex; gap: 1px; }
.inv-chip { height: 12px; min-width: 13px; padding: 0 var(--space-1); border-radius: var(--radius-sm); box-shadow: 0 0 0 1.5px var(--bg-panel); display: grid; place-items: center; font: 700 9px/1 var(--font-mono); color: var(--bg-app); }
.inv-share { font: 500 11px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
/* a build step few games reach: dashed and dimmed, the reason in its card */
.inv-slot.few .inv-icon .pic { border-style: dashed; border-color: var(--line-3); }
.inv-slot.few img { opacity: .7; }
.inv-slot.few .inv-share { color: var(--text-4); }
.inv-divider { flex: none; align-self: stretch; width: 1px; margin: 2px 3px 14px; background: var(--line-soft); }
.core-arrow { flex: none; height: var(--item); display: flex; align-items: center; margin: 0 -3px; font: 600 14px/1 var(--font-ui); color: var(--text-4); }
.inv-slot.main-pick .inv-icon .pic { border-color: var(--amber); }
.inv-slot.alt-pick { width: calc(var(--item) * .78); opacity: .75; }
.inv-slot.alt-pick .inv-icon { width: calc(var(--item) * .78); height: calc(var(--item) * .78); margin-top: calc(var(--item) * .11); }
.inv-slot.alt-pick:hover { opacity: 1; }
.rune-import {
  flex: none;
  height: 26px;
  margin-top: calc((var(--item) - 26px) / 2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  font: 600 11px/1 var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.rune-import:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.rune-import:disabled { opacity: .45; cursor: default; }
.rune-import.done { border-color: var(--pos); color: var(--pos); }
.rune-import.failed { border-color: var(--neg); color: var(--neg); }
/* an import that worked fills green from the left; one that failed shakes with a red flash, like a sniped pick */
.rune-import.done { background: linear-gradient(90deg, color-mix(in oklch, var(--pos) 18%, transparent) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; animation: import-fill .25s ease-out both; animation-delay: var(--import-t, 0ms); }
.rune-import.failed { animation: snipe-shake .3s ease-in-out both, import-flash 1.1s ease-out both; animation-delay: var(--import-t, 0ms); }
@keyframes import-fill { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes import-flash { from { box-shadow: 0 0 0 1px var(--neg), 0 0 14px color-mix(in oklch, var(--neg) 50%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
.rune-import.icon { display: grid; place-items: center; width: 28px; padding: 0; }
.rune-import.icon.busy .ui-svg { animation: pulse 1s ease-in-out infinite; }
.group-sep { flex: none; width: 1px; height: var(--item); background: var(--line-slot); }
.runes { flex: 0 1 auto; min-width: 0; height: var(--item); display: flex; align-items: center; gap: var(--space-4); cursor: default; }
.keystone { flex: none; width: var(--keystone); height: var(--keystone); border-radius: 50%; border: 1px solid var(--line-2); }
.rune-style { flex: none; width: var(--style-icon); height: var(--style-icon); border-radius: 50%; border: 1px solid var(--line-soft); }
.rune-style img { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; }
.rune-name { min-width: 0; font: 500 13px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rune-name .trees { color: var(--text-3); }
@media (max-width: 1199px) { .rune-name { display: none; } }
.spells { flex: none; height: var(--item); display: flex; align-items: center; gap: 3px; cursor: default; }
/* every popular rune page and spell pair sits in the draft with its own import: once the game starts they are locked */
.pick-options { flex: none; display: flex; align-items: flex-start; gap: var(--space-6); }
.pick-option { flex: none; display: flex; align-items: flex-start; gap: 5px; }
.pick-choice { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); cursor: default; }
.rune-pair { position: relative; width: calc(var(--keystone) + 6px); height: var(--item); display: flex; align-items: center; }
.rune-pair .rune-style { position: absolute; right: 0; bottom: 0; width: 17px; height: 17px; background: var(--bg-panel); }
/* the page to take this game: an amber ring and a star on the keystone */
.pick-option.best .keystone { border-color: var(--amber); box-shadow: var(--glow-amber); }
.pick-option.best .inv-share { color: var(--amber); }
.best-star { position: absolute; left: -5px; top: -5px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--on-amber); box-shadow: 0 0 0 2px var(--bg-panel); }
.best-star svg { width: 10px; height: 10px; fill: currentColor; }
.spell-pair { height: var(--item); display: flex; align-items: center; gap: var(--space-1); }
/* the key each summoner spell lands on, the same way the import sets them */
.spell-key { position: relative; flex: none; display: inline-flex; }
.spell-key b { position: absolute; right: 0; bottom: 0; min-width: 12px; height: 12px; padding: 0 var(--space-1); border-radius: var(--radius-xs) 0 var(--radius-sm) 0; display: grid; place-items: center; background: color-mix(in oklch, var(--bg-app) 85%, transparent); font: 700 9px/1 var(--font-mono); color: var(--text-1); pointer-events: none; }
@media (max-width: 1439px) { .pick-option:nth-child(n + 3) { display: none; } }
.spell { flex: none; width: var(--spell); height: var(--spell); border-radius: var(--radius-sm); border: 1px solid var(--line-soft); }
.build-msg { flex: none; height: var(--build-body); display: flex; align-items: center; gap: var(--space-5); padding: 0 14px; border-radius: var(--radius-lg); border: 1px dashed var(--line-soft); min-width: 0; }
.build-msg-title { flex: none; font: 600 13px/1.2 var(--font-ui); }
.build-msg-text { min-width: 0; font: 400 12px/1.3 var(--font-ui); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the Planner's win rate under each tile: the same number the suggestions rank by, in the win rate bands */
.tile-rate { position: absolute; left: 50%; bottom: -2px; translate: -50% 0; padding: 1px 4px; border-radius: var(--radius-xs); background: oklch(0 0 0 / .78); font: 600 10px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); pointer-events: none; }

/* ======================================================================================================
   v2 live board: the planner's shell. Your team · suggestions (the payoff) · enemy team, browse under the
   suggestions, the build across the bottom. One viewport tall (the live screens snap), so only the
   suggestion list and the grid scroll inside.
   ====================================================================================================== */
.draft-page { height: calc(100vh - var(--top-h)); }
.board-main {
  width: 100%;
  max-width: var(--page-max-app);
  margin-inline: auto;
  grid-template-columns: minmax(232px, 3fr) minmax(0, 6fr) minmax(232px, 3fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "ally sug enemy" "ally browse enemy" "build build build";
  gap: var(--space-6);
  padding: var(--space-7) var(--page-pad) var(--space-7);
}
.board-main:has(.centre:not(.collapsed)) { grid-template-rows: minmax(0, 1fr) minmax(0, 1.05fr) auto; }
body.lv-idle .board-main { display: none; }

/* ---------- team columns ---------- */
.team, .team.enemy {
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, color-mix(in oklch, var(--team-color) 12%, var(--surface-1)), var(--surface-1) 220px);
  box-shadow: var(--edge-light), inset 0 3px 0 color-mix(in oklch, var(--team-color) 70%, transparent);
}
.team.ally { grid-area: ally; }
.team.enemy { grid-area: enemy; }
@keyframes urgent-edge {
  0%, 100% { box-shadow: var(--edge-light), inset 0 3px 0 var(--team-color); }
  50% { box-shadow: var(--edge-light), inset 0 3px 0 var(--team-color), inset 0 0 40px -8px var(--team-color), 0 0 0 1px var(--team-color); }
}

/* the team's damage split is its header */
.team > .dmg-half { flex: none; gap: var(--space-4); padding: var(--space-1) var(--space-1) var(--space-3); }
.team .dmg-head { flex-wrap: wrap; row-gap: var(--space-2); }
.team.enemy .dmg-head { flex-direction: row-reverse; }
.team .dmg-who { gap: var(--space-4); font: 600 var(--fs-lg)/1.2 var(--font-display); letter-spacing: .01em; text-transform: none; color: var(--text-1); }
.team .dmg-team { width: 4px; height: 16px; box-shadow: 0 0 10px color-mix(in oklch, var(--ally) 60%, transparent); }
.team .dmg-team.enemy { box-shadow: 0 0 10px color-mix(in oklch, var(--enemy) 60%, transparent); }
.team.enemy .dmg-who { flex-direction: row-reverse; }
.team .dmg-label { gap: var(--space-4); font-size: var(--fs-sm); }
.team .dmg-bar { height: 6px; background: var(--surface-0); }

/* ---------- pick slots: a row like the planner's, the champion's loading art behind ---------- */
.slot {
  isolation: isolate;
  flex: 1 1 0;
  max-height: 96px;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--surface-0) 55%, transparent);
}
.slot:hover { border-color: var(--line-3); }
.team.enemy .slot { flex-direction: row-reverse; text-align: right; }
.slot.filled { background: var(--surface-1); }
.team.ally .slot.filled { box-shadow: inset 3px 0 0 var(--ally); }
.team.enemy .slot.filled { box-shadow: inset -3px 0 0 var(--enemy); }
.slot::before, .slot.you::before {
  content: none;
  position: absolute;
  inset: 0;
  translate: none;
  z-index: -1;
  border: 0;
  border-radius: inherit;
  background: var(--art) 50% 18% / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 85%);
  mask-image: linear-gradient(90deg, transparent 22%, #000 85%);
  transition: opacity var(--dur-base);
  pointer-events: none;
}
.team.enemy .slot::before { -webkit-mask-image: linear-gradient(270deg, transparent 22%, #000 85%); mask-image: linear-gradient(270deg, transparent 22%, #000 85%); }
.slot.has-art::before, .slot.you.has-art::before { content: ""; }
.slot.has-art:hover::before { opacity: .7; }
.slot.hovering::before { filter: grayscale(1); opacity: .25; }
.slot.you { background: color-mix(in oklch, var(--amber) 7%, var(--surface-1)); border-color: color-mix(in oklch, var(--amber) 50%, transparent); box-shadow: inset 3px 0 0 var(--amber); }
.slot.turn { border-color: var(--amber); box-shadow: var(--glow-amber); }
.team.enemy .slot.turn { border-color: var(--enemy); box-shadow: 0 0 0 1px var(--enemy), 0 0 14px color-mix(in oklch, var(--enemy) 35%, transparent); }
.slot.active { background: color-mix(in oklch, var(--amber) 9%, var(--surface-1)); border-color: var(--amber); box-shadow: var(--glow-amber); }
.slot-icon { width: var(--slot-icon); height: var(--slot-icon); border-color: var(--hairline-strong); background: var(--surface-0); box-shadow: 0 4px 12px -4px rgb(0 0 0 / .7); }
.slot-ph { font: 600 var(--fs-md)/1 var(--font-mono); color: var(--text-4); }
.slot-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.slot-name { font: 600 var(--fs-lg)/1.15 var(--font-display); letter-spacing: .01em; color: var(--text-1); text-shadow: 0 1px 8px rgb(0 0 0 / .85); }
.slot-sub { min-width: 0; font: 500 var(--fs-sm)/1.2 var(--font-ui); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgb(0 0 0 / .9); }
.slot:not(.filled):not(.you):not(.has-art) .slot-name { color: var(--text-2); }
.slot.you .slot-name { color: var(--amber); }
.slot.you .slot-sub { color: color-mix(in oklch, var(--amber) 70%, var(--text-2)); }
.slot.turn .slot-sub { color: var(--amber); }
.team.enemy .slot.turn .slot-sub { color: var(--enemy); }
.slot-x { top: var(--space-2); right: var(--space-2); z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; opacity: 0; background: color-mix(in oklch, var(--surface-0) 80%, transparent); transition: opacity var(--dur-fast); }
.slot:hover .slot-x, .slot-x:focus-visible { opacity: 1; }
.team.enemy .slot-x { left: var(--space-2); }

/* ---------- bans: one row of five under the team ---------- */
.lv-bans { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-1) 0; border-top: 1px solid var(--hairline); }
.team.enemy .lv-bans { flex-direction: row-reverse; }
.lv-bans .ban-row { flex-wrap: nowrap; max-width: none; margin: 0; gap: var(--space-2); }
.lv-eyebrow { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ban { border-radius: var(--radius-sm); background: var(--surface-0); }

/* ---------- suggestions: the payoff, with the hextech-lite frame ---------- */
.suggestions {
  --cut: 8px;
  --sug-icon: 40px;
  position: relative;
  grid-area: sug;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--amber) 6%, var(--surface-1)), var(--surface-1) 140px);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--amber) 32%, transparent), var(--edge-light);
}
.suggestions::before, .suggestions::after { content: ""; position: absolute; z-index: 1; width: 12px; height: 12px; pointer-events: none; }
.suggestions::before { top: 0; left: 0; background: linear-gradient(135deg, transparent 5px, var(--amber) 5px, var(--amber) 6.5px, transparent 6.5px); }
.suggestions::after { right: 0; bottom: 0; background: linear-gradient(315deg, transparent 5px, var(--amber) 5px, var(--amber) 6.5px, transparent 6.5px); }
.sug-head { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-6); padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--hairline); }
.sug-head .label { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.role-seg { display: flex; gap: var(--space-2); }
.role-seg .choice { height: 30px; padding: 0 var(--space-4); }
.sug-body { scrollbar-width: thin; }
.sug { border-bottom: 1px solid var(--hairline); }
.lv-sug-row { position: relative; grid-template-columns: 22px var(--sug-icon) minmax(0, 1fr) minmax(48px, 120px) 64px; gap: var(--space-6); min-height: 52px; padding: var(--space-4) var(--space-7); }
.sug-rank { font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.sug-icon { border-color: var(--hairline-strong); }
.sug-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sug-name { font: 600 var(--fs-lg)/1.15 var(--font-display); letter-spacing: .01em; }
.sug-meter { height: 4px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.sug-meter span { display: block; height: 100%; border-radius: inherit; opacity: .85; }
.sug-score-col { align-items: flex-end; }
.sug-score { font: 600 var(--fs-xl)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.sug-diff { font-size: var(--fs-xs); }
.sug-row:hover { background: color-mix(in oklch, var(--surface-2) 70%, transparent); }
.sug.open, .sug.open .sug-row:hover { background: var(--surface-2); }
/* the top pick wears its splash */
.sug.lead { position: relative; isolation: isolate; }
.sug.lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--art) 80% 22% / cover no-repeat; opacity: .32; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 95%); mask-image: linear-gradient(90deg, transparent 30%, #000 95%); pointer-events: none; }
.sug.lead .sug-rank { color: var(--amber); }
.sug.lead .lv-sug-row { min-height: 64px; }
.sug.lead .sug-name { font-size: var(--fs-xl); }
.sug.lead .sug-score { font-size: 24px; }
.sug.picked .sug-rank { color: var(--amber); }
/* why it scores: lane opponent and the biggest effects, as chips */
.lv-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.lv-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 20px; padding: 0 var(--space-3) 0 var(--space-1); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--surface-0) 70%, transparent); border: 1px solid var(--hairline); font: 500 var(--fs-xs)/1 var(--font-ui); color: var(--text-2); white-space: nowrap; }
.lv-chip-icon { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; }
.lv-chip-icon img { width: 100%; height: 100%; object-fit: cover; }
.lv-chip-word { font: 600 9px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.lv-chip-word.vs { color: var(--enemy); }
.lv-chip-word.with { color: var(--ally); }
.lv-chip b { font: 600 var(--fs-xs)/1 var(--font-mono); }
.lv-chip.pos-text b { color: var(--pos); }
.lv-chip.neg-text b { color: var(--neg); }
.lv-chip.pos-text, .lv-chip.neg-text, .lv-chip.zero-text { color: var(--text-2); }
.breakdown { padding: 0 var(--space-7) var(--space-6) calc(var(--space-7) + 22px + var(--space-6)); }
.ban-idea .sug-row { padding: var(--space-4) var(--space-7); }

/* ---------- browse champions: a bar under the suggestions, the grid opens below it ---------- */
.centre { grid-area: browse; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--edge-light); }
.search-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); }
.search-row .choices { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; }
.centre.collapsed .search-row .choices, .centre.collapsed .grid-well { display: none; }
.board-clear { order: 3; height: 36px; border-color: var(--hairline-strong); background: transparent; }
.search { height: 36px; border-color: var(--hairline-strong); background: var(--surface-0); }
.lv-browse-toggle { display: inline-flex; align-items: center; gap: var(--space-4); height: 36px; padding: 0 var(--space-6) 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-lg); background: transparent; color: var(--text-1); font: 600 var(--fs-md)/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
.lv-browse-toggle:hover { background: var(--surface-2); }
.lv-browse-toggle .ui-svg { width: 14px; height: 14px; color: var(--text-3); transition: rotate var(--dur-base) var(--ease-out); }
.lv-browse-toggle[aria-expanded="true"] .ui-svg { rotate: 180deg; }
.lv-browse-count { padding: 3px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-3); font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-2); }
.grid-well { border: 0; border-radius: var(--radius-lg); background: var(--surface-0); }
.grid-scroll { padding: var(--space-5); scrollbar-width: thin; }

/* ---------- build: across the bottom ---------- */
.build { grid-area: build; padding: var(--space-5) var(--space-7); border-color: var(--hairline); background: var(--surface-1); box-shadow: var(--edge-light); }
.build-head .label { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.build-msg { border-color: var(--hairline-strong); background: color-mix(in oklch, var(--surface-0) 50%, transparent); }
.build-msg-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--amber); }
.build-msg-icon .ui-svg { width: 15px; height: 15px; }
.build-msg-title { font-weight: 600; color: var(--text-1); }

/* ---------- not in champ select: the hero instead of an empty board ---------- */
.lv-hero { display: none; }
body.lv-idle .lv-hero { flex: 1; min-height: 0; position: relative; isolation: isolate; display: grid; place-items: center; padding: var(--space-10) var(--page-pad); overflow: hidden; }
body.lv-idle .lv-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 40%, color-mix(in oklch, var(--amber) 9%, transparent), transparent 70%), radial-gradient(50% 60% at 10% 90%, color-mix(in oklch, var(--ally) 8%, transparent), transparent 70%); }
.lv-hero-inner { width: 100%; max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.lv-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-7); min-width: 0; }
.lv-status { display: inline-flex; align-items: center; gap: var(--space-4); height: 28px; padding: 0 var(--space-6); border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill); background: var(--surface-1); font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.lv-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.lv-status.pulse .lv-status-dot { background: var(--amber); animation: pulse 1.2s ease-in-out infinite; }
.lv-status.bad { color: var(--neg); border-color: color-mix(in oklch, var(--neg) 40%, transparent); }
.lv-status.bad .lv-status-dot { background: var(--neg); }
.lv-hero-title { margin: 0; max-width: 14ch; font: 700 clamp(34px, 3.6vw, 52px)/1.05 var(--font-display); letter-spacing: -.01em; color: var(--text-1); text-wrap: balance; }
.lv-hero-text { margin: 0; max-width: 46ch; font: 400 var(--fs-lg)/1.55 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.lv-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.lv-features { display: grid; gap: var(--space-6); width: 100%; margin-top: var(--space-6); padding-top: var(--space-8); border-top: 1px solid var(--hairline); }
.lv-feature { display: flex; align-items: center; gap: var(--space-6); }
.lv-feature-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-lg); border: 1px solid var(--hairline-strong); background: var(--surface-1); color: var(--amber); }
.lv-feature-icon .ui-svg { width: 16px; height: 16px; }
.lv-feature-copy { display: flex; flex-direction: column; gap: var(--space-2); font: 400 var(--fs-md)/1.3 var(--font-ui); color: var(--text-3); }
.lv-feature-copy b { font: 600 var(--fs-md)/1.2 var(--font-ui); color: var(--text-1); }
.lv-hero-picks { display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
.lv-hero-picks-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.lv-hero-picks-head .choice { height: 30px; padding: 0 var(--space-4); }
.lv-hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); min-height: 200px; }
.lv-hero-card { position: relative; isolation: isolate; aspect-ratio: 308 / 520; max-height: 46vh; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); padding: var(--space-7); overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: var(--radius-xl); background: var(--art) 50% 15% / cover no-repeat, var(--surface-2); box-shadow: var(--shadow-pop); animation: page-enter var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.lv-hero-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(7 10 16 / .95) 8%, rgb(7 10 16 / .35) 45%, transparent 70%); }
.lv-hero-card:first-child { border-color: color-mix(in oklch, var(--amber) 55%, transparent); box-shadow: var(--shadow-pop), 0 0 24px -6px color-mix(in oklch, var(--amber) 45%, transparent); }
.lv-hero-card-rank { position: absolute; top: var(--space-5); left: var(--space-5); padding: 4px var(--space-3); border-radius: var(--radius-sm); background: rgb(7 10 16 / .75); font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text-1); }
.lv-hero-card:first-child .lv-hero-card-rank { color: var(--amber); }
.lv-hero-card-name { font: 700 var(--fs-xl)/1.1 var(--font-display); color: var(--text-1); }
.lv-hero-card-rate { font: 600 var(--fs-lg)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.lv-hero-wait { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--text-3); }
@media (max-width: 1100px) {
  .lv-hero-inner { grid-template-columns: 1fr; }
}