/*
 * Phone-width fixes for the kid modes (piece explorers, route trainers, the
 * knight tools, Pawn race, Free play, Puzzles, Coordinates). Linked from
 * index.html under the same media query as css/mobile.css, so a desktop
 * never sees it. css/mobile.css owns the shell (header, bar, sheet, board,
 * panel, native control sizes); this file only touches the classes the modes
 * build inside #viz-controls, and never repeats a rule the shell already has.
 *
 * Audited with tools/shot.sh at 390x844 (portrait) and 844x390 (landscape),
 * every mode, by Verne.
 */

/* ---------- Rows of buttons: wrap, never squeeze a label onto two lines ---------- */

/*
 * Knight's Tour ("Undo / Restart / Random start") and Pawn race ("New race /
 * Restart / Undo") put three buttons in one row. At 390px the longest label
 * broke into two lines and the row went ragged. Each button now keeps its
 * label on one line, takes its share of the row, and a button that does not
 * fit drops to a full-width row of its own. In landscape the panel is wider
 * and all three stay on one line.
 */
.button-row {
  flex-wrap: wrap;
  gap: 8px;
}

.button-row button {
  flex: 1 1 auto;
  white-space: nowrap;
  padding: 10px 12px;
}

/* ---------- Status lines and lessons: a touch bigger for a small reader ---------- */

.turn-status {
  font-size: 1.15rem;
  padding: 12px 14px;
}

.lesson {
  font-size: 1.02rem;
}

.info {
  font-size: 1.05rem;
}

.field.inline span {
  font-size: 1rem;
}

/* ---------- Radio choices: finger-sized (under the board the deck draws them as segments) ---------- */

.radio {
  min-height: 48px;
  padding: 10px 12px;
  font-size: 1rem;
}

/* ---------- Knight sprint: the clock row (the deck seats it under the board) ---------- */

.sprint-status {
  padding: 12px 16px;
  border-radius: 10px;
}

.sprint-clock {
  font-size: 2.6rem;
  line-height: 1;
}

/*
 * The last five seconds (Knight sprint and Coordinates both mark the clock
 * .urgent then). On a desktop the colour change is enough; on a phone the
 * child is looking at the board, so the clock also beats, once a second,
 * softly. Anyone who asked their phone for less motion gets the colour only.
 */
.sprint-clock.urgent {
  animation: verne-clock-beat 1s ease-in-out infinite;
}

@keyframes verne-clock-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .sprint-clock.urgent {
    animation: none;
  }
}

.sprint-solved {
  font-size: 1.05rem;
}

.strike {
  width: 28px;
  height: 28px;
  font-size: 1rem;
}

.chip {
  min-width: 36px;
  padding: 6px 10px;
  font-size: 0.95rem;
}

.score-box {
  padding: 14px;
  border-radius: 10px;
}

.score-main {
  font-size: 2rem;
}

.score-reason,
.score-sub {
  font-size: 0.95rem;
}

/* ---------- Personal bests (Knight sprint, Coordinates): readable, not tiny ---------- */

.bests {
  font-size: 0.95rem;
}

.bests-table th,
.bests-table td {
  padding: 8px 6px;
}

.stat-tile {
  padding: 10px 4px;
  border-radius: 8px;
}

.stat-value {
  font-size: 1.6rem;
}

.stat-label {
  font-size: 0.85rem;
}

/* ---------- Coordinates: the square to find is the whole point ---------- */

.coords-prompt {
  font-size: 3rem;
  line-height: 1.1;
  padding: 16px 12px;
  border-radius: 12px;
}

.coords-prompt small {
  font-size: 1rem;
  margin-top: 4px;
}

/*
 * Coordinates' sprint clock sits under the prompt on its own: centre it, and
 * in Practice mode (where the mode leaves it empty) let it take no room, so
 * the prompt and the score line sit together.
 */
.coords-prompt + .sprint-clock {
  text-align: center;
}

.coords-prompt + .sprint-clock:empty {
  display: none;
}