/* ===== Star Ouars : carte, écrans de départ et de jeu, cinématiques =====
   Fichier dédié à la saga, chargé après style.css (qui dessine l'hyperespace de la carte).
   Récit parodique (la Farce, Dark Vapeur, Tatouine, la Planète Noire) ; décors 100 % CSS/emojis.
   Le style de base décrit l'état final ; les animations partent de l'état initial (fill-mode both). */

/* --- Carte du hub : deux sabres croisés devant l'hyperespace --- */
.saga-etoiles .ve-sabre { position: absolute; top: 12px; width: 6px; height: 68px; border-radius: 3px; transform-origin: 50% 100%; }
.saga-etoiles .ve-sabre::after { content: ""; position: absolute; left: -2px; bottom: -18px; width: 10px; height: 20px; border-radius: 2px; background: linear-gradient(90deg, #6f7a88, #d8dee6, #6f7a88); }
.saga-etoiles .ve-sabre.bleu { left: calc(50% - 20px); background: #e6f7ff; box-shadow: 0 0 8px 3px #3d8bff, 0 0 18px 6px #3d8bff88; transform: rotate(-28deg); animation: ve-bourdonne 0.18s ease-in-out infinite alternate; }
.saga-etoiles .ve-sabre.rouge { left: calc(50% + 14px); background: #ffe6e6; box-shadow: 0 0 8px 3px #ff3b3b, 0 0 18px 6px #ff3b3b88; transform: rotate(28deg); animation: ve-bourdonne 0.18s ease-in-out infinite alternate-reverse; }
@keyframes ve-bourdonne { from { opacity: 0.85; } to { opacity: 1; } }

/* --- Écrans de départ et de jeu : champ d'étoiles, planète lointaine --- */
.so-decor { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#hp-scene > .so-decor, #hi-scene > .so-decor { position: absolute; z-index: 0; }
[data-theme="etoiles"] .so-decor { display: block; }
[data-theme="etoiles"] .hp-ciel { display: none; }
.so-decor > span { position: absolute; display: block; }
.sd-etoiles { inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent), radial-gradient(1px 1px at 25% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 30%, #fff, transparent), radial-gradient(1px 1px at 62% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 22%, #fff, transparent), radial-gradient(1px 1px at 92% 55%, #fff, transparent); background-size: 260px 260px; animation: sd-defile 60s linear infinite; }
.sd-planete { right: -40px; bottom: 12%; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #5a6a8a, #1a2238 70%); box-shadow: inset -20px -10px 40px #000a; opacity: 0.55; }
.sd-planete::after { content: ""; position: absolute; left: 22%; top: 24%; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #0b0f1e 40%, #3a4660 60%); }
.hp-scene[data-theme="etoiles"], .hi-scene[data-theme="etoiles"] { border-color: #ffe81f; background: radial-gradient(ellipse at 50% 30%, #1a2050 0%, #070a1e 70%); }
.hp-scene[data-theme="etoiles"][data-chapitre="1"] { background: linear-gradient(180deg, #3a1f3a 0%, #a8603a 55%, #e0a060 100%); }
.hp-scene[data-theme="etoiles"][data-chapitre="2"] { background: radial-gradient(ellipse at 50% 40%, #12305a 0%, #050a1a 75%); }
.hp-scene[data-theme="etoiles"][data-chapitre="4"] { background: radial-gradient(ellipse at 50% 40%, #2a2a3a 0%, #05050a 75%); }
.hp-scene[data-theme="etoiles"][data-chapitre="5"] { background: radial-gradient(ellipse at 50% 50%, #4a0a0a 0%, #0a0205 75%); }
[data-theme="etoiles"] .hp-parchemin { background: linear-gradient(180deg, #10142a, #070a18); color: #e6ecff; border-top: 4px solid #ffe81f; box-shadow: 0 0 0 1px #ffe81f44, 0 10px 30px #000a; }
[data-theme="etoiles"] .hp-texte { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-theme="etoiles"] .hp-parchemin input[type="text"] { background: #0b1430; color: var(--texte); border-color: #3a4a8a; }
[data-theme="etoiles"] .hp-parchemin .btn-discret { color: #a9b4d8; }
[data-theme="etoiles"] .hp-chapitre { color: #ffe81f; text-shadow: 0 0 12px #ffe81f55; }
[data-theme="etoiles"] .hp-avatar { filter: drop-shadow(0 0 10px #3d8bffaa); }
[data-theme="etoiles"] .hp-ennemi .hp-avatar { filter: drop-shadow(0 0 12px #ff3b3baa); }
[data-theme="etoiles"] .hp-barre > span { background: linear-gradient(90deg, #ff3b3b, #ff9a9a); }
[data-theme="etoiles"] .rayon-joueur { background: linear-gradient(90deg, transparent, #e6f7ff, #3d8bff); box-shadow: 0 0 18px 4px #3d8bffaa; }
[data-theme="etoiles"] .rayon-ennemi { background: linear-gradient(270deg, transparent, #ffe6e6, #ff3b3b); box-shadow: 0 0 18px 4px #ff3b3baa; }
[data-theme="etoiles"] .hi-chapitres li { background: #0b1430d9; }
[data-theme="etoiles"] .hi-niveau, [data-theme="etoiles"] .hi-sur-titre { color: #ffe81f; }
[data-theme="etoiles"] .hi-titre { color: #ffe81f; }
[data-theme="etoiles"] .hi-infos, [data-theme="etoiles"] .hi-retour, [data-theme="etoiles"] .hp-sauver { color: var(--texte); }

/* --- Cinématiques : apprenti, sabres, Dark Vapeur --- */
.so-etoiles { inset: 0; background: #03040c; background-image: radial-gradient(1.5px 1.5px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 48%, #fff, transparent), radial-gradient(1.5px 1.5px at 41% 20%, #fff, transparent), radial-gradient(1px 1px at 58% 72%, #fff, transparent), radial-gradient(1.5px 1.5px at 76% 30%, #fff, transparent), radial-gradient(1px 1px at 90% 62%, #fff, transparent); background-size: 50% 50%; }
.so-jedi { width: 48px; height: 112px; }
.so-jedi > span { position: absolute; display: block; }
.so-jedi .robe { left: 4px; top: 20px; width: 40px; height: 92px; background: linear-gradient(90deg, #8a6a44, #c9a878 40%, #8a6a44); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.so-jedi .tete { left: 14px; top: 0; width: 20px; height: 22px; border-radius: 50%; background: #e0b48a; box-shadow: inset 0 6px 0 #c99a3a; }
.so-jedi .sabre { left: 42px; top: -34px; width: 6px; height: 70px; border-radius: 3px; transform-origin: 50% 100%; transform: rotate(18deg); }
.so-jedi .sabre::after { content: ""; position: absolute; left: -2px; bottom: -16px; width: 10px; height: 18px; border-radius: 2px; background: linear-gradient(90deg, #6f7a88, #d8dee6, #6f7a88); }
.sabre.bleu { background: #e6f7ff; box-shadow: 0 0 8px 3px #3d8bff, 0 0 20px 8px #3d8bff88; }
.sabre.rouge { background: #ffe6e6; box-shadow: 0 0 8px 3px #ff3b3b, 0 0 20px 8px #ff3b3b88; }
.sabre.eteint { height: 0; top: 36px; box-shadow: none; }
.sabre.allume { animation: so-allume 0.6s ease-out 0.8s both; }
.sabre.vire-rouge { animation: so-vire-rouge 3s ease-in 1.5s both; background: #ffe6e6; box-shadow: 0 0 8px 3px #ff3b3b, 0 0 20px 8px #ff3b3b88; }
.so-vapeur { width: 60px; height: 124px; }
.so-vapeur > span { position: absolute; display: block; }
.so-vapeur .cape { left: 0; top: 22px; width: 60px; height: 102px; background: linear-gradient(180deg, #14141a, #000); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.so-vapeur .corps { left: 16px; top: 26px; width: 28px; height: 40px; border-radius: 4px; background: linear-gradient(#1a1a22 0 60%, #3a3a46 60% 70%, #1a1a22 70%); box-shadow: inset 6px 10px 0 -4px #ff3b3b, inset -6px 10px 0 -4px #3d8bff; }
.so-vapeur .casque { left: 14px; top: 0; width: 32px; height: 30px; border-radius: 50% 50% 20% 20%; background: radial-gradient(circle at 35% 55%, #2a2a33 0 3px, transparent 4px), radial-gradient(circle at 65% 55%, #2a2a33 0 3px, transparent 4px), linear-gradient(180deg, #0a0a0e 0 50%, #22222a 50%); box-shadow: 0 6px 0 -2px #0a0a0e, inset 0 -6px 0 #3a3a46; }
.so-vapeur .sabre { left: -6px; top: -26px; width: 6px; height: 72px; border-radius: 3px; transform-origin: 50% 100%; transform: rotate(-20deg); }
.so-vapeur .sabre::after { content: ""; position: absolute; left: -2px; bottom: -16px; width: 10px; height: 18px; border-radius: 2px; background: linear-gradient(90deg, #22222a, #8a8a96, #22222a); }

/* 1. Tatouine : deux soleils, dunes, droïde et hologramme */
.so-ciel-desert { inset: 0; background: linear-gradient(180deg, #3a1f3a, #c86a3a 55%, #f0b070); }
.so-soleil { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #fff6c8, #ffb347); box-shadow: 0 0 30px #ffb347; animation: so-coucher 7s ease-in both; }
.so-soleil.s1 { left: 58%; top: 30%; }
.so-soleil.s2 { left: 70%; top: 38%; width: 38px; height: 38px; }
.so-dunes { left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, #c98a4a, #8a5a2a); clip-path: polygon(0 40%, 15% 20%, 32% 35%, 50% 10%, 68% 30%, 84% 15%, 100% 30%, 100% 100%, 0 100%); }
.so-ferme { left: 10%; bottom: 30%; width: 70px; height: 34px; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #e0c8a0, #a8885a); }
.so-jedi.desert { left: 40%; bottom: 8%; }
.so-droide { left: 56%; bottom: 8%; width: 32px; height: 48px; }
.so-droide > span { position: absolute; display: block; }
.so-droide .dome { left: 0; top: 0; width: 32px; height: 16px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, #8a94ac, #d8dee6, #8a94ac); box-shadow: inset 8px -4px 0 -4px #ff9a3c; }
.so-droide .corps { left: 2px; top: 16px; width: 28px; height: 32px; border-radius: 2px; background: repeating-linear-gradient(180deg, #e07a2f 0 8px, #4a5466 8px 10px); border-radius: 6px; }
.so-hologramme { left: calc(56% + 30px); bottom: calc(8% + 36px); width: 70px; height: 80px; background: linear-gradient(0deg, #6ad0ff66, #6ad0ff11); clip-path: polygon(0 100%, 100% 100%, 75% 0, 25% 0); animation: so-holo 0.25s steps(2) infinite, so-apparait 1s ease-out 2s both; }
.so-hologramme .silhouette { position: absolute; left: 26px; top: 6px; width: 18px; height: 40px; border-radius: 9px 9px 4px 4px; background: #bff0ffaa; }

/* 2. Premier sabre : entraînement face au drone */
.so-salle { left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #2a3040, #0a0c14); }
.so-aura { left: calc(50% - 100px); bottom: 10%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #3d8bff44, transparent 70%); animation: so-apparait 2s ease-out 1s both; }
.so-jedi.entrainement { left: calc(50% - 24px); bottom: 10%; transform: scale(1.2); transform-origin: bottom; }
.so-drone { left: 64%; top: 22%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9d1dc, #4a5466); box-shadow: 0 0 10px #ff3b3b88; animation: so-drone 2.4s ease-in-out infinite alternate; }
.so-tirs { left: 52%; top: 30%; width: 90px; height: 4px; background: linear-gradient(90deg, transparent, #ff3b3b); box-shadow: 0 0 8px #ff3b3b; transform: rotate(30deg); animation: so-tir 0.9s linear infinite; }

/* 3. Hyperespace : traînées d'étoiles et cockpit */
.so-trainees { inset: -50%; background: #02030a repeating-conic-gradient(from 0deg at 50% 50%, #bfe0ff00 0 3deg, #bfe0ffcc 3deg 3.4deg, #bfe0ff00 3.4deg 7deg); -webkit-mask: radial-gradient(circle, transparent 6%, #000 50%); mask: radial-gradient(circle, transparent 6%, #000 50%); animation: so-saut 2.5s ease-in both; }
.so-tunnel { left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, #fff, #bfe0ff00 70%); animation: so-tunnel 6s ease-in both; }
.so-cockpit { inset: 0; background: #0c0e16; box-shadow: inset 0 0 0 4px #2a2f3e; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 8% 6%, 4% 72%, 96% 72%, 92% 6%, 8% 6%); }
.so-tableau { left: 20%; right: 20%; bottom: 8%; height: 14%; display: flex; justify-content: space-around; align-items: center; }
.so-tableau i { display: block; width: 18%; height: 40%; border-radius: 3px; background: repeating-linear-gradient(90deg, #3dff8a 0 4px, transparent 4px 7px); opacity: 0.8; animation: so-voyants 0.6s steps(2) infinite; }
.so-tableau i:nth-child(2) { background: repeating-linear-gradient(90deg, #ffe81f 0 4px, transparent 4px 7px); animation-delay: -0.3s; }
.so-tableau i:nth-child(3) { background: repeating-linear-gradient(90deg, #ff3b3b 0 4px, transparent 4px 7px); }

/* 4. Duel sur la passerelle face à Dark Vapeur */
.so-salle-rouge { inset: 0; background: radial-gradient(ellipse at 50% 60%, #5a0a0a, #0a0205 75%); }
.so-hublot { left: calc(50% - 70px); top: 6%; width: 140px; height: 140px; border-radius: 50%; border: 8px solid #2a2a33; background: #03040c radial-gradient(1px 1px at 20% 30%, #fff, transparent); overflow: hidden; }
.so-planete-noire { position: absolute; left: 30px; top: 30px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6a6a7a, #1a1a22 70%); box-shadow: inset 0 -2px 0 #000; }
.so-planete-noire::after { content: ""; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #0a0a0e 40%, #4a4a56 60%); }
.so-passerelle { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #2a2a33, #0a0a0e); border-top: 3px solid #4a4a56; }
.so-jedi.duel { left: 30%; bottom: 14%; transform: scale(1.1); transform-origin: bottom; }
.so-jedi.duel .sabre { transform: rotate(40deg); }
.so-vapeur.duel { right: 30%; bottom: 14%; transform: scale(1.1); transform-origin: bottom; animation: so-avance 2s ease-out both; }
.so-vapeur.duel .sabre { transform: rotate(-40deg); }
.so-etincelles { left: calc(50% - 30px); bottom: calc(14% + 110px); width: 60px; height: 60px; background-image: radial-gradient(3px 3px at 20% 30%, #fff, transparent), radial-gradient(3px 3px at 70% 20%, #ffe6a0, transparent), radial-gradient(3px 3px at 40% 80%, #fff, transparent), radial-gradient(3px 3px at 85% 65%, #ffd0a0, transparent), radial-gradient(circle, #ffffffcc, transparent 50%); animation: so-etincelles 0.3s steps(2) infinite; }
.so-souffle { right: 6%; top: 8%; color: #ff9a9a; font-family: "Courier New", monospace; font-weight: 900; font-size: clamp(0.7rem, 2.4vw, 1.1rem); letter-spacing: 0.2em; animation: so-souffle 2.6s ease-in-out infinite; }

/* 5. Victoire : explosion de la Planète Noire et médaille */
.so-explosion { left: 50%; top: 30%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffe08a 40%, #ff7a2f00 70%); transform: scale(6); opacity: 0; animation: so-boum 2.5s ease-out both; }
.so-anneau { left: 50%; top: 30%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid #bfe0ff; transform: scale(10); opacity: 0; animation: so-anneau 2.5s ease-out 0.3s both; }
.so-feux { inset: 0; background-image: radial-gradient(3px 3px at 15% 20%, #ffe81f, transparent), radial-gradient(3px 3px at 80% 25%, #3d8bff, transparent), radial-gradient(3px 3px at 30% 40%, #ff3b3b, transparent), radial-gradient(3px 3px at 65% 12%, #3dff8a, transparent); background-size: 50% 50%; animation: so-feux 1.6s ease-in-out 2s infinite alternate; }
.so-jedi.heros { left: calc(50% - 24px); bottom: 14%; transform: scale(1.2); transform-origin: bottom; }
.so-jedi.heros .sabre { transform: rotate(0); }
.so-medaille { left: calc(50% - 10px); bottom: calc(14% + 70px); font-size: 26px; animation: so-medaille 1.5s ease-out 3.5s both; }
.so-titre { left: 0; right: 0; bottom: 3%; text-align: center; color: #ffe81f; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(0.85rem, 2.8vw, 1.5rem); letter-spacing: 0.08em; text-shadow: 0 0 12px #000; animation: so-apparait 1.2s ease-out 4.5s both; }

/* 6. Défaite : la lame vire au rouge, le côté obscur gagne */
.so-voile-sombre { inset: 0; background: radial-gradient(ellipse at 50% 50%, #3a0a0a00 20%, #000000ee 80%); animation: so-apparait 4s ease-in both; }
.so-jedi.obscur { left: calc(50% - 24px); bottom: 14%; transform: scale(1.3); transform-origin: bottom; }
.so-jedi.obscur .robe { background: linear-gradient(90deg, #0a0a0e, #22222a 40%, #0a0a0e); animation: so-noircit 3s ease-in 1s both; }
.so-yeux-obscurs { left: calc(50% - 10px); bottom: calc(14% + 123px); width: 20px; height: 6px; animation: so-apparait 1.5s ease-in 3s both; }
.so-yeux-obscurs i { position: absolute; top: 0; width: 6px; height: 4px; border-radius: 50%; background: #ffd23b; box-shadow: 0 0 8px 3px #ff3b3b; }
.so-yeux-obscurs i:first-child { left: 0; }
.so-yeux-obscurs i:last-child { right: 0; }
.so-eclairs { inset: 0; background: linear-gradient(115deg, transparent 48%, #c9a0ff88 49%, transparent 50%), linear-gradient(70deg, transparent 60%, #c9a0ff66 61%, transparent 62%); opacity: 0; animation: so-eclairs 0.8s steps(2) 2s 3; }
.so-nom-obscur { left: 0; right: 0; bottom: 3%; text-align: center; color: #ff6a6a; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(0.9rem, 3vw, 1.6rem); letter-spacing: 0.12em; text-shadow: 0 0 12px #ff3b3b; animation: so-apparait 1.5s ease-out 4s both; }

/* --- Animations --- */
@keyframes sd-defile { to { background-position: -260px 0; } }
@keyframes so-coucher { from { transform: translateY(-40px); } to { transform: none; } }
@keyframes so-holo { 50% { opacity: 0.7; } }
@keyframes so-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes so-allume { from { height: 0; top: 36px; } to { height: 70px; top: -34px; } }
@keyframes so-vire-rouge { from { background: #e6f7ff; box-shadow: 0 0 8px 3px #3d8bff, 0 0 20px 8px #3d8bff88; } to { background: #ffe6e6; box-shadow: 0 0 8px 3px #ff3b3b, 0 0 20px 8px #ff3b3b88; } }
@keyframes so-drone { from { transform: translate(0, 0); } to { transform: translate(-30px, 20px); } }
@keyframes so-tir { from { opacity: 1; transform: rotate(30deg) translateX(40px); } to { opacity: 0; transform: rotate(30deg) translateX(-60px); } }
@keyframes so-saut { from { transform: scale(0.2) rotate(0); opacity: 0.3; } to { transform: scale(1) rotate(10deg); opacity: 1; } }
@keyframes so-tunnel { from { transform: scale(0.5); } to { transform: scale(6); } }
@keyframes so-voyants { 50% { opacity: 0.3; } }
@keyframes so-avance { from { transform: translateX(80px) scale(1.1); opacity: 0; } to { transform: scale(1.1); opacity: 1; } }
@keyframes so-etincelles { 50% { opacity: 0.4; transform: scale(1.2); } }
@keyframes so-souffle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes so-boum { 0% { transform: scale(0.2); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
@keyframes so-anneau { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(10); opacity: 0; } }
@keyframes so-feux { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes so-medaille { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes so-noircit { from { background: linear-gradient(90deg, #8a6a44, #c9a878 40%, #8a6a44); } to { background: linear-gradient(90deg, #0a0a0e, #22222a 40%, #0a0a0e); } }
@keyframes so-eclairs { 50% { opacity: 1; } }

@media (max-width: 560px) {
  .so-jedi, .so-vapeur { transform: scale(0.65); transform-origin: bottom; }
  .so-jedi.entrainement, .so-jedi.heros, .so-jedi.obscur { transform: scale(0.8); }
  .so-jedi.duel { transform: scale(0.7); }
  .so-vapeur.duel { animation: none; transform: scale(0.7); }
  .so-hublot { left: calc(50% - 40px); width: 80px; height: 80px; }
  .so-planete-noire { left: 14px; top: 14px; width: 40px; height: 40px; }
  .so-yeux-obscurs { bottom: calc(14% + 76px); }
  .so-medaille { bottom: calc(14% + 46px); }
}
@media (prefers-reduced-motion: reduce) {
  .saga-etoiles .ve-sabre, .so-decor *, .cine-scene [class^="so-"], .cine-scene [class^="so-"] *, [data-theme="etoiles"] .hp-avatar { animation: none !important; }
  .so-explosion, .so-anneau, .so-eclairs, .so-tirs { display: none; }
}