/* Scores occupy the board; the hand and view buttons remain reachable. */
.board-view-controls { grid-column: 2; grid-row: 1; display: flex; gap: 4px; min-width: 0; }
.board-view-controls .view-toggle { flex: 1; min-width: 0; padding: 3px 5px; }
.score-toggle[hidden], .review-hint[hidden] { display: none; }
.score-toggle[aria-pressed="true"] { background: #725516; color: #fff2c9; }
/* The hint points down at the view switcher, so it needs a band of its own below the
   panel. Floating an opaque badge over a scrolling panel covers whatever happens to be
   under it — here the fu value and the yaku list, which is precisely what the review
   exists to show. */
.scores-view { inset: 0 7px 30px; overflow-y: auto; overscroll-behavior: contain; background: #08231b; border: 1px solid #9d7b35; border-radius: 8px; padding: 12px; }
.review-summary h2 { margin: 0 0 8px; color: var(--gold-pale); font: 700 22px var(--font-display); }
.review-summary h3 { font-size: 12px; margin: 8px 0; }
.review-summary p { font-size: 12px; line-height: 1.5; }
.review-tip { color: #bed6c9; }
.scores-view .result-card { padding: 12px 0; border: 0; border-top: 1px solid #365247; border-radius: 0; box-shadow: none; background: transparent; }
.review-hint { position: absolute; z-index: 3; right: 12px; bottom: 3px; margin: 0; padding: 5px 8px; border: 1px solid #9d7b35; border-radius: 6px; background: #102a20; color: #ffe5a4; font-size: 11px; pointer-events: none; }
.review-hint span { display: inline-block; margin-right: 4px; font-size: 20px; line-height: 16px; animation: review-bob 1s ease-in-out infinite; }
.review-action-note { font-size: 10px; line-height: 1.4; text-align: center; color: #cadbd1; margin: 0; }
.timer-text[data-timing="review"] { color: #ff7b77; }
.timer-text[data-timing="ready"] { color: #ffdb69; }
.timer-text[data-timing="go"] { color: #7cf3a5; text-shadow: 0 0 10px #2c9760; }
.is-reviewing .player-card.active { box-shadow: none; }
:root[data-vfit="tight"] .board-view-controls { grid-column: 2; grid-row: 1; }
:root[data-vfit="tight"] .is-reviewing .table-info-strip { grid-template-columns: 1fr auto; }
:root.is-reviewing[data-vfit="tight"] .table-info-strip { grid-template-columns: 1fr auto; }
:root.is-reviewing[data-vfit="tight"] .stick-panel { display: none; }
@keyframes review-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .review-hint span { animation: none; } }

/* Worked examples use the actual board rectangle and tile artwork. */
.coach-example { inset: 0 7px; }
.coach-example .coach-spot { display: none; }
.coach-example .coach-card { position: absolute; inset: 0 !important; width: auto; transform: none; overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; padding: 12px; background: #102b21; box-shadow: none; }
.coach-example .coach-spot[hidden] ~ .coach-card { box-shadow: none; }
.coach-example .coach-body { font-size: 12px; margin-bottom: 10px; }
.coach-example .coach-title { font-size: 20px; }
.coach-example .coach-actions { position: sticky; bottom: -12px; padding: 6px 0; background: #102b21; }
.coach-chapter-select { width: 100%; background: #10231d; color: #d7e7de; border: 1px solid #526a57; border-radius: 5px; padding: 5px; margin-bottom: 8px; font: inherit; font-size: 11px; }
.lesson-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 10px 0; }
.lesson-group { display: flex; flex-direction: column; gap: 5px; max-width: 100%; }
.lesson-group-label { color: #e8d8a6; font-size: 10px; }
.lesson-tiles { display: flex; flex-wrap: wrap; gap: 3px; padding-bottom: 3px; }
/* The extrusion derives from --tile-h, so a context that sets its own height must set
   these too; and tile.css only makes .tile-hand a size container inside the contexts
   named in its list, which this one is now part of. Without that the face sizes itself
   against the viewport. */
.lesson-tiles .tile-hand {
  width: 27px; height: 37px; flex: 0 0 27px;
  --tile-w: 27px; --tile-h: 37px;
  --tile-cap: calc(var(--tile-h) * 0.14);
  --tile-side: calc(var(--tile-h) * 0.105);
}
.lesson-choices { display: flex; flex-direction: column; gap: 6px; }
.lesson-choice { min-height: 40px; border: 1px solid #72846b; background: #183d2e; color: #f0ecdc; border-radius: 7px; padding: 8px; text-align: left; font: inherit; font-size: 12px; }
.lesson-choice[aria-pressed="true"] { border-color: #ffd575; }
.lesson-feedback { min-height: 20px; font-size: 12px; color: #ffe0a0; line-height: 1.45; }
.coach-back { background: transparent; color: #d6e3d8; border: 1px solid #576e59; border-radius: 7px; min-height: 42px; padding: 6px 8px; }
.coach-next:disabled { opacity: 0.4; cursor: default; }
.coach-card { max-height: calc(100dvh - 24px); overflow-y: auto; }