:root {
  --fond: #f4f2ee;
  --carte: #fff;
  --trait: #e3e0da;
  --texte: #24211d;
  --discret: #8b857c;
  --accent: #2f6ea8;
  --alerte: #a8382f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 1180px;
  margin: 0 auto;
}

/* En-tête logé dans la colonne latérale : la colonne gauche ne porte que le
   goban et l'arbre. */
.entete {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--trait);
}

.entete h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.baseline {
  margin: 6px 0 0;
  color: var(--discret);
  font-size: 12px;
  line-height: 1.5;
}

/* Les deux colonnes ont une largeur plafonnée : au-delà de ~964 px le reste est
   partagé de part et d'autre plutôt que laissé en bloc à droite. */
.colonnes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  align-items: flex-start;
}

/* La largeur de #boardHost pilote la taille du goban : le resizer de Besogo lit
   la largeur calculée du parent de son conteneur, plafonnée par maxwidth. Le
   même plafond ici garde la barre de navigation alignée sur le bord du goban,
   au lieu de la laisser filer au-delà sur un écran large. */
.plateau {
  flex: 1 1 460px;
  min-width: 0;
  max-width: 600px;
}

/* Assez large pour que les six boutons de navigation tiennent sur une ligne. */
.panneau {
  flex: 0 1 340px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 18px;
}

/* ---------- Barres de commande ---------- */

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

input,
textarea {
  font: inherit;
  color: inherit;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 8px 10px;
  min-width: 0;
}

input {
  flex: 1;
}

textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  resize: vertical;
}

input:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font: inherit;
  font-weight: 600;
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--discret);
}

button.primaire {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.pleine {
  width: 100%;
}

/* Action secondaire, discrète : elle ne doit pas concurrencer « Estimate ». */
button.lien {
  margin-top: 6px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

button.lien:hover {
  text-decoration: underline;
}

/* Le bouton commande la liste qui le précède : un peu d'air les sépare sans les
   détacher. */
#estimateBtn {
  margin-top: 10px;
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---------- Pupitre de contrôles ---------- */

.groupe {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Réglage isolé en pied de panneau : on le pose une fois, il ne participe pas
   au geste charger / naviguer / évaluer. */
.reglage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
  font-size: 12px;
  color: var(--discret);
}

.reglage select {
  font: inherit;
  font-size: 13px;
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 6px 8px;
}

/* Navigation : un seul bloc segmenté, bords partagés, plutôt que six pastilles
   détachées. Étalée sur toute la largeur du goban, sous l'arbre. */
#navControls {
  gap: 0;
  margin-top: 10px;
}

button.nav {
  display: grid;
  place-items: center;
  /* Les six boutons se partagent la largeur à parts égales. */
  flex: 1;
  height: 42px;
  padding: 0;
  border-radius: 0;
  border-right-width: 0;
  color: #4a453e;
}

button.nav:first-child {
  border-radius: 6px 0 0 6px;
}

button.nav:last-child {
  border-radius: 0 6px 6px 0;
  border-right-width: 1px;
}

button.nav svg {
  width: 17px;
  height: 17px;
  display: block;
}

button.nav:hover:not(:disabled) {
  background: var(--fond);
  color: var(--texte);
}

/* Le survol éclaircit la bordure partagée : on la remonte pour qu'elle ne soit
   pas recouverte par le voisin. */
button.nav:hover:not(:disabled),
button.nav:focus-visible {
  position: relative;
  z-index: 1;
}

/* Le goban prend le clic : poser ou retirer une lettre. */
.besogo-board {
  cursor: pointer;
}

/* ---------- Plateau ---------- */

/* Seul l'arbre des coups est conservé côté Besogo. En portrait il occupe une
   bande sous le goban, calée sur les 30 px d'une rangée unique (minpanelsheight
   côté JS). Marges et bordure sont annulées : Besogo pose 3 px de marge sur ses
   enfants, et box-sizing compte la bordure dans la hauteur — les deux
   rogneraient le tracé. */
.besogo-panels {
  margin-top: 10px;
  padding: 0;
}

.besogo-panels > * {
  margin: 0;
}

.besogo-tree {
  border: 0;
  border-radius: 6px;
  background: var(--carte);
  overflow-x: auto;
  overflow-y: hidden;
  /* Barre masquée : elle mangerait la hauteur du tracé. Le défilement reste
     possible au trackpad, et treePanel.js ramène de lui-même le coup courant
     dans le champ visible. */
  scrollbar-width: none;
}

.besogo-tree::-webkit-scrollbar {
  display: none;
}

/* ---------- Résultat d'évaluation ---------- */

/* ---------- Panneau latéral ---------- */

.panneau h2 {
  margin: 22px 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--discret);
}

