/* Pick & bans: the admin's list of drafts, and the room itself. */

/* --- the admin side --- */

.draft-index {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.draft-index__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.draft-index__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin: 0;
}

.draft-index__subtitle {
  color: var(--text-secondary);
  margin: var(--space-xs) 0 0;
  max-width: 54ch;
}

.draft-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.draft-index__link {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.4fr) auto auto;
  align-items: center;
  gap: var(--space-smd);
  padding: var(--space-smd) var(--space-md);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.draft-index__link:hover {
  background: var(--surface-hover);
  box-shadow: var(--shadow-md);
}

.draft-index__name {
  font-weight: 600;
}

.draft-index__sides,
.draft-index__when {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.draft-index__when {
  justify-self: end;
}

.draft-index__empty {
  color: var(--text-secondary);
  margin: 0;
}

/* A card on this page spans the column. `.card` centres itself at a narrow
   measure, which leaves an empty state floating as a small box in the middle
   of a wide page. */
.draft-index .card {
  max-width: none;
  margin: 0;
}

.draft-index__footer {
  display: flex;
  gap: var(--space-smd);
  flex-wrap: wrap;
  align-items: center;
}

.draft-links__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-xs);
}

.draft-links__hint {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-md);
  max-width: 60ch;
}

/* The team's name is what somebody scans for when four of these are open, so
   it is the heading here rather than a mono micro-label. */
.draft-links__row .copy-link__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.draft-links__row--blue .copy-link__label { color: var(--side-blue); }
.draft-links__row--red .copy-link__label { color: var(--side-red); }

/* --- getting a stuck draft moving again --- */

.draft-admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-smd);
}

.draft-admin__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-smd);
  padding-top: var(--space-smd);
  border-top: 1px solid var(--border-default);
}

.draft-admin__row:first-child {
  padding-top: 0;
  border-top: none;
}

.draft-admin__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.draft-admin__title {
  font-weight: var(--weight-medium);
}

.draft-admin__hint {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 60ch;
}

.draft-admin__form {
  display: flex;
  align-items: end;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* --- the room --- */

.draft-room {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.draft-room__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.draft-room__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
}

.draft-room__identity {
  display: flex;
  align-items: center;
  gap: var(--space-smd);
  flex-wrap: wrap;
}

.draft-room__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
}

.draft-room__meta {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.draft-room__warning {
  margin: 0;
  font-size: var(--text-sm);
}

/* Blue panel, centre column, red panel. The panels span both rows so the
   centre can carry the status above the champion pool. */
.draft-stage {
  display: grid;
  grid-template-columns: minmax(0, 272px) minmax(0, 1fr) minmax(0, 272px);
  grid-template-areas:
    "blue status red"
    "blue pool   red";
  gap: var(--space-lg);
  align-items: start;
}

/* A turbo-frame is one element and its three children belong in three
   different grid areas, so the frame itself must not be a box. */
.draft-frame {
  display: contents;
}

.draft-panel--blue { grid-area: blue; }
.draft-panel--red { grid-area: red; }
.draft-status { grid-area: status; }
.draft-stage__pool { grid-area: pool; min-width: 0; }

/* --- the two side panels --- */

.draft-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  padding: var(--card-pad-sm);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}

.draft-panel--blue {
  background: var(--side-blue-soft);
  border-top: 3px solid var(--side-blue);
}

.draft-panel--red {
  background: var(--side-red-soft);
  border-top: 3px solid var(--side-red);
}

/* The board points at whoever is on the clock: their panel is ringed in their
   own colour and the other one steps back. Whose turn it is should be
   answerable from the shape of the page, before reading a word of it. */
.draft-panel.is-acting {
  border-color: var(--border-strong);
}

.draft-panel--blue.is-acting {
  box-shadow: 0 0 0 3px var(--side-blue-line), var(--shadow-md);
}

.draft-panel--red.is-acting {
  box-shadow: 0 0 0 3px var(--side-red-line), var(--shadow-md);
}

.draft-panel.is-idle {
  opacity: 0.62;
}

.draft-panel__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.draft-panel__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
}

.draft-panel__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-panel__you {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.draft-panel__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  min-height: 32px;
}

/* The red side is a mirror of the blue one, so it reads outward from the
   centre of the board rather than both sides reading left to right. */
