/* Base commune : variables (couleurs, tailles), remise à zéro, polices.
   Tout le monde lit ce fichier, seul l'architecte le modifie (sur demande). */

:root {
  /* Polices : Selawik/Segoe UI pour le faux Windows, pixel pour le jeu */
  --police-windows: "Segoe UI Variable", "Segoe UI", Selawik, system-ui, sans-serif;
  --police-jeu: "Pixelify Sans", "Press Start 2P", monospace;

  /* Couleurs du jeu (style blocs) */
  --jeu-herbe: #5da130;
  --jeu-terre: #8b5a2b;
  --jeu-pierre: #8a8a8a;
  --jeu-ciel: #8fd3ff;
  --jeu-texte: #1d1d1d;
  --jeu-bulle: #fffdf5;
  --jeu-accent: #ffcc33;      /* surbrillance, flèche d'aide */
  --jeu-ombre: rgb(0 0 0 / .65); /* assombrissement du projecteur */

  /* Tailles minimales des cibles de clic dans le JEU (pas dans le faux Windows) */
  --jeu-cible-min: 56px;

  /* Empilement des couches */
  --z-pc: 0;
  --z-ecrans: 100;
  --z-jeu: 1000;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--police-windows); background: #000; color: var(--jeu-texte); }

/* Les 3 couches occupent tout l'écran */
#pc, #ecrans, #jeu { position: fixed; inset: 0; }
#pc { z-index: var(--z-pc); }
#ecrans { z-index: var(--z-ecrans); pointer-events: none; }
#jeu { z-index: var(--z-jeu); pointer-events: none; }
#ecrans > *, #jeu > * { pointer-events: auto; }

/* Pas d'animation pour qui l'a demandé au système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Écran d'accueil provisoire */
.accueil {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-content: center; text-align: center;
  background: var(--jeu-ciel); font-family: var(--police-jeu);
}
.accueil h1 { font-size: clamp(2rem, 5vw, 4rem); margin: 0 0 1rem; }