/* Le bandeau d'erreur précède toujours le premier titre, masqué ou non : c'est
   lui qui porte l'espacement sous l'en-tête. */
.erreur + h2 {
  margin-top: 0;
}

/* Les deux joueurs sur une seule ligne, chacun sur la moitié de la largeur. */
.joueurs {
  display: flex;
  gap: 8px;
}

.joueur {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--fond);
  border-radius: 4px;
  font-size: 13px;
}

/* Pastille de pierre plutôt qu'un liseré : en ligne, elle identifie la couleur
   sans consommer de largeur de texte. */
.joueur::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.joueur.noir::before {
  background: #24211d;
}

.joueur.blanc::before {
  background: #fff;
  box-shadow: inset 0 0 0 1px #b8b2a8;
}

.joueur-nom {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.joueur-rang {
  color: var(--discret);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.detail {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--trait);
}

.detail:last-child {
  border-bottom: 0;
}

.detail span {
  color: var(--discret);
}

/* ---------- Recherche de joueur ---------- */

.recherche {
  position: relative;
}

.recherche input {
  width: 100%;
}

.suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
  max-height: 260px;
  overflow-y: auto;
}

.suggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.suggestion:hover,
.suggestion:focus-visible {
  background: var(--fond);
  outline: none;
}

.suggestion-rang {
  color: var(--discret);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.suggestion-vide {
  padding: 6px 8px;
  font-size: 13px;
  color: var(--discret);
}

/* ---------- Liste des parties ---------- */

.parties {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Cent parties tiennent dans une zone défilante plutôt que d'allonger la
     colonne sans fin. */
  max-height: 260px;
  overflow-y: auto;
}

/* Repliée : seule la partie choisie reste, les autres n'ont plus d'utilité une
   fois le plateau chargé. */
.parties.repliee {
  max-height: none;
  overflow: visible;
}

.parties.repliee .partie:not(.choisie) {
  display: none;
}

.partie {
  padding: 6px 9px;
  background: var(--fond);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.partie:hover {
  border-color: var(--trait);
}

.partie.choisie {
  border-color: var(--accent);
  background: #eef4fa;
}

.partie-haut {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.partie-pierre {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.partie-pierre.black {
  background: #24211d;
}

.partie-pierre.white {
  background: #fff;
  box-shadow: inset 0 0 0 1px #b8b2a8;
}

.partie-adversaire {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partie-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--discret);
  flex-shrink: 0;
}

.partie-resultat {
  margin-left: 16px;
  font-size: 11px;
  color: var(--discret);
}

.partie-resultat.gagnee {
  color: #3d7d47;
}

.partie-resultat.perdue {
  color: #a8382f;
}

/* ---------- Variantes ---------- */

.vide {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--discret);
}

.variantes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Colonnes de largeur fixe : c'est ce qui aligne les lignes entre elles. En
   flex, chaque cellule prenait la largeur de son contenu et rien ne tombait en
   face. Les deux colonnes de chiffres sont en chasse fixe. */
.variante {
  display: grid;
  grid-template-columns: auto 1.2em 3.1em 1fr 3.4em;
  align-items: center;
  gap: 0 7px;
  padding: 6px 9px;
  background: var(--fond);
  border: 1px solid transparent;
  border-radius: 5px;
}

.variante.meilleure {
  border-color: var(--accent);
  background: #eef4fa;
}

.variante.illegale {
  opacity: 0.6;
}

.variante input[type="radio"] {
  margin: 0;
}

.variante-lettre {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.variante-point {
  font-size: 12px;
  color: var(--discret);
  font-variant-numeric: tabular-nums;
}

.variante-score,
.variante-cout {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.variante-score.discret,
.variante-cout.discret {
  font-weight: 400;
  color: var(--discret);
}

/* Un clic sur la ligne porte sa carte de territoire sur le goban. */
.variante.cliquable {
  cursor: pointer;
}

.variante.sur-goban {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Détail toujours visible : rien à déplier pour lire les chiffres. */
.variante-detail {
  grid-column: 1 / -1;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--trait);
}

.detail-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--discret);
  padding: 2px 0;
}

.detail-ligne strong {
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.verdict {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.45;
}

.verdict.right {
  background: #edf6ee;
  border-left: 3px solid #3d7d47;
  color: #2c5c34;
}

.verdict.missed {
  background: #fdf4ec;
  border-left: 3px solid #b5762c;
  color: #8a5720;
}

.verdict.none {
  background: var(--fond);
  border-left: 3px solid var(--trait);
  color: var(--discret);
}

.erreur {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fdf1f0;
  border: 1px solid #f0d3d0;
  border-left: 3px solid var(--alerte);
  border-radius: 6px;
  color: var(--alerte);
  font-size: 14px;
}