/* The select screen (js/ui/views/rosterSelect.js): the 3D kart on the left (the showcase camera
   frames it left of centre), the roster on the right - who and what is chosen, every driver, every
   machine, each seat's cursor on them in its colour and shape - and a seat panel per player along
   the bottom.

   Layout rules - whatever is chosen, nothing moves:
   1. The screen is a grid of named regions (head, stage, roster, seats, foot); a region's size comes
      from the window, never from what is in another region.
   2. Nothing above or below the card grids is sized by its text. Single lines are single lines (cut
      with an ellipsis). The description box holds every description at once, unseen, with the one
      chosen over them, so it is as tall as the longest at this width and text size (the bigger-text
      setting included) and the same for every pick.
   3. The two grids share the rest of the roster in a fixed ratio; the cards are sized to fill their
      grid (../js/ui/layout.js gridLayout), so they only change with the window.
   4. A seat panel always has all its lines; a line with nothing to say yet is empty, not gone.
   5. Two marks on a card, never alike: the cursor (where a seat is looking: a ring in the seat's
      colour, lifted) and the choice (filled with the chooser's colour, a tick on its foot). Both
      grids have both - a machine is marked chosen once a seat is ready with it or tapped it.
   6. The description shows where it fits without squeezing the cards: a player alone at any
      ordinary window, the same screen from 821 px tall; never on a low window (a phone on its side),
      where the seat panel already names the driver and the machine.
   7. On a low window a player alone with keys or a gamepad turns a page - the drivers, then the
      machines, each page with a layout of its own; a shared screen always keeps both grids. */
#screen-select {
  --roster-w: 36rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--roster-w));
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head head"
    "stage roster"
    "seats seats"
    "foot foot";
  column-gap: var(--s-4);
}

/* a player alone: their seat panel sits under the kart, and the roster has the full height beside it */
#screen-select.is-solo {
  grid-template-areas:
    "head head"
    "stage roster"
    "seats roster"
    "foot foot";
}

#screen-select > .screen-head { grid-area: head; }
#screen-select > .select-stage { grid-area: stage; min-height: 0; }
#screen-select > .roster { grid-area: roster; }
#screen-select > .seat-panels { grid-area: seats; }
#screen-select > .screen-foot { grid-area: foot; }
#detail-tabs { flex: 0 1 18rem; }

/* ---------------------------------------------------------------- the roster: drivers over machines */
.roster {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  min-height: 0;
  padding: var(--s-3) var(--s-4) var(--s-4);
}

.roster-page {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 0;
}

/* (the label of the grid someone is choosing on is lit) */
.roster-label { flex: none; line-height: 1.2; transition: color var(--dur); }
.roster-label.is-live { color: var(--c-gold); }

.controls-page { overflow: auto; font-size: var(--t-sm); scrollbar-width: thin; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), var(--card-w, 4.5rem));
  grid-auto-rows: var(--card-h, 5.4rem);
  gap: var(--s-2);
  align-content: center;
  justify-content: center;
  min-height: 0;
}

/* (the shares of the room below the detail: fixed, so a grid's box never depends on the other's cards) */
#driver-grid { flex: 1.12 1 0; }
#car-grid { flex: 1 1 0; }

/* the grid nobody is choosing on steps back a little (what is chosen on it stays bright) */
.card-grid:not(.is-live) .card:not(.has-cursor):not(.is-locked) { opacity: 0.72; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.3rem;
  font-style: italic;
  color: #fff;
  cursor: pointer;
  background: var(--glass-3);
  border: var(--line-thin) solid rgb(255 255 255 / 16%);
  border-radius: var(--r-md);
  box-shadow: 0 0.2rem 0 rgb(13 23 48 / 55%), var(--glass-shine);
  transition: transform var(--dur-fast), box-shadow var(--dur), border-color var(--dur), opacity var(--dur);
}

.card:hover { border-color: rgb(255 255 255 / 45%); }

/* a driver's portrait in a frame of the driver's colour, the name under it, a colour bar at the foot */
.card-frame {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  padding: 3px;
  background: var(--accent);
  border-radius: calc(var(--r-md) - 0.25rem);
  box-shadow: inset 0 -0.2rem 0 rgb(0 0 0 / 22%);
}

.card-frame .face {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r-md) - 0.4rem);
}

.driver-card { box-shadow: inset 0 -0.3rem 0 var(--accent), 0 0.2rem 0 rgb(13 23 48 / 55%); }

