/* Jeu Halloween Spyk — page hors WordPress, pensee d'abord pour le smartphone.
   Visuels en aplats : aucune image a charger. Vue basse « voiture de course ». */

:root {
  --nuit: #120e1c;
  --ciel-1: #0f0b19;
  --ciel-2: #18122b;
  --ciel-3: #22183a;
  --ciel-4: #2b1f45;
  --lune: #f3e9c6;
  --lune-cratere: #e0d3a8;
  --nuage: #352a52;
  --lointain: #33275a;
  --ruine: #261d40;
  --ruine-fenetre: #e8771e;
  --foret: #171124;
  --carrosserie: #5a1420;
  --carrosserie-reflet: #7a2230;
  --cadre: #07060b;
  --tableau: #0b0a10;
  --tableau-bord: #1d1926;
  --ecran: #0d2620;
  --ecran-texte: #59f0a8;
  --alerte-fond: #2a0f12;
  --alerte: #ff4b3e;
  --ambre: #ffb020;
  --orange: #f28c28;
  --orange-ombre: #9a4f0e;
  --texte: #f3efe6;
  --texte-doux: #b9b2c7;
  --carte: #17131f;
  --jeton-eteint: #2a2533;
  --jeton-texte-eteint: #6f6880;

  --horizon: 50%;
  --haut-tableau: 21%;
  --volant: min(94vw, 58vh);
  --volant-bas: 2%;
  --sur: env(safe-area-inset-bottom, 0px);
  --haut-sur: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--nuit);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
[hidden] { display: none !important; }

