[hidden] { display: none !important; }
/* =========================================================================
   VERTIGE — style « Cartoon pop »
   Référence : Toon Blast (dessin, contours encre épais, bonbon saturé),
   Candy Crush (juice, HUD en badges). Pas de beige, pas de sobriété,
   pas de néon. Palette exacte : src/data/couleurs.js (docs/CONTRATS.md §2).
   ========================================================================= */

:root {
  /* --- Nuit étoilée « Carrousel cosmique » (cohérent avec le canvas, cf. CONTRATS §2/§5) --- */
  --nuit-haut: #1a1650;
  --nuit-milieu: #2b2270;
  --nuit-bas: #0f0c2c;
  --nuit-hud: #1d1b3a;       /* bandeaux HUD / footer */
  --nuit-hud-pied: #241f55;  /* léger écart de teinte pour le footer */
  --nuit-contour: rgba(255, 248, 231, .25); /* contour blanc cassé, là où l'encre ne se voit plus sur la nuit */
  --nuit-voile: rgba(15, 12, 44, .8);       /* voile des couches plein écran (menu excepté, opaque) */
  --texte-nuit: #fff8e7;

  /* --- Étoiles (~120, 3 tailles/couleurs) + nébuleuses : générées, positions fixes --- */
  --etoiles-fines:
    68.7vw 51.5vh 0 .25px #fff3c4,
    43.5vw 7.8vh 0 .25px #ffcc1f,
    90.2vw 35.7vh 0 .75px #fff3c4,
    18.9vw 1.4vh 0 .75px #fff3c4,
    78.3vw 33.6vh 0 .75px #fff3c4,
    10.9vw 36.6vh 0 .25px #ffcc1f,
    36.7vw 22.6vh 0 .75px #bfe6ff,
    81.2vw 73.5vh 0 .75px #bfe6ff,
    32.7vw 15.8vh 0 .25px #fff3c4,
    20.3vw 21vh 0 .75px #fff3c4,
    92.5vw 43.5vh 0 .75px #fff3c4,
    29.7vw 24.6vh 0 .75px #fff3c4,
    13.4vw 15.8vh 0 .75px #fff3c4,
    11vw 34.6vh 0 .25px #fff3c4,
    13vw 84.2vh 0 .25px #fff3c4,
    46.7vw 48.4vh 0 .25px #ffcc1f,
    61vw 50.5vh 0 .75px #fff3c4,
    23.9vw 48.5vh 0 .25px #fff3c4,
    63.6vw 37.5vh 0 .25px #fff3c4,
    82vw 21.7vh 0 .75px #fff3c4,
    6.2vw 1vh 0 .25px #bfe6ff,
    37.2vw 56.5vh 0 .25px #fff3c4,
    21.5vw 16.9vh 0 .25px #fff3c4,
    63.2vw 7.1vh 0 .25px #ffcc1f,
    3.7vw 28.4vh 0 .75px #fff3c4,
    85.7vw 28.3vh 0 .25px #fff3c4,
    90.9vw 50.2vh 0 .75px #fff3c4,
    17.9vw 47.4vh 0 .75px #fff3c4,
    26.4vw 42.1vh 0 .75px #bfe6ff,
    58.4vw 45.4vh 0 .25px #fff3c4,
    68.9vw 94.7vh 0 .75px #fff3c4,
    15.1vw 12.5vh 0 .25px #fff3c4,
    54.2vw 3.7vh 0 .25px #fff3c4,
    7.2vw 6.8vh 0 .25px #bfe6ff,
    6.7vw 50.7vh 0 .25px #ffcc1f,
    80vw 15.3vh 0 .75px #fff3c4,
    72.5vw 29.2vh 0 .25px #fff3c4,
    75.5vw 90.4vh 0 .75px #fff3c4,
    57.6vw 39.9vh 0 .25px #fff3c4,
    78.8vw 69.5vh 0 .25px #bfe6ff,
    5.6vw 85.1vh 0 .25px #fff3c4,
    42.6vw 82vh 0 .25px #bfe6ff,
    97.1vw 65.4vh 0 .75px #fff3c4,
    54.8vw 13.8vh 0 .75px #ffcc1f,
    77.4vw 86.7vh 0 .25px #fff3c4,
    47.8vw 93.3vh 0 .75px #fff3c4,
    55.9vw 25.4vh 0 .75px #fff3c4,
    64.4vw 98.3vh 0 .25px #fff3c4,
    58.2vw 89.6vh 0 .75px #fff3c4,
    86.7vw 61.2vh 0 .25px #bfe6ff,
    65vw 79.4vh 0 .75px #ffcc1f,
    86.4vw 8.9vh 0 .25px #fff3c4,
    26.7vw 1.4vh 0 .25px #fff3c4,
    74.5vw 47.8vh 0 .75px #bfe6ff,
    8.1vw 53.5vh 0 .25px #fff3c4,
    66.1vw 6.9vh 0 .25px #fff3c4,
    96.1vw 64.7vh 0 .75px #fff3c4,
    22.9vw 62.5vh 0 .25px #fff3c4,
    89.2vw 83.4vh 0 .75px #fff3c4,
    83.3vw 93.6vh 0 .25px #fff3c4,
    96.2vw 39.8vh 0 .75px #fff3c4,
    3.2vw 46.2vh 0 .25px #bfe6ff,
    59.2vw 57.8vh 0 .25px #fff3c4,
    94.2vw 52.8vh 0 .25px #bfe6ff,
    76.6vw 53.2vh 0 .75px #fff3c4,
    65.7vw 90.2vh 0 .75px #fff3c4,
    68.9vw 45.3vh 0 .75px #fff3c4,
    86.8vw 31.7vh 0 .25px #fff3c4,
    92.8vw 97.8vh 0 .75px #fff3c4,
    55.5vw 32.9vh 0 .75px #fff3c4,
    67.7vw 42.9vh 0 .25px #fff3c4,
    13.7vw 25.3vh 0 .25px #fff3c4,
    51.7vw 35.8vh 0 .75px #ffcc1f,
    76.7vw 50.8vh 0 .75px #fff3c4,
    36.2vw 87.7vh 0 .25px #fff3c4,
    15.9vw 48.9vh 0 .25px #ffcc1f,
    25.7vw 35vh 0 .25px #fff3c4,
    66.5vw 75.9vh 0 .25px #fff3c4,
    55.4vw 77.9vh 0 .75px #bfe6ff,
    67.3vw 6.3vh 0 .25px #fff3c4,
    12.5vw 6.8vh 0 .25px #fff3c4,
    52.3vw 2.8vh 0 .75px #fff3c4,
    26.6vw 36.9vh 0 .25px #bfe6ff,
    54.8vw 87.6vh 0 .25px #fff3c4,
    81vw 18.7vh 0 .25px #fff3c4,
    39.5vw 40.1vh 0 .25px #bfe6ff,
    33.3vw 22.9vh 0 .75px #fff3c4,
    82.2vw 16.8vh 0 .25px #ffcc1f,
    57.3vw 52.5vh 0 .25px #fff3c4,
    96.9vw 85.6vh 0 .25px #fff3c4,
    12.6vw 42vh 0 .25px #fff3c4,
    97.5vw 84.6vh 0 .75px #fff3c4,
    28.9vw 38.8vh 0 .25px #fff3c4,
    93.8vw 72vh 0 .75px #bfe6ff,
    15.8vw 18.3vh 0 .25px #bfe6ff;
  --etoiles-grosses:
    85.6vw 45.5vh 0 1.5px #fff3c4,
    55.2vw 91.8vh 0 1.5px #fff3c4,
    13.7vw 52.6vh 0 1.5px #bfe6ff,
    11.7vw 16.8vh 0 1.5px #ffcc1f,
    20.8vw 31.6vh 0 1.5px #fff3c4,
    50vw 18.4vh 0 1.5px #fff3c4,
    2.8vw 25.5vh 0 1.5px #ffcc1f,
    19.6vw 47.5vh 0 1.5px #fff3c4,
    11.4vw 81.3vh 0 1.5px #fff3c4,
    49.5vw 82.8vh 0 1.5px #fff3c4,
    50.7vw 68.4vh 0 1.5px #fff3c4,
    34.6vw 82.6vh 0 1.5px #fff3c4,
    35.1vw 6.3vh 0 1.5px #bfe6ff,
    7.9vw 73.6vh 0 1.5px #fff3c4,
    17vw 9.3vh 0 1.5px #fff3c4,
    86.3vw 66.7vh 0 1.5px #fff3c4,
    46vw 16.4vh 0 1.5px #fff3c4,
    26.8vw 95.3vh 0 1.5px #fff3c4,
    54.6vw 25vh 0 1.5px #fff3c4,
    1.1vw 38.4vh 0 1.5px #fff3c4,
    50.3vw 20.7vh 0 1.5px #fff3c4,
    1.5vw 26.9vh 0 1.5px #ffcc1f,
    40.2vw 5.1vh 0 1.5px #ffcc1f,
    30.8vw 23.8vh 0 1.5px #fff3c4,
    52.9vw 74.6vh 0 1.5px #fff3c4,
    85.6vw 45.5vh 6px 1.5px rgba(255, 243, 196, 0.5),
    55.2vw 91.8vh 6px 1.5px rgba(255, 243, 196, 0.5),
    13.7vw 52.6vh 6px 1.5px rgba(191, 230, 255, 0.5),
    11.7vw 16.8vh 6px 1.5px rgba(255, 204, 31, 0.5),
    20.8vw 31.6vh 6px 1.5px rgba(255, 243, 196, 0.5),
    50vw 18.4vh 6px 1.5px rgba(255, 243, 196, 0.5),
    2.8vw 25.5vh 6px 1.5px rgba(255, 204, 31, 0.5),
    19.6vw 47.5vh 6px 1.5px rgba(255, 243, 196, 0.5),
    11.4vw 81.3vh 6px 1.5px rgba(255, 243, 196, 0.5),
    49.5vw 82.8vh 6px 1.5px rgba(255, 243, 196, 0.5),
    50.7vw 68.4vh 6px 1.5px rgba(255, 243, 196, 0.5),
    34.6vw 82.6vh 6px 1.5px rgba(255, 243, 196, 0.5),
    35.1vw 6.3vh 6px 1.5px rgba(191, 230, 255, 0.5),
    7.9vw 73.6vh 6px 1.5px rgba(255, 243, 196, 0.5),
    17vw 9.3vh 6px 1.5px rgba(255, 243, 196, 0.5),
    86.3vw 66.7vh 6px 1.5px rgba(255, 243, 196, 0.5),
    46vw 16.4vh 6px 1.5px rgba(255, 243, 196, 0.5),
    26.8vw 95.3vh 6px 1.5px rgba(255, 243, 196, 0.5),
    54.6vw 25vh 6px 1.5px rgba(255, 243, 196, 0.5),
    1.1vw 38.4vh 6px 1.5px rgba(255, 243, 196, 0.5),
    50.3vw 20.7vh 6px 1.5px rgba(255, 243, 196, 0.5),
    1.5vw 26.9vh 6px 1.5px rgba(255, 204, 31, 0.5),
    40.2vw 5.1vh 6px 1.5px rgba(255, 204, 31, 0.5),
    30.8vw 23.8vh 6px 1.5px rgba(255, 243, 196, 0.5),
    52.9vw 74.6vh 6px 1.5px rgba(255, 243, 196, 0.5);
  --nebuleuses:
    radial-gradient(circle 65vmax at 6% 8%, rgba(176, 76, 255, .25) 0%, transparent 65%),
    radial-gradient(circle 70vmax at 94% 92%, rgba(34, 211, 238, .25) 0%, transparent 65%);

  /* --- Encre & panneaux --- */
  --encre: #1d1b3a;
  --encre-25: rgba(29, 27, 58, .25);
  --encre-15: rgba(29, 27, 58, .15);
  --panneau: #fff8e7;

  /* --- Bonbons (boutons / badges), chacun clair → saturé → foncé --- */
  --vert-clair: #96f279;   --vert: #5ad341;   --vert-fonce: #21841c;
  --orange-clair: #ffc766; --orange: #ff9f1c; --orange-fonce: #c96e00;
  --rose-clair: #ff9dc9;   --rose: #ff5fa2;   --rose-fonce: #c72d75;
  --bleu-clair: #7fc0ff;   --bleu: #2f8cff;   --bleu-fonce: #123f9a;
  --rouge-clair: #ff8095;  --rouge: #ff3b5c;  --rouge-fonce: #8a1030;
  --jaune-clair: #fff1a0;  --jaune: #ffcc1f;  --jaune-fonce: #9a6a00;
  --violet-clair: #ddabff; --violet: #b04cff; --violet-fonce: #4f1a8a;
  --gris-eteint: #d9d6e6;  --gris-eteint-bord: #a9a5c2;

  --rayon: 20px;
  --rayon-bouton: 18px;
  --rayon-petit: 12px;

  --police-titre: "Arial Rounded MT Bold", "Trebuchet MS", "Nunito", "Segoe UI", sans-serif;
  --police-corps: "Trebuchet MS", "Segoe UI", Verdana, Arial, sans-serif;
}

