/* dixdoigts : un cahier d'écolier (jour) ou un tableau noir (nuit).
   Seule la ligne d'écriture est « cahier » ; le reste de l'interface reste sobre. */

:root {
  --papier: #f8fafd;
  --surface: #ffffff;
  --encre: #1e2a6b;
  --encre-douce: #56608f;
  --ligne: #c3cbeb;
  --ligne-forte: #9aa7dc;
  --marge: #d23b4c;
  --rouge: #c4122f;
  --vert: #2d7a4b;
  --fluo: #ffe14d;
  --sur-fluo: #1e2a6b;
  --focus: #1f5fd6;
  --texte: "Atkinson Hyperlegible", system-ui, sans-serif;
  --livre: "Literata", Georgia, serif;
  --pas: 0.25rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1e2b26;
    --surface: #24332d;
    --encre: #f1efe6;
    --encre-douce: #a9b5ae;
    --ligne: #34453d;
    --ligne-forte: #4a5e54;
    --marge: #e0707d;
    --rouge: #ff8f8f;
    --vert: #8fd19e;
    --fluo: #f2d95c;
    --sur-fluo: #1e2b26;
    --focus: #8ab4ff;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papier: #1e2b26;
  --surface: #24332d;
  --encre: #f1efe6;
  --encre-douce: #a9b5ae;
  --ligne: #34453d;
  --ligne-forte: #4a5e54;
  --marge: #e0707d;
  --rouge: #ff8f8f;
  --vert: #8fd19e;
  --fluo: #f2d95c;
  --sur-fluo: #1e2b26;
  --focus: #8ab4ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { font-size: 112.5%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1rem/1.5 var(--texte);
  -webkit-font-smoothing: antialiased;
}

/* Le focus placé par le jeu sur un titre sert aux lecteurs d'écran : pas de cadre. */
h1[tabindex="-1"]:focus, p[tabindex="-1"]:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Cadre ------------------------------------------------------------------ */

.entete, main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

.marque {
  font: italic 500 1.75rem/1 var(--livre);
  color: var(--encre);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.compte { display: flex; align-items: baseline; gap: 1rem; color: var(--encre-douce); }
.compte form { margin: 0; }

main { padding-bottom: 4rem; }

h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
p { margin: 0 0 0.75rem; max-width: 68ch; }
a { color: var(--encre); text-underline-offset: 0.2em; }
a:hover { color: var(--encre-douce); }
.discret { color: var(--encre-douce); }

/* --- Boutons et champs -------------------------------------------------------- */

button, .bouton {
  font: 700 1rem/1 var(--texte);
  color: var(--encre);
  background: var(--surface);
  border: 2px solid var(--encre);
  border-radius: 6px;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  min-height: 2.75rem;
}

button:hover { background: var(--ligne); }
button.principal { background: var(--encre); color: var(--papier); }
button.principal:hover { background: var(--encre-douce); border-color: var(--encre-douce); }
button.lien {
  border: none; background: none; padding: 0; min-height: 0;
  font-weight: 400; text-decoration: underline; color: var(--encre-douce);
}
button:disabled { opacity: 0.45; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }

label { display: block; font-weight: 700; margin-bottom: 0.35rem; }

input[type="text"], input[type="password"] {
  font: 400 1.1rem/1.4 var(--texte);
  color: var(--encre);
  background: var(--surface);
  border: 2px solid var(--ligne-forte);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  width: 100%;
  max-width: 24rem;
}

input[type="text"]:focus, input[type="password"]:focus { border-color: var(--focus); outline: none; }

.erreur { color: var(--rouge); font-weight: 700; }
.succes { color: var(--vert); font-weight: 700; }

/* --- Connexion ---------------------------------------------------------------- */

.connexion { max-width: 26rem; }
.connexion form > div { margin-bottom: 1.1rem; }

/* --- Sommaire (menu) ---------------------------------------------------------- */

.sommaire { list-style: none; padding: 0; margin: 0; }

.sommaire button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--ligne);
  font-weight: 400;
  min-height: 0;
}

.sommaire button:hover, .sommaire button[aria-expanded="true"] { background: var(--surface); }

