/* Glissade — la feuille de style.
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés — voir LICENSE.

   PAS D'IMAGES : le damier est un canevas, et tout y est tracé. Ici on ne règle
   que ce qui entoure — l'en-tête, les séries, les boutons.

   La palette est celle de Déboîter et de Sokoban, ses aînés : qui passe de l'un
   à l'autre doit se sentir chez lui. Le rouge est le même, et c'est celui du
   véhicule qu'il faut sortir. */

:root {
  color-scheme: light dark;
  --fond: #f4f1ea; --surface: #fffdf8; --surface-2: #efeadf;
  --ink: #1d2126; --ink-2: #4a525c; --ink-3: #7b838d; --line: #d9d2c5;
  --accent: #2c4e7e; --accent-2: #24406a; --bad: #a6402f; --bon: #2f6b45;
  --sol: #e6dfd0; --mur: #6b6152;
  --bloc: #b07c3f; --bloc-haut: #c8944f;
  --rouge: #b7382b; --rouge-haut: #cf5243;
  --porte: #2f6b45;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14171b; --surface: #1c2026; --surface-2: #242932;
    --ink: #e8eaed; --ink-2: #b3bac3; --ink-3: #868e98; --line: #333a44;
    --accent: #7aa2d6; --accent-2: #9dbce5; --bad: #e08b7c; --bon: #7fc79c;
    --sol: #2a2f36; --mur: #454d58;
    --bloc: #8d6333; --bloc-haut: #a2753f;
    --rouge: #a33a2e; --rouge-haut: #bd4d3f;
    --porte: #4f8c5e;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fond); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.page { max-width: 640px; margin: 0 auto; padding: 14px 14px 40px; }

.tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; }
.pousse { flex: 1; }
.langues { display: flex; gap: 4px; }
.langues button { border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); border-radius: 7px; padding: 3px 7px; font-size: 12px;
  cursor: pointer; }
.langues button[aria-pressed="true"] { background: var(--accent);
  border-color: var(--accent); color: #fff; }
.compteurs { display: flex; gap: 14px; font-size: 14px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.compteurs b { color: var(--ink); font-size: 17px; }

.btn { border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); border-radius: 9px; padding: 7px 12px; font-size: 14px;
  cursor: pointer; font-family: inherit; }
.btn:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--surface-2); } }
.btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent);
  color: #fff; }

.modes { display: flex; gap: 6px; margin-bottom: 10px; }
.modes .btn { flex: 1; }

/* LE DAMIER EST CARRÉ, ET IL LE RESTE : un damier étiré ferait mentir les
   distances, et ce jeu se joue sur des alignements. */
#damier { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; touch-action: manipulation; cursor: pointer; }

.barre { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.barre .btn { flex: 1 1 auto; }
.dit { margin: 10px 0 0; min-height: 1.5em; font-size: 15px; }
.dit.gagne { color: var(--bon); font-weight: 650; }
.dit.aide { color: var(--ink-3); font-size: 13px; }

.niveaux { display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 14px; color: var(--ink-2); }
.niveaux output { font-variant-numeric: tabular-nums; }

/* La boîte des règles : une page par-dessus la page, fermée par défaut. */
dialog { border: 1px solid var(--line); border-radius: 14px; padding: 0;
  background: var(--surface); color: var(--ink); max-width: 560px; width: 92%; }
dialog::backdrop { background: #0008; }
.regles { padding: 18px 20px 20px; }
.regles h2 { margin: 0 0 4px; font-size: 20px; }
.regles h3 { margin: 16px 0 2px; font-size: 15px; color: var(--accent); }
.regles p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.regles .fin { margin-top: 18px; text-align: right; }

@media (max-width: 420px) {
  .page { padding: 10px 10px 30px; }
  .compteurs { gap: 10px; font-size: 13px; }
}

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