.card-name {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(11px, calc(var(--card-w, 80px) * 0.15), 15px);
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.2em var(--c-ink);
}

.car-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.car-pic canvas { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgb(0 0 0 / 28%)); }
.car-pic svg { width: 58%; height: auto; max-height: 100%; overflow: visible; opacity: 0.55; }
.car-card .car-pic { flex: 1 1 0; width: 100%; }
.car-card .card-name { font-size: clamp(10px, calc(var(--card-w, 80px) * 0.12), 14px); }

/* a machine's numbers as three rows of five dots: speed, traction, protection */
.mini-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 70%;
}

.mini-stats i {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--c-gold) calc(var(--v, 0) * 20%), rgb(255 255 255 / 22%) 0);
  border-radius: 2px;
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(20% - 2px), transparent 0 20%);
}

.card-grid.is-small .card-name { display: none; }
.car-grid.is-small .mini-stats { width: 86%; }
.card-grid.is-tiny .mini-stats { display: none; }

/* the cursor: a ring in the seat's colour round a white rim, lifted off the grid */
.card.has-cursor {
  z-index: 1;
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--cursor), 0 0 0 5px var(--c-ink), 0 0 1.1rem color-mix(in srgb, var(--cursor) 70%, transparent);
  transform: translateY(-2px) scale(1.05);
}

/* chosen: filled with the chooser's colour, their tick on its foot */
.card.is-locked {
  background: linear-gradient(color-mix(in srgb, var(--owner) 62%, transparent), color-mix(in srgb, var(--owner) 28%, rgb(13 23 48 / 70%)));
  border-color: var(--owner);
}

/* someone else's: greyed for the cursor that is on it */
.card.is-taken .card-frame { filter: grayscale(0.85) opacity(0.5); }
.card.is-taken .card-name { color: var(--c-text-dim); }

.card-cursors {
  position: absolute;
  z-index: 2;
  inset: -0.55rem;
  pointer-events: none;
}

.card-cursors i {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.2rem;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  color: #fff;
  background: var(--seat);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px var(--c-ink);
}

.card-cursors .c0 { top: 0; left: 0; }
.card-cursors .c1 { top: 0; right: 0; }
.card-cursors .c2 { bottom: 0; left: 0; }
.card-cursors .c3 { bottom: 0; right: 0; }

/* the choices on a card: a tick (a player alone) or each chooser's P-number and tick, in a row on its foot */
.card-cursors .owners {
  bottom: -0.1rem;
  left: 50%;
  gap: 2px;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: translateX(-50%);
}

.card-cursors .owner {
  position: static;
  gap: 1px;
  padding: 0 0.3rem;
}

.card-cursors .owner .icon svg { width: 0.85rem; height: 0.85rem; stroke-width: 3.5; }

/* (cards that show their name: the choices sit on the top edge instead, clear of it) */
.card-grid:not(.is-small) .card-cursors .owners { top: -0.1rem; bottom: auto; }

/* a driver someone else has: no */
.card.shake { animation: card-shake 0.32s; }

@keyframes card-shake {
  20%, 60% { translate: -4px 0; }
  40%, 80% { translate: 4px 0; }
}

/* ---------------------------------------------------------------- who and what is chosen (the seat that moved last) */
.detail {
  display: grid;
  flex: none;
  grid-template-columns: auto minmax(0, 1fr) minmax(9rem, 12rem);
  grid-template-areas:
    "face who stats"
    "about about about";
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  background: var(--glass-2);
  border-radius: var(--r-md);
}

.detail-face { display: block; grid-area: face; }
.detail-face .face { width: 3.4rem; height: 3.4rem; box-shadow: 0 0 0 3px var(--c-ink); }
.detail-who { display: flex; grid-area: who; flex-direction: column; gap: 1px; min-width: 0; }
.detail-kicker { display: flex; gap: var(--s-2); align-items: center; min-width: 0; }

