/* Hex-3 — 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 {
  width: 100%; height: auto; max-height: calc(100dvh - 120px);
  touch-action: manipulation; user-select: none;
}

/* ── le plateau 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 complètement, alors que c'est le chez-soi d'un des trois
   joueurs. Avec lui, les trois couleurs sont sur bois et se voient toutes. */
.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 qu'avant. */
.fond { fill: url(#bois); stroke: var(--bois-trait); stroke-width: 1.1;
  stroke-linejoin: round; }
.fond.survol { fill: #f2e0ad; }
/* ── LA FIN DE PARTIE DOIT SAUTER AUX YEUX ────────────────────────────────
   À trois, elle vient presque toujours 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; 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; }

/* ── 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; }
#journal li .pastille { width: 9px; height: 9px; align-self: center; }

/* ───────────────────────────────── 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; }
  .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; }
}