/* Siegeometry's catch-up perk draft (#76; the TS game's .sg-draft look), in the results overlay
   (one screen) or the pick overlay (online: the waiting room, protocol.md section 3.4). */

.sg-draft {
  width: min(64em, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: left;
  /* Solid, as the results box (modals.css): the board's numbers must not show through. */
  background: rgba(18, 16, 26, 0.97);
}

.high-contrast .sg-draft {
  background: var(--ui);
}

.sg-draft-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.sg-draft-timer {
  font-size: 2em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Timers Off in Settings (#72 build 20): a quiet label instead of the countdown. */
.sg-draft-timer.off {
  font-size: 1em;
  font-weight: 700;
  color: var(--ui-dim);
}

.sg-draft-row {
  display: grid;
  grid-template-columns: 14em repeat(3, 1fr);
  gap: 0.6em;
  align-items: stretch;
  margin-bottom: 0.6em;
  padding: 0.5em;
  border-radius: 1em;
  border-left: 0.35em solid var(--c);
  background: color-mix(in srgb, var(--c) 8%, transparent);
}

.sg-draft-who {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
}

.sg-draft-who > div {
  min-width: 0;
  flex: 1;
}

.sg-draft-who .dim {
  color: var(--ui-dim);
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 700;
}

.sg-draft-tick {
  visibility: hidden;
  font-size: 1.4em;
  font-weight: 900;
  color: var(--c);
}

.sg-draft-row.locked .sg-draft-tick {
  visibility: visible;
}

.sg-perk {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 0.6em 0.8em;
  border-radius: 0.8em;
  font: inherit;
  text-align: left;
  color: var(--ui-text);
  background: var(--ui);
  border: 2px solid var(--ui-line);
  cursor: pointer;
  transition: transform 0.12s ease-out;
}

.sg-perk b {
  font-weight: 900;
}

.sg-perk span {
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 700;
  color: var(--ui-dim);
}

.sg-perk.on {
  border-color: var(--c);
  border-style: dashed;
  transform: translateY(-0.12em);
}

.sg-perk.locked {
  border-style: solid;
  background: color-mix(in srgb, var(--c) 25%, var(--ui));
}

/* A row played on a phone or another screen: shown, not pressed here. */
.sg-perk.away {
  cursor: default;
}

.sg-draft-auto,
.sg-draft-away,
.sg-draft-help {
  margin: 0.4em 0 0;
  text-align: center;
  color: var(--ui-dim);
  font-weight: 700;
}

.sg-draft-help span + span::before {
  content: ' · ';
}

.sg-perks {
  margin-left: 0.3em;
  font-weight: 900;
  color: #f7c548;
}

/* Phones and narrow screens: the player above, the three cards in one column. */
@media (max-width: 720px) {
  .sg-draft-row {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion (the setting or the OS). */
.reduced-motion .sg-perk {
  transition: none;
}

.reduced-motion .sg-perk.on {
  transform: none;
}