.detail-name {
  overflow: hidden;
  /* (room for the slant and the outline of the last letter) */
  padding-right: 0.15em;
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 900;
  line-height: 1.15;
  color: var(--driver-color, #fff);
  text-overflow: ellipsis;
  white-space: nowrap;
  paint-order: stroke fill;
  -webkit-text-stroke: var(--stroke) var(--c-ink);
}

.detail-car { overflow: hidden; font-size: var(--t-sm); font-style: italic; font-weight: 900; line-height: 1.25; color: var(--c-gold); text-overflow: ellipsis; white-space: nowrap; }

/* the description: the one chosen over all of them (unseen), each in the same cell - the cell is the longest's height */
.detail-about {
  display: grid;
  grid-area: about;
  padding-top: var(--s-2);
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.detail-about > *,
.detail-sizer > * { grid-area: 1 / 1; }
.detail-sizer { display: grid; visibility: hidden; }
.detail-blurb { margin: 0; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; color: var(--c-text-soft); }

.car-stats { display: flex; grid-area: stats; flex-direction: column; gap: 3px; }

.stat {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 800;
}

.stat .icon svg { width: 1.1rem; height: 1.1rem; }
.stat-text { display: flex; flex: 0 0 4.8rem; flex-direction: column; min-width: 0; }
.stat-tip { display: none; }
.stat .statbar { height: 0.6rem; }

/* ---------------------------------------------------------------- seat panels */
.seat-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  align-self: end;
  padding-top: 0.5rem;
}

.seat-panels[data-slots="1"] { grid-template-columns: minmax(0, 34rem); }

.seat {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-1) var(--s-3);
  align-items: center;
  min-height: 5rem;
  padding: var(--s-3) var(--s-3) var(--s-2);
  border-top: 0.3rem solid var(--seat);
}

/* the seat's badge sits on its top edge, like a tab */
.seat > .seat-badge {
  position: absolute;
  top: -0.85rem;
  left: 0.7rem;
}

.seat.is-active { box-shadow: 0 0 0 2px var(--seat), var(--sh-plate); }
.seat-face.face { width: 3rem; height: 3rem; box-shadow: 0 0 0 2px var(--c-ink); }
.seat-text { display: flex; flex-direction: column; min-width: 0; }

