/* ───────────── Qui a mangé Mamie ? — socle commun (TV, manette, site) ─────────────
   Direction : livre de contes peint à la veillée. Nuit bleu d'encre, papier crème,
   rouge Chaperon, or de bougie. Titres en Fraunces (doux, cartoon années 30),
   texte en Atkinson Hyperlegible (conçue pour la lisibilité maximale).
   Polices sous licence SIL OFL, servies en local (l'app TV n'a aucune dépendance réseau). */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 600 900;
  font-display: block;
}
@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('fonts/atkinson-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --encre: #0d0f22;      /* contours, ombres portées */
  --nuit: #161a36;       /* fond */
  --nuit-2: #20254a;     /* surfaces */
  --nuit-3: #2c3262;     /* surfaces hautes */
  --papier: #efe3c8;     /* texte, papier */
  --papier-2: #d8c7a3;   /* papier vieilli */
  --papier-ombre: #b9a57e;
  --chaperon: #c8323a;   /* action, loups */
  --chaperon-2: #9e2129;
  --bougie: #e8b04b;     /* accents, couronne, sélection */
  --foret: #2f4a3a;
  --brume: #a9a4c4;      /* texte secondaire sur nuit */
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background-color: var(--nuit);
  color: var(--papier);
  font-family: 'Atkinson', 'Trebuchet MS', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Titres : Fraunces très doux et « wonky », la voix visuelle du conte */
.display, h1, h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  line-height: 1.05;
  letter-spacing: -.01em;
}

/* Bouton « papier » : objet en carton avec épaisseur, s'enfonce quand on appuie */
.btn-paper, button.btn-paper {
  font: inherit; font-weight: 700; cursor: pointer; border: 0;
  background: var(--chaperon); color: var(--papier);
  border-radius: 16px; padding: 16px 26px;
  box-shadow: 0 6px 0 var(--chaperon-2), 0 10px 0 var(--encre);
  transform: translateY(0);
  transition: transform .09s ease-out, box-shadow .09s ease-out;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn-paper:active, .btn-paper.pressed {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--chaperon-2), 0 4px 0 var(--encre);
}
.btn-paper.ghost { background: var(--nuit-3); box-shadow: 0 6px 0 var(--nuit-2), 0 10px 0 var(--encre); }
.btn-paper.ghost:active, .btn-paper.ghost.pressed { box-shadow: 0 0 0 var(--nuit-2), 0 4px 0 var(--encre); }
.btn-paper.gold { background: var(--bougie); color: var(--encre); box-shadow: 0 6px 0 #a87a22, 0 10px 0 var(--encre); }
.btn-paper:disabled { opacity: .45; cursor: default; transform: none; }

button { font: inherit; cursor: pointer; }
button:focus { outline: none; }
button:focus-visible { outline: 4px solid var(--bougie); outline-offset: 4px; }

/* Jeton de joueur : une couleur par joueur, initiale au centre */
.c0 { --jeton: #c8323a; } .c1 { --jeton: #3f8fd2; } .c2 { --jeton: #e8b04b; } .c3 { --jeton: #4fa36b; }
.c4 { --jeton: #9a5fc9; } .c5 { --jeton: #e07a3f; } .c6 { --jeton: #2fb3b0; } .c7 { --jeton: #d65f9a; }
.c8 { --jeton: #8a9a3a; } .c9 { --jeton: #5b6fd8; } .c10 { --jeton: #b9763a; } .c11 { --jeton: #6fbf9b; }
.c12 { --jeton: #c94b6d; } .c13 { --jeton: #7f8aa8; } .c14 { --jeton: #d4a23a; } .c15 { --jeton: #4b8b8f; }
.c16 { --jeton: #a35a46; } .c17 { --jeton: #8f72b8; }

.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Le loup qui rôde (prowl.js) ── */
.prowl { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.prowl.local { position: absolute; }
.prowl-fg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background-size: cover; background-repeat: no-repeat; }
.prowl-fg.local { position: absolute; }
/* Le trajet (translate + scale) est une animation générée par prowl.js à partir du relief */
.prowl-x { position: absolute; left: 0; top: 0; transform: translate(-9999px, 0); transform-origin: 50% 100%; will-change: transform; visibility: hidden; }
/* Cycle de marche : une fenêtre d'une image, la bande de sprites glisse dessous (steps) */
.prowl-win { position: relative; width: 100%; height: 100%; overflow: hidden; }
.prowl-strip { position: absolute; left: 0; top: 0; display: block; max-width: none; will-change: transform; }
/* Ombre douce au sol : le loup est posé dans le décor, pas collé dessus */
.prowl-shadow {
  position: absolute; left: 18%; width: 64%; bottom: -3%; height: 9%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(5, 8, 20, .55) 0%, rgba(5, 8, 20, 0) 70%);
}
/* Il se fige et regarde derrière lui : un demi-tour rapide puis il repart */
.prowl.look .prowl-win { animation: look 1.8s ease-in-out; }
@keyframes look { 0%, 20% { transform: scaleX(1); } 30%, 60% { transform: scaleX(-1); } 70%, 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .prowl { display: none; } }