/* ===== Breaking Mad (histoire temporaire d'octobre 2026) : carte, écrans, cinématiques =====
   Fichier dédié, chargé après style.css. Préfixe bb-*. Désert ocre du Nouveau-Mexique, fumée verte,
   laboratoire et cristaux bleus. 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). */

/* --- Carte du hub : désert, mesa, camping-car qui fume vert --- */
.saga-breaking { background: linear-gradient(180deg, #e8c46a, #b5762f 55%, #2a1a0c); color: var(--texte); }
.bb-carte, .bb-carte > span { position: absolute; display: block; }
.bb-carte { inset: 0; overflow: hidden; }
.bb-carte-ciel { inset: 0; background: radial-gradient(circle at 20% 18%, #fff3c4 0 14px, #ffe08a55 15px 34px, transparent 35px); }
.bb-mesa { left: 100%; top: 40px; width: 120px; height: 50px; background: #9a4f22; clip-path: polygon(12% 30%, 30% 0, 70% 0, 82% 35%, 100% 40%, 100% 100%, 0 100%, 0 45%); animation: bb-defile 9s linear infinite; }
/* La caravane roule : mesa et route défilent, roues qui tournent, léger cahot, fumée laissée en arrière */
@keyframes bb-defile { from { transform: translateX(0); } to { transform: translateX(-380px); } }
.bb-route-carte { left: 0; right: 0; top: 88px; height: 6px; background: repeating-linear-gradient(90deg, #f2e2b0 0 14px, transparent 14px 30px); opacity: 0.7; animation: bb-route 0.6s linear infinite; }
@keyframes bb-route { from { background-position: 0 0; } to { background-position: -30px 0; } }
.bb-camping { left: 54px; top: 56px; width: 64px; height: 30px; border-radius: 10px 6px 3px 3px; background: linear-gradient(180deg, #f4ecd8 0 55%, #c9b98e 55% 70%, #f4ecd8 70%); animation: bb-cahot 0.5s ease-in-out infinite alternate; }
@keyframes bb-cahot { from { transform: translateY(0) rotate(0); } to { transform: translateY(-1.5px) rotate(-0.6deg); } }
.bb-camping i { position: absolute; right: 8px; top: 6px; width: 14px; height: 9px; background: #2a3b4a; box-shadow: -22px 0 0 #2a3b4a; }
.bb-camping::before, .bb-camping::after { content: ""; position: absolute; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #999 0 20%, transparent 22%), conic-gradient(#222 0 20%, #555 20% 25%, #222 25% 45%, #555 45% 50%, #222 50% 70%, #555 70% 75%, #222 75% 95%, #555 95%); animation: bb-roue 0.5s linear infinite; }
.bb-camping::before { left: 8px; } .bb-camping::after { right: 8px; }
@keyframes bb-roue { to { transform: rotate(360deg); } }
.bb-fumee-carte { left: 36px; top: 20px; width: 60px; height: 50px; }
.bb-fumee-carte i { position: absolute; bottom: 0; left: 18px; width: 22px; height: 22px; border-radius: 50%; background: #9fdc9a66; filter: blur(4px); animation: bb-fume 2.4s ease-out infinite both; }
.bb-fumee-carte i:nth-child(2) { animation-delay: 0.8s; } .bb-fumee-carte i:nth-child(3) { animation-delay: 1.6s; }@keyframes bb-fume { from { transform: translate(0, 10px) scale(0.5); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-46px, -30px) scale(1.6); opacity: 0; } }

/* --- Écrans de départ et de jeu : désert au crépuscule, voile vert --- */
.hp-scene[data-theme="breaking"], .hi-scene[data-theme="breaking"] { border-color: #6fbf73; background: radial-gradient(ellipse at 50% 100%, #7fd18a22, transparent 60%), linear-gradient(180deg, #2a3a24 0%, #4a3a1c 45%, #1a120a 100%); }
[data-theme="breaking"] .hp-ciel { display: none; }
[data-theme="breaking"] .hp-parchemin { background: linear-gradient(180deg, #f6f3e6, #e4dcc2); border-top: 4px solid #3f8f4f; }
[data-theme="breaking"] .hp-barre > span { background: linear-gradient(90deg, #3f8f4f, #b8e08a); }
[data-theme="breaking"] .rayon { display: none; }
[data-theme="breaking"] .hi-chapitres li { background: #0f1a0ed9; }
[data-theme="breaking"] .hi-niveau, [data-theme="breaking"] .hi-sur-titre { color: #b8e08a; }
[data-theme="breaking"] .hi-titre { font-family: Georgia, "Times New Roman", serif; }
[data-theme="breaking"] .hi-infos, [data-theme="breaking"] .hi-retour, [data-theme="breaking"] .hp-sauver { color: var(--texte); }

/* --- Cinématiques --- */
/* Salle de chimie : tableau noir, fioles, professeur à lunettes */
.bb-classe-mur { inset: 0; background: linear-gradient(180deg, #c9c2a8 0 72%, #6a5a42 72% 100%); }
.bb-tableau-noir { left: 8%; top: 10%; width: 60%; height: 46%; border: 8px solid #6a4a2a; background: #1f3a2a; box-shadow: inset 0 0 30px #0008; }
.bb-tableau-noir .formule { position: absolute; color: #f2f2e8; font-family: "Comic Sans MS", "Segoe Print", cursive; font-size: clamp(0.7rem, 2.2vw, 1.3rem); opacity: 0.9; animation: bb-craie 1.4s steps(12) both; white-space: nowrap; overflow: hidden; }
.bb-tableau-noir .f1 { left: 6%; top: 14%; } .bb-tableau-noir .f2 { left: 62%; top: 46%; animation-delay: 1.2s; } .bb-tableau-noir .f3 { left: 10%; top: 66%; animation-delay: 2.2s; }
@keyframes bb-craie { from { max-width: 0; } to { max-width: 100%; } }
.bb-bureau { left: 4%; right: 4%; bottom: 0; height: 22%; background: linear-gradient(180deg, #2a2a2a 0 12%, #4a4038 12%); }
.bb-fiole { bottom: 22%; width: 4%; height: 12%; border-radius: 0 0 40% 40%; background: linear-gradient(180deg, transparent 0 40%, #3fd0c9 40%); border: 2px solid #dfe8ea; }
.bb-fiole.f1 { left: 14%; } .bb-fiole.f2 { left: 20%; background: linear-gradient(180deg, transparent 0 55%, #b8e08a 55%); animation: bb-bulle 1.4s ease-in-out infinite alternate; }
@keyframes bb-bulle { from { filter: brightness(0.9); } to { filter: brightness(1.4); } }
.bb-professeur { right: 12%; bottom: 22%; width: 16%; height: 52%; animation: bb-entre 1.4s ease-out both; }
.bb-professeur .tete { position: absolute; left: 28%; top: 0; width: 44%; height: 24%; border-radius: 50%; background: #e8c4a0; }
.bb-professeur .lunettes { position: absolute; left: 30%; top: 14%; width: 40%; height: 6%; border-top: 3px solid #222; }
.bb-professeur .corps { position: absolute; left: 12%; right: 12%; top: 22%; bottom: 0; border-radius: 30% 30% 4px 4px; background: linear-gradient(90deg, #a8b07a, #8a925e); }
@keyframes bb-entre { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Désert : ciel, mesas, sable, camping-car, fumée, pantalon qui vole */
.bb-ciel { inset: 0; }
.bb-ciel.jour { background: linear-gradient(180deg, #4fa3e0 0%, #9fd0f0 55%, #f2d8a0 100%); }
.bb-ciel.soir { background: linear-gradient(180deg, #2a2a5a 0%, #c9603a 70%, #f2a35a 100%); }
.bb-ciel.couchant { background: radial-gradient(circle at 50% 78%, #ffd36a 0 7%, #ff9a3a55 8% 20%, transparent 30%), linear-gradient(180deg, #3a1f4a 0%, #c9453a 55%, #f2a35a 100%); }
.bb-ciel.nuit { background: linear-gradient(180deg, #05070f 0%, #141a30 100%); }
.bb-mesa-scene { bottom: 26%; background: #9a4f22; }
.bb-mesa-scene.m1 { left: 4%; width: 30%; height: 22%; clip-path: polygon(10% 30%, 25% 0, 70% 0, 85% 40%, 100% 45%, 100% 100%, 0 100%, 0 40%); }
.bb-mesa-scene.m2 { right: 6%; width: 22%; height: 16%; background: #7a3f1c; clip-path: polygon(20% 20%, 40% 0, 80% 0, 100% 50%, 100% 100%, 0 100%); }
.bb-sable { left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #d9a860, #b5762f); }
.bb-ciel.nuit ~ .bb-mesa-scene { background: #1a1a22; } .bb-ciel.nuit ~ .bb-sable { background: #2a2018; }
.bb-ciel.couchant ~ .bb-mesa-scene { background: #3a1a12; } .bb-ciel.couchant ~ .bb-sable { background: linear-gradient(180deg, #6a3a1a, #3a1f10); }
.bb-camping-scene { left: 30%; bottom: 14%; width: 28%; height: 24%; animation: bb-tremble 0.25s ease-in-out infinite alternate; }
.bb-camping-scene .carrosserie { position: absolute; inset: 0 0 18% 0; border-radius: 10px 20px 6px 6px; background: linear-gradient(180deg, #f4ecd8 0 50%, #c9b98e 50% 64%, #f4ecd8 64%); }
.bb-camping-scene .carrosserie::before { content: ""; position: absolute; left: 10%; top: 14%; width: 22%; height: 24%; background: #2a3b4a; box-shadow: 160% 0 0 #2a3b4a; }
.bb-camping-scene .porte { position: absolute; right: 18%; top: 18%; width: 14%; height: 58%; border: 2px solid #a8987a; }
.bb-camping-scene .roue { position: absolute; bottom: 0; width: 16%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #888 0 25%, #222 26%); }
.bb-camping-scene .r1 { left: 12%; } .bb-camping-scene .r2 { right: 12%; }
@keyframes bb-tremble { from { transform: translateY(0); } to { transform: translateY(-1px); } }
.bb-fumee { left: 40%; bottom: 36%; width: 30%; height: 50%; }
.bb-fumee i { position: absolute; bottom: 0; left: calc(var(--i) * 8%); width: 30%; aspect-ratio: 1; border-radius: 50%; background: #9fdc9a55; filter: blur(8px); animation: bb-fume-scene 4s ease-out infinite both; animation-delay: calc(var(--i) * 0.6s); }
@keyframes bb-fume-scene { from { transform: translateY(20%) scale(0.5); opacity: 0; } 30% { opacity: 1; } to { transform: translate(30%, -160%) scale(1.8); opacity: 0; } }
.bb-pantalon { left: 10%; top: 60%; font-size: clamp(1.6rem, 4.6vw, 2.8rem); animation: bb-vole 6s ease-in-out both; }
@keyframes bb-vole { from { transform: translate(0, 0) rotate(0); } to { transform: translate(60vw, -38vh) rotate(540deg); } }

/* Restaurant du rival : enseigne, mascotte, patron en costume */
.bb-restaurant { left: 6%; right: 30%; bottom: 0; height: 62%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #e8b04a 0 18%, #f6efe0 18%); }
.bb-restaurant .enseigne { position: absolute; left: 6%; right: 6%; top: 3%; color: #7a1f14; font-family: Georgia, serif; font-weight: 900; font-size: clamp(0.8rem, 2.6vw, 1.5rem); text-align: center; animation: gg-clignote 1.6s ease-in-out infinite alternate; }
@keyframes gg-clignote { from { text-shadow: none; } to { text-shadow: 0 0 10px #ffd76a; } }
.bb-restaurant .vitrine { position: absolute; left: 8%; right: 8%; top: 30%; height: 44%; background: linear-gradient(135deg, #8fc6e0, #4a7a9a); border: 4px solid #c9a55a; }
.bb-restaurant .mascotte { position: absolute; right: 8%; top: 26%; font-size: clamp(1.6rem, 5vw, 3rem); animation: bb-entre 1s ease-out 0.4s both; }
.bb-patron { right: 10%; bottom: 0; width: 15%; height: 66%; animation: bb-entre 1.6s ease-out 1s both; }
.bb-patron .tete { position: absolute; left: 28%; top: 0; width: 44%; height: 24%; border-radius: 50%; background: #6a4632; }
.bb-patron .lunettes { position: absolute; left: 30%; top: 12%; width: 40%; height: 6%; border-top: 3px solid #ddd; }
.bb-patron .costume { position: absolute; left: 6%; right: 6%; top: 22%; bottom: 0; border-radius: 30% 30% 4px 4px; background: linear-gradient(90deg, #2a2a30 0 46%, #f2f2f2 46% 54%, #2a2a30 54%); }

/* Laboratoire secret : cuves, tuyaux, combinaisons jaunes, cristaux bleus */
.bb-labo-mur { inset: 0; background: linear-gradient(180deg, #5a6068 0%, #3a3f46 70%, #22262c 100%); }
.bb-cuves { left: 6%; right: 6%; bottom: 20%; height: 50%; display: flex; justify-content: space-around; }
.bb-cuves i { width: 18%; border-radius: 40% 40% 8px 8px; background: linear-gradient(90deg, #9aa3ad, #e6ebef 40%, #8a939d); box-shadow: inset 0 -10px 0 #6a737d; }
.bb-tuyaux { left: 6%; right: 6%; top: 14%; height: 6%; background: linear-gradient(90deg, #b5bcc4, #7a838d); border-radius: 4px; }
.bb-combinaison { bottom: 4%; width: 12%; height: 42%; border-radius: 40% 40% 8px 8px; background: linear-gradient(180deg, #2a2a2a 0 18%, #f2d23a 18%); animation: bb-entre 1.2s ease-out both; }
.bb-combinaison.c1 { left: 22%; } .bb-combinaison.c2 { right: 22%; animation-delay: 0.5s; }
.bb-cristaux { left: 38%; right: 38%; bottom: 6%; height: 14%; display: flex; align-items: flex-end; justify-content: center; gap: 4%; }
.bb-cristaux i { width: 10%; height: 70%; background: linear-gradient(160deg, #c9f2ff, #3fa8e8 60%, #1f5a9a); clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); filter: drop-shadow(0 0 8px #3fa8e8); animation: bb-cristal 1.8s ease-in-out infinite alternate; }
.bb-cristaux i:nth-child(even) { height: 50%; animation-delay: 0.6s; }
@keyframes bb-cristal { from { filter: drop-shadow(0 0 4px #3fa8e8) brightness(0.9); } to { filter: drop-shadow(0 0 14px #7fd2ff) brightness(1.3); } }

/* Victoire : silhouette au chapeau sur le couchant, « Dis mon nom » */
.bb-silhouette { left: 44%; bottom: 20%; width: 12%; height: 48%; animation: bb-entre 1.6s ease-out both; }
.bb-silhouette .chapeau { position: absolute; left: 14%; right: 14%; top: 0; height: 14%; background: #0a0a0a; border-radius: 30% 30% 0 0; box-shadow: 0 6px 0 -1px #0a0a0a, -8px 6px 0 -1px #0a0a0a, 8px 6px 0 -1px #0a0a0a; }
.bb-silhouette .tete { position: absolute; left: 28%; top: 12%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #0a0a0a; }
.bb-silhouette .corps { position: absolute; left: 6%; right: 6%; top: 38%; bottom: 0; border-radius: 30% 30% 4px 4px; background: #0a0a0a; }
.bb-dis-mon-nom { left: 50%; top: 14%; transform: translateX(-50%); color: #fff6dc; font-family: Georgia, serif; font-weight: 700; font-size: clamp(1.2rem, 4vw, 2.4rem); text-shadow: 0 2px 12px #000a; white-space: nowrap; animation: bb-nom 1.4s ease-out 2.6s both; }
@keyframes bb-nom { from { opacity: 0; filter: blur(6px); letter-spacing: 6px; } to { opacity: 1; filter: none; letter-spacing: normal; } }

/* Défaite : gyrophares dans la nuit */
.bb-gyro { inset: 0; opacity: 0; animation: bb-gyro 0.8s steps(1) infinite; }
.bb-gyro.rouge { background: radial-gradient(circle at 30% 60%, #ff2a2a66, transparent 45%); }
.bb-gyro.bleu { background: radial-gradient(circle at 70% 60%, #2a6aff66, transparent 45%); animation-delay: 0.4s; }
@keyframes bb-gyro { 0% { opacity: 1; } 50% { opacity: 0; } }
.bb-voiture-police { left: 40%; bottom: 10%; font-size: clamp(2rem, 6vw, 3.6rem); animation: bb-entre 1.2s ease-out both; }
.bb-menottes { left: 62%; bottom: 16%; font-size: clamp(1.4rem, 4vw, 2.4rem); animation: bb-entre 1s ease-out 1.6s both; }

@media (prefers-reduced-motion: reduce) {
  .bb-carte *, .cine-scene [class^="bb-"], .cine-scene [class^="bb-"] * { animation: none !important; }
  .bb-fumee-carte i, .bb-fumee i { opacity: 0.5; }
  .bb-gyro.rouge { opacity: 1; }
}

/* Le camping-car roule dans le désert : mesas en parallaxe, route qui défile, roues qui tournent */
.bb-route { left: 0; right: 0; bottom: 12%; height: 1.4%; background: repeating-linear-gradient(90deg, #f2e2b0 0 50px, transparent 50px 110px); opacity: 0; }
.scene-bb-desert .bb-route { opacity: 0.8; animation: bb-route-scene 0.7s linear infinite; }
@keyframes bb-route-scene { from { background-position: 0 0; } to { background-position: -110px 0; } }
.scene-bb-desert .bb-mesa-scene.m1 { animation: bb-parallaxe 11s linear infinite; }
.scene-bb-desert .bb-mesa-scene.m2 { animation: bb-parallaxe 7s linear infinite; animation-delay: -3s; }
@keyframes bb-parallaxe { from { transform: translateX(120%); } to { transform: translateX(-420%); } }
.scene-bb-desert .bb-camping-scene { animation: bb-cahot 0.35s ease-in-out infinite alternate; }
.scene-bb-desert .bb-camping-scene .roue { background: radial-gradient(circle, #888 0 22%, transparent 24%), conic-gradient(#222 0 20%, #666 20% 25%, #222 25% 45%, #666 45% 50%, #222 50% 70%, #666 70% 75%, #222 75% 95%, #666 95%); animation: bb-roue 0.45s linear infinite; }
.scene-bb-desert .bb-fumee i { animation-name: bb-fume-trainee; }
@keyframes bb-fume-trainee { from { transform: translateY(20%) scale(0.5); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-160%, -120%) scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scene-bb-desert .bb-route { animation: none; } }