.draft-panel--red .draft-panel__head,
.draft-panel--red .draft-panel__bans {
  align-items: flex-end;
}

.draft-panel--red .draft-panel__title,
.draft-panel--red .draft-panel__tags,
.draft-panel--red .draft-bans {
  flex-direction: row-reverse;
}

.draft-panel--red .draft-slot {
  flex-direction: row-reverse;
}

.draft-panel--red .draft-slot__body {
  align-items: flex-end;
}

/* --- bans --- */

.draft-panel__bans {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

.draft-bans {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: flex-start;
}

.draft-ban {
  flex: 1 1 0;
  min-width: 0;
  max-width: 40px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-default);
  background: var(--surface-card);
}

.draft-ban.is-empty {
  border-style: dashed;
  border-color: var(--ink-300);
}

.draft-ban.is-live {
  border-style: solid;
  border-color: var(--border-selected);
}

/* A ban is a champion taken off the table, so it reads as struck through. */
.draft-ban .champion-icon {
  filter: grayscale(1);
  opacity: 0.7;
}

/* --- picks --- */

.draft-panel__picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.draft-slot {
  display: flex;
  align-items: center;
  gap: var(--space-smd);
  height: 68px;
  padding: 0 var(--space-smd);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-card);
  transition: var(--transition-control);
}

.draft-slot.is-empty {
  background: rgba(255, 255, 255, 0.6);
}

.draft-slot.is-live {
  border-color: var(--border-selected);
  background: var(--surface-card);
}

/* A step that kept the room waiting, marked after the fact. */
.draft-slot.is-over {
  box-shadow: inset 0 -2px 0 var(--text-loss);
}

.draft-slot__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--ink-300);
  background: var(--surface-card);
}

.draft-slot:not(.is-empty) .draft-slot__icon {
  border-style: solid;
  border-color: transparent;
}

/* The champion under consideration, before it is locked in. */
.draft-slot__icon.is-preview .champion-icon {
  opacity: 0.5;
}

.draft-slot__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  align-items: flex-start;
}

