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

   PAS D'IMAGES : le plateau est un canevas, et tout y est tracé. La palette est
   celle de Déboîter, de Sokoban et de Déraper — qui passe de l'un à l'autre doit
   se sentir chez lui — et le ROUGE est le même : c'est toujours la pièce qu'il
   faut mener quelque part. */

: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;
  --r0: #b7382b; --r1: #2c4e7e; --r2: #2f6b45; --r3: #8a5fa8;
}
@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;
    --r0: #cf5243; --r1: #6b9ad8; --r2: #4f8c5e; --r3: #a87fc4;
  }
}

* { 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; }
/* SUR LA PORTE, LA PAGE EST PLUS LARGE : le tableau d'honneur vient à droite du
   damier, et à six cent quarante pixels les deux seraient à l'étroit. Ailleurs
   il n'y a rien à côté, et une page large ne ferait qu'éloigner les boutons. */
body.porte .page { max-width: 960px; }

.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; }

/* `hidden` NE FAIT RIEN CONTRE UN `display: flex` : il faut le dire. Sans ces
   deux lignes, la porte posait bien l'attribut — le harnais le voyait, et
   passait — pendant que les onglets et la rangée des niveaux restaient à
   l'écran. Un contrôle qui lit l'attribut au lieu de ce que l'œil voit laisse
   passer exactement cela. */
.modes { display: flex; gap: 6px; margin-bottom: 10px; }
.modes[hidden] { display: none; }
.modes .btn { flex: 1; }

/* LE DAMIER ET SON TOUR. Le canevas n'a plus ni cadre ni fond : c'est le cadre
   qui les porte, et il peut donc se permettre ce que le canevas ne sait pas
   faire — un liseré clair à l'intérieur, une ombre portée douce, et un coin plus
   franc. Le damier, lui, reste CARRÉ : un damier étiré ferait mentir les
   diagonales, et ce jeu se gagne sur des alignements. */
.jeu { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
/* La colonne du jeu : le damier, ce qu'il dit, et ses boutons. */
.colonne { flex: 2 1 340px; min-width: 260px; }
.damier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
              0 2px 10px rgba(0, 0, 0, .06);
}
@media (prefers-color-scheme: dark) {
  .damier { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
                        0 2px 12px rgba(0, 0, 0, .35); }
}
#plateau { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block;
  border-radius: 8px; touch-action: manipulation; cursor: pointer; }

/* LES BOUTONS GARDENT LEUR LARGEUR. Ils s'étiraient jusqu'au bord de la page :
   « Recommencer » faisait alors la moitié de l'écran, pour un mot. */
.barre { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.barre[hidden] { display: none; }
.barre .btn { flex: 0 0 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[hidden] { display: none; }
.niveaux output { font-variant-numeric: tabular-nums; }

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

/* ───────────────────── le tableau d'honneur, sur la porte ──────────────────
   Repris de Déboîter au pixel près : qui passe d'un jeu à l'autre doit
   reconnaître son classement. */
/* LE TABLEAU EST À CÔTÉ DU JEU, et il repasse dessous quand la place manque :
   `flex-wrap` sur `.jeu` s'en charge, sans media query. */
.cote { flex: 1 1 260px; min-width: 230px; }
.cote h2 { font-size: 16px; margin: 0 0 6px; }
/* `hidden` ne fait rien contre un `display: flex` : il faut le dire. */
.cote[hidden] { display: none; }
.note { font-size: 13.5px; color: var(--ink-3); margin: 6px 0; }
.tableau { list-style: none; counter-reset: rang; margin: 0; padding: 0; }
.tableau li {
  counter-increment: rang; display: flex; align-items: baseline; gap: 8px;
  padding: 3px 6px; font-size: 14.5px;
}
.tableau li::before {
  content: counter(rang) "."; color: var(--ink-3); min-width: 1.6em;
  text-align: right; font-variant-numeric: tabular-nums;
}
.tableau li.moi { background: var(--surface-2); border-radius: 6px; }
.tableau .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.tableau .score { margin-left: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.tableau .pas { color: var(--ink-3); white-space: nowrap; font-size: 13px; }

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