/* (every line always there, one line high: a step that has nothing to say on a line leaves it empty) */
.seat-text > * {
  display: block;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-driver { font-size: var(--t-md); font-style: italic; font-weight: 900; }
.seat-car-name { font-size: var(--t-xs); font-weight: 700; color: var(--c-text-soft); }
.seat-text > .seat-state { display: flex; gap: var(--s-1); align-items: center; font-size: var(--t-xs); font-weight: 800; color: #ffe9a8; }
.seat-state .icon svg { width: 1.1em; height: 1.1em; }
.seat-car { width: 4.6rem; height: 2.7rem; }
.seat-car.is-empty { opacity: 0.35; }

.seat.step-2 { background: linear-gradient(rgb(40 140 90 / 60%), rgb(21 34 63 / 80%)); }
.seat.step-2 .seat-state { color: var(--c-green); }

.seat-how {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--t-xs);
}

.seat-how .ctl-strip { flex-wrap: nowrap; font-size: 0.8rem; }

/* a narrow seat: no machine picture (its name says it), and the strip keeps to the caps */
@container (width < 17rem) {
  .seat-car { display: none; }
}

@container (width < 22rem) {
  .seat-how .ctl-chip b { display: none; }
  .seat-how .ctl-chip { padding: 0.2em 0.3em; }
}

.seat.is-empty {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  background: rgb(8 16 36 / 32%);
  border: var(--line-thin) dashed rgb(255 255 255 / 30%);
  border-top: 0.3rem solid color-mix(in srgb, var(--seat) 60%, transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.seat.is-empty > .seat-badge { opacity: 0.85; }
.seat-join { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: center; font-weight: 800; color: var(--c-text-soft); text-align: center; }
.seat-join .icon svg { width: 1.4rem; height: 1.4rem; }
.seat-join-keys { display: flex; gap: var(--s-1); font-size: 0.85rem; }

/* ---------------------------------------------------------------- big, low and upright windows */
/* a player alone: the cursor ring is enough, no shape badges needed */
.is-solo .card-cursors .cursor { display: none; }

/* the same screen in an ordinary window: the seat panels take a row, so the description makes way for the cards */
@media (max-height: 820px) {
  #screen-select:not(.is-solo) .detail-about { display: none; }
  #screen-select:not(.is-solo) .roster-label { display: none; }
  .seat-how .ctl-device { display: none; }
}

@media (max-height: 520px) {
  #screen-select { --roster-w: 34rem; gap: var(--s-2); column-gap: var(--s-3); }
  #detail-tabs { display: none; }
  #detail-machine[hidden] { display: flex !important; }
  #detail-controls { display: none !important; }
  .seat-car { display: none; }
  .seat-car-name { display: none; }
  .seat-join-text { display: none; }
  .roster { padding: var(--s-2) var(--s-3); gap: var(--s-1); }
  .roster-page { gap: var(--s-1); }
  .roster-label { display: none; }
  /* (the two grids share the room alike: a finger's height for every card in both) */
  #driver-grid, #car-grid { flex: 1 1 0; }
  /* (the seat panel names the driver and the machine: the detail is the machine's numbers, in one slim row) */
  .detail { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who stats"; gap: var(--s-2); padding: var(--s-1) var(--s-2); }
  .detail-face, .detail-about { display: none; }
  /* (several players: the seat panels name everyone, and the cards need all the room) */
  #screen-select:not(.is-solo) .detail { display: none; }
  .detail-who { flex-direction: row; gap: var(--s-2); align-items: baseline; }
  .detail-name { font-size: var(--t-sm); }
  .detail-car { font-size: var(--t-xs); }
  .car-stats { flex-direction: row; gap: var(--s-2); }
  .stat-text { display: none; }
  .stat { gap: 2px; }
  .stat .icon svg { width: 0.95rem; height: 0.95rem; }
  .stat .statbar { flex: 0 0 2.6rem; height: 0.5rem; }
  /* (a player alone with keys or a gamepad turns a page: the drivers, then the machines, each with all the room
     and a layout of its own. A mouse or a finger keeps both, to change either at any time - and so does a shared
     screen, where one player's step must not resize the grid another is choosing on) */
  html:not([data-input="pointer"]) #screen-select.is-solo .card-grid:not(.is-open) { display: none; }
  .card-frame { padding: 2px; }
  .seat { min-height: 0; padding: var(--s-1) var(--s-2); gap: 0 var(--s-2); }
  .seat-how { display: none; }
  /* (a player alone keeps the strip of their keys: the controls stay in view before the race) */
  .seat-panels[data-slots="1"] { grid-template-columns: minmax(0, 1fr); }
  .seat-panels[data-slots="1"] .seat-how { display: flex; }
  .seat-panels[data-slots="1"] .seat-how .ctl-device { display: none; }
  .seat-panels[data-slots="1"] .seat-car-name { display: block; }
  .seat-face.face { width: 2.2rem; height: 2.2rem; }
  .seat-car { width: 3.2rem; }
  .seat-driver { font-size: var(--t-sm); }
  .seat.is-empty { flex-direction: row; }
}

/* an upright window: everything in one column, the kart above the roster */
@media (max-aspect-ratio: 6/5) {
  #screen-select,
  #screen-select.is-solo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(8rem, 1fr) minmax(0, 1.6fr) auto auto;
    grid-template-areas: "head" "stage" "roster" "seats" "foot";
  }

  .seat-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seat-panels[data-slots="1"] { grid-template-columns: minmax(0, 1fr); }

  /* (a phone held upright: the roster takes the room - every card a finger wide - and the kart on its stand a peek; the
     title may take two lines, the tabs their drawings only; the detail is who and the machine's numbers, no description:
     the seat panel names the pick) */
  #screen-select,
  #screen-select.is-solo { grid-template-rows: auto minmax(4.5rem, 0.5fr) minmax(0, 2fr) auto auto; }
  #screen-select .title { font-size: var(--t-lg); line-height: 1.05; white-space: normal; }
  #detail-tabs { flex: none; }
  #detail-tabs .label { display: none; }
  #detail-tabs > button { min-width: var(--hit); padding: 0 var(--s-2); }
  #driver-grid, #car-grid { flex: 1 1 0; }
  .detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "stats"; }
  .detail-face, .detail-about { display: none; }
  .detail-who { flex-direction: row; gap: var(--s-2); align-items: baseline; }
  .car-stats { flex-direction: row; gap: var(--s-3); }
  .stat { flex: 1 1 0; }
  .stat-text { display: none; }
  .stat .statbar { flex: 1 1 auto; }
}

/* everyone is ready: Next shines (P1's "choose", Start or a click goes on) */
#btn-select-next.is-go {
  box-shadow: var(--sh-raised), 0 0 1.4rem rgb(255 200 60 / 85%);
  animation: go-glow 1.2s ease-in-out infinite;
}

@keyframes go-glow {
  50% { box-shadow: var(--sh-raised), 0 0 0.4rem rgb(255 200 60 / 40%); }
}

#select-status .cap { margin: 0 0.15em; font-size: 0.85em; }