/* A captain's own page. One job, one screen, read on a phone with a game
   about to start — so it stays wide-spaced and short. */
.captain-page {
  max-width: 44rem;
}

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

.captain-clock {
  padding: var(--space-md) var(--space-lg);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-sunk);
}

/* Mint is "it's happening now" everywhere else in the app, and this is the
   most now anything gets. */
.captain-clock--yours {
  border-color: var(--border-win);
  background: var(--surface-win);
}

.captain-clock__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.captain-clock--yours .captain-clock__title {
  color: var(--text-win);
}

.captain-clock__hint {
  margin: var(--space-2xs) 0 0;
  color: var(--text-secondary);
}

.captain-pick__form {
  margin: 0;
}

.captain-pick {
  padding: var(--space-2xs) var(--space-smd);
  font-size: var(--text-sm);
}

.captain-page__footer {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* The fixture after the draft. Deliberately not mint: mint is "your pick",
   and the two must not read as the same call to action. */
.captain-clock--next {
  background: var(--surface-card);
  border-color: var(--border-strong);
}

/* Type comes from the global .micro label; only the spacing is local. */
.captain-clock__label {
  margin: 0 0 var(--space-2xs);
}

/* Named as well as coloured — the word does the work on its own. */
.captain-clock__side {
  font-weight: 600;
}

.captain-clock__side--blue { color: var(--side-blue); }
.captain-clock__side--red  { color: var(--side-red); }

/* Into this team's own side of the pick-and-ban. The one thing a captain is
   here to do once the round is drawn, so it is a button rather than a line of
   text among other lines of text. */
.captain-clock__draft {
  display: inline-block;
  margin-top: var(--space-smd);
  padding: 10px 18px;
  border: var(--border-width) solid var(--side-blue-line);
  border-radius: var(--radius);
  background: var(--side-blue-soft);
  color: var(--side-blue);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.captain-clock__draft:hover {
  border-color: var(--side-blue);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.captain-clock__draft:active {
  transform: none;
  box-shadow: var(--shadow-xs);
}

/* A heading with its op.gg link sitting beside it rather than under it. */
/* `baseline` sounds right for a small label beside a heading and isn't: the
   two have very different line heights, so it left the label riding high.
   Centred on the heading is what actually reads as aligned. */
.captain-section__head,
.captain-clock__matchup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-smd);
}

.captain-section__head .mix-section__title,
.captain-clock__matchup .captain-clock__title {
  margin: 0;
}

/* `.op-gg--multi` is shaped for sitting *under* a heading in a column, so it
   carries `align-self: flex-start` and a bottom margin. Beside one, both are
   wrong — that flex-start is what kept it riding high. */
.captain-section__head .op-gg--multi,
.captain-clock__matchup .op-gg--multi {
  align-self: center;
  margin-bottom: 0;
}

/* The weaker team's one lever: which side it plays. Two real buttons, because
   it is a decision rather than a link. */
.captain-sides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-smd);
}

.captain-sides__button {
  min-width: 9rem;
}

.captain-sides__button--blue {
  background: var(--side-blue-soft);
  border-color: var(--side-blue-line);
  color: var(--side-blue);
}

.captain-sides__button--red {
  background: var(--side-red-soft);
  border-color: var(--side-red-line);
  color: var(--side-red);
}

.captain-sides__button--blue:hover { border-color: var(--side-blue); }
.captain-sides__button--red:hover { border-color: var(--side-red); }

/* Reporting the result, which on a shuffled night is the whole of the job.
   Mint for the win and coral for the loss, the same pair they mean everywhere
   else — a result is exactly what those two colours are for. */
.captain-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--line);
}

.captain-report__label {
  color: var(--text-secondary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.captain-report__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.captain-report__button {
  min-width: 9rem;
}

.captain-report__button--won {
  background: var(--surface-win);
  border-color: var(--border-win);
  color: var(--text-win);
}

.captain-report__button--lost {
  background: var(--surface-loss);
  border-color: var(--coral-100);
  color: var(--text-loss);
}

.captain-report__button--won:hover { border-color: var(--mint-500); }
.captain-report__button--lost:hover { border-color: var(--coral-500); }

.captain-report__hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Contested picks: who captains keep spending their real choices on. Mint,
   because this is the one place the app means "most wanted" — and a tint
   rather than a badge, so a captain reads the shape of the list rather than
   another column of text. Everybody else stays white. */
/* Two hues rather than two strengths of one: the same tint at two opacities
   read as the same tint twice, whichever way the numbers went. */
.mix-roster__item--contested-high {
  background: var(--violet-100);
  border-color: var(--violet-300);
}

.mix-roster__item--contested-some {
  background: var(--mint-100);
  border-color: var(--mint-300);
}

/* New here, which is neither a win nor a loss and so neither of the two
   saturated colours. Takes precedence over the contested tints — how new
   somebody is matters more to a captain than how wanted they are. */
.mix-roster__item--new {
  background: var(--amber-100);
  border-color: var(--amber-300);
}

.mix-contested-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-smd);
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
}

.mix-contested-legend__item {
  position: relative;
  display: inline-flex;
}

.mix-contested-legend__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.mix-contested-legend__button:hover,
.mix-contested-legend__button:focus-visible {
  color: var(--text-primary);
}

.mix-contested-legend__key {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-default);
}

.mix-contested-legend__panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  width: max-content;
  max-width: 16rem;
  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);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-primary);
}

/* 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) {
  .mix-contested-legend__item:hover .mix-contested-legend__panel {
    display: block;
  }
}

.mix-contested-legend__item:focus-within .mix-contested-legend__panel,
.mix-contested-legend__item.is-open .mix-contested-legend__panel {
  display: block;
}

.mix-contested-legend__key--high {
  background: var(--violet-100);
  border-color: var(--violet-300);
}

.mix-contested-legend__key--some {
  background: var(--mint-100);
  border-color: var(--mint-300);
}

.mix-contested-legend__key--new {
  background: var(--amber-100);
  border-color: var(--amber-300);
}

/* What everybody else is building, in the mix board's own team cards so a
   captain is not translating between two layouts of the same thing. Only the
   bits the board has no use for live here. */
.captain-others__hint {
  margin: 0 0 var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Whoever is on the clock, so the team about to take somebody off the pool is
   the one your eye lands on. */
.mix-team--picking {
  border-color: var(--mint-500);
  box-shadow: var(--shadow-sm);
}

.mix-team__scout,
.captain-clock__scout {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  text-decoration: none;
}

.mix-team__scout:hover,
.captain-clock__scout:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.captain-clock__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* A follower's page says so once, under the team name. */
.captain-page__role {
  display: inline-block;
  margin-top: var(--space-2xs);
  color: var(--text-tertiary);
}

/* The pick clock. The number is the glance; the sentence beside it is the
   point — a countdown that does not say what happens at zero is a threat
   nobody can read. */
.captain-countdown,
.mix-pick-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--border-width) solid var(--border-default);
}

.captain-countdown__time,
.mix-pick-clock__time {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

/* Coral only at the end, so the colour means something when it arrives. */
.captain-countdown__time.is-urgent,
.mix-pick-clock__time.is-urgent {
  color: var(--coral-700);
}

.captain-countdown__time.is-over,
.mix-pick-clock__time.is-over {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.captain-countdown__rule,
.mix-pick-clock__rule {
  flex: 1;
  min-width: 12rem;
  color: var(--text-secondary);
  font-size: var(--text-2xs);
}

.mix-pick-clock {
  margin-bottom: var(--space-md);
}