/* --- Reset minimal --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--police-corps);
  color: var(--encre);
  /* Le canvas dessine sa propre nuit étoilée derrière le plateau (rendu.js) ; le
     body porte le même dégradé pour les écrans sans canvas peint (menu,
     mode Test) : #scene est transparent tant que rien n'y est dessiné. */
  background: var(--nebuleuses), linear-gradient(180deg, var(--nuit-haut) 0%, var(--nuit-milieu) 55%, var(--nuit-bas) 100%);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
input, select, textarea { user-select: text; -webkit-user-select: text; }
h1, h2, h3 { margin: 0; font-family: var(--police-titre); font-weight: 900; }
p { margin: 0; }
button { font-family: inherit; }
img, canvas { max-width: 100%; }

/* --- Ciel étoilé (Carrousel cosmique), purement CSS : ~120 étoiles (--etoiles-fines
   = petites + moyennes statiques, --etoiles-grosses = grosses + halo, scintillent). --- */
body::before, body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: transparent;
}
body::before { box-shadow: var(--etoiles-fines); }
body::after {
  box-shadow: var(--etoiles-grosses);
  animation: scintille-etoiles 5s ease-in-out infinite;
}
@keyframes scintille-etoiles {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* =========================================================================
   Structure générale
   ========================================================================= */

#app {
  height: 100dvh;
  width: 100%;
  position: relative;
  z-index: 1; /* au-dessus des nuages CSS du body : en jeu, le canvas dessine ses propres nuages */
  display: flex;
  flex-direction: column;
}

/* --- HUD (en-tête) : bandeau de nuit, badges compacts --- */
#hud.hud {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--nuit-hud);
  border-bottom: 3px solid var(--nuit-contour);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  position: relative;
  z-index: 5;
}

.hud-ligne-haut { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
.hud-salle {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: .85rem;
  color: var(--texte-nuit);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw;
}
.hud-coups {
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, var(--rouge-clair), var(--rouge));
  border: 3px solid var(--encre);
  border-radius: 999px;
  padding: 1px 12px;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 1px var(--encre);
  paint-order: stroke fill;
  box-shadow: 0 3px 0 var(--rouge-fonce);
  font-variant-numeric: tabular-nums;
}

/* --- Jauge de rotation : étoiles allumées / éteintes --- */
.hud-jauge { display: flex; align-items: center; gap: 2px; flex: none; }
.jauge-pastille {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--gris-eteint);
  -webkit-text-stroke: 1px var(--gris-eteint-bord);
  paint-order: stroke fill;
}
.jauge-pastille.allumee {
  color: var(--jaune);
  -webkit-text-stroke: 1px var(--jaune-fonce);
}

/* --- XP : barre verte cernée + niveau en pastille ronde --- */
.hud-xp { display: flex; align-items: center; gap: 6px; flex: 1 1 130px; min-width: 100px; }
.niveau-pastille {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, var(--jaune-clair), var(--jaune));
  border: 2.5px solid var(--encre);
  color: var(--encre);
  font-weight: 900;
  font-size: .8rem;
}
.barre-xp {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--encre);
  box-shadow: inset 0 2px 3px rgba(29, 27, 58, .3);
  overflow: hidden;
}
.barre-xp .remplissage {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, var(--vert-clair), var(--vert));
  border-radius: 999px 0 0 999px;
  transition: width .3s ease;
}
/* Fraction ≥ 80 % : la barre pulse pour annoncer la montée de niveau imminente. */
.barre-xp.imminent { animation: pulse-niveau 1s ease-in-out infinite; }
@keyframes pulse-niveau {
  0%, 100% { box-shadow: inset 0 2px 3px rgba(29, 27, 58, .3), 0 0 0 0 rgba(255, 204, 31, .7); }
  50% { box-shadow: inset 0 2px 3px rgba(29, 27, 58, .3), 0 0 9px 2px rgba(255, 204, 31, .9); }
}

/* --- Objectif : premier élément de la 2e ligne du HUD, gros badge + barre --- */
.hud-objectif {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex: 1 1 100%;
}
.objectif-badge {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  background: linear-gradient(180deg, var(--bleu-clair), var(--bleu));
  border: 3px solid var(--encre);
  border-radius: 999px;
  padding: 4px 16px 4px 10px;
  box-shadow: 0 3px 0 var(--bleu-fonce);
  transition: background .2s ease, box-shadow .2s ease;
}
.objectif-badge.atteint {
  background: linear-gradient(180deg, var(--vert-clair), var(--vert));
  box-shadow: 0 3px 0 var(--vert-fonce);
}
.objectif-badge.pop { animation: objectif-pop .25s ease; }
@keyframes objectif-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.objectif-texte {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 1px var(--encre);
  paint-order: stroke fill;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.objectif-icone { flex: none; width: 26px; height: 26px; position: relative; display: inline-block; }
.objectif-icone.bille-mini { width: 20px; height: 20px; }
.objectif-coche {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  color: var(--vert-fonce);
  font-weight: 900; font-size: .9rem;
  border: 2px solid var(--encre);
}

/* Icône score : étoile dessinée en CSS (clip-path + contour par drop-shadow). */
.icone-score {
  background: linear-gradient(180deg, var(--jaune-clair), var(--jaune));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter:
    drop-shadow(1.2px 0 0 var(--encre)) drop-shadow(-1.2px 0 0 var(--encre))
    drop-shadow(0 1.2px 0 var(--encre)) drop-shadow(0 -1.2px 0 var(--encre));
}
/* Icône pierres/Astéroïdes : rocher facetté dessiné en CSS. */
.icone-pierres {
  background: linear-gradient(160deg, #c7cee0, #7982a1);
  clip-path: polygon(22% 8%, 58% 0%, 88% 22%, 100% 58%, 74% 92%, 38% 100%, 6% 78%, 0% 42%);
  filter:
    drop-shadow(1.2px 0 0 var(--encre)) drop-shadow(-1.2px 0 0 var(--encre))
    drop-shadow(0 1.2px 0 var(--encre)) drop-shadow(0 -1.2px 0 var(--encre));
}
/* Icône ballons/Étoiles filantes : tête brillante + traînée. */
.icone-ballons::before {
  content: '';
  position: absolute; right: 1px; bottom: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--jaune-clair) 55%, var(--jaune) 100%);
  box-shadow: 0 0 5px 1px rgba(255, 255, 255, .85), 0 0 0 1.5px var(--encre);
}
.icone-ballons::after {
  content: '';
  position: absolute; right: 5px; bottom: 6px;
  width: 19px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%);
  transform: rotate(-42deg);
  transform-origin: right center;
}

/* --- Barre de progression de l'objectif --- */
.objectif-barre {
  width: min(220px, 60vw);
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  border: 2px solid var(--nuit-contour);
  overflow: hidden;
}
.objectif-remplissage {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--jaune-clair), var(--jaune));
  transition: width .3s ease, background .3s ease;
}
.objectif-remplissage.presque {
  background: linear-gradient(90deg, var(--vert-clair), var(--vert));
}

/* --- Annonce de rotation : badge rose qui pulse --- */
.hud-annonce {
  display: inline-flex; align-items: center; flex: none;
  background: linear-gradient(180deg, var(--rose-clair), var(--rose));
  border: 3px solid var(--encre);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: .8rem;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 1px var(--encre);
  paint-order: stroke fill;
  box-shadow: 0 3px 0 var(--rose-fonce);
  animation: pulse-annonce 1.1s ease-in-out infinite;
}
@keyframes pulse-annonce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* --- Prochaines entrées (compétence Prévoyance) --- */
.hud-entrees { overflow: hidden; max-width: 100%;
  display: flex; align-items: center; gap: 6px; flex: none;
  background: var(--panneau);
  border: 2px solid var(--encre-15);
  border-radius: 999px;
  padding: 2px 10px;
}
.hud-entrees-label { font-size: .7rem; opacity: .75; }
.hud-entrees-billes { display: flex; gap: 4px; }

/* --- Effets actifs : petites pilules jaunes --- */
.hud-effets { display: flex; gap: 4px; flex-wrap: wrap; flex: none; }
.hud-effet {
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--jaune);
  border: 2px solid var(--encre);
  color: var(--encre);
}
/* Dernier tour restant : clignotement franc plutôt qu'un fondu. */
.hud-effet.clignote { animation: clignote-effet 1s steps(2, jump-none) infinite; }
@keyframes clignote-effet { 50% { opacity: .3; } }

/* --- Bille de verre miniature (gomme brillante) --- */
.bille-mini {
  --c: #999999;
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 68% 75%, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 55%),
    var(--c);
  border: 1.5px solid var(--encre);
  box-shadow: 0 1px 0 rgba(29, 27, 58, .3);
}

/* --- Scène / plateau : occupe TOUT #scene, aucune marge --- */
#scene {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  background: transparent; /* le ciel du body transparaît tant que le canvas n'a rien peint */
}
#plateau {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* --- Commandes (footer) : trois touches bonbon identiques (bleu) --- */
#commandes {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: var(--nuit-hud-pied);
  border-top: 3px solid var(--nuit-contour);
  box-shadow: 0 -4px 0 rgba(0, 0, 0, .35);
  position: relative;
  z-index: 5;
}
#commandes .touche { flex: 1 1 0; font-size: 2rem; padding: .45em; position: relative; touch-action: manipulation; -webkit-touch-callout: none; }
/* Jauge vide : la rotation coûte un coup (D13) — pastille sur les touches */
#commandes .touche-payante::after {
  content: '−1 coup';
  position: absolute; top: -10px; right: -4px;
  font-size: .6rem; line-height: 1; padding: 4px 7px;
  background: var(--rose, #ff5fa2); color: #fff;
  border: 2px solid var(--encre); border-radius: 999px;
  -webkit-text-stroke: 0; box-shadow: 0 2px 0 var(--encre-15);
}

/* =========================================================================
   Boutons — bonbon 3D
   ========================================================================= */

.touche {
  appearance: none;
  min-height: 48px;
  min-width: 48px;
  padding: .6em 1.2em;
  border: 3px solid var(--encre);
  border-radius: var(--rayon-bouton);
  background: linear-gradient(180deg, var(--bleu-clair), var(--bleu));
  color: #fff;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  -webkit-text-stroke: 1.5px var(--encre);
  paint-order: stroke fill;
  box-shadow: 0 6px 0 var(--bleu-fonce), 0 10px 16px var(--encre-15);
  transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.touche:hover { transform: scale(1.045); }
.touche:active {
  transform: translateY(4px) scale(1);
  box-shadow: 0 2px 0 var(--bleu-fonce), 0 4px 8px var(--encre-15);
}
.touche:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(.35);
  box-shadow: 0 3px 0 var(--bleu-fonce);
}
.touche-accent {
  background: linear-gradient(180deg, var(--vert-clair), var(--vert));
  box-shadow: 0 6px 0 var(--vert-fonce), 0 10px 16px var(--encre-15);
}
.touche-accent:active { box-shadow: 0 2px 0 var(--vert-fonce), 0 4px 8px var(--encre-15); }
.touche-accent:disabled { box-shadow: 0 3px 0 var(--vert-fonce); }
.touche-orange {
  background: linear-gradient(180deg, var(--orange-clair), var(--orange));
  box-shadow: 0 6px 0 var(--orange-fonce), 0 10px 16px var(--encre-15);
}
.touche-orange:active { box-shadow: 0 2px 0 var(--orange-fonce), 0 4px 8px var(--encre-15); }
.touche-rose {
  background: linear-gradient(180deg, var(--rose-clair), var(--rose));
  box-shadow: 0 6px 0 var(--rose-fonce), 0 10px 16px var(--encre-15);
}
.touche-rose:active { box-shadow: 0 2px 0 var(--rose-fonce), 0 4px 8px var(--encre-15); }
.touche-large { width: 100%; font-size: 1.15rem; padding: .85em 1.2em; }

/* =========================================================================
   Couches plein écran (menu, attente, test) — voile ciel translucide,
   le plateau (ou le ciel du body) reste visible derrière.
   ========================================================================= */

.couche {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--nuit-voile);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* --- Ciel du menu : même traitement que le body (nébuleuses + ~120 étoiles),
   en opaque puisque le HUD ne doit pas transparaître derrière. --- */
.couche-menu {
  position: fixed;
  background: var(--nebuleuses), linear-gradient(180deg, var(--nuit-haut) 0%, var(--nuit-milieu) 55%, var(--nuit-bas) 100%);
}
.couche-menu::before, .couche-menu::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: transparent;
}
.couche-menu::before { box-shadow: var(--etoiles-fines); }
.couche-menu::after {
  box-shadow: var(--etoiles-grosses);
  animation: scintille-etoiles 5s ease-in-out infinite;
}

/* --- Menu --- */
.panneau-menu { width: min(420px, 100%); text-align: center; position: relative; z-index: 1; }
.titre-vertige {
  display: inline-block;
  font-size: clamp(2.8rem, 15vw, 4.4rem);
  letter-spacing: .02em;
  margin: 0 0 .5rem;
  background: linear-gradient(180deg, var(--jaune), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px var(--encre);
  paint-order: stroke fill;
  transform: rotate(-3deg);
  animation: balancement-titre 4.5s ease-in-out infinite;
}
@keyframes balancement-titre {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-1deg); }
}
.menu-boutons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.menu-son {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .95rem; margin-bottom: 20px; cursor: pointer;
  color: #fff; font-weight: 700;
  -webkit-text-stroke: .6px var(--encre);
  paint-order: stroke fill;
}
.menu-son input { width: 18px; height: 18px; }
.menu-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--panneau);
  border: 3px solid var(--encre);
  border-radius: var(--rayon);
  box-shadow: 0 8px 0 var(--encre-25);
  padding: 14px 10px;
}
.menu-stat { display: flex; flex-direction: column; gap: 4px; }
.menu-stat-label { font-size: .68rem; opacity: .7; }
.menu-stat-valeur { font-size: 1.15rem; font-weight: 900; color: var(--encre); font-variant-numeric: tabular-nums; }

