/* HexaGo — le jeu de connexion de Lucas Vienne.
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés.

   LE PLATEAU PREND LA PLACE, le panneau prend le reste. Sur un téléphone, le
   panneau passe sous le plateau et c'est la page qui défile — un panneau
   latéral de cent pixels ne sert personne. */
:root {
  --fond: #0f1620;
  --fond-2: #16202c;
  --fond-3: #1e2a38;
  --bord: #2c3a4c;
  --texte: #e6edf5;
  --texte-doux: #9aabbf;
  --accent: #d8a13a;
  --accent-sombre: #a9791f;
  --bois-trait: #6b5426;    /* le trait entre deux cellules, celui des gobans */
  --rayon: 10px;
  --panneau-l: 320px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.pousse { flex: 1; }

/* ─────────────────────────────── boutons ─────────────────────────────── */
.btn {
  border: 1px solid var(--bord); background: var(--fond-3); color: var(--texte);
  padding: 8px 14px; border-radius: var(--rayon); cursor: pointer;
  transition: background .12s, border-color .12s; white-space: nowrap;
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: #27374a; border-color: #3d5069; } }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primaire {
  background: linear-gradient(180deg, #e7b955, var(--accent));
  border-color: var(--accent-sombre); color: #201704; font-weight: 650;
}
.btn-mini { padding: 6px 10px; font-size: 13px; }

/* ───────────────────────────── l'écran de réglage ───────────────────────────── */
#ecran-config {
  display: grid; place-items: center; padding: 24px; min-height: 100dvh;
  background: radial-gradient(1100px 620px at 50% -8%, #1d2c3e 0%, transparent 70%), var(--fond);
}
.boite {
  width: min(680px, 100%); background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 16px; box-shadow: 0 24px 70px #0008; overflow: hidden;
}
.boite-tete {
  padding: 26px 28px 18px; border-bottom: 1px solid var(--bord);
  display: flex; flex-direction: column;
}
/* le même sélecteur de langue que le reste de nestedplay, et le même réglage */
.langues {
  display: inline-flex; align-self: flex-end; margin-bottom: 6px;
  border: 1px solid var(--bord); border-radius: 9px;
  overflow: hidden; background: var(--fond-3);
}
.langues button {
  border: 0; background: transparent; color: var(--texte-doux); font: inherit;
  font-size: 11px; letter-spacing: .08em; padding: 3px 9px; cursor: pointer;
}
.langues button + button { border-left: 1px solid var(--bord); }
.langues button[aria-pressed="true"] { background: var(--accent); color: #201704; }
.boite-tete h1 { margin: 0; font-size: 28px; letter-spacing: -.4px; }
.sous-titre { margin: 8px 0 0; color: var(--texte-doux); font-size: 14px; }
.sous-titre .rappel { opacity: .75; font-size: 13px; }
.boite-corps { padding: 22px 28px; display: grid; gap: 18px; }
.boite-pied {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 16px 28px; border-top: 1px solid var(--bord); background: #121b26;
}

.champ { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.champ > label { font-weight: 600; min-width: 92px; }
.libre { font-weight: 400 !important; color: var(--texte-doux); font-size: 13.5px;
  flex: 1 1 240px; }
.segment { display: flex; gap: 6px; flex-wrap: wrap; }
.segment button {
  min-width: 46px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--bord); background: var(--fond-3);
  border-radius: 9px; cursor: pointer; font-weight: 600;
}
.segment.large button { min-width: 96px; }
.segment button[aria-checked="true"] {
  background: var(--accent); color: #201704; border-color: var(--accent-sombre);
}

.champ-sieges { align-items: flex-start; }
#choix-qui { display: grid; gap: 6px; flex: 0 0 auto; }
.siege { display: flex; align-items: center; gap: 10px; }
.siege-nom { font-size: 13.5px; flex: 0 0 74px; display: flex; align-items: center; gap: 7px; }
.siege .segment button { min-height: 32px; min-width: 96px; font-size: 13px;
  font-weight: 500; }

/* la pastille de couleur, partout la même */
.pastille {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  display: inline-block;
  /* UN CERCLE CLAIR AUTOUR : la pastille noire doit se voir sur un panneau
     sombre, et la blanche garder sa forme. */
  box-shadow: 0 0 0 1px #ffffff33, 0 0 0 2px #00000055;
}

/* ───────────────────────────────── l'écran de jeu ───────────────────────────────── */
#ecran-jeu { display: grid; grid-template-rows: auto 1fr; min-height: 100dvh; }
#barre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--bord); background: var(--fond-2);
}
#barre strong { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.etiquette {
  font-size: 12.5px; color: var(--texte-doux); border: 1px solid var(--bord);
  border-radius: 999px; padding: 2px 10px; background: var(--fond-3);
}
.etiquette.attente { color: var(--accent); border-color: var(--accent-sombre); }

#plateau {
  display: grid; grid-template-columns: 1fr var(--panneau-l); min-height: 0;
}
#zone-plateau { display: grid; place-items: center; padding: 14px; min-width: 0; }
#damier {
  width: 100%; height: auto; max-height: calc(100dvh - 120px);
  touch-action: manipulation; user-select: none;
}

