/* ===== COMBAT CLASSIQUE : DUEL ILLUSTRÉ (Med, 13/10/2026 soir) — branché par js/combat-visuel.js =====
   Tout est sous body.images-actives.combat-visuel (case « Illustrations décoratives », combat classique en cours).
   L'écran de lancement et les anciennes jauges restent dans la page pour le lecteur d'écran : cachés à l'œil seulement (clip),
   jamais retirés ni réordonnés. Le duel (#combat-visuel) est aria-hidden. */
#combat-visuel { display: none; }
body.images-actives.combat-visuel #accueil-ecrans,
body.images-actives.combat-visuel #game-ui {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body.images-actives.combat-visuel #combat-visuel {
  --cv-heros: #6fbcff; --cv-adverse: #ff8b8b; --cv-verre: rgba(10,12,22,.92); --cv-titre: "Bahnschrift","Arial Narrow","Roboto Condensed","Segoe UI",system-ui,sans-serif;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: center;
  width: 100%; max-width: 64rem; margin: 18px auto 10px; padding: 0 clamp(12px,3vw,24px); box-sizing: border-box;
}
#combat-visuel .cv-jeton { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 16px;
  background: var(--cv-verre); border: 1px solid #4c5474; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); min-width: 0; }
#combat-visuel .cv-jeton[data-camp="heros"] { box-shadow: inset 0 5px 0 var(--cv-heros); }
#combat-visuel .cv-jeton[data-camp="adverse"] { box-shadow: inset 0 3px 0 var(--cv-adverse), inset 0 6px 0 var(--cv-verre), inset 0 9px 0 var(--cv-adverse); }
#combat-visuel .cv-por { width: clamp(72px,16vw,128px); aspect-ratio: 1; border-radius: 50%; background: #101322 center / cover no-repeat; }
#combat-visuel .cv-jeton[data-camp="heros"] .cv-por { border: 3px solid var(--cv-heros); }
#combat-visuel .cv-jeton[data-camp="adverse"] .cv-por { border: 5px double var(--cv-adverse); }
#combat-visuel .cv-txt { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: center; min-width: 0; }
#combat-visuel .cv-camp { font: 700 .72rem/1.2 var(--cv-titre); letter-spacing: .14em; text-transform: uppercase; }
#combat-visuel .cv-jeton[data-camp="heros"] .cv-camp { color: var(--cv-heros); }
#combat-visuel .cv-jeton[data-camp="adverse"] .cv-camp { color: var(--cv-adverse); }
#combat-visuel .cv-nom { font: 700 clamp(1rem,3.2vw,1.45rem)/1.15 var(--cv-titre); letter-spacing: .04em; text-transform: uppercase; color: #f2f2f8; overflow-wrap: break-word; }
#combat-visuel .cv-ligne { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; align-items: center; font-size: .85rem; color: #d0d4e6; text-align: left; font-variant-numeric: tabular-nums; }
#combat-visuel .cv-jauge { display: block; height: 10px; background: #000; border: 1px solid #2a2f45; border-radius: 6px; overflow: hidden; }
#combat-visuel .cv-jauge.ki { height: 7px; }
#combat-visuel .cv-jauge i { display: block; height: 100%; width: var(--p); transition: width .3s; }
#combat-visuel .cv-jauge.vie i { background: linear-gradient(90deg,#2f9d55,#6bd98a); }
#combat-visuel .cv-jauge.ki i { background: linear-gradient(90deg,#7a52d6,#c4a2ff); }
#combat-visuel .cv-vs { font: 900 clamp(1.6rem,5vw,2.6rem)/1 var(--cv-titre); color: #ffb454; text-shadow: 0 2px 10px #000; letter-spacing: .06em; }
#combat-visuel .cv-jeton.ko .cv-por, #combat-visuel .cv-jeton.ko .cv-jauge { filter: grayscale(1); opacity: .45; }
#combat-visuel .cv-jeton.ko .cv-nom { text-decoration: line-through; }
#combat-visuel .cv-flottant { position: absolute; top: 8px; right: 12px; font: 800 1.6rem/1 var(--cv-titre); pointer-events: none; text-shadow: 0 2px 6px #000; animation: cv-monte 1.6s ease-out forwards; }
#combat-visuel .cv-flottant[data-sens="degat"] { color: #ff6b6b; }
#combat-visuel .cv-flottant[data-sens="soin"] { color: #7dffa6; }
#combat-visuel .cv-flottant[data-sens="ki"] { top: 44px; font-size: 1.1rem; color: #e2d2ff; }
#combat-visuel .cv-flottant[data-calme] { animation: cv-fondu 1.6s linear forwards; }
@keyframes cv-monte { 0% { transform: translateY(8px) scale(.8); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
@keyframes cv-fondu { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 30rem) {
  body.images-actives.combat-visuel #combat-visuel { gap: 6px; padding: 0 10px; }
  #combat-visuel .cv-jeton { padding: 10px 6px; }
  #combat-visuel .cv-ligne { grid-template-columns: minmax(0,1fr); gap: 2px; font-size: .74rem; text-align: center; }
  #combat-visuel .cv-flottant { font-size: 1.25rem; right: 6px; }
}
@media (prefers-reduced-motion: reduce) { #combat-visuel .cv-jauge i { transition: none; } #combat-visuel .cv-flottant { animation: cv-fondu 1.6s linear forwards; } }
@media (forced-colors: active) { #combat-visuel .cv-jeton, #combat-visuel .cv-jauge { border: 1px solid CanvasText; } }