/* CARISTE — feuille du jeu. Même palette que iatopro.fr, mais page autonome. */
:root {
  --fond: #0b1220;
  --trait: #94a3b8;
  --accent: #38bdf8;
  --texte: #cbd5e1;
  --clair: #e2e8f0;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* 🔴 `hidden` EST UN ATTRIBUT, PAS UNE RÈGLE, et c'est un piège silencieux.
   Le navigateur le traduit par `[hidden] { display: none }` dans sa feuille par
   défaut — spécificité (0,1,0), c'est très peu. Plus bas, `#saisie` pose un
   `display: flex` avec la spécificité d'un ID : elle gagne, et l'attribut ne
   cache plus rien.

   ⚠️ Le JS posait bien `SAISIE.hidden = true`, la propriété DOM répondait bien
   `true`, et le champ des initiales s'affichait quand même — dès l'écran
   « PRÊT ? », et après chaque partie perdue. Rien ne se contredisait dans le
   code : c'est la cascade qui tranchait ailleurs. Signalé par Grégory le 27/08 :
   « on a le droit de mettre ses initiales qu'à la fin ! et si on a fait un
   record ! »

   ⇒ On réaffirme la règle ici, une fois pour toutes. Le `!important` n'est pas
   une facilité : c'est le seul poids qui batte un sélecteur d'ID sans qu'on ait
   à connaître d'avance tous les `display` de la feuille. Et il dit la bonne
   chose — un élément marqué caché doit l'être, quelle que soit sa mise en page.
   📌 Vaut pour tout ce qu'on cachera à l'avenir, pas seulement pour ce champ. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 2rem 1rem;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-user-select: none;
  user-select: none;
  overflow-x: hidden;
}

main { max-width: 62rem; margin: 0 auto; }

h1 {
  margin: 0;
  /* 🔠 « FORKLIFT CHALLENGE » fait deux fois la longueur de l'ancien titre :
     à interligne fixe il débordait sur les petits écrans. `clamp` le laisse
     grand là où il y a la place et le resserre là où il n'y en a pas — plutôt
     que de lui imposer partout la taille du cas le plus étroit. */
  font-size: clamp(1.05rem, 4.2vw, 1.7rem);
  letter-spacing: 0.22em;
  color: var(--clair);
}

.sous { margin: 0.3rem 0 1.5rem; color: var(--trait); font-size: 0.9rem; }
.sous strong { color: var(--accent); font-weight: 600; }

/* ── L'écran de jeu ───────────────────────────────────────────────────────── */
.ecran {
  position: relative;
  border: 1px solid #1e293b;
  border-radius: 10px;
  background: #0d1526;
  overflow: hidden;
}

svg { display: block; width: 100%; height: auto; }

.sol   { stroke: var(--trait); stroke-width: 2; }
.fond  { stroke: var(--trait); stroke-width: 1; stroke-opacity: 0.18; }

#chariot path, #chariot circle { fill: none; stroke: var(--trait); stroke-width: 2; }
#chariot .fourche { stroke: var(--accent); stroke-width: 3; }
#chariot .tablier { stroke-width: 2; }
#chariot .vitre   { stroke-opacity: 0.5; stroke-width: 1.4; }
#chariot .moyeu   { stroke-width: 1.4; stroke-opacity: 0.6; }

/* 🔴 LES ROUES SONT TOURNÉES PAR LE JEU, PAS PAR UNE ANIMATION CSS.
   Une rotation CSS à cadence fixe mentirait : le chariot accélère tout au long
   de la partie, et des roues qui tourneraient toujours à la même vitesse
   diraient le contraire de ce que montre le décor. C'est la boucle qui les
   fait tourner, à la vitesse réelle du sol.
   📌 Et il FAUT des rayons : deux cercles concentriques tournent sans que rien
   ne le montre. C'est le rayon qui rend la rotation visible. */
