:root {
  --navy: #1a3a5c;
  --teal: #1a6b8a;
  --gold: #e8b84b;
}
body { background: #f5f7fa; font-family: 'Segoe UI', sans-serif; }
.navbar { background: var(--navy); }
.navbar-brand { font-weight: 700; font-size: 1.3rem; }
.navbar-brand span { color: var(--gold); }
.nav-link { font-size: .9rem; }
.btn-primary { background: var(--navy); border-color: var(--navy); }
.btn-primary:hover, .btn-primary:focus { background: var(--teal); border-color: var(--teal); }
.card-section { border-radius: 12px; border: 1px solid #e8ecf0; background: white; margin-bottom: 1rem; }
.card-section .section-header { background: #f8fafc; border-bottom: 1px solid #e8ecf0; padding: .6rem 1rem;
  border-radius: 12px 12px 0 0; font-weight: 600; color: var(--navy); }
.section-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #888; font-weight: 700; }
.table thead th { background: var(--navy); color: white; font-weight: 600; font-size: .8rem; border: none; white-space: nowrap; }
.table { font-size: .875rem; }
.table-hover tbody tr { cursor: pointer; }
.form-label { font-size: .8rem; font-weight: 600; color: #555; margin-bottom: .2rem; }

/* Échiquier */
.board { width: 100%; aspect-ratio: 1 / 1; }
.board-col { max-width: 560px; }
.board-controls .btn { min-width: 2.6rem; }

/* Liste des coups */
.moves { font-family: 'Segoe UI', sans-serif; line-height: 1.9; max-height: 420px; overflow-y: auto; }
.moves .num { color: #999; margin-right: .15rem; }
.moves .mv { padding: .1rem .3rem; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.moves .mv:hover { background: #e7eef7; }
.moves .mv.current { background: var(--navy); color: white; }
.moves .mv.future { color: #aaa; }
.moves .comment { display: block; color: #2b6a3a; font-size: .85rem; margin: .1rem 0 .3rem; line-height: 1.4; }

/* Barre de résultats Blancs / nulles / Noirs */
.score-bar { display: flex; height: 1.25rem; border-radius: 4px; overflow: hidden; font-size: .7rem;
  border: 1px solid #ccc; min-width: 140px; }
.score-bar div { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.score-bar .w { background: #fff; color: #333; }
.score-bar .d { background: #9aa4ad; color: #fff; }
.score-bar .b { background: #333; color: #fff; }
.explorer-table td { vertical-align: middle; }
.explorer-table .san { font-weight: 700; width: 4.5rem; }
.explorer-table .n { text-align: right; width: 5rem; color: #555; }

.res-w { color: #198754; font-weight: 600; }
.res-l { color: #dc3545; font-weight: 600; }
.res-d { color: #6c757d; font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--navy); }

/* Autocomplétion joueurs */
.ac-wrap { position: relative; }
.ac-list { position: absolute; z-index: 1050; top: 100%; left: 0; right: 0; min-width: 240px; background: white;
  border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
.ac-list div { padding: .35rem .6rem; cursor: pointer; font-size: .875rem; display: flex; justify-content: space-between; gap: 1rem; }
.ac-list div:hover, .ac-list div.active { background: #e7eef7; }
.ac-list small { color: #888; }

/* Analyse Stockfish */
.engine-line { display: flex; gap: .5rem; align-items: baseline; padding: .25rem .3rem; border-radius: 4px; line-height: 1.4; }
.engine-line.playable { cursor: pointer; }
.engine-line.playable:hover { background: #e7eef7; }
.engine-score { min-width: 3.6rem; font-variant-numeric: tabular-nums; }