/* ===== Rêve de Parquet : carte, écrans de départ et de jeu, cinématiques =====
   Fichier dédié à la saga basket, chargé après style.css. Décors 100 % CSS/emojis, sans logo.
   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 une scène lisible. */

/* --- Carte du hub : salle, projecteurs, panier et ballon qui rentre --- */
.saga-nba { background: linear-gradient(180deg, #2a1838, var(--fond) 80%); }
.saga-nba .saga-nom { color: #ffd2a6; }
.vignette-parquet { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vignette-parquet > span { position: absolute; display: block; }
.vp-projo { top: -10px; width: 90px; height: 110px; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(#ffe7b399, #ffe7b300); transform-origin: 50% 0; animation: vp-balaye 6s ease-in-out infinite alternate; }
.vp-projo.g { left: 8%; }
.vp-projo.d { right: 8%; animation-delay: -6s; }
.vp-public { left: 0; right: 0; top: 42px; height: 26px; background: radial-gradient(circle, #ffffff55 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(#24183a, #160f28); }
.vp-parquet { left: 0; right: 0; top: 68px; height: 40px; background: repeating-linear-gradient(90deg, #c98a4b 0 18px, #b97a3e 18px 36px); border-top: 2px solid #fff3; }
.vignette-parquet .vp-panneau { right: 14%; top: 12px; width: 34px; height: 24px; border: 2px solid #fff; border-radius: 2px; background: #ffffff22; }
.vp-panneau > span { position: absolute; display: block; }
.vp-cercle { left: -14px; top: 16px; width: 22px; height: 5px; border: 2px solid #ff7a1f; border-radius: 50%; }
.vp-filet { left: -12px; top: 22px; width: 18px; height: 14px; background: repeating-linear-gradient(60deg, #fff9 0 1px, transparent 1px 4px), repeating-linear-gradient(-60deg, #fff9 0 1px, transparent 1px 4px); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.vp-ballon { left: 22%; top: 40px; font-size: 1.4rem; animation: vp-tir 2.6s cubic-bezier(0.3, 0, 0.7, 1) infinite; }
@keyframes vp-balaye { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes vp-tir { 0%, 15% { transform: translate(0, 0) rotate(0); opacity: 1; } 55% { transform: translate(120%, -40px) rotate(240deg); } 75% { transform: translate(190%, -10px) rotate(360deg); opacity: 1; } 90%, 100% { transform: translate(190%, 30px) rotate(400deg); opacity: 0; } }

/* --- Écrans de départ et de jeu : salle de basket, ambiance selon le chapitre --- */
.nba-decor { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#hp-scene > .nba-decor, #hi-scene > .nba-decor { position: absolute; z-index: 0; }
[data-theme="nba"] .nba-decor { display: block; }
[data-theme="nba"] .hp-ciel { display: none; }
.nba-decor > span { position: absolute; display: block; }
.nd-projo { top: -40px; width: 240px; height: 420px; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #ffe7b340, transparent 75%); transform-origin: 50% 0; animation: vp-balaye 9s ease-in-out infinite alternate; }
.nd-projo.g { left: 4%; }
.nd-projo.d { right: 4%; animation-delay: -9s; }
.nd-tribune { left: 0; right: 0; bottom: 24%; height: 22%; opacity: 0.5; background: radial-gradient(circle, #ffffff66 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #24183a, #160f28); }
.nd-parquet { left: 0; right: 0; bottom: 0; height: 24%; background: repeating-linear-gradient(90deg, #a8703a 0 48px, #96622f 48px 96px); border-top: 3px solid #ffffff33; opacity: 0.85; }
.nd-parquet::after { content: ""; position: absolute; left: 50%; top: 20%; width: 120px; height: 60px; margin-left: -60px; border: 3px solid #ffffff44; border-radius: 50%; }
.hp-scene[data-theme="nba"], .hi-scene[data-theme="nba"] { border-color: #e07a2f; background: linear-gradient(180deg, #3a1c3a 0%, #6a3a3a 55%, #2a1838 100%); }
.hp-scene[data-theme="nba"][data-chapitre="2"] { background: linear-gradient(180deg, #0f1a3f 0%, #1d2c66 60%, #121a3a 100%); }
.hp-scene[data-theme="nba"][data-chapitre="3"] { background: linear-gradient(180deg, #1c1033 0%, #34205a 60%, #1a1030 100%); }
.hp-scene[data-theme="nba"][data-chapitre="4"] { background: linear-gradient(180deg, #2a0a12 0%, #5a1424 60%, #1a0a14 100%); }
.hp-scene[data-theme="nba"][data-chapitre="5"] { background: linear-gradient(180deg, #120c02 0%, #3a2a08 60%, #1a1206 100%); }
[data-theme="nba"] .hp-parchemin { background: linear-gradient(180deg, #ffffff, #f4efe8); color: #1f1410; border-top: 6px solid #e07a2f; box-shadow: 0 10px 30px #00000080; }
[data-theme="nba"] .hp-texte { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-theme="nba"] .hp-parchemin input[type="text"] { background: #fff; border-color: #e0b28a; }
[data-theme="nba"] .hp-chapitre { color: #ffc38a; text-shadow: 0 0 12px #e07a2f66; }
[data-theme="nba"] .hp-avatar { filter: drop-shadow(0 0 10px #ffb46b88); }
[data-theme="nba"] .hp-barre > span { background: linear-gradient(90deg, #e07a2f, #ffd447); }
[data-theme="nba"] .rayon-joueur { background: linear-gradient(90deg, transparent, #ffffff, #ff9a3c); box-shadow: 0 0 18px 4px #ff9a3c99; }
[data-theme="nba"] .rayon-ennemi { background: linear-gradient(270deg, transparent, #ff5d5d, #ffb3b3); box-shadow: 0 0 18px 4px #ff5d5d99; }
[data-theme="nba"] .hi-chapitres li { background: #0b1430d9; }
[data-theme="nba"] .hi-niveau, [data-theme="nba"] .hi-sur-titre { color: #ffc38a; }
[data-theme="nba"] .hi-infos, [data-theme="nba"] .hi-retour, [data-theme="nba"] .hp-sauver { color: var(--texte); }

/* --- Cinématiques : basketteur --- */
.nb-joueur { --nb-echelle: 1; width: 44px; height: 118px; transform: scale(var(--nb-echelle)); transform-origin: 50% 100%; }
.nb-joueur > span { position: absolute; display: block; }
.nb-joueur .tete { left: 13px; top: 0; width: 18px; height: 20px; border-radius: 50%; background: #8d5a3b; box-shadow: inset 0 5px 0 #1d120c; }
.nb-joueur .maillot { left: 9px; top: 20px; width: 26px; height: 36px; border-radius: 6px 6px 2px 2px; background: var(--nb-couleur); box-shadow: inset 0 0 0 2px var(--nb-lisere); }
.nb-joueur .short { left: 8px; top: 54px; width: 28px; height: 20px; border-radius: 2px 2px 6px 6px; background: var(--nb-couleur); box-shadow: inset 0 -3px 0 var(--nb-lisere); }
.nb-joueur .jambe { top: 72px; width: 6px; height: 42px; background: #8d5a3b; border-bottom: 6px solid #fff; }
.nb-joueur .jambe.g { left: 13px; }
.nb-joueur .jambe.d { left: 25px; }
.nb-joueur .bras { top: 22px; width: 6px; height: 32px; border-radius: 3px; background: #8d5a3b; transform-origin: 50% 0; }
.nb-joueur .bras.g { left: 3px; transform: rotate(14deg); }
.nb-joueur .bras.d { left: 35px; transform: rotate(-14deg); }
.nb-rouge { --nb-couleur: #c8102e; --nb-lisere: #fff; }
.nb-or { --nb-couleur: #f5c542; --nb-lisere: #5a2d82; }
.nb-costume { --nb-couleur: #1d2340; --nb-lisere: #3a4270; }
.nb-costume .jambe { background: #1d2340; border-bottom-color: #111; }
.nb-joueur.dunk .bras, .nb-joueur.tir .bras, .nb-joueur.champion .bras { transform: rotate(180deg); }
.nb-joueur.dribble .bras.d { transform: rotate(-40deg); }
.nb-ballon { font-size: 26px; line-height: 1; }

/* Panier : planche, cercle orange et filet */
.nb-panier { width: 80px; height: 190px; }
.nb-panier > span { position: absolute; display: block; }
.nb-panier .planche { right: 0; top: 0; width: 14px; height: 56px; background: #fff; border-radius: 2px; box-shadow: 0 0 10px #fff6; }
.nb-panier .cercle { left: 22px; top: 40px; width: 46px; height: 9px; border: 3px solid #ff7a1f; border-radius: 50%; }
.nb-panier .filet { left: 26px; top: 48px; width: 40px; height: 30px; background: repeating-linear-gradient(60deg, #fffc 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(-60deg, #fffc 0 1.5px, transparent 1.5px 6px); clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); }
.nb-panier .poteau { right: 4px; top: 56px; width: 7px; bottom: 0; background: linear-gradient(90deg, #6d7685, #aeb6c3); }
.nb-panier.rue .filet { background: repeating-linear-gradient(90deg, #c9cdd3 0 2px, transparent 2px 7px); }

/* 1. Playground : crépuscule urbain, grillage et bitume */
.nb-crepuscule { inset: 0; background: linear-gradient(180deg, #2a1f5a, #c2566a 55%, #ffad6a); }
.nb-immeubles { left: 0; right: 0; bottom: 28%; height: 46%; background: #1d1630; clip-path: polygon(0 100%, 0 40%, 8% 40%, 8% 20%, 16% 20%, 16% 50%, 24% 50%, 24% 10%, 33% 10%, 33% 45%, 42% 45%, 42% 30%, 52% 30%, 52% 0, 60% 0, 60% 35%, 70% 35%, 70% 22%, 80% 22%, 80% 48%, 90% 48%, 90% 28%, 100% 28%, 100% 100%); }
.nb-grillage { left: 0; right: 0; bottom: 28%; height: 34%; background: repeating-linear-gradient(45deg, #ffffff22 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, #ffffff22 0 1px, transparent 1px 12px); }
.nb-bitume { left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #3b3a44, #25242c); border-top: 3px solid #f5f5f544; }
.nb-panier.rue { right: 10%; bottom: 14%; }
.nb-joueur.dribble { left: 34%; bottom: 10%; }
.nb-ballon.dribble { left: calc(34% + 46px); bottom: 10%; animation: nb-rebond 0.6s ease-in infinite alternate; }

/* Salle commune : projecteurs, tribunes, flashs et parquet */
.nb-salle { inset: 0; background: radial-gradient(ellipse at 50% 0%, #2c2050, #0b0716 70%); }
.nb-projo { top: -10%; width: 34%; height: 110%; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #ffe7b355, transparent 80%); transform-origin: 50% 0; animation: nb-projo 6s ease-in-out infinite alternate; }
.nb-projo.p1 { left: 6%; }
.nb-projo.p2 { right: 6%; animation-delay: -6s; }
.nb-tribunes { left: 0; right: 0; bottom: 28%; height: 30%; background: radial-gradient(circle, #ffffff55 1.4px, transparent 1.9px) 0 0 / 11px 11px, linear-gradient(180deg, #2a1d40, #140c22); animation: nb-foule 0.9s ease-in-out infinite alternate; }
.nb-flashs { inset: 0 0 50% 0; background-image: radial-gradient(3px 3px at 12% 70%, #fff, transparent), radial-gradient(3px 3px at 37% 82%, #fff, transparent), radial-gradient(3px 3px at 64% 74%, #fff, transparent), radial-gradient(3px 3px at 88% 80%, #fff, transparent); animation: nb-flash 0.7s steps(2) infinite; }
.nb-flashs.fort { inset: 20% 0 30% 0; }
.nb-parquet { left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(90deg, #c98a4b 0 60px, #b97a3e 60px 120px); border-top: 3px solid #ffffff55; }
.nb-ecran { left: 30%; right: 30%; top: 5%; padding: 6px 4px; border: 2px solid #ff9a3c; border-radius: 6px; background: #120a1c; color: #ffc38a; text-align: center; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(0.7rem, 2.4vw, 1.3rem); letter-spacing: 0.08em; box-shadow: 0 0 18px #ff9a3c66; }
.nb-ecran.tableau { left: 24%; right: 24%; color: #ff5d5d; border-color: #ff5d5d; box-shadow: 0 0 18px #ff5d5d66; font-family: "Courier New", monospace; }
.nb-ecran.or { color: var(--or); border-color: var(--or); box-shadow: 0 0 24px #f5c54299; }
.nb-panier.salle { right: 8%; bottom: 18%; }

/* 2. Draft : scène, écran, pupitre et costume */
.nb-scene-draft { inset: 0; background: radial-gradient(ellipse at 50% 40%, #233a7a, #0b1430 70%); }
.nb-pupitre { left: calc(50% + 40px); bottom: 16%; width: 54px; height: 70px; background: linear-gradient(180deg, #2a3d7a, #13204a); border-top: 4px solid var(--or); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.nb-joueur.costume { --nb-echelle: 1.3; left: calc(50% - 30px); bottom: 14%; animation: nb-entree 1.8s ease-out both; }
.nb-joueur.costume .bras.d { transform: rotate(-100deg); }
.nb-casquette { left: calc(50% - 25px); bottom: calc(14% + 136px); font-size: 26px; animation: nb-casquette 2s ease-out 1.8s both; }

/* 3. Playoffs : dunk dans le cercle */
.nb-joueur.dunk { right: calc(8% + 70px); bottom: 34%; animation: nb-saut 2.5s ease-out both; }
.nb-ballon.dunk { right: calc(8% + 40px); bottom: calc(18% + 128px); animation: nb-ballon-dunk 2.5s ease-out both; }

/* 4. Dernier tir : arc du ballon figé au sommet, suspense */
.nb-joueur.tir { left: 22%; bottom: 14%; animation: nb-petit-saut 1.2s ease-out 1.5s both; }
.nb-ballon.tir { left: 58%; bottom: 66%; animation: nb-arc 4s cubic-bezier(0.25, 0.6, 0.4, 1) 2s both; }
.nb-chrono { left: 6%; top: 6%; color: #ff5d5d; font-family: "Courier New", monospace; font-weight: 900; font-size: clamp(1.2rem, 4vw, 2.2rem); text-shadow: 0 0 12px #ff5d5d; animation: nb-clignote 0.8s steps(2) infinite; }

/* 5. Titre : trophée doré, bague, confettis et bannière MVP */
.nb-joueur.champion { --nb-echelle: 1.2; left: 30%; bottom: 14%; }
.nb-trophee { left: calc(30% + 70px); bottom: 14%; width: 50px; height: 130px; animation: nb-trophee 1.8s ease-out 0.6s both; }
.nb-trophee > span { position: absolute; display: block; }
.nb-trophee .ballon { left: 9px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, var(--or) 45%, #a87a14); box-shadow: 0 0 18px #f5c542aa; }
.nb-trophee .tige { left: 17px; top: 30px; width: 16px; height: 70px; background: linear-gradient(90deg, #a87a14, #ffe08a, #a87a14); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); }
.nb-trophee .socle { left: 4px; bottom: 0; width: 42px; height: 30px; background: linear-gradient(90deg, #7a5410, #c9961f, #7a5410); border-radius: 4px; }
.nb-bague { right: 18%; top: 34%; font-size: clamp(2rem, 7vw, 3.6rem); filter: drop-shadow(0 0 14px #fff); animation: nb-trophee 1.6s ease-out 2.5s both; }
.nb-banniere { left: 0; right: 0; bottom: 3%; text-align: center; color: var(--or); font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(0.9rem, 3vw, 1.6rem); letter-spacing: 0.1em; text-shadow: 0 0 12px #000; animation: nb-apparait 1.2s ease-out 4s both; }
.nb-confettis { inset: 0; background-image: radial-gradient(4px 7px at 10% 10%, var(--or), transparent), radial-gradient(4px 7px at 30% 30%, #fff, transparent), radial-gradient(4px 7px at 55% 15%, #e07a2f, transparent), radial-gradient(4px 7px at 75% 35%, var(--or), transparent), radial-gradient(4px 7px at 90% 8%, #fff, transparent); background-size: 100% 50%; animation: nb-confettis 2.4s linear infinite; }
.nb-confettis.c2 { background-position: 40px 30px; animation-duration: 3.1s; }

/* 6. Vestiaire : casiers, maillot au nom du joueur, la lumière s'éteint */
.nb-vestiaire { inset: 0; background: linear-gradient(180deg, #3a2c22, #1d140e); }
.nb-casiers { left: 6%; right: 6%; top: 8%; height: 64%; background: repeating-linear-gradient(90deg, #6b4a2e 0 18%, #3d2a1a 18% 19%); border: 4px solid #2a1c10; }
.nb-maillot-casier { left: calc(50% - 50px); top: 18%; width: 100px; height: 110px; background: #f5c542; box-shadow: inset 0 0 0 3px #5a2d82; clip-path: polygon(25% 0, 40% 10%, 60% 10%, 75% 0, 100% 15%, 88% 35%, 82% 30%, 82% 100%, 18% 100%, 18% 30%, 12% 35%, 0 15%); }
.nb-maillot-casier .numero { position: absolute; left: 0; right: 0; top: 30%; text-align: center; color: #5a2d82; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 2.4rem; }
.nb-banc { left: 14%; right: 14%; bottom: 14%; height: 14px; background: #8a6440; box-shadow: 0 14px 0 -4px #2a1c10; }
.nb-ballon.roule { left: 70%; bottom: 6%; animation: nb-roule 4s ease-out both; }
.nb-lumiere { inset: 0; background: #000; opacity: 0.55; animation: nb-extinction 6.5s ease-in both; }

/* --- Animations --- */
@keyframes nb-rebond { from { transform: translateY(-36px); } to { transform: translateY(0); } }
@keyframes nb-projo { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes nb-foule { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes nb-flash { 50% { opacity: 0.2; } }
@keyframes nb-entree { from { transform: translateX(-160px) scale(var(--nb-echelle)); opacity: 0; } to { transform: scale(var(--nb-echelle)); opacity: 1; } }
@keyframes nb-casquette { from { transform: translateY(-80px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nb-saut { 0% { transform: translate(-120px, 70px) scale(var(--nb-echelle)); } 60% { transform: translate(0, -10px) scale(var(--nb-echelle)); } 100% { transform: scale(var(--nb-echelle)); } }
@keyframes nb-ballon-dunk { 0% { transform: translate(-120px, 40px); } 60% { transform: translate(-10px, -30px); } 100% { transform: none; } }
@keyframes nb-petit-saut { 0%, 100% { transform: scale(var(--nb-echelle)); } 40% { transform: translateY(-24px) scale(var(--nb-echelle)); } }
@keyframes nb-arc { from { transform: translate(-260px, 150px) scale(0.9); } to { transform: none; } }
@keyframes nb-clignote { 50% { opacity: 0.3; } }
@keyframes nb-trophee { from { transform: translateY(60px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nb-apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nb-confettis { from { background-position-y: -50%; } to { background-position-y: 50%; } }
@keyframes nb-roule { from { transform: translateX(-280px) rotate(-720deg); } to { transform: none; } }
@keyframes nb-extinction { 0%, 50% { opacity: 0; } 100% { opacity: 0.55; } }

@media (max-width: 560px) {
  .nb-joueur { --nb-echelle: 0.6; }
  .nb-joueur.dunk { bottom: 24%; }
  .nb-ballon.dunk { bottom: calc(18% + 60px); right: calc(8% + 28px); }
  .nb-ecran { top: 3%; font-size: 0.65rem; }
  .nb-joueur.costume { --nb-echelle: 0.8; }
  .nb-joueur.champion { --nb-echelle: 0.7; }
  .nb-panier { transform: scale(0.65); transform-origin: right bottom; }
  .nb-trophee { left: calc(30% + 40px); transform: scale(0.7); transform-origin: bottom; }
  .nb-casquette { bottom: calc(14% + 96px); left: calc(50% - 22px); }
  .nb-maillot-casier { transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .vignette-parquet *, .nba-decor *, .cine-scene [class^="nb-"], .cine-scene [class*=" nb-"], [data-theme="nba"] .hp-avatar { animation: none !important; }
}