/* Puzzles page: five modes in one control, the run bar for Streak and
   Storm, and a rating shown with its deviation. Tokens come from tokens.css;
   the shared rules live in app.css. */

/* Five modes are too many for one row on a phone; let the control wrap
   into a 3 + 2 grid instead of shrinking the labels. */
#sourceChoice { flex-wrap: wrap; }
#sourceChoice button { flex: 1 1 30%; }

/* The run bar sits where a game's player strip would: count, level and, in
   Storm, the clock in the same capsule the Play page uses. */
.run-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  margin-bottom: var(--s2); min-height: 32px;
  font: var(--t-subhead); color: var(--label-secondary);
  font-variant-numeric: tabular-nums;
}
.run-bar .run-n {
  font: 700 22px/26px var(--font); letter-spacing: -0.02em; color: var(--label);
}
.run-bar .clock { margin-left: 0; }
.run-bar .combo {
  font: var(--t-caption); padding: 2px 8px; border-radius: 999px;
  background: var(--fill-tertiary); color: var(--label-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.run-bar .combo.hot { background: var(--orange); color: #fff; }

/* Glicko-2: the rating carries its uncertainty. */
.stat-rd { font: 600 12px/1 var(--font); color: var(--label-secondary); margin-left: 2px; letter-spacing: 0; }
.stat-tag { color: var(--orange); }
.run-bests { text-align: center; margin: var(--s3) 0 0; }