* { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg-deep: #14181f;
    --bg-card: #1c2230;
    --bg-elevated: #232a3b;
    --bg-input: #0e1219;
    --border: #2d3548;
    --border-soft: #232a3b;
    --text: #e6e8ec;
    --text-dim: #9aa3b6;
    --text-faint: #6c7689;
    --accent: #c9a55a;
    --accent-soft: #8a7340;
    --light-sq: #ead8b0;
    --dark-sq: #9d7a4f;
    /* Phase 8.2 (A) — Teinte de l'échiquier en mode drill (rosée). Définie en
       variables dédiées pour que le point D puisse rendre la palette
       sélectionnable PAR TYPE d'affichage (normal / exploration / drill). Le
       point D introduira de même --explore-light-sq / --explore-dark-sq ; ici
       on ne pose que le drill, seul état nouveau de cette phase. */
    --drill-light-sq: #f0d2d8;
    --drill-dark-sq: #c98b97;
    --excellent: #6bbe6b;
    --good: #95d195;
    --book: #a4a4a4;
    --inaccuracy: #f5c542;
    --mistake: #ed8a3d;
    --blunder: #d65656;
    --brilliant: #44c7d6;
    --board-size: 480px;
    --piece-size: 52px;
  }
  @media (max-width: 1180px) {
    :root { --board-size: 420px; --piece-size: 44px; }
  }
  @media (max-width: 760px) {
    :root { --board-size: min(92vw, 420px); --piece-size: calc(min(92vw, 420px) * 0.108); }
  }

  body {
    font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
    background: var(--bg-deep);
    background-image:
      radial-gradient(at 20% 0%, rgba(201, 165, 90, 0.04) 0%, transparent 50%),
      radial-gradient(at 80% 100%, rgba(68, 199, 214, 0.03) 0%, transparent 50%);
    color: var(--text);
    min-height: 100vh;
    padding: 18px;
    font-size: 14px;
    line-height: 1.5;
  }

  .container { max-width: 1380px; margin: 0 auto; }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
  }

  /* Phase 6.3 (A6) — Header rétractable pour libérer la verticale en mode
     exploration. La classe .collapsed réduit le padding, masque le titre h1
     et tous les boutons d'action sauf le toggle lui-même. État persisté en
     localStorage. */
  header.collapsed {
    padding: 4px 22px;
    margin-bottom: 8px;
    justify-content: flex-end;
  }
  header.collapsed h1 { display: none; }
  header.collapsed .actions > button:not(.header-toggle) { display: none; }
  header.collapsed .actions { gap: 0; }

  .header-toggle {
    padding: 6px 10px !important;
    font-size: 14px;
    line-height: 1;
    min-width: 36px;
  }
  .header-toggle:hover { color: var(--accent); }

  h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--text);
  }

  h1 .accent { color: var(--accent); font-style: italic; }
  h1 .king { font-size: 22px; vertical-align: -1px; margin-right: 6px; }

  .actions { display: flex; gap: 8px; }

  button {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
  }
  button:hover { background: #2c344a; border-color: var(--accent-soft); }
  button:active { transform: translateY(1px); }
  button:disabled { opacity: 0.4; cursor: not-allowed; }

  button.primary {
    background: var(--accent);
    color: #1a1a1a;
    border-color: var(--accent);
    font-weight: 600;
  }
  button.primary:hover { background: #d6b369; }

  .main-grid {
    display: grid;
    grid-template-columns: minmax(420px, 540px) 1fr;
    gap: 20px;
    align-items: start;
  }
  @media (max-width: 1180px) {
    .main-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    body { padding: 10px; font-size: 13px; }
    header { padding: 10px 12px 14px; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
    h1 { font-size: 20px; }
    .card { padding: 12px; }
    .nav-primary { gap: 4px; }
    .nav-btn-big { padding: 12px 4px; font-size: 16px; min-height: 44px; }
    .nav-play { font-size: 12px !important; }
    .move-san { font-size: 22px; }
    .stats-acc { font-size: 26px; }
    .moves-list { max-height: 220px; font-size: 12px; }
    .modal { padding: 14px; }
  }

  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
  }

  .player-bar {
    /* Phase 6.5 (C3) — La player-bar passe en flex column pour pouvoir
       contenir deux rangs : rang 1 (nom + Elo + sélecteur Top ⑂ + clock + acc)
       et rang 2 (pièces capturées + avantage matériel). La grid 3 colonnes
       d'origine est descendue d'un niveau dans .player-bar-row1. */
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .player-bar-row1 {
    /* Phase 4.4 — Grid 3 colonnes : nom à gauche, sélecteur MultiPV centré
       absolu (indépendant des largeurs gauche/droite), méta à droite.
       grid-template-columns: 1fr auto 1fr garantit que la zone centrale est
       PARFAITEMENT centrée par rapport à la barre, peu importe la longueur du
       nom du joueur ou la présence du clock. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }
  .player-bar-left {
    justify-self: start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .player-bar-center {
    justify-self: center;
  }
  .player-bar.white { background: linear-gradient(to right, #ead8b0 0%, #d4c198 100%); color: #1a1a1a; }
  .player-bar.black { background: linear-gradient(to right, #2a2a2a 0%, #1a1a1a 100%); color: #ead8b0; }

  .player-name { font-weight: 600; font-size: 14px; }
  .player-elo { font-size: 12px; opacity: 0.7; margin-left: 8px; }
  .player-acc { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .player-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: end;
    /* Phase 6.5.2 — Garde-fou ultime sur les très petits écrans : si vraiment
       pas la place, on autorise les éléments de la meta (clock + perf-elo) à
       descendre sur une 2e ligne plutôt que forcer un reflow de toute la grid. */
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .player-clock {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 3px;
    min-width: 56px;
    text-align: center;
  }
  .player-clock.low { color: var(--inaccuracy); border-color: var(--inaccuracy); }
  .player-clock.crit { color: var(--blunder); border-color: var(--blunder); }
  .acc-perf-elo {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    cursor: help;
  }
  .player-bar.white .acc-perf-elo { background: rgba(0, 0, 0, 0.12); color: #2a2618; }
  .player-bar.black .acc-perf-elo { background: rgba(255, 255, 255, 0.10); color: #ead8b0; }

  /* ============================================================
     Phase 6.5 (C3) — Rang 2 : pièces capturées + avantage matériel
     ============================================================
     Style Lichess : pièces capturées étalées par type, suivies du badge
     d'avantage matériel (uniquement pour le joueur ayant l'avantage net).
     Hauteur réservée constante pour ne pas faire sauter le layout entre
     coups (sans capture en début de partie → hauteur min via .empty).
     Les pions sont volontairement un peu plus serrés pour densifier le
     bloc visuel comme sur Lichess. */
  .player-captured {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 4px;
    padding-left: 2px;
    min-height: 18px;
    line-height: 1;
    font-size: 16px;
  }
  /* Phase 6.5.1 (C3) — Quand aucune pièce n'a encore été capturée, on rend
     la zone strictement invisible et sans encombrement vertical pour ne pas
     épaissir la player-bar inutilement. display:none coupe la zone du flow. */
  .player-captured.empty {
    display: none;
  }
  .cap-piece {
    display: inline-block;
    line-height: 1;
    /* La couleur s'hérite de .player-bar.white / .player-bar.black, ce qui
       donne automatiquement un contraste correct sur chaque fond. */
  }
  /* Phase 6.5.1 (C3) — Les pions sont compactés en "♟ ×N" via cap-pawn-group.
     Un seul glyphe + multiplicateur, plus lisible et compact que N pions
     successifs. Pour N=1 on garde juste le glyphe seul (pas de "×1"). */
  .cap-pawn-group {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    margin-right: 4px;
  }
  .cap-mult {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    margin-left: 1px;
    opacity: 0.9;
  }
  /* Petit espace entre groupes de types différents (cavaliers, fous, tours…) */
  .cap-piece-n + :not(.cap-piece-n),
  .cap-piece-b + :not(.cap-piece-b),
  .cap-piece-r + :not(.cap-piece-r) {
    margin-left: 4px;
  }
  .cap-advantage {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11.5px;
    font-weight: 700;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    line-height: 1.4;
  }
  .player-bar.white .cap-advantage { background: rgba(0, 0, 0, 0.12); color: #2a2618; }
  .player-bar.black .cap-advantage { background: rgba(255, 255, 255, 0.10); color: #ead8b0; }

  /* Phase 6.5.1 — En mode exploration, le clock n'a plus de sens (on joue
     une variante hors-temps) ET on libère ainsi de la place pour le sélecteur
     Top ⑂ sur la même ligne. */
  body.exploration-active .player-clock { display: none !important; }
  .acc-pct { font-size: 13px; font-weight: 600; }

  /* Phase 4.4 — Sélecteur MultiPV dans chaque barre joueur */
  /* Phase 6.4 (A3) — Affichage conditionnel : le sélecteur "Top ⑂" n'a de
     sens qu'en mode exploration (il pilote le multipv que le moteur calcule
     pour la position courante d'exploration). Hors de ce mode il occupait
     inutilement la player-bar. Masqué par défaut, réaffiché uniquement
     quand body porte la classe .exploration-active (posée par
     renderExplorationUI dans modes/exploration.js). */
  .player-multipv {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }
  /* Phase 6.4 (A3) — Réaffichage du sélecteur Top ⑂ uniquement en mode
     exploration (classe body.exploration-active posée par renderExplorationUI).
     Sélecteur cascade plus spécifique que le `.player-multipv { display:none }`
     ci-dessus pour gagner sans !important. */
  body.exploration-active .player-multipv {
    display: flex;
  }
  .pmpv-label {
    opacity: 0.75;
    white-space: nowrap;
  }
  /* Phase 6.1.1 / 6.2 (A5) — Le glyphe ⑂ (U+2442 BRANCH OR FORK) est rendu
     bien plus grand que le texte courant car la plupart des polices système
     le rendent assez fin. line-height: 0 + vertical-align: middle évite que
     le caractère agrandi ne décale verticalement la ligne. */
  .pmpv-fork {
    font-size: 18px;
    font-weight: 800;
    line-height: 0;
    vertical-align: middle;
    opacity: 1;
  }
  .player-multipv-seg {
    display: inline-flex;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.18);
  }
  .player-bar.white .player-multipv-seg {
    border-color: rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.08);
  }
  .pmpv-btn {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.65;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    min-width: 24px;
    transition: background 0.12s, opacity 0.12s;
  }
  .player-bar.white .pmpv-btn {
    border-right-color: rgba(0, 0, 0, 0.15);
  }
  .pmpv-btn:last-child { border-right: none; }
  .pmpv-btn:hover:not(.active) { opacity: 1; background: rgba(255, 255, 255, 0.08); }
  .player-bar.white .pmpv-btn:hover:not(.active) { background: rgba(0, 0, 0, 0.08); }
  .pmpv-btn.active {
    background: rgba(91, 107, 181, 0.85);
    color: white;
    opacity: 1;
  }
  /* Phase 6.1.1 (A5) — Le label "Top ⑂ :" reste visible en smartphone
     (auparavant masqué pour gagner de la place avec l'ancien libellé
     "Propositions :"). Le glyphe ⑂ est suffisamment court pour tenir. */
  @media (max-width: 760px) {
    .pmpv-label { font-size: 10.5px; }
    .pmpv-fork { font-size: 16px; }
    .player-multipv { gap: 4px; }
    /* Phase 6.5.1 (C3, responsive) — Pièces capturées en mobile : font-size
       un peu plus petit pour que la ligne reste compacte. */
    .player-captured { font-size: 14px; min-height: 16px; }
  }

  /* Phase 6.5.1 (C3, A5 suite) — Pas de breakpoint mobile forcé pour le rang 1.
     Le grid `1fr auto 1fr` se contracte naturellement quand le contenu rentre,
     et la player-meta tolère un flex-wrap si vraiment serré. Cela donne au
     mobile vertical (≥ ~360 px) une player-bar sur 1 ligne dans la majorité
     des cas, ce qui est ce que veut l'utilisateur. */

  .board-wrap {
    display: flex;
    gap: 10px;
    margin: 12px 0;
  }

  .eval-bar {
    width: 32px;
    height: var(--board-size);
    background: #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;
  }
  .eval-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ead8b0;
    transition: height 0.3s ease;
    height: 50%;
  }
  .eval-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
  }
  .eval-label.top { top: 4px; color: #ead8b0; }
  .eval-label.bottom { bottom: 4px; color: #1a1a1a; }

  .board-container { position: relative; }

  .board-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
  }

  .board {
    width: var(--board-size);
    height: var(--board-size);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 2px solid #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  }

  .square {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--piece-size);
    line-height: 1;
    position: relative;
    user-select: none;
  }
  .square.light { background: var(--light-sq); }
  .square.dark { background: var(--dark-sq); }
  .square.from { background: rgba(201, 165, 90, 0.55) !important; }
  .square.to { background: rgba(201, 165, 90, 0.75) !important; }
  .square.check { background: radial-gradient(circle, rgba(214,86,86,0.9) 0%, rgba(214,86,86,0) 70%) !important; }
  .square.best-from { box-shadow: inset 0 0 0 3px rgba(68, 199, 214, 0.55); }
  .square.best-to { box-shadow: inset 0 0 0 3px rgba(68, 199, 214, 0.85); }

  /* Exploration mode highlights */
  .square.exp-selected {
    box-shadow: inset 0 0 0 4px rgba(91, 107, 181, 0.85);
    background: rgba(91, 107, 181, 0.35) !important;
  }
  .square.exp-legal { position: relative; }
  .legal-mark {
    position: absolute;
    pointer-events: none;
  }
  .legal-mark.move {
    width: 18px; height: 18px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(91, 107, 181, 0.65);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
  }
  .legal-mark.capture {
    width: 56px; height: 56px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(91, 107, 181, 0.85);
    border-radius: 50%;
    box-sizing: border-box;
  }

  /* Exploration tint on the board */
  .board.exploring {
    box-shadow: 0 0 0 3px #5b6bb5, 0 0 24px rgba(91, 107, 181, 0.5), 0 4px 24px rgba(0,0,0,0.4);
  }
  .board.exploring .square.light { background: #d8d4ea; }
  .board.exploring .square.dark { background: #7a78a8; }
  .board.exploring .square.from { background: rgba(91, 107, 181, 0.55) !important; }
  .board.exploring .square.to { background: rgba(91, 107, 181, 0.75) !important; }

  /* Phase 8.2 (A) — Teinte "drill" (rosée) de l'échiquier principal, calquée
     sur .board.exploring. Halo rose pour signaler le mode. Les cases utilisent
     les variables --drill-*-sq (prêtes pour le sélecteur de thèmes du point D).
     Les surbrillances spécifiques au drill (sélection, coups légaux, dernier
     coup adverse, mauvais coup) sont reprises de l'ancien .drill-board-wrap et
     re-portées ici sous .board.drilling. */
  .board.drilling {
    box-shadow: 0 0 0 3px #c98b97, 0 0 24px rgba(201, 139, 151, 0.5), 0 4px 24px rgba(0,0,0,0.4);
  }
  .board.drilling .square.light { background: var(--drill-light-sq); }
  .board.drilling .square.dark { background: var(--drill-dark-sq); }
  .board.drilling .square.drill-selected { box-shadow: inset 0 0 0 3px #b5476a; }
  .board.drilling .square.opp-move-from { box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.55); }
  .board.drilling .square.opp-move-to { box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.85); }
  .board.drilling .square.opp-move-from.drill-selected,
  .board.drilling .square.opp-move-to.drill-selected { box-shadow: inset 0 0 0 3px #b5476a; }
  .board.drilling .square.wrong-move-from {
    box-shadow: inset 0 0 0 3px rgba(220, 80, 80, 0.55);
    animation: drillWrongPulse 0.8s ease-out;
  }
  .board.drilling .square.wrong-move-to {
    box-shadow: inset 0 0 0 3px rgba(220, 80, 80, 0.85);
    animation: drillWrongPulse 0.8s ease-out;
  }
  .board.drilling .square.legal-move::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28%; height: 28%;
    background: #b5476a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
  }

  /* Bannière "Mode drill" au-dessus de l'échiquier (calquée sur la bannière
     d'exploration). */
  .drill-banner {
    background: linear-gradient(135deg, rgba(181, 71, 106, 0.18), rgba(201, 139, 151, 0.10));
    border: 1px solid rgba(181, 71, 106, 0.5);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .drill-banner-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .drill-banner-tag {
    font-weight: 700;
    color: #e6a4b4;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .drill-banner-progress { font-size: 13px; color: var(--text); }
  .drill-banner .drill-score {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-left: auto;
  }
  .drill-banner-quit {
    background: rgba(181, 71, 106, 0.2);
    border: 1px solid rgba(181, 71, 106, 0.5);
    color: #e6a4b4;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
  }
  .drill-banner-quit:hover { background: rgba(181, 71, 106, 0.35); }
  .drill-banner-question {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
  }

  /* Panneau drill dans la carte move-info (sous l'échiquier). Reprend les
     styles des sous-éléments drill (question/contexte/feedback/actions) qui
     existaient pour la modale. */
  .drill-panel { display: flex; flex-direction: column; gap: 10px; }

  /* Phase 8.2 (A) — Masquage des éléments de partie pendant le drill : barre
     d'éval et contenu normal de la carte move-info n'ont pas de sens en plein
     exercice. Le panneau drill (#drill-panel) reste visible (inséré en tête de
     .move-info, exclu du masquage). La bannière est dans la carte de
     l'échiquier, au-dessus du board, donc non affectée. On laisse volontairement
     la liste de coups et le graphe visibles dans la colonne d'analyse : ils
     donnent le contexte de la partie sans gêner le jeu (et évitent un layout qui
     saute). */
  body.drill-active .eval-bar { visibility: hidden; }
  body.drill-active .card.move-info > .head,
  body.drill-active .card.move-info > .description,
  body.drill-active .card.move-info > #best-line,
  body.drill-active .card.move-info > .ai-section,
  body.drill-active .card.move-info > .notes-section {
    display: none !important;
  }
  /* Phase 8.2 (A) — Pendant le drill, la navigation de partie (⏮◀▶⏭, lecture)
     n'a pas de sens : on la masque. Le bouton "⇅ Retourner l'échiquier" reste
     utilisable (réglage par défaut validé). Les options de lecture sont
     masquées aussi. */
  body.drill-active .nav-primary,
  body.drill-active #nav-config-btn {
    display: none !important;
  }

  /* Exploration banner */
  /* Phase 6.3 (A6) — Banner restructuré : direction colonne pour permettre
     d'embarquer la zone suggestions moteur sous la ligne d'info/bouton, et
     ainsi ramener la suggestion au-dessus de l'échiquier (à la place de la
     sidebar). */
  .exploration-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(91, 107, 181, 0.25), rgba(91, 107, 181, 0.1));
    border: 1px solid #5b6bb5;
    border-radius: 6px;
    font-size: 12.5px;
  }
  .exp-banner-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .exp-banner-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .exp-banner-right { display: flex; gap: 6px; flex-wrap: wrap; }
  .exp-tag {
    background: #5b6bb5;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .exp-info { color: var(--text-dim); }
  .exp-info strong { color: var(--text); font-family: ui-monospace, monospace; }

  /* Phase 6.3.1 / 6.4 (A7) — Légende du coup réellement joué en partie.
     Visible tant que l'utilisateur n'a pas joué son 1er coup d'exploration.
     Le trait pointillé bleu marine mime visuellement la flèche A7 affichée
     sur l'échiquier (dashedStyle: 'sparse' = tirets courts très espacés). */
  .exp-played-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px 0;
    font-size: 11.5px;
    color: var(--text-dim);
    font-style: italic;
  }
  .exp-played-legend strong {
    color: var(--text);
    font-family: ui-monospace, "SF Mono", monospace;
    font-style: normal;
    font-weight: 700;
  }
  .exp-played-line {
    display: inline-block;
    /* Mime visuel du dasharray "4 7" SVG. 4 segments de 4 px séparés par 7 px
       de transparent, repère graphique pour relier la flèche à sa légende. */
    width: 39px;
    height: 2px;
    background-image: linear-gradient(to right,
      #5b6bb5 0 4px, transparent 4px 11px,
      #5b6bb5 11px 15px, transparent 15px 22px,
      #5b6bb5 22px 26px, transparent 26px 33px,
      #5b6bb5 33px 37px, transparent 37px 39px);
    opacity: 0.9;
    flex-shrink: 0;
  }
  .exp-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
  }
  .exp-btn:hover { background: #2c344a; }
  .exp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .exp-btn.primary { background: #5b6bb5; border-color: #5b6bb5; color: white; }
  .exp-btn.primary:hover { background: #6b7bc5; }
  .exp-btn.warn { color: #e89090; border-color: rgba(232, 144, 144, 0.4); }
  .exp-btn.warn:hover { background: rgba(214, 86, 86, 0.15); }

  /* Phase 6.3 (A2 + A6) — Liste des suggestions moteur dans le banner.
     Chaque item est cliquable : un clic joue le coup correspondant en
     exploration. Coloration de la cellule selon que la position résultante
     est gagnante (bord vert) / perdante (bord rouge) / neutre. */
  .exp-suggestions { display: flex; flex-direction: column; }
  .exp-sugg-loading {
    padding: 6px 8px;
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
  }
  .exp-sugg-list { display: flex; flex-direction: column; gap: 4px; }
  .exp-sugg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(91, 107, 181, 0.30);
    border-left-width: 3px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s, border-color 0.12s;
  }
  .exp-sugg-item:hover {
    background: rgba(91, 107, 181, 0.20);
    border-color: rgba(91, 107, 181, 0.65);
  }
  .exp-sugg-item.exp-sugg-eval-win { border-left-color: #4cb86b; }
  .exp-sugg-item.exp-sugg-eval-loss { border-left-color: #d65656; }
  .exp-sugg-item.exp-sugg-eval-neutral { border-left-color: #9aa3b8; }
  .exp-sugg-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  }
  .exp-sugg-rank {
    color: var(--text-dim);
    font-weight: 600;
    min-width: 60px;
    flex-shrink: 0;
  }
  .exp-sugg-san {
    color: var(--text);
    font-family: ui-monospace, "SF Mono", monospace;
    font-weight: 600;
    min-width: 50px;
    flex-shrink: 0;
  }
  .exp-sugg-cls {
    color: #1a1a1a;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  .exp-sugg-delta {
    color: var(--text-faint);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
  }
  .exp-sugg-ppeval, .exp-sugg-mate {
    color: var(--text-dim);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    text-align: right;
  }
  .exp-sugg-eval-win .exp-sugg-ppeval,
  .exp-sugg-eval-win .exp-sugg-mate { color: #88e0a3; }
  .exp-sugg-eval-loss .exp-sugg-ppeval,
  .exp-sugg-eval-loss .exp-sugg-mate { color: #ee9999; }


  /* Explore button in best-line block */
  .explore-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #5b6bb5, #4a5a9e);
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
  }
  .explore-btn:hover { background: linear-gradient(135deg, #6b7bc5, #5a6aae); }

  .piece {
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    pointer-events: none;
  }
  .piece.white { color: #fff; -webkit-text-stroke: 1.2px #1a1a1a; text-stroke: 1.2px #1a1a1a; }
  .piece.black { color: #1a1a1a; -webkit-text-stroke: 1px #000; text-stroke: 1px #000; }

  .square-coord {
    position: absolute;
    font-size: 9px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    opacity: 0.7;
  }
  .square-coord.file { right: 3px; bottom: 1px; }
  .square-coord.rank { left: 3px; top: 1px; }
  .square.light .square-coord { color: #9d7a4f; }
  .square.dark .square-coord { color: #ead8b0; }

  .move-marker {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 2;
  }

  .nav-primary {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.6fr 1.4fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }
  .nav-btn-big {
    padding: 14px 8px;
    font-size: 18px;
    font-family: ui-monospace, monospace;
    line-height: 1;
    min-height: 48px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
  }
  .nav-btn-big:hover { background: #2c344a; border-color: var(--accent-soft); }
  .nav-btn-big:active { transform: translateY(1px); }
  .nav-btn-big:disabled { opacity: 0.3; cursor: not-allowed; }

  .nav-play {
    background: var(--accent) !important;
    color: #1a1a1a !important;
    border-color: var(--accent) !important;
    font-weight: 700;
    font-family: inherit;
    font-size: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .nav-play:hover { background: #d6b369 !important; }
  .nav-play.playing { background: #c75151 !important; border-color: #c75151 !important; color: #fff !important; }
  .nav-play.playing:hover { background: #d66464 !important; }

  .nav-secondary {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: space-between;
    align-items: center;
  }
  .nav-btn-small {
    padding: 7px 12px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
  }
  .nav-btn-small:hover { color: var(--text); border-color: var(--accent-soft); }
  .nav-btn-small.active { color: var(--accent); border-color: var(--accent); }

  .playback-popover {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
    width: 260px;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  }
  .playback-popover.show { display: block; }
  .playback-popover .pp-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 8px;
    font-weight: 700;
  }
  .pp-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
  }
  .pp-checkbox input { cursor: pointer; }
  .pp-checkbox .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .pp-speed {
    display: flex;
    gap: 4px;
    margin-top: 4px;
  }
  .pp-speed button {
    flex: 1;
    padding: 6px 4px;
    font-size: 11px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    cursor: pointer;
  }
  .pp-speed button.active {
    background: var(--accent);
    color: #1a1a1a;
    border-color: var(--accent);
    font-weight: 600;
  }
  .secondary-right { position: relative; }

  /* RIGHT COLUMN */
  .analysis-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* LEFT COLUMN - board + commentary */
  .board-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .move-info {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .move-info .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .move-san {
    font-size: 26px;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    letter-spacing: -0.01em;
  }
  .cls-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .cls-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
  }

  .description {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
  }
  .best-line {
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-left: 3px solid var(--brilliant);
    border-radius: 3px;
    font-size: 13px;
    color: var(--text-dim);
    font-family: ui-monospace, monospace;
  }
  .best-line strong { color: var(--brilliant); }
  /* Phase 8.1 (B) — Variante "positive" de la best-line : le coup joué EST le
     meilleur coup, ou bien position de départ. Bordure verte plutôt que cyan
     (le cyan signale "voici une meilleure alternative", hors sujet ici). */
  .best-line--ok { border-left-color: var(--good); }
  .best-played-ok { color: var(--good); font-weight: 600; display: block; margin-bottom: 4px; }
  .pv-line {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(68, 199, 214, 0.25);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .pv-line .pv-label {
    color: var(--text-faint);
    font-family: inherit;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-right: 8px;
  }

  .ai-section { margin-top: 8px; }

  .notes-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
  }
  .notes-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .notes-textarea {
    width: 100%;
    min-height: 56px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
  }
  .notes-textarea:focus { outline: none; border-color: var(--accent-soft); }
  .ai-btn {
    background: linear-gradient(135deg, #5b6bb5, #4a5a9e);
    color: white;
    border: none;
    font-size: 12px;
    padding: 6px 12px;
  }
  .ai-btn:hover { background: linear-gradient(135deg, #6b7bc5, #5a6aae); }
  .ai-response {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg-input);
    border-left: 3px solid #5b6bb5;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
  }
  .ai-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 8px;
  }
  .ai-loading::before {
    content: "";
    width: 10px; height: 10px;
    border: 2px solid var(--text-faint);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Loading & analysis overlays */
  .loading-overlay, .analysis-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    color: white;
  }
  .loading-card {
    text-align: center;
    padding: 32px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    min-width: 260px;
  }
  .loading-piece-anim {
    font-size: 36px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    color: var(--accent);
    text-shadow: 0 0 12px rgba(201, 165, 90, 0.4);
  }
  .lpa-piece {
    display: inline-block;
    animation: lpa-bounce 1.2s ease-in-out infinite;
  }
  .lpa-1 { animation-delay: 0s; }
  .lpa-2 { animation-delay: 0.15s; }
  .lpa-3 { animation-delay: 0.30s; }
  .lpa-4 { animation-delay: 0.45s; }
  @keyframes lpa-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-12px); opacity: 1; }
  }
  .loading-msg {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
  }

  /* Analysis preview overlay with mini-board */
  .analysis-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px 26px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
    min-width: 320px;
  }
  .analysis-card-title {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .analysis-card-subtitle {
    font-size: 12px;
    color: var(--text-faint);
    margin-bottom: 16px;
  }
  .analysis-mini-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 280px;
    height: 280px;
    margin: 0 auto 8px;
    border: 1px solid #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
  .mini-square {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
  }
  .mini-light { background: var(--light-sq); }
  .mini-dark { background: var(--dark-sq); }
  .mini-piece {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  .mini-white { color: #fff; -webkit-text-stroke: 0.8px #1a1a1a; }
  .mini-black { color: #1a1a1a; -webkit-text-stroke: 0.6px #000; }
  .analysis-mini-eval {
    font-family: ui-monospace, monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    margin: 4px 0 14px;
    min-height: 22px;
  }

  .analysis-progress-wrap {
    margin-top: 4px;
  }
  .analysis-progress-bar {
    width: 280px;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto 6px;
  }
  .analysis-progress-bar .fill {
    height: 100%;
    background: linear-gradient(to right, var(--accent), #e0c080);
    width: 0%;
    transition: width 0.2s ease-out;
  }
  .analysis-progress-text {
    font-size: 11px;
    color: var(--text-faint);
    font-family: ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .analysis-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
  }
  .analysis-cancel-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .analysis-cancel-btn:hover:not(:disabled) {
    background: rgba(220, 80, 80, 0.12);
    border-color: rgba(220, 80, 80, 0.55);
    color: #e89090;
  }
  .analysis-cancel-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* Eval graph */
  .eval-graph-container {
    background: var(--bg-input);
    border-radius: 4px;
    padding: 8px;
    height: 90px;
    position: relative;
  }
  .eval-graph-svg {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .graph-title {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 600;
  }

  /* Stats */
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .stats-block .stats-title {
    font-family: Georgia, serif;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
  }
  .color-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
  }
  .color-dot.white-dot {
    background: #ead8b0;
    color: #1a1a1a;
    box-shadow: 0 0 0 1px #c9a55a;
  }
  .color-dot.black-dot {
    background: #2a2a2a;
    color: #ead8b0;
    box-shadow: 0 0 0 1px #444;
  }
  .player-name-line {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .stats-acc {
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 4px;
    color: var(--accent);
  }
  .stats-perf {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.4;
  }
  .perf-elo {
    font-family: ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .perf-label {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 2px;
  }
  .perf-acpl {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 2px;
  }
  .perf-na {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
  }
  /* Legacy stat-row (kept for legend etc) */
  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 12.5px;
    color: var(--text-dim);
  }
  .stat-row .label { display: flex; align-items: center; gap: 8px; }
  .stat-row .count { font-weight: 600; color: var(--text); font-family: ui-monospace, monospace; }
  .stat-icon {
    width: 14px; height: 14px;
    border-radius: 50%;
    display: inline-block;
  }
  /* New stat row layout with progress bar */
  .stat-row-v2 {
    display: grid;
    grid-template-columns: 100px 1fr 28px;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-dim);
  }
  .stat-row-v2.dim { opacity: 0.4; }
  .cls-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .cls-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stat-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.65);
    flex-shrink: 0;
    font-family: Georgia, serif;
    line-height: 1;
  }
  .cls-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }
  .cls-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease-out;
  }
  .cls-count {
    text-align: right;
    font-weight: 700;
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: 13px;
  }
  /* Extra metrics section */
  .stats-extras {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stat-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-faint);
  }
  .se-label {
    flex-shrink: 0;
  }
  .se-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-family: ui-monospace, monospace;
  }

  /* Move list */
  .moves-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .moves-card .moves-title {
    font-family: Georgia, serif;
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .moves-tools { display: flex; gap: 6px; flex-wrap: wrap; }
  .moves-tool-btn {
    padding: 4px 10px;
    font-size: 11px;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .moves-tool-btn:hover { color: var(--text); border-color: var(--accent-soft); }
  .moves-tool-btn.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(201, 165, 90, 0.1);
  }
  .moves-list {
    max-height: 280px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 36px 1fr 1fr;
    column-gap: 6px;
    row-gap: 2px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 13px;
    padding-right: 6px;
  }
  .moves-list::-webkit-scrollbar { width: 6px; }
  .moves-list::-webkit-scrollbar-track { background: var(--bg-input); }
  .moves-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .move-num {
    color: var(--text-faint);
    text-align: right;
    padding: 4px 4px 4px 0;
    font-size: 12px;
  }
  .move-cell {
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    transition: background 0.1s;
  }
  .move-cell:hover { background: var(--bg-elevated); }
  .move-cell.active { background: var(--accent-soft); color: #fff; }
  .move-cell .marker {
    width: 14px; height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #1a1a1a;
    flex-shrink: 0;
  }

  /* Phase 6.2 (C1) — En-tête de la liste des coups : noms des joueurs avec
     leur couleur. Sticky pour rester visible pendant le scroll. Les 3 cellules
     occupent les 3 colonnes de la grid parente (36px / 1fr / 1fr).
     `position: sticky` fonctionne car .moves-list est le conteneur scrollable. */
  .moves-header-cell {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-elevated);
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
  }
  .moves-header-spacer {
    padding: 6px 4px 6px 0;
  }
  .moves-header-piece {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
  }
  .moves-header-white .moves-header-piece { color: #f0e4c8; }
  .moves-header-black .moves-header-piece { color: #1a1a1a; text-shadow: 0 0 1px #f0e4c8; }
  .moves-header-name {
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .moves-header-white { color: var(--text); }
  .moves-header-black { color: var(--text); }

  /* Phase 6.2 (C2) — Suffixe -Ncp en gris discret à droite du SAN, juste avant
     le marker de classification. Reste discret sur la cellule active (un poil
     moins gris pour rester lisible sur fond accent). */
  .move-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }
  .move-loss {
    font-size: 10.5px;
    color: var(--text-faint);
    font-family: ui-monospace, "SF Mono", monospace;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
  }
  .move-cell.active .move-loss {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
  }
  .move-san {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Color helpers */
  .bg-brilliant { background: #26c4d9; }
  .bg-great { background: #26b369; }
  .bg-best { background: #3acf3a; }
  .bg-excellent { background: var(--excellent); }
  .bg-good { background: var(--good); }
  .bg-book { background: var(--book); }
  .bg-inaccuracy { background: var(--inaccuracy); }
  .bg-miss { background: #e06b6b; }
  .bg-mistake { background: var(--mistake); }
  .bg-blunder { background: var(--blunder); }
  .text-brilliant { color: #26c4d9; }
  .text-great { color: #26b369; }
  .text-best { color: #3acf3a; }
  .text-excellent { color: var(--excellent); }
  .text-good { color: var(--good); }
  .text-book { color: var(--book); }
  .text-inaccuracy { color: var(--inaccuracy); }
  .text-miss { color: #e06b6b; }
  .text-mistake { color: var(--mistake); }
  .text-blunder { color: var(--blunder); }

  /* Modal */
  .modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-bg.show { display: flex; }
  .modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative; /* Phase 7.5 — ancrage de la croix de fermeture */
  }
  /* Phase 7.5 / 7.5.1 — Croix "✕" de fermeture en haut à droite (norme Windows).
     7.5.1 : on abandonne sticky+float (rendu incohérent selon les modales — se
     calait à gauche au-dessus du titre dans la bibliothèque). position:absolute
     ancrée sur .modal (relative) → coin haut-droit fiable et identique partout. */
  .modal-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
  }
  .modal-close-x:hover {
    color: var(--text);
    background: var(--blunder);
    border-color: var(--blunder);
  }
  .modal h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    margin-bottom: 6px;
    font-size: 20px;
  }
  .modal p { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }
  textarea {
    width: 100%;
    min-height: 220px;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    resize: vertical;
    margin-bottom: 12px;
  }
  textarea:focus { outline: none; border-color: var(--accent); }
  /* Phase 6.9 (B5) — Textarea en mode "lot importé" : grisé, non éditable,
     contient un message d'info plutôt qu'un PGN. Le style indique clairement
     que la saisie est désactivée le temps du lot. */
  textarea.batch-locked {
    background: rgba(91, 107, 181, 0.08);
    border-color: rgba(91, 107, 181, 0.4);
    border-style: dashed;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    cursor: default;
    opacity: 0.95;
  }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

  /* Phase 6.5.1 — Modale de choix de promotion (mode exploration) */
  .promotion-modal { max-width: 420px; }
  .promotion-subtitle { color: var(--text-dim); font-size: 13px; margin-bottom: 14px; }
  .promotion-choices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .promotion-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.05s;
  }
  .promotion-btn:hover {
    background: rgba(91, 107, 181, 0.18);
    border-color: rgba(91, 107, 181, 0.6);
  }
  .promotion-btn:active { transform: scale(0.97); }
  .promo-glyph {
    font-size: 38px;
    line-height: 1;
    color: var(--text);
  }
  .promotion-btn.white .promo-glyph { color: #f0e4c8; }
  .promotion-btn.black .promo-glyph { color: #1a1a1a; text-shadow: 0 0 0.5px #f0e4c8; }
  .promo-label {
    font-size: 11.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  .file-input {
    display: block;
    margin-bottom: 12px;
    color: var(--text-dim);
    font-size: 13px;
  }
  .file-input input { color: var(--text-dim); }

  .modal-label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 4px 0 6px;
  }
  select {
    width: 100%;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
  }
  select:focus { outline: none; border-color: var(--accent); }
  .elo-hint {
    font-size: 11.5px;
    color: var(--text-faint);
    margin: 6px 0 12px;
    min-height: 14px;
  }

  .pgn-sources {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 10px 0 12px;
    font-size: 12px;
  }
  .pgn-sources summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    user-select: none;
    outline: none;
  }
  .pgn-sources summary:hover { color: var(--text); }
  .pgn-sources-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-dim);
    line-height: 1.55;
  }
  .pgn-sources-body strong { color: var(--text); }
  .pgn-sources-body em { color: var(--accent); font-style: normal; font-weight: 600; }

  /* Phase 7.2 (B) — Volet "Mes pseudos" dans la modale Profil (ex-Statistiques).
     Calqué sur .pgn-sources (même <details> natif) pour cohérence visuelle.
     Titre de section des stats juste en dessous pour bien séparer les 2 zones. */
  .profile-details {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 4px 0 14px;
    font-size: 13px;
  }
  .profile-details summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    user-select: none;
    outline: none;
  }
  .profile-details summary:hover { color: var(--text); }
  .profile-details-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
  }
  .profile-details-body > p {
    margin: 0 0 10px;
    color: var(--text-dim);
    line-height: 1.5;
    font-size: 12px;
  }
  .stats-section-title {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--text);
  }

  /* Phase 7.4.1 (D) — Sélecteur de profils à agréger (combo pseudo × plateforme).
     <details> natif, même esprit que .profile-details / .pgn-sources. */
  .stats-profiles {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 0 0 14px;
    font-size: 13px;
  }
  .stats-profiles summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    user-select: none;
    outline: none;
  }
  .stats-profiles summary:hover { color: var(--text); }
  .stats-profiles-summary {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 12px;
  }
  .stats-profiles-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
  }
  .stats-profiles-hint {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-faint);
    line-height: 1.45;
  }
  .stats-profiles-actions {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-faint);
  }
  .stats-profiles-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
  }
  .stats-profiles-link:hover { color: var(--text); text-decoration: underline; }
  .stats-profiles-sep { color: var(--text-faint); }
  .stats-profiles-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stats-profile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
  }
  .stats-profile-row:hover { background: var(--bg-elevated); }
  .stats-profile-row input { cursor: pointer; margin: 0; flex-shrink: 0; }
  .stats-profile-name {
    flex: 1 1 auto;
    color: var(--text-dim);
    overflow-wrap: anywhere;
  }
  .stats-profile-row:hover .stats-profile-name { color: var(--text); }
  .stats-profile-count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-faint);
    background: var(--bg-deep);
    border-radius: 10px;
    padding: 1px 8px;
    min-width: 18px;
    text-align: center;
  }

  .textarea-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .textarea-tools-hint {
    font-size: 11px;
    color: var(--text-faint);
    font-family: ui-monospace, monospace;
  }

  .multigame-info {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: rgba(91, 107, 181, 0.1);
    border-left: 3px solid #5b6bb5;
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--text);
  }
  .multigame-info strong { color: #8a9be0; }
  .multigame-info select { margin-top: 6px; max-width: 100%; }

  .multigame-selbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .multigame-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
  }
  .multigame-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background 0.15s;
    align-items: center;
  }
  .multigame-item:last-child { border-bottom: none; }
  .multigame-item:hover { background: var(--bg-elevated); }
  .multigame-item.selected { background: rgba(201, 165, 90, 0.1); }
  .multigame-item.in-library { opacity: 0.7; }
  .multigame-item.in-library > div:last-child::after {
    content: ' · 📚 déjà en bibliothèque';
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
  }
  .multigame-cb {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
  }

  /* Library modal */
  .library-modal { width: 100%; max-width: 760px; }

  /* Drill mode modal */
  .drill-modal { width: 100%; max-width: 920px; }
  .drill-options {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 12px 0;
  }
  .drill-opt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 12.5px;
  }
  .drill-opt-row:last-child { margin-bottom: 0; }
  .drill-opt-row strong {
    min-width: 90px;
    color: var(--text);
    font-weight: 600;
  }
  .drill-opt-row label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text);
    cursor: pointer;
  }
  .drill-opt-row input { cursor: pointer; }
  .drill-summary {
    background: rgba(201, 165, 90, 0.08);
    border: 1px solid var(--accent-soft);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--text);
    min-height: 20px;
  }
  .drill-summary.empty {
    background: rgba(214, 86, 86, 0.08);
    border-color: var(--blunder);
    color: var(--text-faint);
    font-style: italic;
  }

  /* Active drill view */
  .drill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 14px;
  }
  .drill-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
  }
  .drill-score {
    color: var(--accent);
    font-family: ui-monospace, monospace;
    font-size: 12px;
  }
  .drill-body {
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 20px;
  }
  @media (max-width: 760px) {
    .drill-body { grid-template-columns: 1fr; }
  }
  .drill-board-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .drill-board-wrap {
    --board-size: 360px;
    --piece-size: 26px;
  }
  .drill-board-wrap .board {
    width: var(--board-size);
    height: var(--board-size);
  }
  .drill-board-wrap .board-arrows {
    width: var(--board-size);
    height: var(--board-size);
  }
  .drill-side-to-move {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
  }
  .drill-question {
    font-size: 14px;
    color: var(--accent);
    font-weight: 600;
    text-align: center;
    padding: 8px;
    background: var(--bg-input);
    border-radius: 4px;
  }
  .drill-info-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .drill-context {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .drill-context strong { color: var(--text); }
  .drill-feedback {
    min-height: 100px;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.6;
    background: var(--bg-input);
    border-left: 3px solid var(--border);
    color: var(--text);
  }
  .drill-feedback.correct {
    background: rgba(107, 190, 107, 0.1);
    border-left-color: var(--good);
  }
  .drill-feedback.incorrect {
    background: rgba(214, 86, 86, 0.1);
    border-left-color: var(--blunder);
  }
  .drill-feedback.hint {
    background: rgba(91, 107, 181, 0.1);
    border-left-color: #5b6bb5;
    color: var(--text-dim);
  }
  .drill-feedback .df-title {
    font-weight: 700;
    margin-bottom: 4px;
  }
  .drill-feedback .df-best {
    margin-top: 6px;
    font-family: ui-monospace, monospace;
    color: var(--accent);
    font-size: 13px;
  }
  .drill-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .drill-actions button.primary {
    background: var(--accent);
    color: #1a1a1a;
    font-weight: 700;
  }

  /* Completion view */
  .drill-results {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px;
    margin: 14px 0;
  }
  .drill-results-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
  }
  .drill-results-stat {
    text-align: center;
    padding: 10px;
    background: var(--bg-elevated);
    border-radius: 4px;
  }
  .drill-results-num {
    font-family: Georgia, serif;
    font-size: 28px;
    color: var(--accent);
  }
  .drill-results-num.good { color: var(--good); }
  .drill-results-num.bad { color: var(--blunder); }
  .drill-results-label {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  .drill-results-detail {
    font-size: 12px;
    color: var(--text-dim);
    max-height: 200px;
    overflow-y: auto;
  }
  .drill-results-detail .drr-item {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .drill-results-detail .drr-item:last-child { border-bottom: none; }
  .drill-results-detail .drr-ok { color: var(--good); }
  .drill-results-detail .drr-ko { color: var(--blunder); }
  .drill-results-detail .drr-skip { color: var(--text-faint); }

  /* Drill board interaction states */
  .drill-board-wrap .square {
    position: relative;
  }
  /* Lighter / more classic board palette for the drill */
  .drill-board-wrap .square.light {
    background: #f0d9b5;
  }
  .drill-board-wrap .square.dark {
    background: #b58863;
  }
  .drill-board-wrap .square.drill-selected {
    box-shadow: inset 0 0 0 3px #c9a55a;
  }
  .drill-board-wrap .square.opp-move-from {
    box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.55);
  }
  .drill-board-wrap .square.opp-move-to {
    box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.85);
  }
  .drill-board-wrap .square.opp-move-from.drill-selected,
  .drill-board-wrap .square.opp-move-to.drill-selected {
    box-shadow: inset 0 0 0 3px #c9a55a;
  }
  /* Phase 3 — highlight du mauvais coup pendant l'animation avant reset */
  .drill-board-wrap .square.wrong-move-from {
    box-shadow: inset 0 0 0 3px rgba(220, 80, 80, 0.55);
    animation: drillWrongPulse 0.8s ease-out;
  }
  .drill-board-wrap .square.wrong-move-to {
    box-shadow: inset 0 0 0 3px rgba(220, 80, 80, 0.85);
    animation: drillWrongPulse 0.8s ease-out;
  }
  @keyframes drillWrongPulse {
    0% { background-color: rgba(220, 80, 80, 0.4); }
    100% { background-color: transparent; }
  }
  /* Option "Mes erreurs uniquement" désactivée quand aucun alias ne matche */
  .drill-side-disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .drill-side-disabled input[type="radio"] {
    cursor: not-allowed;
  }
  .drill-board-wrap .square.legal-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28%;
    height: 28%;
    background: #c9a55a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
  }

  /* Pieces on the drill board: traditional look */
  .drill-board-wrap .piece.white {
    color: #ffffff;
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;
    text-shadow: none;
  }
  .drill-board-wrap .piece.black {
    color: #1a1a1a;
    -webkit-text-stroke: 0.5px #000;
    text-stroke: 0.5px #000;
    text-shadow: none;
  }

  /* Coordinates inside squares */
  .drill-board-wrap .sq-coord {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    font-family: ui-monospace, "SF Mono", monospace;
    pointer-events: none;
    line-height: 1;
    z-index: 2;
  }
  .drill-board-wrap .sq-file {
    bottom: 2px;
    right: 3px;
  }
  .drill-board-wrap .sq-rank {
    top: 2px;
    left: 3px;
  }
  /* Coord color: invert based on square color so it stays legible */
  .drill-board-wrap .square.light .sq-coord {
    color: #b58863;
  }
  .drill-board-wrap .square.dark .sq-coord {
    color: #f0d9b5;
  }
  .library-list {
    max-height: 60vh;
    overflow-y: auto;
    margin: 8px 0 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  /* Sticky footer pour la modale bibliothèque uniquement.
     La liste scrolle dans son propre conteneur, les boutons "Tout effacer"
     et "Fermer" restent visibles en bas sans scroll de la modale. */
  #library-modal .modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #library-modal .library-list {
    flex: 1 1 auto;
    max-height: none;
    min-height: 120px;
    margin-bottom: 0;
  }
  #library-modal .modal-actions {
    flex-shrink: 0;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
  }
  .library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    flex-wrap: wrap;
  }
  .library-sort {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .library-sort .laf-input {
    min-width: 210px;
  }
  .li-termination {
    display: inline-block;
    background: rgba(146, 122, 84, 0.18);
    color: var(--text-dim);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 500;
  }
  .library-filter {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px;
  }
  .lib-filter-btn {
    padding: 5px 12px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
  }
  .lib-filter-btn:hover { color: var(--text); }
  .lib-filter-btn.active {
    background: var(--accent);
    color: #1a1a1a;
  }
  .library-usage {
    font-size: 11px;
    color: var(--text-faint);
    font-family: ui-monospace, monospace;
    text-align: right;
  }
  .library-usage .usage-warn { color: var(--inaccuracy); }
  .library-usage .usage-crit { color: var(--blunder); }

  /* Advanced filter rows */
  .library-advanced-filters {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .laf-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .laf-row:last-child { margin-bottom: 0; }
  .laf-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 12px;
    min-width: 0;
  }
  .laf-input:focus { outline: none; border-color: var(--accent-soft); }
  .laf-num { width: 70px; }
  #laf-opponent { flex: 1; min-width: 140px; }
  #laf-opening { flex: 1; min-width: 140px; }
  .laf-label {
    font-size: 11px;
    color: var(--text-faint);
    margin-left: 4px;
  }
  .library-item.dup-warning {
    border-left: 3px solid var(--inaccuracy);
  }
  .lib-dup-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
  }
  .lib-dup-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
  }
  .lib-dup-btn:hover { color: var(--text); border-color: var(--accent-soft); }

  /* Import modal */
  .import-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .import-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .import-tab:hover { color: var(--text); }
  .import-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
  }
  .import-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .import-label {
    font-size: 12px;
    color: var(--text-dim);
    min-width: 140px;
    font-weight: 600;
  }
  .import-row input[type="text"],
  .import-row input[type="number"],
  .import-row input[type="date"],
  .import-row select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
  }
  .import-row input:focus, .import-row select:focus {
    outline: none;
    border-color: var(--accent-soft);
  }
  .import-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px;
  }
  .import-toggle button {
    padding: 5px 12px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
  }
  .import-toggle button:hover { color: var(--text); }
  .import-toggle button.active {
    background: var(--accent);
    color: #1a1a1a;
  }
  .import-checkboxes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .import-checkboxes label {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
  }
  .import-checkboxes input { cursor: pointer; }
  .import-hint {
    font-size: 11px;
    color: var(--text-faint);
  }
  .import-results-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
  }
  .import-results-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .import-games-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
  }
  .import-game-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background 0.15s;
  }
  .import-game-item:last-child { border-bottom: none; }
  .import-game-item:hover { background: var(--bg-elevated); }
  .import-game-item.selected {
    background: rgba(201, 165, 90, 0.1);
  }
  .import-game-item.in-library {
    opacity: 0.7;
  }
  .import-game-item.in-library .igi-players::after {
    content: ' · 📚 déjà en bibliothèque';
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
  }
  .import-game-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
    margin-top: 2px;
  }
  .import-selection-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .import-selection-bar .primary {
    background: var(--accent);
    color: #1a1a1a;
    font-weight: 700;
    border-color: var(--accent);
  }
  .import-selection-bar .primary:hover { background: #d6b06a; }
  .import-selection-bar .primary:disabled { opacity: 0.4; cursor: not-allowed; }
  .igi-players {
    font-size: 12.5px;
    color: var(--text);
  }
  .igi-result {
    font-weight: 700;
    color: var(--accent);
    margin-left: 6px;
  }
  .igi-detail {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 2px;
  }
  .igi-stats {
    text-align: right;
    font-size: 11px;
    color: var(--text-faint);
    font-family: ui-monospace, monospace;
  }
  .import-loading {
    text-align: center;
    padding: 24px;
    color: var(--text-faint);
    font-size: 13px;
  }
  .import-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
  }
  .library-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background 0.15s;
  }
  .library-item:last-child { border-bottom: none; }
  .library-item:hover { background: var(--bg-elevated); }
  .li-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .li-players {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .li-detail {
    font-size: 11px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .li-stats { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, monospace; text-align: right; }
  .li-perf { font-size: 12px; color: var(--accent); font-weight: 700; }

  /* Profile/Aliases */
  .aliases-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .alias-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-soft);
    border-radius: 14px;
    font-size: 12.5px;
    color: var(--text);
    font-family: ui-monospace, "SF Mono", monospace;
  }
  .alias-chip-remove {
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
  }
  .alias-chip-remove:hover { color: var(--blunder); }
  .alias-chip-edit {
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    margin-right: 2px;
  }
  .alias-chip-edit:hover { color: var(--accent); }
  .alias-chip-text:hover { color: var(--accent); }
  .alias-edit-input {
    background: var(--bg-input);
    border: 1px solid var(--accent-soft);
    color: var(--text);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: ui-monospace, monospace;
    font-size: 12.5px;
    width: 140px;
  }
  .alias-edit-input:focus { outline: none; border-color: var(--accent); }
  .alias-chip-save, .alias-chip-cancel {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
  }
  .alias-chip-save { color: var(--good); }
  .alias-chip-save:hover { color: var(--excellent); }
  .alias-chip-cancel { color: var(--text-faint); }
  .alias-chip-cancel:hover { color: var(--blunder); }
  .aliases-empty {
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
    padding: 4px 2px;
  }

  /* Phase 7.3 (C) — Bloc par pseudo (remplace la "puce" compacte). Choix 1A :
     blocs en flex-wrap (hérité de .aliases-list) → ils s'enchaînent sur une
     ligne et passent à la ligne suivante quand la place manque. flex: 1 1 220px
     = chacun veut ~220px, grandit pour combler la ligne, descend sinon. */
  .alias-block {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 320px;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-soft);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .alias-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .alias-block-name {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .alias-block-name:hover { color: var(--accent); }
  .alias-block-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .alias-block-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .alias-plat-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
  }
  .alias-plat-label input { cursor: pointer; margin: 0; }
  .alias-plat-label:hover { color: var(--text); }
  /* Avertissement "2B-léger" : informatif, non bloquant, gris discret. */
  .alias-block-warn {
    margin: 0;
    font-size: 11px;
    font-style: italic;
    color: var(--text-faint);
    line-height: 1.35;
  }
  .alias-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }
  .alias-input-row input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
  }
  .alias-input-row input:focus { outline: none; border-color: var(--accent-soft); }

  /* Library "you" badge */
  .li-you-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    margin-right: 6px;
    background: rgba(201, 165, 90, 0.15);
    border: 1px solid var(--accent-soft);
    color: var(--accent);
  }
  .li-you-badge.win { background: rgba(107, 190, 107, 0.15); border-color: var(--good); color: var(--good); }
  .li-you-badge.loss { background: rgba(214, 86, 86, 0.15); border-color: var(--blunder); color: var(--blunder); }
  .li-you-badge.draw { background: rgba(165, 165, 165, 0.15); border-color: var(--book); color: var(--book); }

  /* Aggregate stats: user perspective */
  .agg-perspective-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 14px;
    width: fit-content;
  }
  .agg-toggle-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
  }
  .agg-toggle-btn.active {
    background: var(--accent);
    color: #1a1a1a;
  }
  .user-results-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
  }
  .urs-block {
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
  }
  .urs-num {
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--accent);
  }
  .urs-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  .urs-block.win .urs-num { color: var(--good); }
  .urs-block.loss .urs-num { color: var(--blunder); }
  .urs-block.draw .urs-num { color: var(--book); }
  .li-delete {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
  }
  .li-delete:hover { color: var(--blunder); border-color: var(--blunder); }
  .library-empty {
    padding: 30px 14px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13px;
  }

  /* Stats modal */
  .agg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
  .agg-block {
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .agg-block-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 8px;
    font-weight: 700;
  }
  .agg-big {
    font-family: Georgia, serif;
    font-size: 30px;
    color: var(--accent);
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .agg-sub {
    font-size: 12px;
    color: var(--text-dim);
  }
  .agg-list-block {
    grid-column: 1 / -1;
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .agg-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12.5px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border-soft);
  }
  .agg-row:last-child { border-bottom: none; }
  .agg-row .agg-label { display: flex; align-items: center; gap: 8px; }
  .agg-row .agg-count { font-family: ui-monospace, monospace; color: var(--text); font-weight: 600; }

  .opt-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .opt-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .opt-row:hover { border-color: var(--accent-soft); }
  .opt-row input[type=checkbox] {
    margin-top: 3px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .opt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .opt-title {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
  }
  .opt-desc {
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.4;
  }

  /* Phase 6.1 (B3) — Bloc <details> repliable pour la mesure de profondeur.
     Style discret, en accord avec l'esthétique modale existante. À retirer
     ou ré-employer en sous-phase 6.7/6.8 quand B3/B4 livreront leur UI finale. */
  .custom-depth-details {
    margin-bottom: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0;
  }
  .custom-depth-summary {
    cursor: pointer;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-dim);
    user-select: none;
    transition: color 0.15s;
  }
  .custom-depth-summary:hover { color: var(--text); }
  .custom-depth-details[open] .custom-depth-summary {
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .custom-depth-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .custom-depth-label {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.4;
  }
  .custom-depth-input {
    width: 90px;
    padding: 5px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: 13px;
  }
  .custom-depth-input:focus { outline: none; border-color: var(--accent); }
  .custom-depth-hint {
    margin: 0;
    font-size: 10.5px;
    color: var(--text-faint);
    line-height: 1.5;
  }
  .custom-depth-hint code {
    background: var(--bg);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
  }

  /* Phase 6.8.1 (Q3 + Q4) — Segmented control du mode de profondeur.
     4 boutons mutuellement exclusifs ; pattern visuel calqué sur le sélecteur
     Top ⑂ (.player-multipv-seg) pour cohérence. */
  .depth-mode-segmented {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .depth-mode-btn {
    flex: 1;
    padding: 8px 6px;
    background: var(--bg-input);
    color: var(--text-dim);
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.12s, color 0.12s;
  }
  .depth-mode-btn:last-child { border-right: none; }
  .depth-mode-btn:hover:not(.active) { background: var(--bg-elevated); color: var(--text); }
  .depth-mode-btn.active {
    background: #5b6bb5;
    color: #fff;
  }
  .depth-mode-hint {
    margin: 0 0 12px 0;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.4;
  }
  /* Zones de détail conditionnelles (custom / phase) */
  .depth-mode-detail {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .depth-detail-label {
    font-size: 11.5px;
    color: var(--text-dim);
  }
  .depth-detail-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.4;
  }
  /* Phase 6.8.2 (Ajout 1) — En-tête de la zone "Par phase" : hint à gauche,
     bouton "Valeurs recommandées" à droite. */
  .phase-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .phase-detail-header .depth-detail-hint { flex: 1; }
  .phase-reset-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11px;
    background: var(--bg-elevated);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .phase-reset-btn:hover {
    background: rgba(91, 107, 181, 0.18);
    border-color: rgba(91, 107, 181, 0.5);
    color: var(--text);
  }
  .depth-detail-warn {
    margin: 0;
    font-size: 10.5px;
    color: var(--text-faint);
    line-height: 1.4;
    font-style: italic;
  }

  /* Phase 6.8 (B4) — Bloc <details> "Profondeur par phase" */
  .phase-depth-details {
    margin-bottom: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .phase-depth-summary {
    cursor: pointer;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-dim);
    user-select: none;
    transition: color 0.15s;
  }
  .phase-depth-summary:hover { color: var(--text); }
  .phase-depth-details[open] .phase-depth-summary {
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .phase-depth-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .phase-depth-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.4;
  }
  .phase-criteria {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .phase-criterion-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
  }
  .phase-criterion-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
  .phase-criterion-row strong {
    color: var(--text);
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
  }
  .phase-criterion-desc {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.6;
  }
  /* Phase 6.8.3 (Ajout 3) — Note explicative sur la convention "1 coup" */
  .phase-criterion-note {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-faint);
    font-style: italic;
    line-height: 1.4;
  }
  .phase-num-input {
    display: inline-block;
    width: 48px;
    padding: 2px 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    text-align: center;
    margin: 0 2px;
    vertical-align: baseline;
  }
  .phase-num-input:focus { outline: none; border-color: var(--accent); }
  .phase-depths-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .phase-depth-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 90px;
  }
  .phase-depth-tag {
    font-size: 10.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  .phase-depth-input {
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: 13px;
    text-align: center;
  }
  .phase-depth-input:focus { outline: none; border-color: var(--accent); }
  .phase-depth-warn {
    margin: 0;
    font-size: 10.5px;
    color: var(--text-faint);
    line-height: 1.4;
    font-style: italic;
  }

  .empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
  }
  .empty-icon { font-size: 48px; margin-bottom: 12px; }

  /* Termination summary */
  .game-meta {
    background: var(--bg-input);
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--text-dim);
    border-left: 3px solid var(--accent);
  }
  .game-meta strong { color: var(--text); font-weight: 600; }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim);
  }
  .legend-item { display: flex; align-items: center; gap: 4px; }

  .error-msg {
    color: var(--blunder);
    font-size: 12px;
    margin-top: 4px;
  }

  hr { border: none; border-top: 1px solid var(--border-soft); margin: 4px 0; }

  /* === Phase 4 — Liste des coups alternatifs en mode exploration === */
  .alt-moves-list {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .alt-move {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
  }
  .alt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .alt-label {
    color: var(--text-faint);
    font-size: 11px;
    min-width: 62px;
  }
  .alt-san {
    font-family: ui-monospace, monospace;
    color: var(--text);
    font-weight: 500;
  }
  .alt-eval {
    color: var(--text-faint);
    font-family: ui-monospace, monospace;
    font-size: 11px;
  }

  /* === Phase 2 — Résumé partie au-dessus de l'échiquier (mobile uniquement) === */
  .mobile-game-summary {
    display: none; /* masqué par défaut (desktop) — overridé en media-query */
  }
  .mobile-game-summary .mgs-players {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .mobile-game-summary .mgs-name { color: var(--text); }
  .mobile-game-summary .mgs-elo {
    color: var(--text-faint);
    font-size: 11px;
    font-family: ui-monospace, monospace;
  }
  .mobile-game-summary .mgs-vs {
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .mobile-game-summary .mgs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .mobile-game-summary .mgs-result {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* Code couleur V/N/D — repris des badges de la bibliothèque pour cohérence. */
  .mobile-game-summary .mgs-result-win {
    background: rgba(80, 160, 90, 0.22);
    color: #9ad8a4;
  }
  .mobile-game-summary .mgs-result-loss {
    background: rgba(220, 80, 80, 0.22);
    color: #e89090;
  }
  .mobile-game-summary .mgs-result-draw {
    background: rgba(180, 160, 100, 0.22);
    color: #d9c47e;
  }
  .mobile-game-summary .mgs-result-neutral {
    background: var(--bg-input);
    color: var(--text-dim);
  }
  .mobile-game-summary .mgs-term {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
  }
  @media (max-width: 760px) {
    .mobile-game-summary {
      display: block !important;
      background: var(--bg-input);
      padding: 8px 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      border-left: 3px solid var(--accent);
    }
  }

  /* === Phase 5.3 — Gestionnaire de moteurs Stockfish === */
  .engine-manager-link {
    margin-top: 6px;
    margin-bottom: 8px;
  }
  .link-btn {
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 0;
  }
  .link-btn:hover {
    color: var(--text);
    text-decoration: underline;
  }

  /* === Phase 5.4.2 — Bannière d'invitation à importer SF18 Lite === */
  /* Affichée sous "Évaluation" si l'analyse a tourné en fallback SF10 alors
     que SF18 Lite était demandé. Discrète (small + inaccuracy color) mais
     visible. */
  .engine-invitation {
    margin: 4px 0 8px;
    padding: 8px 10px;
    background: rgba(245, 209, 144, 0.08);
    border-left: 3px solid var(--inaccuracy, #f5d190);
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-soft, var(--text));
    line-height: 1.4;
  }
  .engine-invitation .engine-invitation-text {
    margin-right: 6px;
  }
  .engine-invitation .link-btn {
    font-size: 12px;
    white-space: nowrap;
  }
  .engines-cached-list {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px;
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
  }
  .engines-empty {
    color: var(--text-faint);
    font-style: italic;
    font-size: 13px;
    padding: 6px;
  }
  .engine-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-soft);
  }
  .engine-row:last-child { border-bottom: none; }
  .engine-row-name {
    flex: 1;
    font-family: monospace;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .engine-row-size {
    color: var(--text-faint);
    font-size: 12px;
    white-space: nowrap;
  }
  .engine-row-delete {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--blunder);
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
  }
  .engine-row-delete:hover {
    background: var(--blunder);
    color: var(--text);
    border-color: var(--blunder);
  }
  .engine-import-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .engine-import-version-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .engine-import-version-label {
    color: var(--text-soft, var(--text));
    font-size: 13px;
    white-space: nowrap;
  }
  #engine-import-version {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    flex: 1;
    min-width: 200px;
  }
  .engine-import-hint {
    color: var(--text-faint);
    font-size: 12px;
    font-style: italic;
  }
  .success-msg {
    color: var(--brilliant, #7fb069);
    font-size: 12px;
    margin-top: 4px;
  }
  .engine-help {
    margin-top: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    padding: 8px 10px;
  }
  .engine-help summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--accent);
    user-select: none;
  }
  .engine-help-content {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-soft, var(--text));
  }
  .engine-help-content code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
  }
  .engine-help-content ol { padding-left: 22px; }
  .engine-help-content ol li { margin-bottom: 4px; }
  .engine-help-content a {
    color: var(--accent);
    text-decoration: underline;
  }
  .engine-help-warn {
    margin-top: 10px;
    padding: 8px;
    background: rgba(232, 144, 144, 0.1);
    border-left: 3px solid var(--blunder);
    border-radius: 3px;
    font-size: 12px;
  }