/* ── le plateau lui-même ── */
/* LES PORTS SONT LE CADRE. Chacun est tracé deux fois : une gaine de bois
   dessous, la couleur dessus. Sans la gaine, la moitié extérieure du trait
   tombe sur le fond sombre de la page — et l'arc NOIR y disparaît
   complètement, alors que c'est le chez-soi d'un des joueurs. */
.port {
  fill: none; stroke-width: 4.2; stroke-linejoin: round; stroke-linecap: round;
  transition: opacity .3s;
}
.gaine {
  fill: none; stroke: #c2a068; stroke-width: 7.8;
  stroke-linejoin: round; stroke-linecap: round;
}
.port.eteint, .nom-port.eteint { opacity: .18; }
/* LE NOM DU PORT, POSÉ DEHORS. La note les appelle A, A′, B, B′ ; sans ces
   lettres il faut suivre le cadre du doigt pour savoir où finit un port. Le
   rond porte la couleur du joueur et la lettre celle qui s'y voit — comme les
   pastilles du panneau. Il est POSÉ HORS DU PLATEAU, après le cadre, pour
   qu'on ne le prenne pas pour une pierre. */
.nom-port { transition: opacity .3s; pointer-events: none; }
.nom-rond { stroke: #6b5426; stroke-width: .7; }
.nom-texte { text-anchor: middle; dominant-baseline: central; font-weight: 700;
  font-family: system-ui, sans-serif; }
/* EN CELLULES, LE CADRE S'EFFACE — mais la gaine de bois reste, pour que le
   plateau garde un contour et ne flotte pas sur le fond de la page. */
.ports-en-cellules .port { opacity: 0; }

/* LE TRAIT DOIT SE VOIR, Y COMPRIS SUR UN TÉLÉPHONE. Celui-ci est le trait des
   gobans du site. */
.fond { fill: url(#bois); stroke: var(--bois-trait); stroke-width: 1.1;
  stroke-linejoin: round; }
/* Une cellule de port teintée : la couleur du joueur mêlée au bois, assez pour
   se lire, trop pâle pour être prise pour une pierre. Le trait est plus sombre
   pour que le port se détache d'un bloc. */
.fond.teinte { stroke: #4c3a1a; stroke-width: 1.3; }
.fond.survol { fill: #f2e0ad !important; }
/* ── LA FIN DE PARTIE DOIT SAUTER AUX YEUX ────────────────────────────────
   À trois, elle vient souvent d'une ÉLIMINATION : personne n'a rien relié, le
   damier n'a pas bougé, et la partie s'arrête sans que l'œil comprenne. On fait
   donc battre le chemin du gagnant — sa chaîne s'il a relié, celui qu'il
   pourrait encore faire s'il a gagné par blocage.
   QUI DEMANDE MOINS D'ANIMATION N'EN A PAS : la mise en valeur reste, elle
   cesse seulement de battre. */
.fond.gagnante { fill: #f6e8bd !important; animation: bat 1.15s ease-in-out infinite; }
@keyframes bat {
  0%, 100% { fill: #f3e2b6; }
  50%      { fill: #ffd271; }
}
@media (prefers-reduced-motion: reduce) {
  .fond.gagnante, .pion.gagnant { animation: none; }
}
.case { cursor: pointer; }
#damier.fige .case { cursor: default; }
.pion { stroke-width: .55; transition: opacity .12s; }
.pion.vide { opacity: 0; }
.pion.fantome { opacity: .45; }
.pion.gagnant { stroke-width: 1.3; animation: batPierre 1.15s ease-in-out infinite; }
@keyframes batPierre {
  0%, 100% { stroke-width: 1.0; stroke-opacity: .35; }
  50%      { stroke-width: 2.2; stroke-opacity: 1; }
}
/* La marque du dernier coup : un point au centre de la pierre, dans la couleur
   qui s'y voit — c'est la convention des gobans. */
.marque { stroke: none; }
.marque.vide { opacity: 0; }
.marque.dernier { opacity: .9; }
/* LES ANNEAUX DES TRAJETS, emboîtés par joueur : là où deux trajets se
   croisent, on voit deux anneaux l'un dans l'autre, et c'est l'endroit où la
   note dit qu'il faut jouer. Ils ne prennent pas le clic. */
/* DISCRETS, PARCE QU'ILS SONT PARTOUT. Au premier coup d'une partie à trois,
   presque chaque cellule est sur un chemin du meilleur prix pour quelqu'un :
   des anneaux épais et pointillés couvraient alors le damier d'un grillage où
   l'on ne voyait plus ni les pierres ni les ports. Trait fin, pleins, à peine
   opaques : la forme des trajets se lit, le plateau reste dessous. */
.anneau { fill: none; stroke-width: 1.25; stroke-opacity: .65; pointer-events: none; }
.anneau.vide { display: none; }

/* ── le panneau ── */
#panneau {
  border-left: 1px solid var(--bord); background: var(--fond-2);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; min-width: 0;
}
.bloc { border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--fond-3); padding: 11px 13px; }
.bloc h2 { margin: 0 0 7px; font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texte-doux); font-weight: 650; }
.bloc p { margin: 0; font-size: 14px; }
.bloc .menu { font-size: 12px; color: var(--texte-doux); margin-top: 6px; }
.bloc.fin { border-color: var(--accent-sombre); background: #241c08; }
.bloc.fin p { font-weight: 600; margin-bottom: 10px; }
.bascule { display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 14px; font-weight: 600; }
.bascule input { width: 17px; height: 17px; accent-color: var(--accent);
  cursor: pointer; }

#joueurs { display: grid; gap: 6px; }
.joueur {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond-3);
}
.joueur.actif { border-color: var(--accent); background: #22303f; }
.joueur.mort { opacity: .45; }
.joueur .nom { font-weight: 600; flex: 1 1 auto; }
.joueur .etat { font-size: 12px; color: var(--texte-doux); }
.joueur .tenu { font-size: 11.5px; color: var(--texte-doux); }
/* LE PRIX DE LA LIAISON : combien de pions il lui reste à poser, au mieux.
   C'est le seul chiffre honnête qu'on sache donner d'une position sans la
   jouer, et il se lit d'un coup d'œil pendant la partie. */
.joueur .prix { font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }

#journal { margin: 0; padding: 0; list-style: none; font-size: 13px;
  color: var(--texte-doux); max-height: 190px; overflow-y: auto; }
#journal li { margin: 1px 0; display: flex; align-items: baseline; gap: 5px; }
#journal li .no { flex: 0 0 2.1em; text-align: right; opacity: .65;
  font-variant-numeric: tabular-nums; }
#journal li .pastille { width: 9px; height: 9px; align-self: center; }
#journal li .coord { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────── les règles ───────────────────────────────── */
dialog {
  border: 1px solid var(--bord); border-radius: 16px; background: var(--fond-2);
  color: var(--texte); max-width: min(720px, 94vw); padding: 0;
  box-shadow: 0 30px 80px #000a;
}
dialog::backdrop { background: #04080cc8; }
dialog article { padding: 22px 26px; max-height: 74dvh; overflow-y: auto; }
dialog h2 { margin: 0 0 12px; font-size: 20px; }
dialog h3 { margin: 22px 0 8px; font-size: 16px; color: var(--accent); }
dialog p { margin: 0 0 11px; font-size: 14.5px; color: #cfdae7; }
dialog footer { padding: 14px 26px; border-top: 1px solid var(--bord);
  display: flex; justify-content: flex-end; background: #121b26; }
/* LES SCHÉMAS SONT PRODUITS PAR LE JEU, et non dessinés à la main : ils ne
   peuvent donc pas montrer une règle qui a changé. Deux par ligne quand la
   place le permet — les deux figures des ports se comparent alors d'un coup
   d'œil, ce qui est tout leur objet. */
dialog figure { margin: 10px 0 14px; display: inline-block; vertical-align: top;
  width: min(300px, 100%); }
dialog figure + figure { margin-left: 12px; }
@media (max-width: 700px) { dialog figure + figure { margin-left: 0; } }
.schema { width: 100%; height: auto; display: block;
  background: #101922; border: 1px solid var(--bord); border-radius: 10px;
  padding: 6px; }
dialog figcaption { font-size: 12.5px; color: var(--texte-doux); margin-top: 6px; }

/* ───────────────────────────────── le téléphone ───────────────────────────────── */
@media (max-width: 860px) {
  #plateau { grid-template-columns: 1fr; }
  #panneau { border-left: 0; border-top: 1px solid var(--bord); }
  #damier { max-height: 56dvh; }
  .boite-corps { padding: 18px 16px; }
  .boite-tete, .boite-pied { padding-left: 18px; padding-right: 18px; }
  .champ > label { min-width: 0; flex: 1 0 100%; }
  #journal { max-height: 120px; }
}

/* RIEN NE ZOOME TOUT SEUL SUR UN ÉCRAN TACTILE. Deux appuis rapprochés sur un
   bouton sont lus par Safari, sur iPhone et iPad, comme un double appui — c'est
   à dire comme un ordre de grossir : le navigateur met alors le BOUTON à la
   largeur de l'écran, et le jeu sort du cadre. Le geste se fait sans y penser
   quand on presse deux fois « Annuler » pour revenir de deux coups en arrière.

   `manipulation` dit au navigateur qu'il n'y a pas de double appui à attendre
   ici : l'appui simple part aussitôt, le défilement reste, et le pincement — le
   zoom VOULU — reste lui aussi. On ne retire que le zoom accidentel, et jamais
   par `user-scalable=no`, qui fermerait les deux. */
html, body { touch-action: manipulation; }
button, select, input, textarea, a, label, summary { touch-action: manipulation; }

/* ET RIEN NE ZOOME NON PLUS EN ENTRANT DANS UN CHAMP : sous seize pixels,
   Safari grossit la page dès qu'un `input`, un `select` ou un `textarea` prend
   le focus — il rend le texte lisible — et il ne la redescend pas en sortant.
   Même symptôme que le double appui, autre cause. Seize pixels sur les écrans
   tactiles SEULEMENT : à la souris, les commandes restent discrètes. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}