/* Coach mode. Reuses play.css's setup/board shell shapes via style.css tokens; what is
   specific here is the coach card — the one element that is always on screen once a game
   starts, because every player move gets a caption. */

.coach-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
  box-shadow: var(--shadow-1);
}

/* The line is the feature, so it gets room to breathe and a size that reads as speech
   rather than as UI chrome. */
.coach-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  min-height: 3em;          /* holds its height between captions so the page cannot jump */
}

.coach-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.coach-actions .btn { flex: 1; }

.game-controls {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.game-controls .btn { flex: 1; }

.game-over { margin-top: 12px; }
.game-over-text {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--ink);
}

.move-list {
  margin: 12px 0 0;
  padding-left: 2.2em;
  color: var(--ink3);
  font-size: 0.9rem;
  max-height: 12em;
  overflow-y: auto;
}
.move-list li { padding: 1px 0; }

.custom-note, .bot-flavor {
  margin: 8px 0 0;
  color: var(--ink4);
  font-size: 0.85rem;
}

.bot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.bot-elo { font-weight: 600; color: var(--ink); }
.bot-scale {
  display: flex;
  justify-content: space-between;
  color: var(--ink4);
  font-size: 0.8rem;
}