.draft-slot__champion {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.draft-slot__blank {
  color: var(--ink-300);
}

.draft-slot__blank.is-preview {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* --- what this team has already played --- */

.draft-played {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-smd);
  border-top: 1px solid var(--border-default);
}

.draft-panel--red .draft-played {
  align-items: flex-end;
}

.draft-played__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.draft-panel--red .draft-played__list {
  justify-content: flex-end;
}

.draft-played__item {
  position: relative;
  display: inline-flex;
}

.draft-played__trigger {
  display: flex;
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

/* Off the table, so it reads the same way a ban does. */
.draft-played__trigger .champion-icon {
  filter: grayscale(1);
  opacity: 0.75;
}

.draft-played__trigger:hover .champion-icon,
.draft-played__trigger:focus-visible .champion-icon {
  filter: none;
  opacity: 1;
}

.draft-played__panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: 14rem;
  padding: var(--space-sm) var(--space-smd);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

/* Pointer devices get it on hover; a phone has nothing to hover with, so the
   controller toggles `is-open` on a tap. */
@media (hover: hover) {
  .draft-played__item:hover .draft-played__panel {
    display: flex;
  }
}

.draft-played__item:focus-within .draft-played__panel,
.draft-played__item.is-open .draft-played__panel {
  display: flex;
}

.draft-played__champion {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.draft-played__names {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- the centre column --- */

.draft-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-smd) var(--space-md);
  min-width: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

/* When the clock is yours the centre of the board says so loudly — this is
   the one state somebody is waiting to see. */
.draft-status.is-yours {
  background: var(--mint-50);
  border-color: var(--mint-300);
}

.draft-status__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* A refused pick, rendered inside the frame the form submits into. */
.draft-status__refusal {
  width: 100%;
  padding: var(--space-sm) var(--space-smd);
  border: var(--border-width) solid var(--coral-100);
  border-radius: var(--radius-sm);
  background: var(--surface-loss);
  color: var(--text-loss);
  font-size: var(--text-sm);
  text-align: center;
}

.draft-status__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  text-align: center;
  text-wrap: balance;
}

/* The clock. Big enough to read from across a room without looking for it —
   this is what everybody glances up at. */
.draft-status__clock {
  margin: 0;
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  transition: color var(--dur-fast) var(--ease-out);
}

/* The last ten seconds, and then past zero. Nothing is forced either way —
   the colour is the whole of the pressure. */
.draft-status__clock.is-urgent {
  color: var(--coral-500);
}

.draft-status__clock.is-over {
  color: var(--coral-700);
  font-size: var(--text-2xl);
}

.draft-status__step {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.draft-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
  min-height: 420px;
  margin-top: var(--space-md);
  padding: var(--space-xl);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.draft-lobby__action {
  width: 280px;
  max-width: 100%;
}

.draft-lobby__button {
  width: 100%;
}

.draft-lobby__hint {
  margin: 0;
  max-width: 36ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

/* --- the champion pool --- */

.draft-pool {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.draft-pool__search {
  width: 100%;
}

.draft-pool__card {
  padding: var(--space-smd);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.draft-pool__scroll {
  height: 500px;
  overflow-y: auto;
  margin: -4px;
  padding: 4px;
}

.draft-pool__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: var(--space-smd) var(--space-xs);
}

.draft-pool__none {
  margin: 0 0 var(--space-sm);
}

.draft-pool__action {
  display: flex;
  justify-content: center;
}

.draft-pool__lock {
  width: 240px;
  max-width: 100%;
}

/* A ban takes a champion off the table for both sides, so the button that
   does it is coral — the app's one colour for loss and destruction. The
   quiet `button--destructive` ghost is for links in a corner, not for the
   main action of the screen. */
.draft-pool__lock--ban:not(:disabled) {
  background: var(--coral-500);
  color: #fff;
  border-color: var(--coral-500);
}

.draft-pool__lock--ban:not(:disabled):hover {
  background: var(--coral-700);
  border-color: var(--coral-700);
  color: #fff;
}

.draft-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-control);
}

/* The radio is the selection — it stays in the accessibility tree and keeps
   the keyboard working, it just isn't drawn. */
.draft-pick__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.draft-pick__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--ink-500);
}

.draft-pick:hover {
  background: var(--surface-sunken);
}

.draft-pick:has(.draft-pick__radio:checked) {
  border-color: var(--border-selected);
  background: var(--surface-sunken);
}

.draft-pick:has(.draft-pick__radio:focus-visible) {
  outline: 2px solid var(--border-selected);
  outline-offset: 2px;
}

/* Already banned or picked. Left on screen rather than removed, because a
   captain scanning the grid wants to see that it has gone. */
.draft-pick.is-taken {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Nothing in the pool is live when the clock isn't yours. */
.draft-room:not(.is-your-turn) .draft-pick {
  opacity: 0.55;
  cursor: default;
}

.draft-room:not(.is-your-turn) .draft-pick.is-taken {
  opacity: 0.25;
}

/* Nothing left to do but play the game. */
.draft-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.draft-done--ready {
  border-color: var(--mint-300);
  background: var(--mint-50);
}

.draft-done__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.draft-done__hint {
  margin: 0;
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.draft-done__button {
  margin-top: var(--space-xs);
}

/* --- saying who is playing what --- */

.draft-lanes {
  display: flex;
  flex-direction: column;
  gap: var(--space-smd);
  padding: var(--space-md);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.draft-lanes__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.draft-lanes__hint {
  margin: 0;
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.draft-lanes__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.draft-lanes__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-smd);
}

.draft-lanes__lane {
  padding-bottom: 11px;
}

.draft-lanes__actions {
  display: flex;
  justify-content: flex-end;
}

/* Under 860px the two panels sit side by side above the centre column, which
   keeps both team sheets visible on a phone. */
@media (max-width: 860px) {
  .draft-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "blue red"
      "status status"
      "pool pool";
  }

  .draft-lobby {
    min-height: 240px;
  }
}

@media (max-width: 720px) {
  .draft-lanes__row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-default);
  }

  .draft-lanes__lane {
    padding-bottom: 0;
  }

  .draft-index__link {
    grid-template-columns: 1fr auto;
  }

  .draft-index__sides,
  .draft-index__when {
    display: none;
  }
}

