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

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