/* PolyGo — le hex à trois joueurs
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés — voir LICENSE.

   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 cases, 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 {
  /* LA HAUTEUR LAISSE LA PLACE DU RUBAN : la barre en haut, le ruban dessous,
     et le plateau prend le reste. Sans ces quelques dizaines de pixels, le
     ruban tombait sous la ligne de flottaison et la page se mettait à défiler
     d'un cran sur un écran large. */
  width: 100%; height: auto; max-height: calc(100dvh - 172px);
  touch-action: manipulation; user-select: none;
}

/* ── LE RUBAN DE REVUE ──────────────────────────────────────────────────────
   ⏮ ◀ glissière ▶ ⏭, puis « coup 7 sur 23 ». Les quatre flèches se lisent
   comme une seule commande et la glissière prend toute la place qui reste.
   C'est le même ruban que sur les autres jeux du site, aux mêmes noms : qui
   l'a appris une fois le retrouve ici. */
.ruban { display: flex; align-items: center; gap: 6px; width: min(100%, 560px);
  margin-top: 10px; }
.ruban .btn-mini { flex: 0 0 auto; padding: 6px 9px; line-height: 1; }
.ruban input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent);
  height: 24px; }
.coup-n { font-size: 12.5px; color: var(--texte-doux); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
/* « Reprendre ici » n'est là qu'en revue : il pousse le reste vers la gauche
   plutôt que de faire sauter la ligne quand il arrive. */
#btn-ici { margin-left: auto; }
@media (max-width: 420px) {
  .ruban { gap: 4px; }
  .ruban .btn-mini { padding: 6px 7px; }
  .coup-n { font-size: 11.5px; }
}

/* ── le damier lui-même ── */
.bord {
  fill: none; stroke-width: 3.6; stroke-linejoin: round; stroke-linecap: round;
  transition: opacity .3s;
}
/* UN CADRE DE BOIS SOUS LES SIX BORDS, et les couleurs posées dessus : sans lui,
   la moitié extérieure du trait tombe sur le fond sombre de la page, et le bord
   NOIR y disparaît. */
.gaine {
  fill: none; stroke: #c2a068; stroke-width: 6.6;
  stroke-linejoin: round; stroke-linecap: round;
}
.bord.eteint { opacity: .18; }
/* LE TRAIT DOIT SE VOIR, Y COMPRIS SUR UN TÉLÉPHONE. Il était presque noir sur
   un fond presque noir : on ne distinguait pas les cases, et l'on cliquait à
   côté. Celui-ci est le trait des gobans du site, et il est deux fois plus
   épais. */
.fond { fill: url(#bois); stroke: var(--bois-trait); stroke-width: 1.1;
  stroke-linejoin: round; }
.fond.survol { fill: #f2e0ad; }
.case { cursor: pointer; }
#damier.fige .case { cursor: default; }
.pierre { stroke-width: .55; transition: opacity .12s; }
.pierre.vide { opacity: 0; }
.pierre.fantome { opacity: .45; }
/* UN GROUPE À UNE SEULE RESPIRATION SE SIGNALE. C'est la seule chose qu'un
   débutant ne voit pas et qu'il regrette ensuite ; un pointillé coûte moins cher
   qu'une explication. Sa couleur est celle qui se voit sur LA pierre — claire
   sur une pierre sombre, sombre sur une pierre claire. */
.pierre.danger { stroke-width: 1.3; stroke-dasharray: 2.2 1.6; }
/* 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; }
/* Le terrain : un petit losange au centre d'une case vide. Assez visible pour se
   compter d'un coup d'œil, assez différent d'une pierre pour qu'on ne les
   confonde jamais. Un liseré sombre, pour que le losange blanc se voie sur le
   bois clair. */
.terre { opacity: .9; stroke: #5a4628; stroke-width: .35; }
.terre.vide { opacity: 0; }

/* ── 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.fin { border-color: var(--accent-sombre); background: #241c08; }
.bloc.fin p { font-weight: 600; margin-bottom: 10px; }
.deux { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

#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); }

#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; }
/* LE RÉCIT EST UN RUBAN LUI AUSSI : une ligne de coup se clique et montre la
   position d'après ce coup-là. La ligne montrée se tient en couleur d'accent —
   c'est le seul endroit qui dise OÙ l'on est dans la partie quand le damier,
   lui, ne montre qu'une position. */
#journal li.cliquable { cursor: pointer; border-radius: 5px; }
@media (hover: hover) {
  #journal li.cliquable:hover { background: #ffffff10; color: var(--texte); }
}
#journal li.ici { background: #ffffff14; color: var(--accent); font-weight: 600; }
#journal li .pastille { width: 9px; height: 9px; align-self: center; }
#journal li.prise { color: var(--texte); }

/* le compte */
#compte { width: 100%; border-collapse: collapse; font-size: 13px; }
#compte th { font-weight: 500; color: var(--texte-doux); text-align: right;
  padding: 2px 0 4px; font-size: 11.5px; letter-spacing: .04em; }
#compte th:first-child { text-align: left; }
#compte td { padding: 2px 0; text-align: right; font-variant-numeric: tabular-nums; }
#compte td:first-child { text-align: left; display: flex; align-items: center; gap: 7px; }
#compte td.total { font-weight: 700; }
#compte tr.devant td { color: var(--accent); }
.note { margin: 7px 0 0 !important; font-size: 11.5px; color: var(--texte-doux); }

/* ───────────────────────────────── les règles ───────────────────────────────── */
dialog {
  border: 1px solid var(--bord); border-radius: 16px; background: var(--fond-2);
  color: var(--texte); max-width: min(680px, 94vw); padding: 0;
  box-shadow: 0 30px 80px #000a;
}
dialog::backdrop { background: #04080cc8; }
dialog article { padding: 22px 26px; max-height: 70dvh; overflow-y: auto; }
dialog h2 { margin: 0 0 12px; font-size: 20px; }
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; }

/* ───────────────────────────────── 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; }
  .ruban { margin-top: 8px; }
  .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.

   Le plateau était protégé depuis longtemps ; les commandes ne l'étaient pas.
   La propriété ne s'hérite pas — le navigateur croise celle de la cible avec
   celle de ses ancêtres, de sorte que la première ligne suffirait —, mais on la
   redit sur les commandes : c'est là que le geste a lieu, et la protection ne
   doit pas dépendre d'un ancêtre qui changerait d'avis. */
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.

   Mesuré avant d'être posé, sur l'écran d'un téléphone : aucun champ du site ne
   dépassait seize pixels — la règle ne rétrécit donc rien —, et aucune page ne
   déborde. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}