/* Golois — jouer au Go contre la politique de KataGo
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés — voir LICENSE. */
:root {
  --fond: #0f1620;
  --fond-2: #16202c;
  --fond-3: #1e2a38;
  --bord: #2c3a4c;
  --texte: #e6edf5;
  --texte-doux: #9aabbf;
  --accent: #d8a13a;
  --accent-sombre: #a9791f;
  --danger: #ef4444;
  --bois: #D6B173;          /* un bois de goban, pas un jaune d'ecran */
  /* Les deux bouts du degrade de chaque pierre : la lumiere, puis le bord. */
  --pierre-n1: #5A626C; --pierre-n2: #0B0E12;
  --pierre-b1: #FFFFFF; --pierre-b2: #D8CFBA;
  --bois-trait: #6B5326;
  --rayon: 10px;
  --panneau-l: 340px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; color: inherit; }
.ecran { height: 100%; min-width: 0; }
[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-danger { background: #7f1d1d; border-color: #a03030; }
.btn-mini { padding: 6px 10px; font-size: 13px; }

/* ───────────────────────────── configuration ───────────────────────────── */
#ecran-config {
  display: grid; place-items: center; padding: 24px; overflow: auto;
  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; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.boite-tete {
  padding: 26px 28px 18px; border-bottom: 1px solid var(--bord); flex: 0 0 auto;
  display: flex; flex-direction: column;
}
/* le meme selecteur de langue que le reste de nestedplay, et le meme reglage */
.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; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.boite-pied {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 16px 28px; border-top: 1px solid var(--bord); background: #121b26; flex: 0 0 auto;
}

.champ { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.champ > label { font-weight: 600; min-width: 118px; }
.libre { font-weight: 400 !important; color: var(--texte-doux); font-size: 14px; }
.champ-temperature input[type="range"] { flex: 1 1 160px; min-width: 120px; accent-color: var(--accent); }
.champ-temperature b { font-variant-numeric: tabular-nums; min-width: 42px; }
.champ-temperature em { flex: 1 0 100%; font-size: 12.5px; font-style: normal; }
.libre input { width: 64px; }
input[type="number"] {
  background: #101823; border: 1px solid var(--bord); border-radius: 8px;
  padding: 7px 9px; width: 88px;
}
.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: 128px; }
.segment button[aria-checked="true"] {
  background: var(--accent); color: #201704; border-color: var(--accent-sombre);
}
.case { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 14px; }
.case em { color: var(--texte-doux); font-style: normal; }

/* ───────────────────────────────── jeu ───────────────────────────────── */
#ecran-jeu { display: grid; grid-template-rows: auto 1fr; height: 100%; min-width: 0; }
#barre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0;
  padding: 9px 14px; padding-top: max(9px, env(safe-area-inset-top));
  background: var(--fond-2); border-bottom: 1px solid var(--bord);
}
.jeton { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px #0006; }
.jeton.noir { background: #14171b; }
.jeton.blanc { background: #f6f3ea; }
.etiquette {
  font-size: 12.5px; color: var(--texte-doux);
  border: 1px solid var(--bord); background: var(--fond-3);
  padding: 3px 10px; border-radius: 999px;
}
.etiquette.attente { color: var(--accent); border-color: var(--accent-sombre); background: #2a2109; }

#plateau { display: grid; grid-template-columns: 1fr var(--panneau-l); min-height: 0; min-width: 0; }
#zone-goban {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 10px; background: #0d1a26;
}
#goban { width: 100%; flex: 1 1 auto; min-height: 0; display: block;
         touch-action: manipulation; cursor: pointer; }
#zone-goban.revue #goban { cursor: default; }

/* La liste des parties gardees sur le compte : une ligne par partie, cliquable.
   Chaque bouton porte ce qui identifie la partie a gauche, sa date a droite. */
.mes-parties { display: grid; gap: 6px; max-height: 46vh; overflow: auto;
  margin-bottom: 12px; }
.ligne-partie { display: flex; align-items: baseline; gap: 10px; width: 100%;
  text-align: left; }
.ligne-partie b { font-weight: 600; }
.ligne-partie em { margin-left: auto; font-style: normal; opacity: .65;
  font-size: 12.5px; white-space: nowrap; }
/* Reprendre une partie et la jeter sont deux gestes : deux boutons, cote a
   cote, et non un bouton dans un bouton -- ce que le HTML ne permet pas. */
.duo-partie { display: flex; gap: 6px; align-items: stretch; }
.duo-partie .ligne-partie { flex: 1; }
.duo-partie .jeter { flex: 0 0 auto; padding: 6px 10px; color: var(--texte-doux); }
@media (hover: hover) {
  .duo-partie .jeter:hover { color: var(--danger); border-color: var(--danger); }
}

/* Le ruban de revue : il ne rejoue rien, il montre une position deja atteinte. */
.ruban {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  width: min(100%, 560px); padding: 0 2px;
}
/* Les quatre fleches sont des boutons de meme largeur : elles se lisent comme
   une seule commande, et le curseur garde toute la place qui reste. */
.ruban .btn-mini { flex: 0 0 auto; padding: 6px 8px; line-height: 1; }
.ruban .coup-n { margin-left: 4px; }
.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); font-variant-numeric: tabular-nums;
  min-width: 96px; text-align: right;
}
#zone-goban.revue .coup-n { color: var(--accent); }

/* non-scaling-stroke compte l'epaisseur en pixels d'ecran, pas en pas du
   goban : c'est justement ce qu'on veut ici -- un trait d'un pixel, net, que le
   goban fasse 5 lignes ou 19 -- mais il fallait l'ecrire en pixels. */
.ligne { stroke: var(--bois-trait); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hoshi { fill: var(--bois-trait); }
.coord { fill: #7d6534; font-size: 0.5px; font-family: inherit; user-select: none; }
/* Les pierres ont un reflet : clair au point d'éclairage, sombre au bord, et
   une ombre portée dessous. Les valeurs sont celles de Geta. */
.ombre { fill: #00000038; }
.pierre { stroke: #00000055; stroke-width: 0.02; }
.pierre.noire { fill: url(#pierre-n); }
.pierre.blanche { fill: url(#pierre-b); }
.fantome { opacity: .42; pointer-events: none; }
.dernier { pointer-events: none; }
.dernier.sur-noire { fill: #f6f3ea; }
.dernier.sur-blanche { fill: #14171b; }
.jouable { fill: #ffffff22; pointer-events: none; }
.triangle { fill: none; stroke: #E23B2E; stroke-width: 0.09; stroke-linejoin: round; pointer-events: none; }
/* Le carré du mauvais coup : plus vif que le triangle du meilleur, et doublé
   d'un liseré sombre pour tenir aussi bien sur une pierre blanche que noire. */
.mauvais { fill: none; stroke: #FF4B3E; stroke-width: 0.085; pointer-events: none; }
.mauvais-ombre { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 0.15;
  pointer-events: none; }

.annonce {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  background: #0b131cf0; border: 1px solid var(--accent); color: var(--accent);
  padding: 9px 20px; border-radius: 999px; font-weight: 650; z-index: 6;
  max-width: calc(100% - 24px); text-align: center;
}
/* Un avertissement ne se lit pas comme « la partie repart d'ici » — et il tient
   deux lignes sur un téléphone : la pastille arrondie d'un message court y
   deviendrait une bulle ovale posée en travers du goban. */
.annonce.alerte {
  border-color: var(--danger); color: #ffb4b4;
  border-radius: 12px; line-height: 1.35; max-width: min(430px, calc(100% - 20px));
}

/* ─────────────────────────────── panneau ─────────────────────────────── */
#panneau {
  background: var(--fond-2); border-left: 1px solid var(--bord);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
}
.corps-panneau { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.tete-feuille { display: none; }
.bloc { padding: 13px 15px; border-bottom: 1px solid var(--bord); }
.bloc h3 {
  margin: 0 0 9px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texte-doux);
}
.bloc-journal { flex: 1; min-height: 140px; display: flex; flex-direction: column; }
.aide { color: var(--texte-doux); font-size: 13.5px; margin: 10px 0 0; }

/* la note du coup : c'est l'information que l'on vient chercher ici */
.cote { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cote b { font-size: 20px; }
.cote .proba { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cote .rang { font-size: 13px; color: var(--texte-doux); }
.cote-vide { color: var(--texte-doux); }
/* Ce qu'un coup a coûté : le chiffre reste sous les yeux jusqu'au coup suivant,
   là où l'on vient déjà lire la note. */
.cote .perte {
  font-size: 13px; font-weight: 650; color: var(--danger);
  border: 1px solid var(--danger); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

/* L'avance estimee : elle sort de la meme inference que la politique. */
.score { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.score .score-t {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--texte-doux);
}
.score b { font-size: 15px; font-variant-numeric: tabular-nums; }

.actions { display: grid; gap: 8px; }
.actions .rangee { display: flex; gap: 8px; }
.actions .rangee > * { flex: 1; }

#journal {
  margin: 0; padding: 0 0 0 4px; list-style: none; overflow-y: auto; flex: 1;
  font-size: 13px; color: var(--texte-doux); font-variant-numeric: tabular-nums;
}
#journal li { padding: 2px 0; border-bottom: 1px solid #ffffff08; }

/* ─────────────────────────────── modale ─────────────────────────────── */
.modale {
  position: fixed; inset: 0; background: #000a; display: grid; place-items: center;
  z-index: 50; padding: 20px;
}
.modale-boite {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: 14px;
  width: min(620px, 100%); max-height: 85dvh; display: flex; flex-direction: column;
  box-shadow: 0 26px 70px #000b;
}
.modale-tete { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--bord); }
.modale-tete h2 { margin: 0; font-size: 19px; }
.modale-tete button { margin-left: auto; }
.modale-corps { padding: 18px; overflow-y: auto; }
.modale-corps h4 { margin: 16px 0 6px; color: var(--accent); font-size: 14px; }
.modale-corps h4:first-child { margin-top: 0; }
.modale-corps p { font-size: 14px; color: #cfdae7; }
.modale-corps a { color: var(--accent); }
.modale-corps .verdict { font-size: 18px; font-weight: 650; color: var(--texte); }
.modale-pied { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--bord); }

/* ───────────────────── téléphones et tablettes ─────────────────────
   Le goban prend tout ce qui reste, le panneau devient une feuille au bas,
   repliable d'un doigt. La tête de cette feuille ne défile pas et n'est pas
   collante : seul le corps défile. */
@media (max-width: 820px) and (min-height: 560px) {
  #plateau { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  #panneau { border-left: none; border-top: 1px solid var(--bord); max-height: 40dvh; }
  #panneau.replie { max-height: none; }
  #panneau.replie .corps-panneau { display: none; }
  .corps-panneau { padding-bottom: env(safe-area-inset-bottom); }
  .tete-feuille {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 10px; background: var(--fond-2);
    border-bottom: 1px solid var(--bord); flex: 0 0 auto;
  }
  .poignee {
    width: 40px; min-height: 34px; border: 1px solid var(--bord);
    background: var(--fond-3); border-radius: var(--rayon); cursor: pointer;
    display: grid; place-items: center;
  }
  .poignee::before {
    content: ""; width: 0; height: 0;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 7px solid var(--texte-doux);
  }
  #panneau.replie .poignee::before { border-top: 0; border-bottom: 7px solid var(--texte-doux); }
  #barre { gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
  /* la taille et le komi se lisent sur le goban lui-meme : sur un ecran etroit,
     l'etiquette ne vaut pas la seconde ligne qu'elle fait prendre a la barre */
  #taille-jeu { display: none; }
  .btn-mini { padding: 6px 9px; font-size: 12.5px; }
  .bloc { padding: 11px 13px; }
  .bloc-journal { min-height: 100px; }
  #zone-goban { padding: 4px; gap: 6px; }
  .coup-n { min-width: 66px; font-size: 12px; }
  .annonce { font-size: 13.5px; padding: 8px 14px; top: 8px; }
  .ruban { gap: 4px; }
  /* au doigt, une fleche de 24 px se rate : on leur donne de quoi etre visees,
     le curseur garde le reste. */
  .ruban .btn-mini { padding: 6px 6px; min-width: 34px; min-height: 32px; }
}

@media (max-width: 560px) {
  #ecran-config { padding: 0; place-items: stretch; overflow: hidden; }
  .boite { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .boite-tete { padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
  .boite-tete h1 { font-size: 23px; }
  .boite-corps { padding: 16px; gap: 14px; }
  .boite-pied { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .boite-pied .btn { flex: 1 1 auto; }
  .champ > label { min-width: 0; flex: 1 0 100%; }
  .segment.large button { min-width: 110px; flex: 1; }
  .modale { padding: 10px; }
  .modale-boite { max-height: 88dvh; }
  .modale-pied { flex-wrap: wrap; }
  .modale-pied .btn { flex: 1 1 auto; }
}