/* The way from a fixture on the mix board to its pick-and-ban. */
.mix-fixtures__draft {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.mix-fixtures__draft:hover {
  color: var(--text-primary);
}

/* Picking a side for a captain who is not at a keyboard. */
.mix-fixtures__sides {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mix-fixtures__side-button {
  text-transform: capitalize;
}

/* What your own team is asking for. Only ever on your side of the board — the
   other team's intentions are not yours to read. */
.draft-hovers {
  margin-top: var(--space-smd);
}

.draft-hovers__label {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--text-tertiary);
}

.draft-hovers__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.draft-hovers__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 2px var(--space-xs) 2px 2px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}

/* The captain's version is a button: pressing it selects that champion in the
   pool, ready to lock in. */
.draft-hovers__chip--take {
  cursor: pointer;
  transition: var(--transition-control);
}

.draft-hovers__chip--take:hover {
  border-color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}

/* The squad link's own side of the page. */
.draft-hover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.draft-hover__who {
  font-weight: var(--weight-medium);
}

.draft-hover__change {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.draft-hover__current {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-smd);
  padding: var(--space-sm) var(--space-smd);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.draft-hover__name {
  flex: 1;
  font-weight: var(--weight-medium);
}

.draft-identify__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* The champions somebody has shown before, one press to show again. On a
   second night this is the whole interaction; the grid of 173 is there for the
   champion they have not played yet. */
.draft-shortlist {
  margin-bottom: var(--space-smd);
}

.draft-shortlist__label {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--text-tertiary);
}

.draft-shortlist__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.draft-shortlist__item {
  position: relative;
}

.draft-shortlist__chip {
  display: block;
  padding: 2px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  transition: var(--transition-control);
}

.draft-shortlist__chip:hover {
  border-color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}

/* Gone from the board: still listed, because it is still what they play. */
.draft-shortlist__item.is-gone {
  opacity: 0.35;
}

.draft-shortlist__item.is-gone .draft-shortlist__chip {
  cursor: default;
}

.draft-shortlist__forget {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.draft-shortlist__item:hover .draft-shortlist__forget,
.draft-shortlist__forget:focus {
  opacity: 1;
}

/* The captain's view of the same thing, five people at once — which is what
   makes a combo visible. */
.draft-pools {
  margin-top: var(--space-smd);
}

.draft-pools__label {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--text-tertiary);
}

.draft-pools__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 2px 0;
}

.draft-pools__who {
  flex: 0 0 5.5rem;
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-pools__champs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.draft-pools__champ.is-gone {
  opacity: 0.3;
}

/* Worth banning: what the other team wins on, read off their record here and
   in ranked. It sits above the pool because it is what somebody is looking for
   in the ban phase, and it is coral-tinted because a ban is the destructive
   half of a draft — the same colour the lock-in button takes while banning. */
.draft-advice {
  margin-bottom: var(--space-smd);
  padding: var(--space-sm);
  border: var(--border-width) solid var(--border-default);
  border-left: 3px solid var(--coral-500);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}

.draft-advice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-xs);
}

.draft-advice__label {
  color: var(--text-tertiary);
}

.draft-advice__who {
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}

.draft-advice__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.draft-advice__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-2xs);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
}

.draft-advice__row.is-pressable {
  cursor: pointer;
  transition: var(--transition-control);
}

.draft-advice__row.is-pressable:hover {
  border-color: var(--border-default);
  background: var(--surface-sunken);
}

/* Already gone: still what they play, so it stays on the list and stops being
   something to press. */
.draft-advice__row.is-gone {
  opacity: 0.35;
}

.draft-advice__row.is-gone.is-pressable {
  cursor: default;
}

.draft-advice__champion {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.draft-advice__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-advice__record {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-advice__rate {
  flex: 0 0 auto;
  color: var(--coral-700);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.draft-advice__hint {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

/* A ban nobody may see yet. Deliberately a filled, solid slot rather than the
   dashed empty one: "something is banned here and you cannot see it" is a
   different statement from "nothing has been banned yet", and a captain
   counting bans needs to tell them apart at a glance. */
.draft-ban.is-hidden {
  border-style: solid;
  border-color: var(--border-default);
  background: var(--surface-sunken);
}

.draft-ban__cover {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
}

/* What the clock will do at zero. The countdown above it is the glance; this
   is the rule, and without it a champion nobody chose simply appears. */
.draft-status__rule {
  margin: var(--space-2xs) 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  max-width: 28rem;
}