/* ═══════════════════════════════════════════════════════════════
   PANEL — panneaux gauche et droit, sélecteurs, liste de coups
   ═══════════════════════════════════════════════════════════════ */

/* ── Panneaux communs ─────────────────────────────────────────── */

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
}

/* Panneau gauche — empile les sections normalement */
.side-panel-left {
  grid-area: left;
  padding-right: 4px;
  /* Pas de contrainte de hauteur : les sections gauches
     ont une hauteur naturelle, pas de scroll nécessaire */
  align-self: start;
}

/* Panneau droit — hauteur verrouillée sur la ligne "game" de la grille.
   La chaîne flex doit être continue jusqu'à .move-list :
   side-panel-right → #game-controls-right → .moves-section → .move-list */
.side-panel-right {
  grid-area: right;
  padding-left: 4px;
  align-self: stretch;   /* s'étire sur toute la hauteur de la cellule grille */
  overflow: hidden;      /* bloque toute extension vers le bas */
  display: flex;
  flex-direction: column;
}

/* ── Sections ─────────────────────────────────────────────────── */

.panel-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  /* flex-shrink: 0 empêche les sections fixes (Partie, Statut)
     de se comprimer quand le panneau est contraint en hauteur */
  flex-shrink: 0;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* ── Boutons d'action ─────────────────────────────────────────── */

.controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.controls .btn {
  width: 100%;
  justify-content: center;
}

/* ── Mode / Display selector ──────────────────────────────────── */

.mode-selector {
  display: flex;
  gap: 4px;
}

.mode-btn, .display-btn {
  flex: 1;
  padding: 6px 4px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mode-btn:hover, .display-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.mode-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.display-btn.active {
  background: var(--color-accent);
  color: #1a1a1a;
  border-color: var(--color-accent);
}

/* ── Color selector ───────────────────────────────────────────── */

.color-btn,
.sandbox-color-btn {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.color-btn:hover,
.sandbox-color-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.color-btn.active[data-color="w"],
.sandbox-color-btn.active[data-color="w"] {
  background: #f0ede6;
  color: #1a1a1a;
  border-color: #f0ede6;
  box-shadow: 0 0 10px rgba(240, 237, 230, 0.12);
}

.color-btn.active[data-color="b"],
.sandbox-color-btn.active[data-color="b"] {
  background: #1a1a22;
  color: #e8e7e4;
  border-color: #4a4a5a;
  box-shadow: 0 0 10px rgba(74, 74, 90, 0.25);
}

/* ── Difficulty selector ──────────────────────────────────────── */

.difficulty-selector {
  display: flex;
  gap: 4px;
}

.diff-btn {
  flex: 1;
  padding: 6px 4px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.diff-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.diff-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── Wrapper droit ────────────────────────────────────────────── */

/* Maillon 1 de la chaîne : #game-controls-right remplit le panneau
   et peut se comprimer (min-height: 0 indispensable) */
#game-controls-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;          /* s'étire pour remplir .side-panel-right */
  min-height: 0;    /* autorise la compression en dessous du contenu natif */
  overflow: hidden;
}

#sandbox-controls-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Section "Coups" — maillon 2 ─────────────────────────────── */

/* .moves-section est un .panel-section spécial :
   - flex: 1 → absorbe tout l'espace vertical restant
   - min-height: 0 → peut se réduire autant que nécessaire
   - flex-shrink n'est PAS 0 ici (contrairement aux autres sections) */
.moves-section {
  flex: 1 1 0;       /* grandit ET peut se comprimer, base 0 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* la bordure/padding ne déborde pas */
}

/* Titre de la rubrique : hauteur fixe, ne se comprime pas */
.moves-section .panel-title {
  flex-shrink: 0;
}

/* ── Liste déroulante — maillon 3 (terminal) ──────────────────── */

.move-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;        /* SEUL endroit où le scroll se produit */
  font-size: 12px;
  line-height: 1.8;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.move-list::-webkit-scrollbar { width: 4px; }
.move-list::-webkit-scrollbar-track { background: transparent; }
.move-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.move-row {
  display: flex;
  gap: 4px;
  padding: 1px 4px;
  border-radius: 3px;
}

.move-row:hover { background: var(--color-surface-2); }

.move-number {
  color: var(--color-text-faint);
  min-width: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.move-white, .move-black {
  flex: 1;
  font-weight: 500;
  cursor: default;
  padding: 0 3px;
  border-radius: 2px;
}

.move-white:hover, .move-black:hover {
  background: var(--color-primary-glow);
}

/* ── Wrappers gauche + sandbox ────────────────────────────────── */

#game-controls,
#sandbox-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Statut ───────────────────────────────────────────────────── */

.status-display {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 6px;
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

.status-display.check {
  color: var(--color-danger);
  background: rgba(224, 85, 85, 0.1);
}

.status-display.gameover {
  color: var(--color-accent);
  background: rgba(212, 164, 74, 0.1);
}

/* ── Thinking indicator ───────────────────────────────────────── */

.thinking {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.thinking.visible { display: flex; }

.thinking-dots { display: flex; gap: 3px; }

.thinking-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }