/* RokuGo — le Go sur un damier hexagonal, de deux à quatre 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 {
  /* ── LE CODE COULEUR DES JEUX DE GO ────────────────────────────────────────
     CELUI DE LA PORTE : les neuf jeux de golois.com reprennent les couleurs de
     la page d'accueil, au lieu que la porte prenne les leurs. Neuf jeux de Go
     côte à côte ne peuvent pas être de neuf couleurs.

     Ce jeu-ci était sombre — il est né du damier de PolyGo, qui vit sur
     nestedplay avec sa propre teinte. Les noms de variables ne changent pas,
     seulement ce qu'ils désignent.

     Le gris calme laisse LE BOIS DU DAMIER être la seule chose chaude de
     l'écran, et les pierres y gardent exactement les teintes des autres gobans.

     Trois états, trois traitements, et jamais la couleur seule :
       à prendre    fond `--fond-3`, bord `--bord`        3,9:1
       retenu       fond `--accent`, texte clair, gras    8,4:1
       impossible   `--texte-doux`, sans bord
     ──────────────────────────────────────────────────────────────────────── */
  --fond: #E6E7E1;              /* le gris de la porte */
  --fond-2: #F6F6F1;            /* une carte posée dessus */
  --fond-3: #EDEDE6;            /* le fond d'un choix qu'on peut prendre */
  --bord: #6E7684;              /* 3,9:1 sur ce fond — un vrai contour */
  --texte: #171A20;             /* 16,1:1 sur la carte */
  --texte-doux: #4E5663;        /*  6,8:1 sur la carte */
  --accent: #2C4E7E;            /* CE QUI EST RETENU, et rien d'autre */
  --accent-sombre: #1F3A5F;
  --accent-clair: #DCE6F2;      /* ce que survole la souris */
  --danger: #A63C50;            /* 5,3:1 sur la carte */
  --bois-trait: #6B5326;    /* le trait entre deux cases, celui des gobans */
  --rayon: 10px;
  --panneau-l: 320px;
  color-scheme: light;
}

* { 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: var(--accent-clair);
    border-color: var(--accent); } }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primaire {
  background: var(--accent);
  border-color: var(--accent-sombre); color: #fff; 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%, #ffffffaa 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: #fff; }
.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: var(--fond-3);
}

.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; }
/* LE CHOIX DE LA FORME SE MONTRE, IL NE SE DIT PAS. Un mot — « losange » — se
   lit ; un dessin se reconnaît, et c'est exactement la chose qu'on choisit. */
.segment.formes button { display: flex; align-items: center; gap: 8px;
  min-height: 44px; }
.marque-forme { width: 24px; height: 22px; flex: 0 0 auto; }
.marque-forme polygon { fill: #e6cd93; stroke: var(--bois-trait); stroke-width: 2.4;
  stroke-linejoin: round; }
.segment.formes button[aria-checked="true"] .marque-forme polygon { stroke: #fff; }
.segment button[aria-checked="true"] {
  background: var(--accent); color: #fff; 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 78px; 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 SOMBRE AUTOUR. Sur le panneau sombre d'autrefois, il fallait un
     anneau CLAIR pour que la pastille noire se détache ; sur une carte claire,
     c'est l'inverse — sans anneau, la pastille blanche disparaît. */
  box-shadow: 0 0 0 1px #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 ── */
/* LE CONTOUR N'EST PAS COLORÉ. Là où chaque joueur possède deux bords, ceux-ci
   portent sa couleur ; ici personne ne possède de bord, et le teindre mentirait
   sur la règle. On trace donc un cadre de bois clair, puis le trait
   des gobans par-dessus : sans le cadre, la moitié extérieure du trait tombe sur
   le fond sombre de la page et le damier paraît rongé. */
.gaine {
  fill: none; stroke: #c2a068; stroke-width: 6.6;
  stroke-linejoin: round; stroke-linecap: round;
}
.cadre {
  fill: none; stroke: var(--bois-trait); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round;
}
/* 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: var(--accent-clair); }
.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: var(--accent-clair); }
.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); font-weight: 600; }

/* 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: #1b1f26b0; }
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: var(--texte-doux); }
dialog footer { padding: 14px 26px; border-top: 1px solid var(--bord);
  display: flex; justify-content: flex-end; background: var(--fond-3); }

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