.sommaire .nom { font-weight: 700; }
.sommaire .desc { display: block; color: var(--encre-douce); font-size: 0.9rem; }
/* Points de conduite du sommaire, entre le mode et le record. */
.sommaire .points {
  align-self: end;
  border-bottom: 2px dotted var(--ligne-forte);
  margin-bottom: 0.4rem;
  min-width: 1rem;
}
.sommaire .record { font-variant-numeric: tabular-nums; color: var(--encre); white-space: nowrap; }
.sommaire .groupe {
  display: block; padding: 1.25rem 0.25rem 0.25rem; color: var(--encre-douce); font-size: 0.9rem;
}

.panneau {
  padding: 0.5rem 0 1.25rem 1rem;
  border-left: 3px solid var(--marge);
  margin: 0.5rem 0 0.75rem;
}

fieldset { border: none; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 700; margin-bottom: 0.4rem; }
.choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choix label {
  font-weight: 400; margin: 0;
  border: 2px solid var(--ligne-forte); border-radius: 6px;
  padding: 0.4rem 0.8rem; cursor: pointer;
}
.choix label { position: relative; }
/* Le bouton radio, invisible, couvre toute l'étiquette : un clic n'importe où la coche. */
.choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix input:checked + span { font-weight: 700; }
.choix label:has(input:checked) { border-color: var(--encre); background: var(--surface); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- Tableaux (classements) -------------------------------------------------- */

table { border-collapse: collapse; width: 100%; max-width: 32rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; padding-bottom: 0.4rem; }
th, td { text-align: left; padding: 0.35rem 0.5rem 0.35rem 0; border-bottom: 1px solid var(--ligne); }
th { font-weight: 400; color: var(--encre-douce); font-size: 0.9rem; }
th[scope="row"] { color: var(--encre); font-size: 1rem; }
td.nombre, th.nombre { text-align: right; }
tr.moi td { font-weight: 700; }

/* --- Le cahier : la ligne d'écriture ----------------------------------------- */

.cahier {
  --interligne: 2.4rem;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 4px;
  padding: 0.6rem 1rem 0.6rem 3.25rem;
  font: 400 1.45rem/var(--interligne) var(--livre);
  overflow: hidden;
}

/* Grands carreaux (Seyès) : une ligne forte sous chaque ligne de texte, trois fines
   entre deux. Dessinés sur la zone de texte et défilant avec elle (« local »),
   ils restent calés sur les mots. */
.cahier .lignes, .cahier .reglure {
  background-image:
    linear-gradient(to bottom, transparent calc(var(--interligne) * 0.78), var(--ligne-forte) calc(var(--interligne) * 0.78),
      var(--ligne-forte) calc(var(--interligne) * 0.78 + 1px), transparent calc(var(--interligne) * 0.78 + 1px)),
    linear-gradient(to bottom, var(--ligne) 1px, transparent 1px);
  background-size: 100% var(--interligne), 100% calc(var(--interligne) / 4);
  background-position: 0 0, 0 calc(var(--interligne) * 0.78 - var(--interligne) / 4 * 3);
  background-attachment: local;
}

/* La marge rouge. */
.cahier::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 2.4rem;
  border-left: 2px solid var(--marge);
}

.cahier .lignes { height: calc(var(--interligne) * 2); overflow: hidden; }
.cahier .mot { color: var(--encre-douce); padding: 0 0.12em; border-radius: 2px; }
.cahier .mot.juste { color: var(--encre); }
.cahier .mot.faux {
  color: var(--rouge);
  text-decoration: underline wavy var(--rouge);
  text-decoration-skip-ink: none;
  text-underline-offset: 0.2em;
}
/* Le mot à taper, passé au surligneur. */
.cahier .mot.courant {
  color: var(--sur-fluo);
  background: linear-gradient(100deg, transparent 0 2%, var(--fluo) 4% 96%, transparent 98%);
}
.cahier .mot.courant.erreur { background: none; color: var(--rouge); outline: 2px solid var(--rouge); }

