/* The Siegeometry commander pick (#75, #72 "should 13"; Game/CommanderPicker.cs): short cards, a
   details panel for the card in focus, a lock-in strip, the timer. Four columns on a TV or laptop,
   two on a tablet, one on a phone. The colours are app.css's; the Paper theme comes from .menu. */

.picker {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: max(1em, env(safe-area-inset-top)) max(1em, env(safe-area-inset-right))
    max(1em, env(safe-area-inset-bottom)) max(1em, env(safe-area-inset-left));
  background: var(--bg);
  color: var(--ui-text);
}

#app.behind-picker {
  visibility: hidden;
}

.cp {
  width: min(62em, 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}

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

.cp-head h2 {
  margin: 0;
  font-size: 2em;
  font-weight: 900;
}

.cp-timer {
  min-width: 2ch;
  font-size: 2.2em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cp-timer.soon {
  color: #ff7b7b;
}

.cp-timer.off {
  font-size: 1em;
  color: var(--ui-dim);
}

/* ---- the cards */

.cp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6em;
}

.cp-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  align-items: center;
  column-gap: 0.45em;
  row-gap: 0.25em;
  min-height: 5.6em;
  padding: 0.7em 0.8em;
  border-radius: 0.9em;
  border: 2px solid var(--ui-line);
  background: var(--ui);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.12s,
    transform 0.12s;
}

.cp-card:hover {
  border-color: var(--ui-dim);
}

.cp-card.focused {
  border-color: var(--ui-text);
  transform: translateY(-0.12em);
}

.cp-icon {
  display: grid;
  font-size: 1.4em;
}

.cp-icon-big {
  font-size: 2.6em;
}

.cp-name {
  font-size: 1.2em;
  font-weight: 900;
}

.cp-up {
  grid-column: 1 / -1;
  font-size: max(var(--fs-small), 0.85em);
  font-weight: 900;
  color: var(--cp-up, #3ddc84);
}

.cp-who {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
  min-height: 1.5em;
}

.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  padding: 0.05em 0.4em;
  border-radius: 1em;
  border: 2px dashed var(--c);
  font-size: max(var(--fs-small), 0.8em);
  font-weight: 900;
}

.cp-chip.locked {
  border-style: solid;
  background: color-mix(in srgb, var(--c) 30%, transparent);
}

/* ---- the card in focus */

.cp-detail {
  display: flex;
  align-items: center;
  gap: 0.9em;
  min-height: 5.4em;
  padding: 0.7em 1em;
  border-radius: 0.9em;
  border: 1px solid var(--ui-line);
  background: var(--ui);
}

.cp-detail h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: 1.25em;
  font-weight: 900;
}

.cp-for {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.05em 0.5em;
  border-radius: 1em;
  border: 2px solid var(--c);
  font-size: max(var(--fs-small), 0.65em);
}

.cp-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.9em;
  margin: 0.25em 0;
  font-weight: 900;
}

.cp-mods .up {
  color: var(--cp-up, #3ddc84);
}

.cp-mods .down {
  color: var(--cp-down, #ff7b7b);
}

.cp-ability {
  margin: 0;
  color: var(--ui-dim);
}

.cp-ability b {
  color: var(--ui-text);
}

.theme-paper .picker {
  --cp-up: #17803d;
  --cp-down: #c22d36;
}

/* ---- who has locked in */

.cp-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.75em 0.3em 0.5em;
  border-radius: 1.2em;
  border: 2px dashed var(--c);
  background: var(--ui);
}

.cp-strip li.locked {
  border-style: solid;
  background: color-mix(in srgb, var(--c) 26%, var(--ui));
}

.cp-strip li.fixed {
  border-style: solid;
  opacity: 0.7;
}

.cp-who-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.cp-who-name small {
  font-size: max(var(--fs-small), 0.75em);
  color: var(--ui-dim);
}

.cp-strip b {
  font-weight: 900;
}

.cp-strip li.choosing b {
  color: var(--ui-dim);
}

.cp-help {
  margin: 0;
  text-align: center;
  color: var(--ui-dim);
}

.cp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6em;
}

/* ---- sizes */

/* A TV cannot scroll: the text (already the TV size) grows with the text setting only up to
   1/40 of the screen height, the small labels likewise, and the cards get shorter, so the strip,
   the hint and Start now / Back stay on a 1080p screen at 100–150 % text (#70). */
@media (min-width: 1800px) {
  .picker {
    font-size: min(1em, 100vh / 40);
    --fs-small: min(var(--fs-min) * var(--scale), 100vh / 40 * 0.857);
  }
}

:root.tv .picker {
  font-size: min(1em, 100vh / 40);
  --fs-small: min(var(--fs-min) * var(--scale), 100vh / 40 * 0.857);
}

@media (min-width: 1800px) {
  .cp {
    width: min(66em, 100%);
    gap: 0.6em;
  }

  .cp-card {
    min-height: 4.4em;
    padding: 0.55em 0.8em;
  }

  .cp-detail {
    min-height: 4.2em;
    padding: 0.55em 1em;
  }
}

@media (max-width: 1000px) {
  .cp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-card {
    min-height: 4.4em;
  }
}

/* A phone held upright: one column, a card per row. */
@media (max-width: 600px) {
  .picker {
    place-items: start center;
    font-size: max(0.95em, 15px);
  }

  .cp-head h2 {
    font-size: 1.45em;
  }

  .cp-timer {
    font-size: 1.6em;
  }

  .cp-grid {
    grid-template-columns: 1fr;
    gap: 0.4em;
  }

  .cp-card {
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: auto;
    min-height: 3.4em;
    padding: 0.5em 0.75em;
  }

  .cp-up {
    grid-column: auto;
    justify-self: start;
  }

  .cp-who {
    grid-column: auto;
    align-self: center;
    min-height: 0;
  }

  .cp-detail {
    min-height: 0;
    padding: 0.6em 0.8em;
  }

  .cp-icon-big {
    font-size: 1.9em;
  }

  .cp-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.2em;
  }

  .cp-strip li {
    flex: none;
  }
}

/* A phone on its side: short cards, no tall panels. */
@media (max-height: 500px) and (orientation: landscape) {
  .picker {
    place-items: start center;
  }

  .cp {
    gap: 0.5em;
  }

  .cp-head h2 {
    font-size: 1.4em;
  }

  .cp-timer {
    font-size: 1.5em;
  }

  .cp-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4em;
  }

  .cp-card {
    min-height: 0;
    padding: 0.45em 0.6em;
  }

  .cp-who {
    min-height: 1.2em;
  }

  .cp-detail {
    min-height: 0;
    padding: 0.45em 0.8em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-card {
    transition: none;
  }

  .cp-card.focused {
    transform: none;
  }
}

.reduced-motion .cp-card {
  transition: none;
}

.reduced-motion .cp-card.focused {
  transform: none;
}