/* --- Attente (cartes de choix / fin de salle / fin de run) --- */
.panneau-attente { width: min(480px, 100%); text-align: center; }
.attente-titre {
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  margin-bottom: .3rem;
  color: #fff;
  -webkit-text-stroke: 2px var(--encre);
  paint-order: stroke fill;
}
.attente-soustitre { font-size: 1rem; color: #fff; opacity: .95; margin-bottom: 1.2rem; font-weight: 700; }
.grille-cartes {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 1.2rem 0;
}
@media (min-width: 520px) {
  .grille-cartes { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.attente-pied { display: flex; justify-content: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

/* Niveau (3 cartes) : colonne par défaut (portrait) — la règle .grille-cartes
   ci-dessus s'applique déjà (auto-fit dès 520px, la 3e carte se resserre ou
   passe seule sur sa ligne selon la place) ; à partir de 640px (paysage,
   tablette), les 3 cartes s'alignent à largeur égale. */
@media (min-width: 640px) {
  .grille-niveau { grid-template-columns: repeat(3, 1fr); }
}
/* Niveau 10 : flash doré derrière les cartes. */
.grille-niveau.apogee { position: relative; }
.grille-niveau.apogee::before {
  content: '';
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: var(--rayon);
  background: radial-gradient(circle, rgba(255, 204, 31, .55), transparent 70%);
  animation: flash-apogee 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flash-apogee {
  0%, 100% { opacity: .45; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* --- Carte (jeton de choix) : rebond élastique + bandeau de rareté --- */
.carte {
  --tilt: -2deg;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: var(--encre);
  cursor: pointer;
  background: var(--panneau);
  border: 3px solid var(--encre);
  border-radius: var(--rayon);
  box-shadow: 0 8px 0 var(--encre-25);
  padding: 30px 16px 16px;
  transform: rotate(var(--tilt));
  animation: carte-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
  transition: transform .15s ease, box-shadow .15s ease;
}
.carte:nth-child(even) { --tilt: 2deg; }
@keyframes carte-pop {
  0% { transform: scale(.6) rotate(var(--tilt)); opacity: 0; }
  60% { transform: scale(1.05) rotate(var(--tilt)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--tilt)); }
}
/* Bandeau de rareté : élément réel (plutôt qu'un ::before) pour porter le mot
   COMMUN / RARE / ÉPIQUE et, pour risque/évolution, un motif différent. */
.carte-bandeau {
  position: absolute;
  top: 0; left: 0; right: 0; height: 20px;
  background: var(--bleu);
  border-bottom: 3px solid var(--encre);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 10px;
}
.carte-rare .carte-bandeau { background: var(--violet); }
.carte-epique .carte-bandeau { background: var(--orange); }
.carte-bandeau-label {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: #fff;
  -webkit-text-stroke: .4px var(--encre);
  paint-order: stroke fill;
}
.carte:hover, .carte:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 11px 0 var(--encre-25);
  outline: none;
}
.carte:active { transform: rotate(0deg) translateY(0); box-shadow: 0 4px 0 var(--encre-25); }
.carte h3 { font-size: 1.02rem; margin-bottom: 4px; color: var(--encre); }
.carte p { font-size: .85rem; opacity: .85; line-height: 1.35; font-family: var(--police-corps); font-weight: 400; }

/* --- Carte à risque : liseré rouge/or qui pulse, bandeau rayé, étiquette « PARI »,
   petit tremblement après l'apparition des deux autres cartes. --- */
.carte.carte-risque {
  animation:
    carte-pop .5s cubic-bezier(.34, 1.56, .64, 1) both,
    pulse-risque 1.2s ease-in-out infinite,
    secousse-risque .4s ease-in-out .55s;
}
.carte-risque .carte-bandeau {
  background: repeating-linear-gradient(45deg, var(--rouge) 0 10px, var(--jaune) 10px 20px);
}
@keyframes pulse-risque {
  0%, 100% { border-color: var(--rouge); box-shadow: 0 8px 0 var(--encre-25), 0 0 0 2px var(--rouge); }
  50% { border-color: var(--jaune); box-shadow: 0 8px 0 var(--encre-25), 0 0 0 2px var(--jaune); }
}
@keyframes secousse-risque {
  0%, 100% { transform: rotate(var(--tilt)); }
  25% { transform: rotate(calc(var(--tilt) + 2deg)); }
  75% { transform: rotate(calc(var(--tilt) - 2deg)); }
}
.carte-etiquette-pari {
  position: absolute;
  top: 5px; right: 8px;
  z-index: 2;
  background: var(--rouge);
  color: #fff;
  border: 2px solid var(--encre);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .6rem;
  font-weight: 900;
  transform: rotate(6deg);
}

/* --- Carte d'évolution : bandeau doré chatoyant + étoile « ÉVOLUTION » en coin. --- */
.carte-evolution .carte-bandeau {
  background: linear-gradient(90deg, #ffe9a8, var(--jaune), #ffe9a8);
  background-size: 220% 100%;
  animation: chatoiement-or 3s linear infinite;
}
@keyframes chatoiement-or {
  0% { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}
.carte-etoile-evolution {
  position: absolute;
  top: 5px; left: 8px;
  z-index: 2;
  background: linear-gradient(180deg, var(--jaune-clair), var(--jaune));
  color: var(--encre);
  border: 2px solid var(--encre);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .6rem;
  font-weight: 900;
  transform: rotate(-6deg);
}

/* --- Synergie avec une compétence déjà possédée --- */
.carte-synergie {
  margin-top: 8px;
  background: rgba(58, 210, 79, .18);
  border: 2px solid var(--vert);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--vert-fonce);
}

.pastille-rarete {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  margin-bottom: 6px;
  background: var(--bleu);
}
.pastille-rare { background: var(--violet); }
.pastille-epique { background: var(--orange); }
.pastille-commun { background: var(--bleu); }

/* =========================================================================
   Fin de salle (quasi-victoire) et fin de run (bilan)
   ========================================================================= */

/* --- Quasi-victoire (échec de salle) : jamais rien à acheter, juste un encouragement --- */
.quasi-victoire {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 1px var(--encre);
  paint-order: stroke fill;
  margin: 0 0 10px;
}
.objectif-badge.encourage {
  display: inline-flex;
  margin: 0 auto 14px;
  background: linear-gradient(180deg, var(--jaune-clair), var(--jaune));
  box-shadow: 0 3px 0 var(--jaune-fonce);
}
.objectif-badge.encourage .objectif-texte {
  color: var(--encre);
  -webkit-text-stroke: 0;
}

/* --- Cascade d'apparition partagée (tuiles, barres d'escalier, pilules) --- */
@keyframes cascade-entree {
  0% { opacity: 0; transform: translateY(10px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cascade {
  animation: cascade-entree .4s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* --- Grille de 6 tuiles chiffrées (bilan de fin de run) --- */
.grille-stats-fin {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 4px 0 16px;
}
@media (min-width: 460px) {
  .grille-stats-fin { grid-template-columns: repeat(3, 1fr); }
}
.tuile-stat {
  background: var(--panneau);
  border: 3px solid var(--encre);
  border-radius: var(--rayon-petit);
  box-shadow: 0 5px 0 var(--encre-25);
  padding: 10px 8px;
  text-align: center;
}
.tuile-stat-valeur {
  display: block;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.tuile-stat-label { display: block; font-size: .66rem; font-weight: 700; opacity: .75; margin-top: 2px; }
.tuile-stat-detail { display: block; font-size: .6rem; opacity: .65; margin-top: 4px; line-height: 1.3; }

/* --- Petit titre de section (Escalier d'XP, Compétences prises) --- */
.section-fin-titre {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: .92rem;
  color: #fff;
  -webkit-text-stroke: 1px var(--encre);
  paint-order: stroke fill;
  margin: 0 0 8px;
  text-align: left;
}

/* --- Escalier d'XP : une barre horizontale par salle jouée --- */
.escalier-xp { margin: 4px 0 16px; text-align: left; }
.escalier-ligne { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.escalier-ligne:last-child { margin-bottom: 0; }
.escalier-tete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: .78rem; font-weight: 700;
  color: #fff;
  -webkit-text-stroke: .5px var(--encre);
  paint-order: stroke fill;
}
.escalier-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escalier-meta { flex: none; opacity: .9; font-variant-numeric: tabular-nums; }
.escalier-barre {
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  border: 2px solid var(--nuit-contour);
  overflow: hidden;
}
.escalier-remplissage {
  height: 100%;
  min-width: 8%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vert-clair), var(--vert));
  transition: width .3s ease;
}
.escalier-remplissage.echec { background: linear-gradient(90deg, var(--rose-clair), var(--rose)); }

/* --- Compétences prises, en pilules --- */
.competences-fin { margin: 4px 0 16px; text-align: left; }
.liste-pilules { display: flex; flex-wrap: wrap; gap: 8px; }
.pilule-competence {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panneau);
  border: 2px solid var(--encre);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--encre);
}
.pilule-competence .pastille-rarete { margin-bottom: 0; }

/* =========================================================================
   Toasts — pilule blanche cernée qui rebondit
   ========================================================================= */

.couche-toasts {
  position: fixed;
  left: 0; right: 0;
  bottom: max(72px, calc(64px + env(safe-area-inset-bottom)));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.toast {
  background: var(--panneau);
  border: 3px solid var(--encre);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--encre-25);
  padding: 10px 20px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--encre);
  max-width: 90vw;
  text-align: center;
  animation: toast-rebond .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes toast-rebond {
  0% { opacity: 0; transform: translateY(16px) scale(.7); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================================
   Panneau Mode Test
   ========================================================================= */

.panneau-test { width: min(480px, 100%); }
.panneau-test h2 {
  text-align: center; margin-bottom: 1rem; font-size: 1.6rem;
  color: #fff; -webkit-text-stroke: 2px var(--encre); paint-order: stroke fill;
}
.test-champs { display: flex; flex-direction: column; gap: 14px; }
.test-champ, .test-champ-large {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panneau);
  border: 3px solid var(--encre);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  box-shadow: 0 5px 0 var(--encre-25);
}
.test-champ > span:first-child, .test-champ-large > span:first-child {
  font-size: .78rem; font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .04em;
}
.test-champ select, .test-champ input[type="number"] {
  min-height: 44px;
  border-radius: 8px;
  border: 2px solid var(--encre);
  background: #fff;
  color: var(--encre);
  padding: 4px 8px;
  font-size: 1rem;
}
.test-champ input[type="range"] { width: 100%; }
.test-valeur { font-variant-numeric: tabular-nums; font-size: .85rem; opacity: .8; }
.test-aide { display: block; width: 100%; font-size: .78rem; opacity: .75; font-weight: 600; }
.test-case-defaut { display: flex; align-items: center; gap: 6px; font-size: .82rem; }

.test-competences { display: flex; flex-wrap: wrap; gap: 8px; }
.test-competence {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--encre-15);
  font-size: .82rem;
  cursor: pointer;
}
.test-competence.pastille-commun { border-color: var(--bleu); }
.test-competence.pastille-rare { border-color: var(--violet); }
.test-competence.pastille-epique { border-color: var(--orange); }

.test-pied { display: flex; gap: 12px; margin-top: 18px; }
.test-pied .touche { flex: 1; }

/* =========================================================================
   Divers
   ========================================================================= */

@media (max-width: 380px) {
  .hud-coups { font-size: .92rem; }
  .hud-salle { max-width: 28vw; }
  .niveau-pastille { width: 22px; height: 22px; font-size: .72rem; }
  #commandes .touche { font-size: 1.7rem; }
  .objectif-texte { font-size: .92rem; }
  .objectif-badge { min-height: 38px; padding: 3px 12px 3px 8px; }
  .objectif-barre { width: min(170px, 58vw); }
}

/* Le panneau Test est plus haut que l'écran : on l'aligne en haut au lieu de le centrer (sinon le titre est coupé). */
.couche-test { align-items: flex-start; }