/* /puzzles — trainer-only rules. The shared components it builds on (.btn, .card,
   .stat, .pbar, .range, .list-row, .badge, .puzzle-*, .trainer-*) live in style.css. */

/* The board behind a mode menu is a preview, not a puzzle: clicks never reach it,
   and it reads as inactive so nobody tries. */
.board.is-inert { pointer-events: none; opacity: 0.72; filter: saturate(0.85); }

/* A mode menu shows no board, so the chooser gets the column to itself instead of
   the ~20rem the in-session side panel is sized for. */
.trainer-wrap.menu .trainer-side {
  flex-basis: 100%;
  max-width: 32rem;
}

/* The mode chooser — a port of PuzzleTypeSelectionScreen.kt. */
.choose-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink2);
  margin: 0.5rem 0 0.75rem;
}
.mode-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.mode-name.section { margin-top: 1.25rem; }
.mode-hero { text-align: center; }
.mode-desc.center { text-align: center; }
.hero-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink3);
  margin: 0.5rem 0 0;
}
.hero-rating {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  margin: 0;
}
.hero-note {
  font-size: 0.75rem;
  color: var(--ink3);
  margin: 0.15rem 0 0;
}
.mode-hero .btn-block { margin-top: 1rem; }
.mode-back { margin-top: 1rem; }

/* Rated per-move clock. Readout and bar share one state class so they warn
   together: accent → warning under 10s → danger under 5s, ink3 when stopped. */
.rated-clock { margin-bottom: 0.85rem; }
.rated-clock .stat-row { margin-bottom: 0.5rem; }
.rated-clock .pbar { height: 4px; }
.rated-clock .pbar-fill { width: 0; transition: width 0.2s linear; }
.rated-clock.run .clock { color: var(--accent); }
.rated-clock.run .pbar-fill { background: var(--accent); }
.rated-clock.warn .clock { color: var(--warning); }
.rated-clock.warn .pbar-fill { background: var(--warning); }
.rated-clock.danger .clock { color: var(--danger); }
.rated-clock.danger .pbar-fill { background: var(--danger); }
.rated-clock.idle .clock { color: var(--ink3); }

.rated-line {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.75rem; font-size: 0.8rem; min-height: 1.4em;
}

/* Miss review (rated) and the wrong-move end of a timed run. */
.miss-card { text-align: center; }
.miss-card h3 { margin: 0 0 0.25rem; font-size: 1.2rem; color: var(--ink); }
.miss-why { color: var(--ink3); font-size: 0.85rem; margin: 0 0 0.6rem; }
.miss-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink2);
}
.best-move { color: var(--ink2); font-size: 0.9rem; margin: 0.75rem 0 0; }

/* Custom difficulty slider — 23 steps of 100 points (PuzzleDifficultySlider.kt). */
.slider-row { margin: 0 0 1rem; }
.slider-label {
  text-align: center; font-size: 0.875rem; font-weight: 500;
  color: var(--ink); margin: 0 0 0.5rem;
}
.slider-ends {
  display: flex; justify-content: space-between;
  color: var(--ink4); font-size: 0.75rem; margin-top: 0.15rem;
}
.slider-note {
  color: var(--ink3); font-size: 0.8rem; text-align: center;
  margin: 0.5rem 0 0; min-height: 1.2em;
}