/* Round-board layout: every step of the round is on screen at once, with the current one enlarged.
   Loaded after styles.css and overrides its single-step stage, which remains the fallback for
   screens too short for the board. */

/* The big single-step display is replaced by the board itself. */
.textbox { display: none; }

.stage { gap: 0.5rem; }
.now { flex: none; min-height: 0; gap: 0.35rem; }

/* Clock sits beside the step progress bar so the board gets the height. */
.headline { display: flex; align-items: center; gap: 0.8rem; }
.clock { flex: none; font-size: clamp(2.2rem, min(14vw, 10vh), 4.5rem); }
.track { flex: 1 1 0; height: 0.65rem; }

/* Only shown when it previews the next round, so it never repeats what the board already says. */
#next { margin-top: 0; }
#next[data-scope="round"] { display: none; }

.side { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.side-h { display: none; }

.round-list {
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  list-style: none; margin: 0; padding: 0;
}
/* Context rows get a fixed slice of the board so whatever is left goes to the step being called.
   A fixed height also keeps the text fitting one-directional: row size first, then font size. */
.round-list li {
  flex: 0 1 auto; height: clamp(2.4rem, 15%, 4rem);
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.7rem;
  align-items: center; justify-content: stretch;
  padding: 0.3rem 0.7rem; border-radius: 0.7rem;
  background: var(--panel); border: 1px solid transparent; color: var(--muted);
  overflow: hidden; text-align: left; cursor: pointer;
}
.round-list li.current {
  flex: 1 1 0; height: auto; min-height: 28%;
  color: var(--text); background: var(--panel-2); border-color: var(--accent);
}
.round-list li.technique.current { border-color: var(--tech); }
.round-list li.done { opacity: 0.4; }
.round-list li.technique .n { color: var(--tech); }

.round-list .n { font-size: 0.95rem; font-weight: 700; text-align: center; align-self: center; }
.round-list li.current .n { font-size: 1.15rem; }
/* app.js picks the largest font size that fits each row. */
.round-list .what { display: block; min-width: 0; font-size: 1rem; line-height: 1.12; overflow-wrap: anywhere; }
.round-list li.current .what { font-weight: 750; }
.round-list .ln + .ln { margin-top: 0.08em; }

.progress { flex: none; }

/* Wide screens: the board is the main column, so drop the side-panel treatment from styles.css. */
@media (min-width: 960px) and (min-height: 521px) {
  .stage { flex-direction: column; gap: 0.75rem; padding: 1rem 2rem; }
  .clock { font-size: clamp(2.5rem, min(9vw, 11vh), 5rem); }
  .side { flex: 1 1 0; display: flex; overflow: visible; }
  .round-list { display: flex; margin-bottom: 0; }
  .round-list li { grid-template-columns: 2rem minmax(0, 1fr); padding: 0.4rem 1rem; height: clamp(2.6rem, 12%, 3.4rem); }
  .round-list li.current { height: auto; }
  .round-list li.technique { margin-top: 0; }
  .totals { justify-content: space-between; gap: 0; }
  .totals div { display: flex; align-items: baseline; gap: 0.4rem; }
  .totals dd { margin: 0; font-size: 0.95rem; }
}

/* Short screens (landscape phones, small old handsets) have no room for five rows plus a clock,
   so the board falls back to the single-step layout. `display: contents` hands the clock and bar
   back to the grid that styles.css sets up. */
@media (max-height: 620px) {
  .textbox { display: block; }
  .headline { display: contents; }
  #next[data-scope="round"]:not([hidden]) { display: flex; } /* no board, so "Next" is the only preview */
  .now { flex: 1 1 0; min-height: 0; }
  .side { display: none; }
}