/* Mots justes et faux hors du cahier (bilan de Mémoire). */
.direct .mot.faux {
  color: var(--rouge);
  text-decoration: underline wavy var(--rouge);
  text-underline-offset: 0.2em;
}

.saisie-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0; }
.saisie-ligne input { font: 400 1.35rem/1.4 var(--livre); max-width: 22rem; }
.saisie-ligne input.erreur { border-color: var(--rouge); color: var(--rouge); }
.chrono { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.2rem; min-width: 4ch; }
.chrono.presse { color: var(--rouge); }
.vitesse { font-variant-numeric: tabular-nums; color: var(--encre-douce); }
.source { font: italic 400 0.95rem/1.4 var(--livre); color: var(--encre-douce); margin: 0.25rem 0 0.75rem; }

/* La note, écrite à l'encre rouge dans la marge, comme une correction. */
.note {
  display: inline-block;
  font: italic 500 2.6rem/1 var(--livre);
  color: var(--rouge);
  border: 3px solid var(--rouge);
  border-radius: 50% 46% 52% 48% / 55% 50% 50% 45%;
  padding: 0.6rem 1.1rem;
  margin: 0.5rem 0 1rem;
  transform: rotate(-3deg);
}
.note small { font-size: 0.9rem; display: block; text-align: center; font-style: normal; }

dl.stats { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.25rem; margin: 0 0 1.25rem; }
dl.stats dt { color: var(--encre-douce); }
dl.stats dd { margin: 0; font-variant-numeric: tabular-nums; }

/* --- Barres de course, jauges ------------------------------------------------ */

.barre { height: 0.8rem; background: var(--ligne); border-radius: 4px; overflow: hidden; }
.barre > span { display: block; height: 100%; background: var(--encre); }
.barre.moi > span { background: var(--vert); }
.jauge { height: 0.5rem; background: var(--ligne); border-radius: 3px; overflow: hidden; margin: 0.75rem 0; }
.jauge > span { display: block; height: 100%; background: var(--fluo); }

.coureurs { list-style: none; padding: 0; margin: 1rem 0; }
.coureurs li { display: grid; grid-template-columns: 9rem 1fr 11rem; gap: 0.75rem; align-items: center; padding: 0.3rem 0; }
.coureurs li.moi .nom { font-weight: 700; }
.coureurs .info { font-variant-numeric: tabular-nums; color: var(--encre-douce); font-size: 0.95rem; }

/* --- Salons ------------------------------------------------------------------ */

.joueurs { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.joueurs li { padding: 0.45rem 0; border-bottom: 1px solid var(--ligne); display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.joueurs .nom { font-weight: 700; min-width: 11rem; }
.joueurs .etat { color: var(--encre-douce); }
.joueurs li.elimine .nom { text-decoration: line-through; color: var(--encre-douce); }
.joueurs li.tour { background: var(--surface); box-shadow: inset 4px 0 0 var(--marge); padding-left: 0.6rem; }
.vies { color: var(--rouge); letter-spacing: 0.1em; }
.direct { font: 400 1.15rem/1.3 var(--livre); }
.direct mark { background: var(--fluo); color: var(--sur-fluo); padding: 0 0.1em; }

/* La syllabe de Bomberword, sur la ligne du cahier. */
.syllabe {
  display: inline-block;
  font: 700 3rem/1 var(--livre);
  letter-spacing: 0.08em;
  padding: 0.5rem 1.5rem;
  background: var(--fluo);
  color: var(--sur-fluo);
  border-radius: 4px;
  margin: 0.5rem 0 1rem;
}

.journal { list-style: none; padding: 0; margin: 1.5rem 0 0; color: var(--encre-douce); font-size: 0.95rem; }
.journal li { padding: 0.15rem 0; }

.mots-secrets { font: 700 1.6rem/1.2 var(--livre); }

@media (max-width: 34rem) {
  html { font-size: 106.25%; }
  .entete { flex-wrap: wrap; row-gap: 0.4rem; }
  .compte { flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.9rem; }
  .coureurs li { grid-template-columns: 1fr; gap: 0.2rem; }
  .cahier { padding-left: 2.5rem; font-size: 1.25rem; }
  .cahier::before { left: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .note { transform: none; }
}