/* ===== Stranger Trucs (histoire définitive) : carte, écrans, cinématiques =====
   Fichier dédié, chargé après style.css. Préfixe sk-*. Forêt de nuit, guirlandes de Noël, vélos,
   Envers du Décor rouge sang aux cendres flottantes, horloge de Vecnard. Décors 100 % CSS/emojis,
   aucun visuel officiel. Le style de base décrit l'état final ; les animations partent de l'état
   initial (fill-mode both), si bien que le mouvement réduit affiche directement la fin de chaque scène. */

/* --- Carte du hub : forêt de nuit, guirlande qui clignote, faille rouge et vélo abandonné --- */
.saga-stranger { background: linear-gradient(180deg, #03060d 0%, #0b1626 48%, #1c0609 100%); color: var(--texte); }
.saga-stranger .saga-nom { color: #ff4646; text-shadow: 0 0 8px #ff1a1aaa, 0 2px 6px #000; letter-spacing: 0.04em; }
.sk-carte, .sk-carte > span { position: absolute; display: block; }
.sk-carte { inset: 0; overflow: hidden; }
.sk-carte-ciel { inset: 0; background: radial-gradient(1px 1px at 18% 30%, #fff, transparent), radial-gradient(1px 1px at 42% 14%, #fff, transparent), radial-gradient(1.5px 1.5px at 66% 26%, #fff, transparent), radial-gradient(1px 1px at 86% 12%, #fff, transparent); }
.sk-carte-arbres { left: 0; right: 0; top: 38px; height: 66px; background: #02040a; clip-path: polygon(0 100%, 0 30%, 5% 62%, 9% 8%, 14% 58%, 19% 22%, 24% 64%, 30% 40%, 36% 72%, 44% 50%, 52% 76%, 60% 46%, 67% 70%, 73% 18%, 79% 60%, 85% 4%, 90% 56%, 95% 26%, 100% 50%, 100% 100%); }
.sk-carte-faille { left: 18%; right: 30%; top: 98px; height: 5px; background: #ff3a2a; clip-path: polygon(0 50%, 12% 0, 26% 80%, 40% 10%, 55% 90%, 70% 20%, 84% 70%, 100% 40%, 100% 60%, 84% 100%, 70% 50%, 55% 100%, 40% 40%, 26% 100%, 12% 40%, 0 60%); filter: drop-shadow(0 0 6px #ff1a1a); animation: sk-faille 2.2s ease-in-out infinite alternate; }
@keyframes sk-faille { from { opacity: 0.55; } to { opacity: 1; } }
.sk-carte-spores { left: 18%; right: 30%; top: 30px; height: 70px; }
.sk-carte-spores i { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #f3dccb; opacity: 0; animation: sk-spore-carte 4s linear infinite; }
.sk-carte-spores i:nth-child(1) { left: 8%; } .sk-carte-spores i:nth-child(2) { left: 28%; animation-delay: 0.8s; } .sk-carte-spores i:nth-child(3) { left: 50%; animation-delay: 1.6s; } .sk-carte-spores i:nth-child(4) { left: 70%; animation-delay: 2.4s; } .sk-carte-spores i:nth-child(5) { left: 90%; animation-delay: 3.2s; }
@keyframes sk-spore-carte { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: 0.8; } to { transform: translate(10px, -64px); opacity: 0; } }
.sk-carte > .sk-carte-guirlande { left: 4%; right: 4%; top: 6px; height: 22px; display: flex; justify-content: space-around; align-items: flex-start; border-bottom: 2px solid #14161c; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.sk-carte-guirlande i { width: 7px; height: 10px; border-radius: 50% 50% 45% 45%; background: var(--c); box-shadow: 0 0 8px 2px var(--c); animation: sk-clignote 1.8s steps(2, jump-none) infinite; }
.sk-carte-guirlande i:nth-child(4n+1) { --c: #ff4a4a; } .sk-carte-guirlande i:nth-child(4n+2) { --c: #ffd23f; animation-delay: 0.45s; } .sk-carte-guirlande i:nth-child(4n+3) { --c: #3fdc6a; animation-delay: 0.9s; } .sk-carte-guirlande i:nth-child(4n) { --c: #3fa8ff; animation-delay: 1.35s; }
.sk-carte-guirlande i:nth-child(1), .sk-carte-guirlande i:nth-child(9) { margin-top: 6px; } .sk-carte-guirlande i:nth-child(2), .sk-carte-guirlande i:nth-child(8) { margin-top: 11px; } .sk-carte-guirlande i:nth-child(3), .sk-carte-guirlande i:nth-child(7) { margin-top: 15px; } .sk-carte-guirlande i:nth-child(4), .sk-carte-guirlande i:nth-child(6) { margin-top: 17px; } .sk-carte-guirlande i:nth-child(5) { margin-top: 18px; }
@keyframes sk-clignote { from { opacity: 1; } to { opacity: 0.25; box-shadow: none; } }
.sk-carte-velo { right: 14%; top: 78px; font-size: 22px; line-height: 1; transform: rotate(-16deg); filter: brightness(0.75) drop-shadow(0 0 4px #ff1a1a88); }

/* --- Écrans de départ et de jeu : nuit sur la forêt, lueur rouge qui monte, guirlande en haut --- */
.hp-scene[data-theme="stranger"], .hi-scene[data-theme="stranger"] { border-color: #b3202a; background: radial-gradient(ellipse at 50% 112%, #ff1a1a33, transparent 55%), linear-gradient(180deg, #03060d 0%, #0b1526 52%, #1a0709 100%); }
.hp-scene[data-theme="stranger"][data-chapitre="3"] { background: radial-gradient(ellipse at 50% 105%, #ff1a1a55, transparent 60%), linear-gradient(180deg, #12050a 0%, #2a0a10 55%, #3a0a0c 100%); }
.hp-scene[data-theme="stranger"][data-chapitre="4"] { background: radial-gradient(ellipse at 50% 100%, #ff2a1a66, transparent 62%), linear-gradient(180deg, #1a0406 0%, #3a080c 55%, #4a0a0c 100%); }
.hp-scene[data-theme="stranger"][data-chapitre="5"] { background: radial-gradient(ellipse at 50% 90%, #ff3a1a77, transparent 65%), linear-gradient(180deg, #240406 0%, #4a0a0e 55%, #5a0c0c 100%); }
.hp-scene[data-theme="stranger"]::before, .hi-scene[data-theme="stranger"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 18px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15px 11px, #ff4a4a 0 4px, transparent 5px), radial-gradient(circle at 45px 13px, #ffd23f 0 4px, transparent 5px), radial-gradient(circle at 75px 13px, #3fdc6a 0 4px, transparent 5px), radial-gradient(circle at 105px 11px, #3fa8ff 0 4px, transparent 5px), linear-gradient(#14161c, #14161c) 0 8px / 100% 2px no-repeat;
  background-size: 120px 18px, 120px 18px, 120px 18px, 120px 18px, 100% 2px;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
  filter: drop-shadow(0 0 4px #ffd23f88);
  animation: sk-guirlande-ecran 3s steps(2, jump-none) infinite;
}
@keyframes sk-guirlande-ecran { from { opacity: 1; } to { opacity: 0.55; } }
[data-theme="stranger"] .hp-ciel { display: none; }
[data-theme="stranger"] .hp-parchemin { background: linear-gradient(180deg, #f3ecdc, #e2d6bc); border-top: 4px solid #c41e2a; }
[data-theme="stranger"] .hp-barre > span { background: linear-gradient(90deg, #7a0a12, #ff4646); }
[data-theme="stranger"] .rayon { display: none; }
[data-theme="stranger"] .hi-chapitres li { background: #0a0f1ad9; }
[data-theme="stranger"] .hi-niveau, [data-theme="stranger"] .hi-sur-titre { color: #ff7a7a; }
[data-theme="stranger"] .hi-titre { font-family: Georgia, "Times New Roman", serif; color: #ff4646; letter-spacing: 0.05em; text-shadow: 0 0 12px #ff1a1aaa, 0 0 2px #ff8a8a; }
[data-theme="stranger"] .hi-infos, [data-theme="stranger"] .hi-retour, [data-theme="stranger"] .hp-sauver { color: var(--texte); }

/* --- Cinématiques : éléments communs --- */
.sk-ciel { inset: 0; background: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 8%, #fff, transparent), radial-gradient(1px 1px at 52% 22%, #fff, transparent), radial-gradient(1px 1px at 70% 6%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 20%, #fff, transparent), linear-gradient(180deg, #02040a 0%, #0a1528 60%, #0d1a24 100%); }
.sk-lune { right: 12%; top: 9%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fbf8e8, #cfc9ad); box-shadow: 0 0 40px #f4f1e055; }
.sk-arbres { left: 0; right: 0; }
.sk-arbres.loin { bottom: 20%; height: 58%; background: #0a1322; clip-path: polygon(0 100%, 0 40%, 4% 10%, 8% 44%, 12% 18%, 17% 50%, 22% 6%, 27% 46%, 32% 24%, 38% 54%, 44% 14%, 50% 50%, 56% 20%, 62% 52%, 68% 10%, 74% 46%, 80% 22%, 86% 50%, 92% 8%, 96% 40%, 100% 20%, 100% 100%); }
.sk-arbres.pres { bottom: 10%; height: 80%; background: #020409; clip-path: polygon(0 100%, 0 0, 5% 40%, 8% 6%, 13% 44%, 17% 18%, 22% 66%, 27% 100%, 73% 100%, 77% 62%, 81% 14%, 86% 46%, 90% 2%, 95% 40%, 100% 8%, 100% 100%); }
.sk-brume { left: -10%; right: -10%; bottom: 6%; height: 26%; background: radial-gradient(ellipse at 50% 60%, #a9bed633, transparent 70%); filter: blur(6px); animation: sk-brume 9s ease-in-out infinite alternate; }
@keyframes sk-brume { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.sk-chemin { left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, #17150f, #070605); }
.sk-spores { inset: 0; pointer-events: none; }
.sk-spores i { position: absolute; left: calc(var(--i) * 7% + 2%); top: 6%; width: 0.5%; aspect-ratio: 1; border-radius: 50%; background: #f2e0d0; opacity: 0.7; animation: sk-spore calc(5s + var(--i) * 0.25s) linear calc(var(--i) * -0.6s) infinite; }
@keyframes sk-spore { from { top: 104%; transform: translateX(0); } 50% { transform: translateX(-60%); } to { top: -4%; transform: translateX(80%); } }
.sk-lianes { left: 0; right: 0; bottom: 0; height: 24%; background: repeating-linear-gradient(115deg, transparent 0 18px, #3a0a0f 18px 22px), repeating-linear-gradient(65deg, transparent 0 26px, #2a080b 26px 30px), linear-gradient(180deg, transparent, #140305); -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); transform-origin: bottom; animation: sk-pousse 2.4s ease-out both; }
@keyframes sk-pousse { from { transform: scaleY(0); } to { transform: none; } }
.sk-ciel-envers { inset: 0; background: radial-gradient(ellipse at 50% 18%, #9a1c1c 0%, #3a0709 45%, #0d0204 100%); }
.sk-ciel-envers.sombre { background: radial-gradient(ellipse at 30% 40%, #6a1010 0%, #260407 50%, #080102 100%); }

/* Vélo en CSS : cadre rouge, roues à rayons, phare ; le cycliste peut disparaître seul. */
.sk-velo { position: absolute; width: 15%; height: 17%; }
.sk-velo-tout { position: absolute; inset: 0; transform-origin: 80% 100%; }
.sk-velo .roue { position: absolute; bottom: 0; width: 38%; aspect-ratio: 1; box-sizing: border-box; border-radius: 50%; border: 3px solid #c9ced6; background: repeating-conic-gradient(#c9ced699 0 4deg, transparent 4deg 30deg); animation: sk-tourne 0.45s linear infinite; }
.sk-velo .r1 { left: 0; } .sk-velo .r2 { right: 0; }
@keyframes sk-tourne { to { transform: rotate(360deg); } }
.sk-velo .cadre { position: absolute; left: 19%; right: 19%; bottom: 20%; height: 40%; background: #d23030; clip-path: polygon(0 100%, 30% 0, 86% 0, 100% 100%, 91% 100%, 80% 16%, 36% 16%, 9% 100%); }
.sk-velo .guidon { position: absolute; right: 16%; bottom: 56%; width: 4%; height: 22%; background: #c9ced6; transform: skewX(-18deg); }
.sk-velo .phare { position: absolute; left: 92%; bottom: 36%; width: 150%; height: 70%; background: linear-gradient(90deg, #fff6c8b0, transparent); clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%); opacity: 0; }
.sk-velo .cycliste { position: absolute; left: 32%; bottom: 46%; width: 30%; height: 100%; }
.sk-velo .cycliste .tete { position: absolute; left: 28%; top: 0; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #e8c4a0; box-shadow: inset 0 4px 0 #5a3a20; }
.sk-velo .cycliste .corps { position: absolute; left: 14%; right: 14%; top: 30%; bottom: 0; border-radius: 40% 40% 10% 10%; background: #3a6ea8; transform: rotate(10deg); }

/* Démogorgnon : silhouette longiligne, tête en pétales qui s'ouvrent sur une gueule dentée. */
.sk-demogorgnon { position: absolute; width: 10%; height: 64%; }
.sk-demogorgnon .corps { position: absolute; top: 22%; left: 22%; right: 22%; bottom: 0; border-radius: 40% 40% 12% 12%; background: linear-gradient(180deg, #4a3434, #1a1212); }
.sk-demogorgnon .corps::before, .sk-demogorgnon .corps::after { content: ""; position: absolute; top: 6%; width: 22%; height: 82%; border-radius: 8px; background: #2a1c1c; }
.sk-demogorgnon .corps::before { left: -24%; transform: rotate(10deg); } .sk-demogorgnon .corps::after { right: -24%; transform: rotate(-10deg); }
.sk-demogorgnon .gueule { position: absolute; left: -10%; top: 0; width: 120%; aspect-ratio: 1; }
.sk-demogorgnon .gueule i { position: absolute; left: 35%; bottom: 50%; width: 30%; height: 50%; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 100%, #ff6b5a, #8a1a1a 60%, #3a0a0a); transform-origin: 50% 100%; transform: rotate(calc(var(--i) * 72deg)); }
.sk-demogorgnon .gueule::after { content: ""; position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle, #0a0000 0 42%, transparent 46%), repeating-conic-gradient(#efe4cf 0 7deg, #5a0a0a 7deg 20deg); }

/* 1. Balade en forêt et enlèvement : le vélo arrive, la lampe vacille, la silhouette surgit, le cycliste disparaît. */
.sk-velo.balade { left: 40%; bottom: 9%; animation: sk-arrive 3s ease-out both; }
@keyframes sk-arrive { from { transform: translateX(-330%); } to { transform: none; } }
.sk-velo.balade .phare { animation: sk-lampe 5.4s linear both; }
@keyframes sk-lampe { 0%, 56% { opacity: 1; } 60% { opacity: 0.1; } 63% { opacity: 1; } 68% { opacity: 0; } 72% { opacity: 0.8; } 80% { opacity: 0.1; } 84% { opacity: 0.9; } 92%, 100% { opacity: 0; } }
.sk-velo.balade .cycliste { opacity: 0; animation: sk-enleve 0.9s ease-in 5.1s both; }
@keyframes sk-enleve { from { opacity: 1; transform: none; } 40% { opacity: 1; } to { opacity: 0; transform: translate(160%, -70%) scale(0.5); } }
.sk-velo.balade .sk-velo-tout { transform: rotate(16deg) translateY(14%); animation: sk-chute 0.6s ease-in 5.5s both; }
@keyframes sk-chute { from { transform: none; } to { transform: rotate(16deg) translateY(14%); } }
.sk-velo.balade .roue { animation-duration: 0.3s; }
.sk-demogorgnon.dans-les-arbres { right: 16%; bottom: 10%; opacity: 0; animation: sk-ombre 3.2s ease-in-out 3.1s both; }
.sk-demogorgnon.dans-les-arbres .gueule i { transform: rotate(calc(var(--i) * 72deg)) scale(0.3, 0.5); }
@keyframes sk-ombre { from { opacity: 0; transform: translateX(30%); } 30% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translateX(-20%); } to { opacity: 0; transform: translateX(-20%); } }
.sk-eclair-blanc { inset: 0; background: #fff; opacity: 0; animation: sk-eclair-blanc 0.7s ease-out 4.9s both; }
@keyframes sk-eclair-blanc { 0% { opacity: 0; } 30% { opacity: 0.85; } 100% { opacity: 0; } }

/* 2. Les guirlandes du salon : l'alphabet s'allume lettre par lettre (C-O-U-R-S), puis le mur se bombe. */
.sk-salon { inset: 0; background: radial-gradient(circle at 25% 25%, #8a6a3a66 0 3px, transparent 4px) 0 0 / 28px 28px, radial-gradient(circle at 75% 75%, #6a8a5a66 0 3px, transparent 4px) 0 0 / 28px 28px, repeating-linear-gradient(90deg, #d8c79a 0 18px, #cdbb8a 18px 36px); filter: brightness(0.5); box-shadow: inset 0 0 120px #000d; }
.sk-fil { left: 3%; right: 3%; top: 10%; height: 72%; background: linear-gradient(#16130e, #16130e) 0 5% / 100% 2px no-repeat, linear-gradient(#16130e, #16130e) 0 39% / 100% 2px no-repeat, linear-gradient(#16130e, #16130e) 0 73% / 100% 2px no-repeat; }
.sk-alphabet { left: 5%; right: 5%; top: 10%; height: 72%; display: flex; flex-direction: column; justify-content: space-between; }
.sk-alphabet .rangee { display: flex; justify-content: space-around; height: 30%; }
.sk-alphabet b { display: flex; flex-direction: column; align-items: center; color: #111; font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: clamp(0.8rem, 3.4vw, 2rem); line-height: 1; }
.sk-alphabet b i { display: block; width: 0.45em; height: 0.65em; margin-bottom: 0.25em; border-radius: 50% 50% 45% 45%; background: var(--c); filter: brightness(0.35); }
.sk-alphabet b:nth-child(4n+1) i { --c: #ff4a4a; } .sk-alphabet b:nth-child(4n+2) i { --c: #ffd23f; } .sk-alphabet b:nth-child(4n+3) i { --c: #3fdc6a; } .sk-alphabet b:nth-child(4n) i { --c: #3fa8ff; }
.sk-alphabet b.allumee i { animation: sk-ampoule 0.75s ease-in-out calc(1s + var(--r) * 0.55s) both, sk-folie 0.16s steps(2, jump-none) 4.3s 12; }
@keyframes sk-ampoule { 0%, 100% { filter: brightness(0.35); box-shadow: none; } 20%, 75% { filter: brightness(1.5); box-shadow: 0 0 14px 5px var(--c); } }
.sk-alphabet b i { animation: sk-folie 0.16s steps(2, jump-none) 4.3s 12; }
@keyframes sk-folie { from { filter: brightness(0.35); box-shadow: none; } to { filter: brightness(1.5); box-shadow: 0 0 12px 4px var(--c); } }
.sk-mur-bombe { left: 38%; top: 24%; width: 22%; height: 46%; border-radius: 48% 52% 46% 54%; background: radial-gradient(ellipse at 40% 32%, #f3e4b866, transparent 45%), radial-gradient(ellipse at 62% 72%, #0008, transparent 62%); filter: blur(2px); animation: sk-bombe 2.6s ease-out 5s both; }
@keyframes sk-bombe { from { opacity: 0; transform: scale(0.2); } 55% { opacity: 1; transform: scale(1.08); } 75% { transform: scale(0.96); } to { opacity: 1; transform: none; } }
.sk-fauteuil { left: 3%; bottom: 0; width: 20%; height: 22%; border-radius: 30% 30% 6px 6px; background: linear-gradient(180deg, #4a2e1e, #2a180e); }

/* 3. L'Envers du Décor : portail dans un tronc, la ville se retourne, le ciel rougit, le Démogorgnon s'ouvre. */
.scene-sk-envers .sk-ciel-envers { animation: sk-rougit 1.6s ease-in-out 2.6s both; }
@keyframes sk-rougit { from { filter: hue-rotate(210deg) saturate(0.6) brightness(0.55); } to { filter: none; } }
.sk-ville { left: 0; right: 0; top: 0; height: 36%; transform: scaleY(-1); }
.scene-sk-envers .sk-ville { animation: sk-retourne 1.6s ease-in-out 2.6s both; }
@keyframes sk-retourne { from { transform: translateY(178%); } 50% { transform: translateY(89%) scaleY(0); } to { transform: scaleY(-1); } }
.sk-ville .maisons { position: absolute; inset: 0; background: #0a0507; clip-path: polygon(0 100%, 0 62%, 6% 40%, 12% 62%, 12% 52%, 20% 52%, 20% 34%, 23% 34%, 23% 52%, 26% 52%, 32% 30%, 38% 52%, 38% 60%, 46% 60%, 46% 44%, 52% 26%, 58% 44%, 58% 70%, 76% 70%, 76% 48%, 82% 30%, 88% 48%, 88% 58%, 94% 40%, 100% 58%, 100% 100%); }
.sk-ville .chateau-eau { position: absolute; left: 62%; bottom: 0; width: 13%; height: 100%; box-sizing: border-box; padding-top: 3%; text-align: center; color: #d9c9a8; font: 700 clamp(0.4rem, 1.4vw, 0.8rem) Georgia, serif; letter-spacing: 0.08em; background: linear-gradient(#2c2226, #1a1214) top / 100% 36% no-repeat, linear-gradient(#0a0507, #0a0507) 22% 100% / 8% 66% no-repeat, linear-gradient(#0a0507, #0a0507) 78% 100% / 8% 66% no-repeat; }
.sk-eclair-rouge { inset: 0; background: radial-gradient(ellipse at 30% 0%, #ffd0c0aa, #ff2a2a55 30%, transparent 60%); opacity: 0; animation: sk-eclair 2.6s linear 3.4s infinite; }
@keyframes sk-eclair { 0%, 100% { opacity: 0; } 4% { opacity: 0.9; } 8% { opacity: 0; } 11% { opacity: 0.6; } 14% { opacity: 0; } }
.sk-portail { left: 8%; bottom: 12%; width: 13%; height: 42%; border-radius: 50% / 60%; background: radial-gradient(ellipse, #fff1c4 0 8%, #ff7a3a 22%, #b3121a 46%, #3a0508 68%, transparent 71%); filter: drop-shadow(0 0 14px #ff2a1a); animation: sk-portail 2.4s ease-out both, sk-palpite 1.1s ease-in-out 2.4s infinite alternate; }
@keyframes sk-portail { from { transform: scale(0.05, 0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sk-palpite { to { transform: scale(1.06, 0.96); } }
.sk-demogorgnon.surgit { right: 16%; bottom: 4%; height: 70%; width: 11%; animation: sk-surgit 1.3s ease-out 4s both; }
@keyframes sk-surgit { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
.sk-demogorgnon.surgit .gueule i { animation: sk-petale 0.9s ease-out 5.1s both; }
@keyframes sk-petale { from { transform: rotate(calc(var(--i) * 72deg)) scale(0.3, 0.5); } to { transform: rotate(calc(var(--i) * 72deg)); } }

/* 4. L'horloge de Vecnard : trois coups, le héros s'élève, puis la musique du baladeur le ramène. */
.sk-dong { left: 26%; top: 10%; color: #ff9a9a; font: 900 clamp(1.4rem, 5vw, 3rem) Georgia, serif; letter-spacing: 0.2em; text-shadow: 0 0 18px #ff1a1a; opacity: 0; animation: sk-dong 1.1s ease-out 0.3s 3 both; }
@keyframes sk-dong { from { opacity: 0; transform: scale(0.6); } 20% { opacity: 1; } to { opacity: 0; transform: scale(1.6); } }
.sk-horloge { left: 12%; bottom: 6%; width: 14%; height: 80%; filter: drop-shadow(0 0 18px #ff1a1a66); }
.sk-horloge .cadran { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; border-radius: 50% 50% 8% 8%; background: radial-gradient(circle, #efe3c4 0 50%, #3a2214 52% 62%, #5a3420 64%); }
.sk-horloge .aiguille { position: absolute; left: 48%; bottom: 50%; width: 4%; transform-origin: 50% 100%; background: #1a1008; }
.sk-horloge .aiguille.h { height: 22%; transform: rotate(120deg); }
.sk-horloge .aiguille.m { height: 34%; animation: sk-minute 8s linear both; }
@keyframes sk-minute { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.sk-horloge .caisse { position: absolute; top: 24%; bottom: 0; left: 12%; right: 12%; border-radius: 4px; background: linear-gradient(90deg, #3a2214, #6a4028 50%, #3a2214); box-shadow: inset 0 0 0 4px #2a160c; }
.sk-horloge .balancier { position: absolute; left: 30%; top: 4%; width: 40%; height: 72%; transform-origin: 50% 0; background: linear-gradient(#b38a3a, #b38a3a) 50% 0 / 12% 80% no-repeat; animation: sk-balance 1.1s ease-in-out infinite alternate; }
.sk-horloge .balancier::after { content: ""; position: absolute; left: 10%; bottom: 0; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe39a, #c9a24a 55%, #8a6a2a); }
@keyframes sk-balance { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.sk-levitation { left: 52%; bottom: 12%; width: 8%; height: 34%; animation: sk-leve 6.6s ease-in-out 0.4s both; }
.sk-levitation .tete { position: absolute; left: 26%; top: 0; width: 48%; aspect-ratio: 1; border-radius: 50%; background: #e8c4a0; box-shadow: inset 0 5px 0 #b8432a; }
.sk-levitation .corps { position: absolute; left: 8%; right: 8%; top: 26%; bottom: 0; border-radius: 40% 40% 10% 10%; background: linear-gradient(180deg, #3a6ea8, #24466e); }
@keyframes sk-leve { 0%, 6% { transform: none; filter: none; } 48%, 62% { transform: translateY(-68%) rotate(-4deg); filter: drop-shadow(0 0 14px #ff2a2a); } 86% { transform: translateY(-6%); filter: drop-shadow(0 0 16px #ffd76a); } 100% { transform: none; filter: none; } }
.sk-baladeur { left: 64%; bottom: 36%; width: 7%; height: 20%; animation: sk-pop 0.6s ease-out 3.8s both; }
@keyframes sk-pop { from { opacity: 0; transform: scale(0.2); } 70% { transform: scale(1.15); } to { opacity: 1; transform: none; } }
.sk-baladeur .casque { position: absolute; top: 0; left: 0; right: 0; height: 50%; box-sizing: border-box; border: 4px solid #e8e8e8; border-bottom: 0; border-radius: 50% 50% 0 0; }
.sk-baladeur .casque::before, .sk-baladeur .casque::after { content: ""; position: absolute; bottom: -18%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ff7a2a; }
.sk-baladeur .casque::before { left: -22%; } .sk-baladeur .casque::after { right: -22%; }
.sk-baladeur .boitier { position: absolute; bottom: 0; left: 18%; right: 18%; height: 44%; border-radius: 4px; background: linear-gradient(180deg, #3a6ea8, #1f4a7a); box-shadow: inset 0 0 0 2px #9fc3e8; }
.sk-notes { left: 58%; bottom: 44%; width: 20%; height: 40%; }
.sk-notes i { position: absolute; bottom: 0; color: #ffd76a; font-style: normal; font-size: clamp(1rem, 3vw, 1.8rem); text-shadow: 0 0 10px #ffb84a; opacity: 0; animation: sk-note 1.6s ease-out calc(4.1s + var(--n) * 0.35s) 2 both; }
.sk-notes i:nth-child(1) { left: 0; --n: 0; } .sk-notes i:nth-child(2) { left: 30%; --n: 1; } .sk-notes i:nth-child(3) { left: 60%; --n: 2; } .sk-notes i:nth-child(4) { left: 85%; --n: 3; }
@keyframes sk-note { from { opacity: 0; transform: none; } 30% { opacity: 1; } to { opacity: 0; transform: translate(-120%, -260%) rotate(-20deg); } }

/* 5. Victoire : l'onde frappe Vecnard qui se fissure et vole en éclats, puis l'aube se lève sur Hokins. */
.sk-phase { inset: 0; }
.sk-phase > span { position: absolute; }
.sk-phase.un { opacity: 0; animation: sk-phase-un 4.4s linear both; }
@keyframes sk-phase-un { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sk-phase.deux { animation: sk-apparait 0.9s ease-out 4.2s both; }
@keyframes sk-apparait { from { opacity: 0; } to { opacity: 1; } }
.sk-vecnard { right: 14%; bottom: 6%; width: 14%; height: 78%; opacity: 0; animation: sk-eclate 0.8s ease-in 3.4s both; }
@keyframes sk-eclate { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: scale(1.25); filter: brightness(3) blur(4px); } }
.sk-vecnard .tete { position: absolute; left: 26%; top: 0; width: 48%; height: 20%; border-radius: 45% 45% 40% 40%; background: radial-gradient(circle at 50% 40%, #8a4a3a, #4a2018); }
.sk-vecnard .tete::after { content: ""; position: absolute; left: 14%; right: 14%; top: 40%; height: 16%; background: radial-gradient(circle at 25% 50%, #120404 0 24%, transparent 28%), radial-gradient(circle at 75% 50%, #120404 0 24%, transparent 28%); }
.sk-vecnard .corps { position: absolute; top: 18%; bottom: 0; left: 10%; right: 10%; border-radius: 30% 30% 6% 6%; background: repeating-linear-gradient(160deg, #5a2a22 0 6px, #7a3a2c 6px 9px, #3a1812 9px 14px); }
.sk-vecnard .fissures { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 46%, #ffe9b0 47% 49%, transparent 50%), linear-gradient(60deg, transparent 30%, #ffe9b0 31% 32.5%, transparent 33.5%), linear-gradient(160deg, transparent 60%, #ffe9b0 61% 62.5%, transparent 63.5%); filter: drop-shadow(0 0 6px #ffd76a); animation: sk-fissure 0.9s ease-out 2.3s both; }
@keyframes sk-fissure { from { opacity: 0; } to { opacity: 1; } }
.sk-heros { left: 16%; bottom: 6%; width: 9%; height: 46%; }
.sk-heros .tete { position: absolute; left: 26%; top: 0; width: 48%; aspect-ratio: 1; border-radius: 50%; background: #e8c4a0; box-shadow: inset 0 5px 0 #5a3a20; }
.sk-heros .corps { position: absolute; left: 8%; right: 8%; top: 26%; bottom: 0; border-radius: 40% 40% 10% 10%; background: linear-gradient(180deg, #c93a3a, #7a1f1f); }
.sk-heros .bras { position: absolute; left: 70%; top: 32%; width: 90%; height: 8%; border-radius: 6px; background: #e8c4a0; transform-origin: 0 50%; transform: rotate(-10deg); }
.sk-onde { left: 26%; right: 26%; bottom: 36%; height: 9%; border-radius: 999px; background: linear-gradient(90deg, #fff 0%, #c9b3ff 40%, #ff4a6a 100%); filter: blur(1px) drop-shadow(0 0 12px #c9b3ff); transform-origin: 0 50%; animation: sk-onde 2.2s ease-out 0.9s both; }
@keyframes sk-onde { from { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.sk-flash { inset: 0; background: #fff; opacity: 0; animation: sk-flash 1.3s ease-out 3.5s both; }
@keyframes sk-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.sk-aube { inset: 0; background: radial-gradient(circle at 50% 88%, #fff2b0 0 6%, #ffc56a88 13%, transparent 42%), linear-gradient(180deg, #4a6fb0 0%, #f2a86a 62%, #ffd9a0 100%); }
.sk-ville.jour { top: auto; bottom: 18%; transform: none; animation: none; }
.sk-ville.jour .maisons { background: #2a2440; }
.sk-ville.jour .chateau-eau { color: #f6ead0; background: linear-gradient(#5a5070, #3a3456) top / 100% 36% no-repeat, linear-gradient(#2a2440, #2a2440) 22% 100% / 8% 66% no-repeat, linear-gradient(#2a2440, #2a2440) 78% 100% / 8% 66% no-repeat; }
.sk-fil.jour { left: 0; right: 0; top: 3%; height: 7%; background: radial-gradient(circle at 15px 60%, #ff4a4a 0 4px, transparent 5px) 0 0 / 120px 100% repeat-x, radial-gradient(circle at 45px 70%, #ffd23f 0 4px, transparent 5px) 0 0 / 120px 100% repeat-x, radial-gradient(circle at 75px 70%, #3fdc6a 0 4px, transparent 5px) 0 0 / 120px 100% repeat-x, radial-gradient(circle at 105px 60%, #3fa8ff 0 4px, transparent 5px) 0 0 / 120px 100% repeat-x, linear-gradient(#14161c, #14161c) 0 40% / 100% 2px no-repeat; filter: drop-shadow(0 0 5px #ffd23f); animation: sk-guirlande-ecran 1.2s steps(2, jump-none) infinite; }
.sk-bande { left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(180deg, #4a4048, #2a2228); }
.sk-bande .sk-velo { bottom: 30%; width: 13%; height: 70%; animation: sk-pedale 2.2s ease-out both; }
.sk-bande .b1 { left: 22%; animation-delay: 4.6s; } .sk-bande .b2 { left: 44%; animation-delay: 4.9s; } .sk-bande .b3 { left: 66%; animation-delay: 5.2s; }
.sk-bande .b2 .cycliste .corps { background: #c93a3a; } .sk-bande .b3 .cycliste .corps { background: #3aa86a; }
@keyframes sk-pedale { from { transform: translateX(-420%); } to { transform: none; } }
.sk-banniere { left: 50%; top: 18%; max-width: 88%; transform: translateX(-50%); padding: 0.3em 0.8em; border: 2px solid #ff3b3b; border-radius: 8px; background: #1a0a0acc; color: #fff3d0; font: 900 clamp(0.85rem, 3vw, 1.6rem) Georgia, serif; text-shadow: 0 0 10px #ff1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: sk-banniere 0.9s ease-out 5.4s both; }
@keyframes sk-banniere { from { opacity: 0; transform: translate(-50%, -40%) scale(0.8); } to { opacity: 1; transform: translateX(-50%); } }

/* 6. Défaite : quatre coups d'horloge, puis ton avis de disparition cloué sur un poteau. */
.scene-sk-disparu .sk-dong { animation: sk-dong 0.75s ease-out 0.3s 4 both; }
.sk-poteau { left: 43%; bottom: 0; width: 2.4%; height: 92%; background: linear-gradient(90deg, #1e140c, #3e2a1a, #1e140c); }
.sk-poteau::before { content: ""; position: absolute; left: -300%; right: -300%; top: 6%; height: 2.4%; background: #2e1e12; }
.sk-affiche { left: 35.5%; top: 20%; width: 17%; height: 56%; box-sizing: border-box; padding: 1.5% 1%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: #f2ecd8; color: #111; box-shadow: 0 8px 24px #000a; transform: rotate(-3deg); animation: sk-affiche 0.8s ease-out 3s both; }
.sk-affiche > span { display: block; max-width: 100%; text-align: center; }
@keyframes sk-affiche { from { opacity: 0; transform: rotate(-14deg) scale(1.5); } to { opacity: 1; transform: rotate(-3deg); } }
.sk-affiche .sk-af-titre { font: 900 clamp(0.6rem, 2.2vw, 1.3rem) Georgia, serif; letter-spacing: 0.12em; }
.sk-affiche .sk-af-portrait { width: 58%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #555; background: #c9c2ad; color: #3a3a3a; font: 900 clamp(1rem, 4.6vw, 2.6rem) Georgia, serif; filter: grayscale(1); }
.sk-affiche .sk-af-nom { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; font-size: clamp(0.5rem, 1.6vw, 0.95rem); }
.sk-affiche .sk-af-detail { font-size: clamp(0.35rem, 1vw, 0.62rem); line-height: 1.2; }
.sk-velo-seul { left: 60%; bottom: 7%; width: 15%; height: 17%; }
.sk-velo-seul .sk-velo { left: 0; bottom: 0; width: 100%; height: 100%; }
.sk-velo.abandonne .cycliste { display: none; }
.sk-velo.abandonne .sk-velo-tout { transform: rotate(16deg) translateY(14%); }
.sk-velo.abandonne .roue { animation-duration: 3s; }
.sk-lueur-rouge { inset: 0; background: radial-gradient(ellipse at 50% 120%, #ff1a1a66, transparent 60%); animation: sk-faille 1.6s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .sk-carte *, .cine-scene [class^="sk-"], .cine-scene [class^="sk-"] *, [data-theme="stranger"]::before { animation: none !important; }
  .sk-carte-spores i { opacity: 0.5; }
}