/* ===== Pokémômes : carte, écrans de départ et de jeu, cinématiques =====
   Fichier dédié à la saga, chargé après style.css (qui dessine la balle de capture de la carte).
   Récit parodique ; décors 100 % CSS/emojis génériques, sans personnage ni logo officiel.
   Le style de base décrit l'état final ; les animations partent de l'état initial (fill-mode both). */

/* --- Carte du hub : ciel, hautes herbes qui ondulent, yeux d'un monstre caché --- */
.saga-pokemon { background: linear-gradient(180deg, #3f7fe0, #1d3f8a 55%, var(--fond)); color: var(--texte); }
.saga-pokemon .vm-herbes { position: absolute; left: 0; right: 0; top: 70px; height: 40px; background: #2f8a4a; clip-path: polygon(0 100%, 0 30%, 4% 0, 8% 35%, 13% 5%, 18% 40%, 23% 0, 28% 35%, 33% 8%, 38% 40%, 43% 0, 48% 32%, 54% 4%, 60% 38%, 66% 0, 72% 35%, 78% 6%, 84% 40%, 90% 2%, 95% 30%, 100% 10%, 100% 100%); transform-origin: 50% 100%; animation: vm-ondule 2.4s ease-in-out infinite alternate; }
.saga-pokemon .vm-yeux { position: absolute; left: 22%; top: 82px; width: 26px; height: 8px; animation: vm-yeux 3.5s ease-in-out infinite; }
.vm-yeux i { position: absolute; top: 0; width: 7px; height: 8px; border-radius: 50%; background: #fff; box-shadow: inset 2px 0 0 #1b1b1b; }
.vm-yeux i:first-child { left: 0; }
.vm-yeux i:last-child { right: 0; }
.saga-pokemon .vm-etincelles { position: absolute; right: 10px; top: 10px; width: 90px; height: 90px; background-image: radial-gradient(2px 2px at 20% 20%, #fff, transparent), radial-gradient(2px 2px at 80% 30%, #fff, transparent), radial-gradient(2px 2px at 50% 90%, #fff, transparent); animation: vm-scintille 1.8s ease-in-out infinite alternate; }
@keyframes vm-ondule { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }
@keyframes vm-yeux { 0%, 40%, 100% { opacity: 0; } 55%, 85% { opacity: 1; } }
@keyframes vm-scintille { from { opacity: 0.3; } to { opacity: 1; } }

/* --- Écrans de départ et de jeu : prairie, nuages, balle géante en filigrane --- */
.pk-decor { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#hp-scene > .pk-decor, #hi-scene > .pk-decor { position: absolute; z-index: 0; }
[data-theme="pokemon"] .pk-decor { display: block; }
[data-theme="pokemon"] .hp-ciel { display: none; }
.pk-decor > span { position: absolute; display: block; }
.pd-nuage { width: 120px; height: 28px; border-radius: 999px; background: #ffffff2a; box-shadow: 36px -12px 0 4px #ffffff22; animation: vm-ondule 9s ease-in-out infinite alternate; }
.pd-nuage.n1 { left: 10%; top: 10%; }
.pd-nuage.n2 { right: 12%; top: 22%; animation-delay: -4s; }
.pd-balle { right: -60px; top: 30%; width: 220px; height: 220px; border-radius: 50%; border: 10px solid #ffffff14; background: linear-gradient(180deg, #ff5d5d1a 0 46%, #ffffff14 46% 54%, transparent 54%); animation: pd-tourne 40s linear infinite; }
.pd-herbes { left: 0; right: 0; bottom: 0; height: 18%; background: #1f6b3a; clip-path: polygon(0 100%, 0 30%, 3% 0, 6% 30%, 9% 5%, 12% 35%, 15% 0, 18% 30%, 22% 6%, 26% 35%, 30% 0, 34% 30%, 38% 5%, 42% 35%, 46% 0, 50% 30%, 54% 6%, 58% 35%, 62% 0, 66% 30%, 70% 5%, 74% 35%, 78% 0, 82% 30%, 86% 6%, 90% 35%, 94% 0, 97% 30%, 100% 5%, 100% 100%); opacity: 0.85; }
.hp-scene[data-theme="pokemon"], .hi-scene[data-theme="pokemon"] { border-color: #e63946; background: linear-gradient(180deg, #2f6ad0 0%, #1d3f8a 60%, #132a5a 100%); }
.hp-scene[data-theme="pokemon"][data-chapitre="2"] { background: linear-gradient(180deg, #3f8ad8 0%, #2a6a4a 60%, #14301e 100%); }
.hp-scene[data-theme="pokemon"][data-chapitre="3"] { background: linear-gradient(180deg, #5a3a8a 0%, #2a2a6a 60%, #131a3a 100%); }
.hp-scene[data-theme="pokemon"][data-chapitre="4"] { background: linear-gradient(180deg, #3a3020 0%, #5a4a2a 55%, #1a1408 100%); }
.hp-scene[data-theme="pokemon"][data-chapitre="5"] { background: linear-gradient(180deg, #2a0a10 0%, #5a1424 55%, #120610 100%); }
[data-theme="pokemon"] .hp-parchemin { background: linear-gradient(180deg, #ffffff, #f1f4fa); color: #14203f; border-top: 6px solid #e63946; box-shadow: 0 10px 30px #0008, inset 0 -4px 0 #1b1b1b22; }
[data-theme="pokemon"] .hp-texte { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-theme="pokemon"] .hp-parchemin input[type="text"] { background: #fff; border-color: #b9c3d8; }
[data-theme="pokemon"] .hp-chapitre { color: #ffe066; text-shadow: 0 2px 0 #1d3f8a; }
[data-theme="pokemon"] .hp-avatar { filter: drop-shadow(0 0 10px #ffe06688); }
[data-theme="pokemon"] .hp-barre > span { background: linear-gradient(90deg, #ffe066, #e63946); }
[data-theme="pokemon"] .rayon-joueur { background: linear-gradient(90deg, transparent, #fff8b0, #ffe066); box-shadow: 0 0 18px 4px #ffe066aa; }
[data-theme="pokemon"] .rayon-ennemi { background: linear-gradient(270deg, transparent, #ff5d5d, #ffc2c2); box-shadow: 0 0 18px 4px #ff5d5d99; }
[data-theme="pokemon"] .hi-chapitres li { background: #0b1430d9; }
[data-theme="pokemon"] .hi-niveau, [data-theme="pokemon"] .hi-sur-titre { color: #ffe066; }
[data-theme="pokemon"] .hi-infos, [data-theme="pokemon"] .hi-retour, [data-theme="pokemon"] .hp-sauver { color: var(--texte); }

/* --- Cinématiques : dresseur, balle de capture, compagnon --- */
.mp-dresseur { width: 44px; height: 112px; }
.mp-dresseur > span { position: absolute; display: block; }
.mp-dresseur .tete { left: 13px; top: 8px; width: 18px; height: 19px; border-radius: 50%; background: #f0c9a0; }
.mp-dresseur .casquette { left: 11px; top: 4px; width: 26px; height: 10px; border-radius: 10px 10px 2px 2px; background: linear-gradient(90deg, #e63946 60%, #fff 60% 70%, #e63946 70%); box-shadow: 8px 6px 0 -3px #e63946; }
.mp-dresseur .veste { left: 9px; top: 26px; width: 26px; height: 38px; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #1d4fb0 45%, #fff 45% 55%, #1d4fb0 55%); }
.mp-dresseur .bras { left: 33px; top: 28px; width: 6px; height: 30px; border-radius: 3px; background: #1d4fb0; transform-origin: 50% 0; transform: rotate(-20deg); }
.mp-dresseur .jambe { top: 62px; width: 8px; height: 44px; background: #2a3550; border-bottom: 6px solid #e63946; }
.mp-dresseur .jambe.g { left: 12px; }
.mp-dresseur .jambe.d { left: 24px; }
.mp-balle { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #1b1b1b; background: linear-gradient(180deg, #e63946 0 44%, #1b1b1b 44% 56%, #fff 56%); }
.mp-balle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; border: 2px solid #1b1b1b; }
.mp-compagnon { font-size: clamp(1.8rem, 6vw, 3rem); filter: drop-shadow(0 0 10px #fff8); }

/* 1. Le labo : trois balles, un éclair, le premier compagnon */
.mp-mur-labo { inset: 0; background: linear-gradient(180deg, #dfe6f2, #b9c3d8 70%, #8a94ac); }
.mp-etageres { left: 4%; top: 10%; width: 30%; height: 46%; background: repeating-linear-gradient(180deg, transparent 0 34px, #6b4a2e 34px 40px), repeating-linear-gradient(90deg, #4f8ad8 0 10px, #e63946 10px 18px, #ffe066 18px 26px, transparent 26px 34px); border: 4px solid #6b4a2e; }
.mp-professeur { right: 10%; bottom: 24%; width: 44px; height: 110px; }
.mp-professeur > span { position: absolute; display: block; }
.mp-professeur .blouse { left: 6px; top: 22px; width: 32px; height: 88px; border-radius: 6px 6px 2px 2px; background: #fff; box-shadow: inset 0 0 0 2px #b9c3d8; }
.mp-professeur .tete { left: 12px; top: 2px; width: 20px; height: 22px; border-radius: 50%; background: #f0c9a0; box-shadow: inset 0 6px 0 #c9c9c9; }
.mp-table { left: 30%; right: 30%; bottom: 22%; height: 16px; background: #8a6440; box-shadow: 0 16px 0 -4px #5a3e28; }
.mp-balle.sur-table { bottom: calc(22% + 16px); }
.mp-balle.b1 { left: 36%; } .mp-balle.b2 { left: calc(50% - 14px); } .mp-balle.b3 { right: 36%; }
.mp-balle.ouverte { animation: mp-saute 1s ease-out 1.5s both; }
.mp-eclair-blanc { left: calc(50% - 80px); bottom: 22%; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, #fff, #fff0 70%); opacity: 0; animation: mp-eclair 1.5s ease-out 2.4s both; }
.cine-scene .mp-compagnon { left: calc(50% - 24px); bottom: calc(22% + 50px); animation: mp-apparait 1s ease-out 2.8s both; }
.mp-dresseur.labo { left: 18%; bottom: 4%; }

/* 2. Capture dans les hautes herbes */
.mp-ciel { inset: 0; background: linear-gradient(180deg, #4f9ae8, #aee0ff 70%); }
.mp-soleil { right: 10%; top: 8%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #fff6b0, #ffd447); box-shadow: 0 0 30px #ffd447; }
.mp-herbes-hautes { left: 0; right: 0; bottom: 0; height: 40%; background: #2f8a4a; clip-path: polygon(0 100%, 0 20%, 3% 0, 6% 25%, 9% 4%, 12% 28%, 15% 0, 18% 22%, 22% 5%, 26% 28%, 30% 0, 34% 24%, 38% 4%, 42% 26%, 46% 0, 50% 22%, 54% 6%, 58% 28%, 62% 0, 66% 24%, 70% 5%, 74% 26%, 78% 0, 82% 22%, 86% 6%, 90% 28%, 94% 0, 97% 24%, 100% 4%, 100% 100%); animation: vm-ondule 1.2s ease-in-out infinite alternate; }
.mp-sauvage { left: 64%; bottom: 30%; font-size: clamp(2rem, 7vw, 3.4rem); opacity: 0; animation: mp-sauvage 7s ease-out both; }
.mp-balle.lancee { left: 64%; bottom: 33%; animation: mp-lancer 1.2s ease-out 2.2s both, mp-tremble 0.4s ease-in-out 3.4s 3; }
.mp-etoiles-capture { left: 60%; bottom: 46%; color: #ffe066; font-size: 1.4rem; letter-spacing: 0.2em; animation: mp-apparait 0.8s ease-out 4.8s both; }
.mp-bulle { left: 54%; top: 14%; padding: 6px 14px; border-radius: 14px; background: #fff; color: #14203f; font-weight: 900; font-size: clamp(0.9rem, 3vw, 1.4rem); box-shadow: 0 4px 0 #1d3f8a; animation: mp-apparait 0.8s ease-out 5s both; }
.mp-dresseur.lanceur { left: 20%; bottom: 6%; }
.mp-dresseur.lanceur .bras { transform: rotate(-150deg); }

/* 3. La boîte à badges se remplit */
.mp-fond-arene { inset: 0; background: radial-gradient(ellipse at 50% 30%, #3a4f9a, #0b1430 75%); }
.mp-boite-badges { left: calc(50% - 150px); top: 16%; width: 300px; height: 150px; border-radius: 12px; background: linear-gradient(180deg, #5a2d82, #2a1440); border: 4px solid var(--or); box-shadow: 0 0 30px #f5c54266; }
.mp-boite-badges .titre { position: absolute; left: 0; right: 0; top: 6px; text-align: center; color: var(--or); font-family: "Cinzel", Georgia, serif; font-weight: 900; letter-spacing: 0.2em; }
.mp-boite-badges i { position: absolute; left: 18px; top: 40px; width: 36px; height: 36px; background: hsl(calc(var(--i) * 45deg) 80% 60%); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); filter: drop-shadow(0 0 6px #fff8); animation: mp-badge 0.5s ease-out both; animation-delay: calc(0.6s + var(--i) * 0.45s); }
.mp-boite-badges i:nth-child(n+6) { top: 92px; }
.mp-boite-badges i:nth-child(2) { left: 18px; } .mp-boite-badges i:nth-child(3) { left: 88px; } .mp-boite-badges i:nth-child(4) { left: 158px; } .mp-boite-badges i:nth-child(5) { left: 228px; }
.mp-boite-badges i:nth-child(6) { left: 18px; } .mp-boite-badges i:nth-child(7) { left: 88px; } .mp-boite-badges i:nth-child(8) { left: 158px; } .mp-boite-badges i:nth-child(9) { left: 228px; }
.mp-dresseur.fier { left: 18%; bottom: 4%; }
.mp-dresseur.fier .bras { transform: rotate(-160deg); }
.cine-scene .mp-compagnon.epaule { left: calc(18% + 50px); bottom: 6%; }

/* 4. Le stade de la Ligue */
.mp-stade { inset: 0; background: radial-gradient(ellipse at 50% 0%, #2c3a7a, #070c1e 70%); }
.mp-projos { inset: 0 0 50% 0; background: radial-gradient(circle at 10% 10%, #fff 0 4px, #fff3 8px, transparent 40px), radial-gradient(circle at 90% 10%, #fff 0 4px, #fff3 8px, transparent 40px), radial-gradient(ellipse at 50% 0%, #ffffff10, transparent 60%); }
.mp-terrain { left: 6%; right: 6%; bottom: 0; height: 40%; background: linear-gradient(180deg, #3a8a4a, #2a6a3a); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 3px #fff6; }
.mp-terrain::after { content: ""; position: absolute; left: 50%; top: 20%; width: 80px; height: 40px; margin-left: -40px; border: 3px solid #fff8; border-radius: 50%; }
.mp-maitre-silhouette { left: calc(50% - 22px); top: 26%; width: 44px; height: 90px; animation: mp-apparait 1.5s ease-out both; }
.mp-maitre-silhouette > span { position: absolute; display: block; }
.mp-maitre-silhouette .cape { left: 0; top: 18px; width: 44px; height: 72px; background: linear-gradient(180deg, #7a1424, #3a0a12); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.mp-maitre-silhouette .tete { left: 13px; top: 0; width: 18px; height: 20px; border-radius: 50%; background: #c9a07a; box-shadow: inset 0 6px 0 #1a1a1a; }
.mp-dresseur.dos { left: 22%; bottom: 2%; transform: scale(1.3); transform-origin: bottom; }
.mp-dresseur.dos .tete { box-shadow: inset 0 19px 0 #3a2616; }
.mp-ecran-ligue { left: 28%; right: 28%; top: 5%; padding: 4px; border: 2px solid var(--or); border-radius: 6px; background: #0b1430; color: var(--or); text-align: center; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(0.65rem, 2.2vw, 1.1rem); }

/* 5. Victoire : Panthéon doré */
.mp-pantheon { inset: 0; background: linear-gradient(180deg, #5a3a8a, #c98a3a 60%, #ffe08a); }
.mp-rayons { left: 50%; top: 40%; width: 160%; height: 160%; margin: -80% 0 0 -80%; border-radius: 50%; background: repeating-conic-gradient(#fff6c855 0 6deg, transparent 6deg 18deg); animation: pd-tourne 24s linear infinite; }
.mp-confettis { inset: 0; background-image: radial-gradient(4px 7px at 10% 10%, #e63946, transparent), radial-gradient(4px 7px at 30% 30%, #fff, transparent), radial-gradient(4px 7px at 55% 15%, #4f8ad8, transparent), radial-gradient(4px 7px at 75% 35%, #ffe066, transparent), radial-gradient(4px 7px at 90% 8%, #fff, transparent); background-size: 100% 50%; animation: mp-confettis 2.4s linear infinite; }
.mp-dresseur.champion { left: calc(50% - 22px); bottom: 14%; transform: scale(1.2); transform-origin: bottom; }
.mp-dresseur.champion .bras { transform: rotate(-160deg); }
.cine-scene .mp-compagnon.victoire { left: calc(50% + 40px); bottom: 14%; }
.mp-trophee { left: calc(50% - 90px); bottom: 14%; font-size: clamp(2rem, 7vw, 3.4rem); animation: mp-apparait 1s ease-out 1.5s both; }
.mp-titre { left: 0; right: 0; bottom: 3%; text-align: center; color: #3a1a5a; 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 10px #fff; animation: mp-apparait 1.2s ease-out 4s both; }

/* 6. Défaite : Centre de soins */
.mp-centre-fond { inset: 0; background: linear-gradient(180deg, #ffe0ea, #f5b8c8 70%, #d98aa0); }
.mp-croix { left: calc(50% - 30px); top: 8%; width: 60px; height: 60px; background: linear-gradient(#e63946, #e63946) center / 18px 100% no-repeat, linear-gradient(#e63946, #e63946) center / 100% 18px no-repeat; }
.mp-comptoir { left: 10%; right: 10%; bottom: 0; height: 30%; background: linear-gradient(180deg, #fff, #e0d0d8); border-top: 6px solid #e63946; }
.mp-machine { left: 18%; bottom: 30%; width: 120px; height: 40px; border-radius: 8px 8px 0 0; background: #8a94ac; }
.mp-machine .mp-balle { position: absolute; top: 6px; width: 24px; height: 24px; animation: mp-soin 0.8s ease-in-out infinite alternate; }
.mp-balle.s1 { left: 10px; } .mp-balle.s2 { left: 48px; animation-delay: -0.3s; } .mp-balle.s3 { left: 86px; animation-delay: -0.6s; }
.mp-infirmiere { right: 24%; bottom: 30%; width: 44px; height: 90px; }
.mp-infirmiere > span { position: absolute; display: block; }
.mp-infirmiere .robe { left: 6px; top: 30px; width: 32px; height: 60px; border-radius: 8px 8px 2px 2px; background: #f5b8c8; box-shadow: inset 0 0 0 3px #fff; }
.mp-infirmiere .tete { left: 12px; top: 10px; width: 20px; height: 22px; border-radius: 50%; background: #f0c9a0; box-shadow: inset 0 6px 0 #e86a92; }
.mp-infirmiere .coiffe { left: 13px; top: 2px; width: 18px; height: 10px; border-radius: 4px; background: #fff; }
.mp-notes { left: 48%; top: 30%; color: #e63946; font-size: 1.6rem; letter-spacing: 0.3em; animation: mp-notes 2s ease-in-out infinite; }

/* --- Animations --- */
@keyframes pd-tourne { to { transform: rotate(360deg); } }
@keyframes mp-saute { 0% { transform: none; } 40% { transform: translateY(-20px) rotate(-20deg); } 100% { transform: none; } }
@keyframes mp-eclair { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes mp-apparait { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes mp-sauvage { 0%, 10% { opacity: 0; transform: translateY(30px); } 20%, 35% { opacity: 1; transform: none; } 45%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes mp-lancer { from { transform: translate(-300px, 120px) rotate(-720deg); } to { transform: none; } }
@keyframes mp-tremble { 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
@keyframes mp-badge { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
@keyframes mp-confettis { from { background-position-y: -50%; } to { background-position-y: 50%; } }
@keyframes mp-soin { from { box-shadow: 0 0 0 #fff0; } to { box-shadow: 0 0 14px 4px #fff; } }
@keyframes mp-notes { 0%, 100% { opacity: 0.4; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-8px); } }

@media (max-width: 560px) {
  .mp-dresseur, .mp-professeur, .mp-infirmiere { transform: scale(0.65); transform-origin: bottom; }
  .mp-dresseur.dos, .mp-dresseur.champion { transform: scale(0.8); }
  .mp-boite-badges { transform: scale(0.55); transform-origin: top center; }
  .mp-machine { transform: scale(0.6); transform-origin: left bottom; }
  .mp-balle.sur-table { transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .saga-pokemon .vm-herbes, .saga-pokemon .vm-yeux, .saga-pokemon .vm-etincelles, .pk-decor *, .cine-scene [class^="mp-"], .cine-scene [class^="mp-"] *, [data-theme="pokemon"] .hp-avatar { animation: none !important; }
  .mp-eclair-blanc { display: none; }
  .mp-sauvage { opacity: 0; }
  .saga-pokemon .vm-yeux { opacity: 1; }
}