.jeu {
  position: fixed; inset: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* ---------------- Monde (decor qui defile) ---------------- */

.scene { position: absolute; inset: 0; transform-origin: 50% 70%; }
.monde { position: absolute; inset: 0; will-change: transform; }

.ciel {
  position: absolute; left: 0; right: 0; top: -2%; height: calc(var(--horizon) + 2%);
  background: linear-gradient(var(--ciel-1) 0 28%, var(--ciel-2) 28% 52%, var(--ciel-3) 52% 74%, var(--ciel-4) 74% 100%);
}
.lune {
  position: absolute; top: 21%; left: 7%;
  width: clamp(40px, 11vw, 96px); aspect-ratio: 1;
  border-radius: 50%; background: var(--lune);
}
.lune i { position: absolute; border-radius: 50%; background: var(--lune-cratere); }
.lune i:nth-child(1) { width: 24%; height: 24%; top: 22%; left: 26%; }
.lune i:nth-child(2) { width: 14%; height: 14%; top: 58%; left: 54%; }
.lune i:nth-child(3) { width: 10%; height: 10%; top: 34%; left: 66%; }

.couche {
  position: absolute; left: 0; right: 0;
  bottom: calc(100% - var(--horizon));
  overflow: hidden; pointer-events: none;
}
.couche-etoiles { top: 0; bottom: auto; height: calc(var(--horizon) * 0.75); }
.couche-nuages { top: 9%; bottom: auto; height: 20%; }
.couche-lointain { height: 13%; }
.couche-ruines { height: 15%; }
.couche-foret { height: 19%; }
.bande { display: flex; height: 100%; will-change: transform; }
.bande svg { flex: none; height: 100%; display: block; }

.route { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.brume { position: absolute; left: 0; right: 0; top: calc(var(--horizon) - 4%); height: 7%; pointer-events: none; }
.brume i {
  position: absolute; top: 0; left: -50%; width: 200%; height: 55%;
  background: rgba(170, 160, 210, 0.08);
  border-radius: 50%;
  animation: brume 18s linear infinite alternate;
}
.brume i:nth-child(2) { top: 45%; animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes brume { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------------- Habitacle de course ---------------- */

.habitacle { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

.nez {
  position: absolute; left: -2%; width: 104%;
  bottom: calc(var(--haut-tableau) - 1%); height: 9%;
  display: block;
}
.nez-caisse { fill: url(#capot); }
.nez-reflet { fill: url(#reflet-capot); }
.nez-bande { fill: url(#bande-capot); }

.tableau {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--haut-tableau);
  background: var(--tableau);
  border-top: 4px solid var(--tableau-bord);
  border-radius: 50% 50% 0 0 / 12% 12% 0 0;
}
.aerateur {
  position: absolute; top: 16%; width: 9%; aspect-ratio: 1;
  border-radius: 50%; background: #16131d; box-shadow: inset 0 0 0 4px #1f1a28;
}
.aerateur:nth-child(1) { left: 4%; }
.aerateur:nth-child(2) { right: 4%; }

.retro {
  position: absolute; left: 50%; top: calc(var(--haut-sur) + 1.5%);
  width: min(34vw, 260px); height: min(5.5vh, 46px);
  transform: translateX(-50%);
  background: var(--cadre); border-radius: 10px; padding: 5px;
}
.retro i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(var(--ciel-2) 0 55%, #1d1726 55%); }

.volant {
  position: absolute; left: 50%;
  width: var(--volant); aspect-ratio: 420 / 200;
  margin-left: calc(var(--volant) / -2);
  bottom: calc(var(--volant-bas) + var(--sur));
  transform-origin: 50% 60%;
  will-change: transform;
}
.volant > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vo-corps { fill: #1c1922; }
.vo-poignee { fill: #110f16; }
.vo-plaque { fill: #07060b; }
.led { fill: #2a2533; }
.led.verte { fill: #3ddc84; }
.led.jaune { fill: #ffd23f; }
.led.rouge { fill: var(--alerte); }
.led.bleue { fill: #4aa3ff; }

.ecran {
  position: absolute; left: 31.4%; top: 22%; width: 37.2%; height: 42%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4%;
  background: var(--ecran); color: var(--ecran-texte); border-radius: calc(var(--volant) * 0.016);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-align: center; overflow: hidden;
}
.ecran-msg { font-size: calc(var(--volant) * 0.034); font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.ecran-bas { display: flex; align-items: baseline; gap: calc(var(--volant) * 0.012); font-variant-numeric: tabular-nums; }
.ecran-bas strong { font-size: calc(var(--volant) * 0.068); line-height: 1; }
.ecran-bas small { font-size: calc(var(--volant) * 0.024); opacity: .7; }
.ecran-bas b {
  margin-left: calc(var(--volant) * 0.02); padding: 0 calc(var(--volant) * 0.012);
  font-size: calc(var(--volant) * 0.05); border: 1px solid currentColor; border-radius: 4px;
}
.ecran.alerte { background: var(--alerte-fond); color: var(--alerte); }
.ecran.alerte .ecran-msg { animation: clignote .5s steps(2, jump-none) infinite; }

.voyants {
  position: absolute; left: 32%; top: 68%; width: 36%; height: 11%;
  display: flex; justify-content: space-between;
}
.voyant { height: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.voyant svg { width: 100%; height: 100%; fill: #332e3c; }
.voyant.on svg, .voyant.clignote svg { fill: var(--ambre); }
.voyant[data-voyant="moteur"].on svg, .voyant[data-voyant="moteur"].clignote svg,
.voyant[data-voyant="temp"].on svg, .voyant[data-voyant="temp"].clignote svg { fill: var(--alerte); }
.voyant[data-voyant="fantome"].on svg, .voyant[data-voyant="fantome"].clignote svg { fill: #9be15d; }
.voyant.clignote { animation: clignote .4s steps(2, jump-none) infinite; }
@keyframes clignote { 0% { opacity: 1; } 100% { opacity: .15; } }

/* ---------------- Interface ---------------- */

.entete {
  position: absolute; left: 0; right: 0;
  top: calc(var(--haut-sur) + 9%);
  text-align: center; padding: 0 16px;
  pointer-events: none;
}
.marque {
  margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange);
}
.marque span { color: var(--texte-doux); }
.entete h1 {
  margin: .3rem auto 0; max-width: 14ch;
  font-size: clamp(1.7rem, 8.4vw, 3.2rem); line-height: 1.02;
  font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
  color: var(--lune);
}
.jeu.en-course .entete { opacity: 0; transition: opacity .6s; }

.depart {
  position: absolute; left: 16px; right: 16px;
  top: calc(var(--horizon) - 22%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  transition: opacity .3s, transform .3s, visibility 0s;
}
.accroche {
  margin: 0; max-width: 30ch; padding: 6px 12px;
  font-size: .9rem; color: var(--texte);
  background: rgba(7, 6, 11, .72); border-radius: 10px;
}
.jeu.en-course .depart {
  opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s, transform .3s, visibility 0s .3s;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font: 800 1rem/1.1 inherit; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.btn:active { transform: translateY(3px); }
.btn:focus-visible, .btn-lien:focus-visible, .fermer:focus-visible { outline: 3px solid var(--lune); outline-offset: 3px; }
.btn-principal { background: var(--orange); color: #1b0f05; box-shadow: 0 5px 0 var(--orange-ombre); }
.btn-principal:active { box-shadow: 0 2px 0 var(--orange-ombre); }
.btn-demarrer { min-height: 60px; padding: 0 32px; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
.btn-second { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 2px var(--texte-doux); }
.btn-copier { background: var(--c, var(--orange)); color: var(--nuit); min-height: 44px; padding: 0 16px; font-size: .9rem; flex: none; }
.btn-lien {
  min-height: 44px; padding: 0 12px;
  background: none; border: 0; color: var(--texte); font: 700 .95rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}

.collection {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--horizon) + 1%);
  padding: 8px 12px 10px;
  background: rgba(7, 6, 11, .9); border-radius: 16px;
  text-align: center; white-space: nowrap;
}
.collection p { margin: 0 0 6px; font-size: .78rem; color: var(--texte-doux); }
.collection strong { color: var(--texte); }
.collection ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; justify-content: center; }
.jeu.en-course .collection { opacity: 0; transition: opacity .4s; }

.jeton {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--jeton-eteint); color: var(--jeton-texte-eteint);
  font-size: .6rem; font-weight: 900; letter-spacing: .02em;
  transition: background .3s, color .3s;
}
.jeton.trouve { background: var(--c); color: var(--nuit); }
.jeton.nouveau { animation: pop .5s ease-out; }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
.jeton-grand { width: 52px; height: 52px; font-size: .68rem; flex: none; }

/* ---------------- Panneaux ---------------- */

.panneau {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(5, 4, 8, .55);
}
.carte {
  position: relative;
  width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  padding: 22px 16px calc(18px + var(--sur));
  background: var(--carte);
  border-top: 5px solid var(--c, var(--orange));
  border-radius: 22px 22px 0 0;
  animation: monte .35s ease-out;
}
@keyframes monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.fermer {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--texte-doux); font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.res-scenario {
  margin: 0 44px 0 0; font-size: .82rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c, var(--orange)); outline: none;
}
.res-intro { margin: 10px 0 0; color: var(--texte-doux); font-size: .9rem; }
.res-gain { margin: 2px 0 12px; font-size: clamp(1.5rem, 7vw, 2.1rem); font-weight: 900; line-height: 1.1; }
.res-produit { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.res-produit p { margin: 0; line-height: 1.35; }
.res-produit p span { display: block; color: var(--texte-doux); font-size: .9rem; }

.code-boite {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 16px;
  border: 2px dashed var(--c, var(--orange)); border-radius: 14px;
}
.code {
  font: 800 clamp(1.15rem, 6vw, 1.6rem)/1.1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .08em; user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere;
}
.copie-retour { min-height: 1.3em; margin: 6px 0 4px; font-size: .85rem; color: var(--ecran-texte); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.actions-une { grid-template-columns: 1fr; }
.carte > .btn-lien { display: block; margin: 6px auto 0; }
.mentions { margin: 14px 0 0; font-size: .8rem; color: var(--texte-doux); line-height: 1.4; }

.carte h2 { margin: 0 44px 4px 0; font-size: 1.35rem; line-height: 1.2; outline: none; }
.recap-liste { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.recap-liste li {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center;
  padding: 12px; background: #1f1a29; border-radius: 14px;
}
.recap-liste .r-gain { font-weight: 800; line-height: 1.25; }
.recap-liste .r-produit { display: block; font-size: .85rem; color: var(--texte-doux); font-weight: 400; }
.recap-liste .code-boite { grid-column: 1 / -1; }
.recap-liste .r-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recap-liste .r-actions a { color: var(--texte); font-weight: 700; font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }
.recap-liste .copie-retour { margin: 0; }

.panneau-fin { align-items: center; padding: 16px; background: rgba(5, 4, 8, .7); }
.panneau-fin .carte { border-radius: 22px; max-width: 440px; }
.panneau-fin p { color: var(--texte-doux); line-height: 1.5; }

.carte-logo { display: block; width: max-content; margin: 18px auto 0; }
.carte-logo img { display: block; width: 200px; height: auto; }

.noscript { position: fixed; inset: auto 16px 16px; padding: 12px; background: var(--carte); border-radius: 12px; }
.noscript a { color: var(--orange); }

/* ---------------- Effets des scenarios ---------------- */

.scene.tangage { animation: tangage .14s linear 10; }
@keyframes tangage {
  0%, 100% { transform: none; }
  25% { transform: translate(-7px, 4px) rotate(-1.2deg); }
  75% { transform: translate(7px, -3px) rotate(1.2deg); }
}
.scene.embardee { animation: embardee 1.6s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes embardee {
  0% { transform: none; }
  30% { transform: scale(1.12) rotate(-6deg); }
  60% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1.08) rotate(-3deg); }
}

.vignette-rouge { position: absolute; inset: 0; background: var(--alerte); opacity: 0; animation: pulse-rouge .5s ease-in-out infinite alternate; }
@keyframes pulse-rouge { to { opacity: .18; } }
.obscurite { position: absolute; inset: 0; background: #000; opacity: 0; animation: coupure 1.6s steps(1) forwards; }
@keyframes coupure {
  0% { opacity: .7; } 12% { opacity: 0; } 22% { opacity: .55; } 30% { opacity: 0; }
  52% { opacity: .75; } 60% { opacity: .1; } 100% { opacity: .35; }
}

.debris {
  position: absolute; width: 12px; height: 8px; border-radius: 2px;
  background: var(--c-debris, #e8771e);
  animation: debris 1s ease-out forwards;
}
@keyframes debris {
  from { transform: translate(-50%, 0) rotate(0); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

.fumee {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: #8e8a96;
  animation: fumee 1.6s ease-out forwards;
}
@keyframes fumee {
  from { transform: translate(-50%, -50%) scale(.4); opacity: .85; }
  to { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(3.4); opacity: 0; }
}

.flammes {
  position: absolute; left: 50%;
  display: flex; align-items: flex-end; gap: 2px;
  transform: translate(-50%, -100%);
}
.flammes i {
  width: 0; height: 0;
  border-left: 3.4vmin solid transparent; border-right: 3.4vmin solid transparent;
  border-bottom: 11vmin solid var(--orange);
  transform-origin: 50% 100%;
  animation: flamme .18s ease-in-out infinite alternate;
}
.flammes i:nth-child(1) { border-bottom-color: #e5482a; border-bottom-width: 8vmin; animation-delay: -.08s; }
.flammes i:nth-child(3) { border-bottom-color: #ffd23f; border-bottom-width: 7vmin; animation-delay: -.12s; }
@keyframes flamme { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }

.fissure-cadre { position: absolute; left: 0; right: 0; top: 4%; bottom: var(--haut-tableau); }
.fissure { width: 100%; height: 100%; display: block; }
.fissure path {
  fill: none; stroke: #e9edf2; stroke-width: 2.5; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: trace .45s ease-out forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }

.terre {
  position: absolute; width: var(--taille); height: var(--taille);
  background: #4a3222; border-radius: 50% 44% 56% 48%;
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(0);
  animation: eclabousse .25s ease-out forwards;
}
@keyframes eclabousse { to { transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } }

.flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash .7s ease-out forwards; }
.flash-doux { background: #cfd3ff; animation: flash-doux 1s ease-out forwards; }
@keyframes flash { 12% { opacity: .95; } 100% { opacity: 0; } }
@keyframes flash-doux { 30% { opacity: .25; } 100% { opacity: 0; } }

/* ---------------- Grand ecran / paysage ---------------- */

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  :root { --horizon: 55%; --haut-tableau: 20%; --volant: min(46vw, 64vh); --volant-bas: -7%; }
  .lune { top: 8%; left: 11%; }
  .nez { height: 11%; }
  .aerateur { width: 5%; }
  .collection { left: auto; right: 16px; transform: none; bottom: auto; top: calc(9% + var(--haut-sur)); }
  .panneau { align-items: center; padding: 16px; }
  .carte { max-width: 460px; border-radius: 22px; padding-bottom: 22px; }
}


/* Finition visuelle : profondeur, matières et hiérarchie plus lisible. */
:root {
  --nuit: #090b12;
  --carte: #151821;
  --orange: #ff9b45;
  --orange-ombre: #a64a24;
  --texte: #fff8ec;
  --texte-doux: #c4c0cb;
}
.ciel {
  background:
    radial-gradient(ellipse at 50% 94%, rgba(184, 100, 121, .22), transparent 42%),
    radial-gradient(ellipse at 78% 22%, rgba(71, 68, 126, .2), transparent 38%),
    linear-gradient(180deg, #080a16 0%, #101426 38%, #242039 70%, #493044 100%);
}
.lune {
  box-shadow: 0 0 0 10px rgba(244, 226, 186, .06), 0 0 42px 12px rgba(255, 220, 160, .2);
}
.couche-foret { filter: drop-shadow(0 -5px 10px rgba(0, 0, 0, .35)); }
.brume i { background: rgba(193, 185, 214, .11); filter: blur(10px); }
.scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(3, 4, 10, .42) 100%);
}
.tableau {
  background: linear-gradient(180deg, #20212a, #101117 24%, #08090d 80%);
  border-top: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, .45);
}
.vo-corps { fill: #252630; stroke: #4a4650; stroke-width: 2; }
.vo-poignee { fill: #111217; stroke: #302e36; stroke-width: 2; }
.vo-plaque { fill: #090b10; stroke: #44404a; stroke-width: 2; }
.entete { filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .72)); }
.marque { color: #ffb36e; }
.entete h1 { text-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 8px 28px rgba(0, 0, 0, .55); }
.depart { filter: drop-shadow(0 5px 18px rgba(0, 0, 0, .55)); }
.accroche {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(9, 10, 16, .72);
  backdrop-filter: blur(8px);
}
.btn { font-family: inherit; box-shadow: 0 5px 0 var(--orange-ombre), 0 10px 24px rgba(0, 0, 0, .28); }
.btn-second { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.collection {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 11, 17, .78);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
}
.jeton { border: 1px solid rgba(255, 255, 255, .09); }
.jeton.trouve { box-shadow: 0 0 18px color-mix(in srgb, var(--c) 38%, transparent); }
.carte {
  background: linear-gradient(155deg, #20232d, #12141c 62%);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .32);
}
.panneau { background: rgba(4, 5, 10, .72); backdrop-filter: blur(7px); }
.code-boite { background: rgba(255, 255, 255, .035); }
.res-intro { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; }
.res-gain { text-wrap: balance; }
.recap-liste li { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .08); }
.voyant { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); }

@media (max-width: 420px) {
  .entete { top: calc(var(--haut-sur) + 7%); }
  .entete h1 { max-width: 12ch; font-size: clamp(1.55rem, 7.8vw, 2rem); }
  .collection { padding: 7px 9px 9px; }
  .collection ul { gap: 6px; }
  .jeton { width: 40px; height: 40px; font-size: .56rem; }
}

/* Habillage temporaire des trois événements retravaillés, en attendant les illustrations. */
.parasites-radio {
  position: absolute; inset: 18% 0 27%; opacity: .72; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(174, 199, 255, .12) 6px 7px),
    linear-gradient(90deg, transparent 0 15%, rgba(117, 131, 174, .08) 48%, transparent 82%);
  animation: parasitage .13s steps(2, end) infinite;
}
.parasites-radio::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 17%, rgba(255,255,255,.1) 18% 19%, transparent 20% 38%);
  animation: saut-signal .7s steps(2, end) infinite;
}
.parasites-fin { opacity: .12; transition: opacity .7s; }
@keyframes parasitage { 50% { transform: translateX(2px); opacity: .35; } }
@keyframes saut-signal { 50% { transform: translateY(8px); } }
.balise-stand {
  position: absolute; left: 66%; top: 34%; width: clamp(58px, 14vw, 130px); height: clamp(86px, 20vh, 190px);
  display: grid; place-items: center; opacity: .42; transform: perspective(220px) rotateY(-12deg);
  transition: opacity .35s, filter .35s;
}
.balise-stand::before {
  content: ""; position: absolute; top: 12%; bottom: 0; left: 47%; width: 6%;
  background: linear-gradient(90deg, #2b2428, #918078, #1b191f);
}
.balise-stand i {
  position: absolute; z-index: 1; top: 0; left: 50%; width: 78%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, #fff5dc 0 7%, #ff6b38 12% 20%, rgba(255,79,40,.18) 38%, transparent 72%);
  filter: drop-shadow(0 0 18px rgba(255, 90, 49, .9));
}
.balise-stand b {
  position: absolute; z-index: 2; top: 32%; width: 100%; padding: 8% 0;
  border: 2px solid #d0ad79; background: linear-gradient(135deg, #202027, #514239);
  color: #ffd58c; font: 900 clamp(.58rem, 2vw, .95rem)/1.25 ui-monospace, monospace;
  letter-spacing: .15em; text-align: center; text-shadow: 0 0 8px #ff5f39;
  box-shadow: 0 5px 16px rgba(0,0,0,.5), inset 0 0 0 3px rgba(0,0,0,.35);
}
.balise-active { opacity: .98; filter: saturate(1.45); }
.balise-active i { animation: balise-pulse .42s steps(2, end) infinite; }
.balise-evanouie { opacity: 0; filter: blur(12px); }
@keyframes balise-pulse { 50% { opacity: .35; transform: translateX(-50%) scale(.82); } }

.onde-rupture {
  position: absolute; left: 50%; top: 69%; width: clamp(130px, 34vw, 340px); aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%); animation: souffle-rupture .48s ease-out forwards;
  filter: drop-shadow(0 0 22px rgba(255, 104, 48, .8));
}
.onde-rupture svg { width: 100%; height: 100%; overflow: visible; }
.onde-rupture path { fill: #ffb34e; stroke: #fff0bb; stroke-width: 3; }
.onde-rupture circle { fill: #fff8cf; }
@keyframes souffle-rupture {
  from { opacity: .15; scale: .2; rotate: -18deg; }
  35% { opacity: 1; }
  to { opacity: 0; scale: 1.25; rotate: 12deg; }
}
.etincelle {
  position: absolute; width: 5px; height: 16px; border-radius: 99px;
  background: var(--c-debris, #ffe9a8); box-shadow: 0 0 12px currentColor, 0 0 24px #ff5c33;
  animation: etincelle-vol 800ms ease-out forwards;
}
@keyframes etincelle-vol {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--rot)) scale(.15); opacity: 0; }
}
.lueur-capot {
  position: absolute; left: 50%; top: 70%; width: 34vw; height: 10vh; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 109, 50, .34), transparent 70%);
  animation: braise 1.1s ease-in-out infinite alternate;
}
@keyframes braise { to { opacity: .35; transform: translateX(-50%) scale(.78); } }

.phares-fantomes {
  position: absolute; left: 50%; top: 37%; width: min(90vw, 900px); height: 36%; transform: translateX(-50%);
  opacity: .76; transition: opacity .5s;
  background: radial-gradient(ellipse at 28% 72%, rgba(164, 246, 255, .42), transparent 35%),
    radial-gradient(ellipse at 72% 72%, rgba(164, 246, 255, .42), transparent 35%);
  filter: blur(8px);
}
.phares-passes { opacity: 0; }
.sillage-spectre {
  position: absolute; left: 50%; top: 43%; width: min(58vw, 580px); height: 10%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 5%; opacity: .8;
}
.sillage-spectre i {
  display: block; width: 29%; height: 24%; border-radius: 50%;
  background: #bcf8ff; box-shadow: 0 0 18px 8px rgba(143, 236, 255, .38);
  animation: sillage 1s ease-out forwards;
}
.sillage-spectre i:nth-child(2) { animation-delay: .12s; }
.sillage-spectre i:nth-child(3) { animation-delay: .24s; }
.sillage-evanoui { opacity: 0; transition: opacity .65s; }
@keyframes sillage { to { transform: translateX(-120px) scale(.3); opacity: 0; } }


/* Sprites de la planche Halloween : transparence conservée, monde toujours animé. */
.bande img { display: block; flex: none; height: 100%; object-fit: fill; }
.bande img.panorama { height: 100%; object-fit: cover; object-position: center 65%; }
.lune {
  top: 10%; left: auto; right: 5%; width: clamp(108px, 21vw, 290px); height: auto;
  aspect-ratio: 365 / 331; border-radius: 0; background: none; box-shadow: none;
  object-fit: contain; filter: drop-shadow(0 0 18px rgba(176, 173, 255, .34));
}
.decor-phares, .decor-brume,
.tableau-art, .volant-art { display: block; pointer-events: none; }
.decor-phares, .decor-brume {
  position: absolute; height: auto;
}
.decor-phares {
  left: 50%; top: calc(var(--horizon) - 1%); width: min(98vw, 820px);
  transform: translateX(-50%); z-index: 4; mix-blend-mode: screen; opacity: .76;
}
.decor-brume {
  top: calc(var(--horizon) - 2%); left: 50%; width: 112%; height: clamp(54px, 13vh, 142px);
  object-fit: fill; transform: translateX(-50%); z-index: 6; opacity: .78;
  mix-blend-mode: screen; filter: blur(1px);
}
.tableau { overflow: visible; }
.tableau-art {
  position: absolute; z-index: 0; left: 50%; top: -28%; width: min(90vw, 740px); height: auto;
  transform: translateX(-50%); opacity: .82; filter: drop-shadow(0 -4px 10px rgba(0,0,0,.3));
}
.aerateur { z-index: 1; }
.volant {
  --volant: clamp(270px, 82vw, 440px);
  aspect-ratio: 336 / 298; z-index: 2;
}
.volant-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ecran {
  left: 35%; top: 34%; width: 30%; height: 22%;
  border: 2px solid #35343a; box-shadow: inset 0 0 10px rgba(80, 255, 190, .1), 0 0 5px rgba(0,0,0,.8);
}
.shift-lights {
  position: absolute; left: 37%; top: 25%; width: 28%; height: 2.8%;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 1.5%;
}
.shift-lights .led {
  display: block; min-width: 0; border-radius: 2px; background: #161a1a;
  box-shadow: 0 0 2px rgba(0,0,0,.9); fill: none;
}
.shift-lights .led.verte { background: #3ddc84; box-shadow: 0 0 7px #3ddc84; }
.shift-lights .led.jaune { background: #ffd23f; box-shadow: 0 0 7px #ffd23f; }
.shift-lights .led.rouge { background: #ff4b3e; box-shadow: 0 0 7px #ff4b3e; }
.shift-lights .led.bleue { background: #4aa3ff; box-shadow: 0 0 7px #4aa3ff; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .lune { top: 6%; right: 8%; width: clamp(180px, 19vw, 300px); }
  .decor-phares { width: min(66vw, 900px); }
  .decor-brume { width: 100%; height: clamp(90px, 16vh, 180px); }
  .tableau-art { width: min(51vw, 760px); top: -38%; }
  .volant { --volant: clamp(380px, 36vw, 560px); }
}

/* Foret du projet (foret.webp) : bosquets alternes, base des arbres posee sur l'horizon
   (l'image a ~20 % de transparence sous les troncs, d'ou le decalage vers le bas). */
.couche-foret { height: 24%; overflow: visible; }
.couche-foret .bande img { transform: translateY(19%); }
.couche-foret .bande img.miroir { transform: translateY(19%) scaleX(-1); }

/* Bifurcation : noir complet, des eclairs devoilent la silhouette des arbres. */
.foret-nuit {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: #020205; transition: opacity 1.4s ease-in;
}
.foret-nuit.noire { opacity: .97; }
/* Une fois le noir installe, chaque eclair coupe net (pas de fondu au retour). */
.foret-nuit.instant { transition: none; }
.foret-nuit.eclaire { opacity: .08; background: rgba(170, 190, 255, .35); }
.scene.eclair .monde { filter: grayscale(.75) brightness(2.6) contrast(1.9); }
/* Fumee de gomme pendant une glisse en travers. */
.fumee.fumee-pneu { width: 120px; height: 120px; background: #b9b5c2; opacity: .55; filter: blur(6px); }

/* Brume devant la voiture : absente en course, dosee par chaque scenario (--brume de 0 a 1). */
.decor-brume {
  opacity: calc(var(--brume, 0) * .95);
  transform: translateX(-50%) scaleY(calc(.7 + var(--brume, 0) * .9));
  transform-origin: 50% 70%;
  transition: opacity var(--brume-duree, 1500ms) ease, transform var(--brume-duree, 1500ms) ease;
}
/* Bifurcation : bancs de brume que seuls les eclairs devoilent. */
.brume-orage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .06; }
.brume-orage i {
  position: absolute; left: -40%; width: 180%; height: 26%;
  background: radial-gradient(ellipse at 50% 50%, rgba(205, 212, 240, .9), rgba(205, 212, 240, 0) 68%);
  filter: blur(14px); animation: brume-orage 9s ease-in-out infinite alternate;
}
.brume-orage i:nth-child(1) { top: 44%; }
.brume-orage i:nth-child(2) { top: 54%; height: 30%; animation-duration: 12s; animation-direction: alternate-reverse; }
.brume-orage i:nth-child(3) { top: 34%; height: 18%; opacity: .7; animation-duration: 15s; }
.brume-orage i:nth-child(4) { top: 60%; height: 34%; animation-duration: 10s; }
@keyframes brume-orage { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.scene.eclair .brume-orage { opacity: 1; }

/* Phares de la voiture (planche du 14/10) : faisceaux projetes sur la piste, larges pres
   du capot et resserres vers l'horizon. */
.decor-phares {
  left: 50%; top: calc(var(--horizon) - 2%); width: min(132vw, 1150px);
  height: calc(80% - var(--horizon)); object-fit: fill;
  transform: translateX(-50%); opacity: .62;
}
.scene.spectre .decor-phares { opacity: .15; transition: opacity .8s; }
.fx-phares-spectre {
  position: absolute; left: 50%; top: calc(var(--horizon) - 2%); width: min(132vw, 1150px);
  height: calc(80% - var(--horizon)); object-fit: fill; transform: translateX(-50%);
  mix-blend-mode: screen; opacity: 0; animation: apparait-spectre 1.2s ease-out forwards;
}
@keyframes apparait-spectre { to { opacity: .8; } }

/* Sprites d'effets (assets/fx) : positionnes par leur centre, animes par le script. */
.fx-sprite { position: absolute; pointer-events: none; }
.fx-sprite > img, .fx-phares-spectre { display: block; pointer-events: none; }
.fx-sprite > img { width: 100%; height: auto; }
.sprite-part {
  width: var(--taille, 18vmin);
  animation: sprite-part 1.6s ease-out forwards;
}
@keyframes sprite-part {
  from { transform: translate(-50%, -50%) scale(.35) rotate(0); opacity: 0; }
  12% { opacity: var(--op, .9); }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--fin, 1.6)) rotate(var(--rot)); opacity: 0; }
}

/* Le passeur de la ligne d'arrivee (BOOTOILE). */
.spectre-loin { left: 50%; top: calc(var(--horizon) + 6%); width: min(34vw, 290px); transform-origin: 50% 100%; }
.spectre-loin img { animation: flotte 1.1s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px rgba(120, 230, 255, .7)); }
@keyframes flotte { from { transform: translateY(-4%) rotate(-2deg); } to { transform: translateY(4%) rotate(2deg); } }
.spectre-fonce { left: 50%; top: 46%; width: min(64vw, 540px); filter: drop-shadow(0 0 22px rgba(120, 230, 255, .8)); }
.spectre-vitre {
  left: 50%; top: 36%; width: min(104vw, 820px);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
}
.spectre-dissous { left: 50%; top: 40%; width: min(70vw, 560px); }
.drapeau-chute { left: 50%; top: 58%; width: min(44vw, 380px); transform-origin: 50% 100%; }
.givre {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(170, 230, 255, .28) 62%, rgba(225, 248, 255, .62) 100%),
    repeating-linear-gradient(62deg, transparent 0 22px, rgba(220, 245, 255, .07) 23px 25px);
  animation: givre .35s ease-out forwards;
}
@keyframes givre { to { opacity: 1; } }
.flash-spectre { background: #bff4ff; }

/* Le dernier tour du moteur (BOOPLEXI). */
.sprite-etincelles { left: 50%; top: 70%; width: min(70vw, 560px); animation: gerbe .7s ease-out forwards; }
@keyframes gerbe {
  from { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  to { transform: translate(-50%, -60%) scale(1.35); opacity: 0; }
}
.sprite-piece { width: min(22vw, 190px); filter: drop-shadow(0 0 10px rgba(255, 120, 50, .6)); }
.sprite-huile {
  width: var(--taille, 26vmin);
  animation: huile-impact .22s ease-out forwards, coulure 7s ease-in .4s forwards;
}
@keyframes huile-impact {
  from { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: .95; }
}
@keyframes coulure { to { transform: translate(-50%, -38%) scale(1, 1.18); opacity: .95; } }
.feu-capot {
  position: absolute; top: 79%; width: min(24vw, 200px);
  transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%;
  animation: feu-prend .9s ease-out forwards;
  filter: drop-shadow(0 0 26px rgba(255, 110, 40, .85));
}
.feu-capot.miroir img { transform: scaleX(-1); }
@keyframes feu-prend { to { transform: translate(-50%, -100%) scale(var(--echelle, 1)); } }
.voile-fumee {
  position: absolute; left: 0; right: 0; top: 0; bottom: 20%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(12, 11, 14, .85), rgba(18, 16, 20, .55) 55%, transparent);
  animation: voile 3.2s ease-in forwards;
}
@keyframes voile { to { opacity: .82; } }