/* 🔴 LA ROTATION EST DÉCLARÉE EN CSS, ORIGINE SUR LA BOÎTE DU TRACÉ.
   Deux tentatives ont échoué avant celle-ci, et pour la même raison : le centre
   de rotation était passé À LA MAIN. Avec `rotate(a cx cy)` en attribut, les
   roues tournaient autour du chariot ; en repliant les rayons sur une origine
   locale, elles s'envolaient. À chaque fois, un centre calculé quelque part et
   appliqué ailleurs.
   ⇒ `transform-box: fill-box` + `transform-origin: center` : le navigateur
   prend le centre de la boîte du tracé lui-même. Les rayons forment une croix
   centrée, leur boîte est donc centrée sur l'axe. Plus aucun nombre à
   transmettre, donc plus rien à se tromper.
   📌 C'est la méthode qui fait tourner l'aiguille du chronomètre et les
   engrenages de iatopro.fr. Elle a déjà fait ses preuves — autant s'en servir. */
.rayons {
  stroke-opacity: 0.75;
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--tour, 0deg));
}
.mat--fixe { stroke-width: 2.4; }

.palette rect, .palette path { fill: none; stroke: var(--trait); stroke-width: 2; }
.palette .charge { stroke: var(--accent); }
.plot path { fill: none; stroke: #f87171; stroke-width: 2.4; }

/* ── Le bandeau d'état ────────────────────────────────────────────────────── */
.tableau {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.4rem;
  text-align: center;
  background: rgba(11, 18, 32, 0.82);
}
.tableau.parti { display: none; }
.tableau .titre { margin: 0; font-size: 1.4rem; letter-spacing: 0.18em; color: var(--accent); }
.tableau .aide  { margin: 0; font-size: 0.85rem; color: var(--trait); }

/* ── Sous l'écran ─────────────────────────────────────────────────────────── */
.scores {
  display: flex;
  justify-content: space-between;
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--trait);
}
.scores b { color: var(--clair); font-weight: 600; }

.regle { margin: 1.4rem 0 0; font-size: 0.82rem; line-height: 1.9; color: #64748b; }
.regle strong { color: var(--trait); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .roule .roue { animation: none; }
}

/* ── La saisie des initiales ───────────────────────────────────────────────
   Trois lettres, comme sur une borne. Le champ est court exprès : sa largeur
   dit combien on attend, sans qu'aucun texte n'ait à l'expliquer. */
#saisie {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
}
#saisie label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--trait);
}
#initiales {
  width: 4.2rem;
  padding: 0.35rem 0.4rem;
  background: #0b1220;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--clair);
  font: 700 1.1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
}
#initiales:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#saisie button {
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: 5px;
  color: var(--texte);
  font: 600 0.75rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
}
#saisie button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Le tableau des records ────────────────────────────────────────────────
   Une grille à trois colonnes plutôt qu'un tableau : le rang est porté par le
   compteur de la liste ordonnée, ce qui évite d'écrire dix nombres à la main
   et garde la sémantique d'un classement. */
.records { margin-top: 2.2rem; }
.records h2 {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  color: var(--trait);
  font-weight: 600;
}

.liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rang;
  border-top: 1px solid #1e293b;
}
.liste li {
  counter-increment: rang;
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.34rem 0.2rem;
  border-bottom: 1px solid #16203350;
  font-size: 0.9rem;
}
.liste li::before {
  content: counter(rang, decimal-leading-zero);
  color: #475569;
  font-size: 0.78rem;
}
.liste .nom { color: var(--clair); letter-spacing: 0.22em; }
.liste .pts { color: var(--accent); font-weight: 600; }
.liste .vide { display: block; color: #475569; font-size: 0.85rem; }

/* La ligne qu'on vient d'inscrire, pour la retrouver d'un coup d'œil. */
.liste .moi .nom, .liste .moi::before { color: var(--accent); }

.note { margin: 0.6rem 0 0; font-size: 0.75rem; color: #475569; }