/* Animación del combate de Aura (26-09): cada ataque con su movimiento, cada
   elemento con su efecto, estados encima del luchador, cinemática del especial
   y la rama tiñendo estela, aura y HUD. Lo mueve js/combate.js con Web
   Animations; aquí solo formas, colores y los bucles baratos (transform y
   opacity). Versión suave con prefers-reduced-motion (y la clase .cb-suave). */

/* ── Capas del escenario ───────────────────────────────────────── */
.cb-mundo { position: absolute; inset: 0; will-change: transform; }
.cb-fx, .cb-marcas { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.cb-fx { z-index: 4; }
.cb-marcas { z-index: 3; }
.escenario > .dmg { z-index: 8; }
.escenario > .rpg-eficacia { z-index: 6; }
.cb-flash { animation: none !important; opacity: 0; }
.cb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px #fff); }

/* partículas */
.cb-p { position: absolute; border-radius: 1px; pointer-events: none; }
.cb-ceniza { border-radius: 50%; opacity: .8; }
.cb-gota { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset -1px -1px 0 rgba(255,255,255,.6); }
.cb-polvo { border-radius: 50%; opacity: .55; }
.cb-burbuja { border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 0 5px #7CFF6B; opacity: .9; }
.cb-estrella { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cb-flecha-abajo { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cb-roca-mini { clip-path: polygon(20% 0, 85% 10%, 100% 60%, 70% 100%, 10% 85%, 0 35%); }
.cb-robo { border-radius: 50%; box-shadow: 0 0 6px #FF4D6D, 0 0 12px #FF4D6D; }

.cb-onda { position: absolute; border: 3px solid; border-radius: 50%; box-shadow: 0 0 10px currentColor, inset 0 0 8px currentColor; pointer-events: none; }
.cb-fogonazo { border: 0; background: radial-gradient(circle, #FFF6C0 0 18%, #FFB23F 35%, rgba(255,90,31,.6) 55%, transparent 70%); box-shadow: none; mix-blend-mode: screen; }
.cb-distorsion { border-style: dashed; border-width: 2px; mix-blend-mode: screen; }

/* fuego */
.cb-llama { position: absolute; transform-origin: 50% 100%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(ellipse at 50% 78%, #FFF7C2 0 14%, #FFD23F 26%, #FF8A1F 46%, rgba(255,58,20,.75) 60%, transparent 72%);
  border-radius: 50% 50% 42% 42% / 68% 68% 32% 32%; }
/* rayo */
.cb-parpadeo-azul { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(170,250,255,.85), rgba(61,169,255,.55) 60%, rgba(20,60,160,.5)); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
/* agua */
/* la ola crece hacia el lado al que rompe (derecha si va al rival; .izq si viene hacia ti) y lleva su cresta de espuma */
.cb-ola { position: absolute; transform-origin: 50% 100%; pointer-events: none; opacity: .92;
  background: linear-gradient(to top, #0B3F8C, #1F7BDB 40%, #52B6FF 72%, #BFE6FF);
  border-radius: 20% 85% 0 0 / 30% 100% 0 0; box-shadow: inset -6px 5px 0 -1px rgba(255,255,255,.85), 0 0 14px rgba(61,169,255,.6); }
.cb-ola::before { content: ''; position: absolute; right: -2%; top: -6%; width: 34%; height: 44%; border-radius: 50%;
  border-top: 5px solid #fff; border-right: 5px solid #E6F6FF; border-left: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(18deg); }
.cb-ola::after { content: ''; position: absolute; left: 8%; right: 30%; top: 22%; height: 3px; background: rgba(255,255,255,.55); border-radius: 2px; box-shadow: 10px 12px 0 rgba(255,255,255,.35); }
.cb-ola.izq { border-radius: 85% 20% 0 0 / 100% 30% 0 0; box-shadow: inset 6px 5px 0 -1px rgba(255,255,255,.85), 0 0 14px rgba(61,169,255,.6); }
.cb-ola.izq::before { right: auto; left: -2%; transform: scaleX(-1) rotate(18deg); }
.cb-ola-gigante { opacity: .94; }
/* tierra */
.cb-roca { position: absolute; pointer-events: none;
  background: linear-gradient(135deg, #E3B374 0 18%, #B07A40 40%, #7A5230 70%, #4A321C);
  clip-path: polygon(22% 0, 78% 6%, 100% 42%, 88% 88%, 50% 100%, 8% 86%, 0 38%); }
/* planta */
.cb-hoja { position: absolute; width: 11px; height: 6px; border-radius: 0 100% 0 100%; box-shadow: inset 1px 1px 0 rgba(255,255,255,.35); pointer-events: none; }
.cb-hoja.grande { width: 20px; height: 11px; }
/* luz */
.cb-haz { position: absolute; transform-origin: 50% 0; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,210,63,.55) 22%, #FFF6D0 46%, #fff 50%, #FFF6D0 54%, rgba(255,210,63,.55) 78%, transparent); }
.cb-haz-gigante { background: linear-gradient(90deg, transparent, rgba(255,210,63,.7) 20%, #FFFBE8 45%, #fff 50%, #FFFBE8 55%, rgba(255,210,63,.7) 80%, transparent); }
.cb-estrella4 { position: absolute; pointer-events: none; background: radial-gradient(circle, #fff 0 25%, #FFE890 45%, #FFD23F);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
/* vacío */
.cb-agujero { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #000 0 42%, #1A0636 50%, #6B2FC4 58%, #C9A2FF 63%, rgba(183,123,255,.4) 68%, transparent 74%);
  box-shadow: 0 0 16px 2px rgba(183,123,255,.7); }
.cb-agujero::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: 2px dashed rgba(201,162,255,.7); }

/* proyectiles */
.cb-proy { position: absolute; pointer-events: none; }
.cb-proy-bola { width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, #fff 0 16%, var(--c) 46%, transparent 72%); box-shadow: 0 0 14px var(--c), 0 0 28px var(--c); }
.cb-proy-bola.el-fuego { background: radial-gradient(circle at 42% 42%, #FFF7C2 0 16%, #FFD23F 30%, #FF6A1F 52%, rgba(200,40,10,.6) 64%, transparent 72%); box-shadow: 0 0 14px #FF6A1F, 0 0 30px #FF3B1F; }
.cb-proy-bola.el-agua { background: radial-gradient(circle at 36% 34%, #fff 0 12%, #9ED8FF 24%, #3DA9FF 50%, #0E4FA8 66%, transparent 72%); box-shadow: 0 0 10px #3DA9FF; }
.cb-proy-bola.el-tierra { border-radius: 0; width: 24px; height: 22px; background: linear-gradient(135deg, #E3B374, #8A6236 55%, #4A321C);
  clip-path: polygon(22% 0, 78% 6%, 100% 42%, 88% 88%, 50% 100%, 8% 86%, 0 38%); box-shadow: none; }
.cb-proy-bola.el-vacio { background: radial-gradient(circle, #000 0 38%, #3A1470 50%, #B77BFF 62%, transparent 72%); box-shadow: 0 0 12px #B77BFF, 0 0 24px #6B2FC4; }
.cb-proy-bola.el-luz { background: radial-gradient(circle, #fff 0 22%, #FFF0A0 40%, #FFD23F 58%, transparent 72%); box-shadow: 0 0 16px #FFD23F, 0 0 32px #FFE890; }
.cb-proy-bola.el-planta { background: radial-gradient(circle at 40% 40%, #E8FFC8 0 14%, #9BEA5B 36%, #3E9E3A 58%, transparent 72%); box-shadow: 0 0 10px #5BD65B; }
.cb-proy-bola.el-rayo { background: radial-gradient(circle, #fff 0 25%, #6FF3FF 50%, transparent 72%); box-shadow: 0 0 14px #6FF3FF, 0 0 30px #3DA9FF; }
.cb-proy-bola.grande { width: 34px; height: 34px; }
.cb-proy-flecha { width: 48px; height: 5px; margin-top: -2px; background: linear-gradient(90deg, transparent, var(--c) 35%, #fff); box-shadow: 0 0 8px var(--c); }
.cb-proy-flecha::after { content: ''; position: absolute; right: -8px; top: -5px; border-left: 12px solid #fff; border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; filter: drop-shadow(0 0 3px var(--c)); }
.cb-proy-flecha.el-planta::before { content: ''; position: absolute; left: 2px; top: -5px; width: 13px; height: 7px; border-radius: 0 100% 0 100%; background: #5BD65B; }
.cb-proy-chorro { width: 42px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, transparent, #3DA9FF 40%, #BFE6FF); box-shadow: 0 0 10px #3DA9FF; }
.cb-laser { position: absolute; height: 8px; margin-top: -4px; transform-origin: 0 50%; border-radius: 4px; pointer-events: none;
  background: linear-gradient(0deg, var(--c), #fff 50%, var(--c)); box-shadow: 0 0 10px var(--c), 0 0 24px var(--c); }
.cb-grieta { position: absolute; width: 34px; height: 5px; background: #1a1008; box-shadow: 0 0 6px var(--c), 0 -2px 0 var(--c);
  clip-path: polygon(0 50%, 20% 0, 40% 70%, 60% 10%, 80% 80%, 100% 40%, 100% 60%, 80% 100%, 60% 40%, 40% 100%, 20% 40%, 0 60%); }
.cb-carga-mano { position: absolute; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, var(--c) 42%, transparent 70%); box-shadow: 0 0 16px var(--c); mix-blend-mode: screen; }
.cb-remolino { position: absolute; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--c); border-bottom-color: var(--c);
  box-shadow: 0 0 10px var(--c); pointer-events: none; }
.cb-runa { position: absolute; width: 90px; height: 26px; border-radius: 50%; border: 2px solid var(--c); pointer-events: none;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); box-shadow: 0 0 12px var(--c), inset 0 0 8px var(--c); }
.cb-halo { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 38%, color-mix(in srgb, var(--c) 70%, transparent) 55%, transparent 70%); }
.cb-cruz { position: absolute; width: 13px; height: 13px; background: #6BF0A5; pointer-events: none;
  clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); filter: drop-shadow(0 0 3px #6BF0A5); }
.cb-sil { position: absolute; pointer-events: none; transform-origin: 50% 50%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ── Cinemática del especial y de la fase 2 ──────────────────── */
.cb-cine { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; overflow: hidden; --c: #fff; }
.cb-cine.ver { display: block; }
.cb-cine-fondo { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 28% 62%, color-mix(in srgb, var(--c) 42%, #05060a) 0%, rgba(5,6,10,.92) 62%), rgba(5,6,10,.35); }
.cb-cine-lineas { position: absolute; inset: -40%; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg at 38% 58%, transparent 0 5deg, color-mix(in srgb, var(--c) 30%, transparent) 5deg 6.5deg, transparent 6.5deg 11deg); }
.cb-franja { position: absolute; left: 0; right: 0; height: 11%; background: #000; }
.cb-franja.arriba { top: 0; transform-origin: 50% 0; border-bottom: 2px solid var(--c); }
.cb-franja.abajo { bottom: 0; transform-origin: 50% 100%; border-top: 2px solid var(--c); }
.cb-cine-nombre { position: absolute; left: 62%; top: 48%; width: 70%; text-align: center; font: 19px/1.25 var(--f-pixel); color: #fff; letter-spacing: .04em;
  text-shadow: 3px 3px 0 #000, 0 0 10px var(--c), 0 0 22px var(--c); transform: translate(-50%, -50%); }

/* ── Marcas de estado (se quedan mientras dura) ──────────────── */
.cb-marca { position: absolute; pointer-events: none; }
.cb-marca > div { display: none; position: absolute; inset: 0; }
.cb-marca.quemado .mk-fuego, .cb-marca.veneno .mk-veneno, .cb-marca.aturdido .mk-estrellas, .cb-marca.debil .mk-debil,
.cb-marca.burbuja .mk-burbuja, .cb-marca.carga .mk-carga { display: block; }
.mk-fuego i { position: absolute; bottom: 30%; width: 13px; height: 20px; transform-origin: 50% 100%; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 80%, #FFF7C2 0 14%, #FFD23F 28%, #FF7A1F 50%, transparent 70%); border-radius: 50% 50% 42% 42% / 68% 68% 32% 32%;
  animation: mkLlama .5s steps(3) infinite alternate; }
.mk-fuego i:nth-child(1) { left: 22%; } .mk-fuego i:nth-child(2) { left: 50%; bottom: 55%; animation-delay: .17s; } .mk-fuego i:nth-child(3) { left: 70%; bottom: 20%; animation-delay: .33s; }
@keyframes mkLlama { from { transform: scale(.8, .7); opacity: .75; } to { transform: scale(1.1, 1.25) translateY(-3px); opacity: 1; } }
.mk-veneno i { position: absolute; bottom: 35%; width: 7px; height: 7px; border-radius: 50%; background: rgba(124,255,107,.55); box-shadow: inset 0 0 0 1.5px #B6FF9E, 0 0 5px #3FCF4A;
  animation: mkBurbuja 1.4s linear infinite; }
.mk-veneno i:nth-child(1) { left: 25%; } .mk-veneno i:nth-child(2) { left: 55%; animation-delay: .35s; width: 5px; height: 5px; }
.mk-veneno i:nth-child(3) { left: 40%; animation-delay: .7s; } .mk-veneno i:nth-child(4) { left: 70%; animation-delay: 1.05s; width: 9px; height: 9px; }
@keyframes mkBurbuja { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-60px) scale(1.1); opacity: 0; } }
.mk-estrellas { top: -4% !important; bottom: auto !important; height: 20px; }
.mk-estrellas i { position: absolute; left: 50%; top: 0; font: 14px/1 var(--f-pixel); font-style: normal; color: #FFE600; text-shadow: 1px 1px 0 #000, 0 0 6px #FFE600; animation: mkOrbita 1.1s linear infinite; }
.mk-estrellas i:nth-child(2) { animation-delay: -.37s; } .mk-estrellas i:nth-child(3) { animation-delay: -.73s; }
@keyframes mkOrbita { 0% { transform: translate(-50%, 0) translateX(-22px) scale(.75); opacity: .6; } 25% { transform: translate(-50%, 0) translateY(4px) scale(1.15); opacity: 1; }
  50% { transform: translate(-50%, 0) translateX(22px) scale(.75); opacity: .6; } 75% { transform: translate(-50%, 0) translateY(-4px) scale(.55); opacity: .35; } 100% { transform: translate(-50%, 0) translateX(-22px) scale(.75); opacity: .6; } }
.mk-debil i { position: absolute; top: 20%; font: 12px/1 var(--f-pixel); font-style: normal; color: #C9A2FF; text-shadow: 1px 1px 0 #000; animation: mkBaja 1s steps(4) infinite; }
.mk-debil i:nth-child(1) { left: 6%; } .mk-debil i:nth-child(2) { right: 6%; animation-delay: .5s; }
@keyframes mkBaja { from { transform: translateY(0); opacity: 1; } to { transform: translateY(24px); opacity: 0; } }
.mk-burbuja { left: 50% !important; top: 52% !important; width: 125%; height: 100%; inset: auto !important; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid var(--b); background: radial-gradient(ellipse, transparent 55%, color-mix(in srgb, var(--b) 30%, transparent) 72%, color-mix(in srgb, var(--b) 12%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--b) 60%, transparent), inset 6px -6px 0 -3px rgba(255,255,255,.35); animation: mkBrillo 1.6s ease-in-out infinite; }
.cb-marca.doble .mk-burbuja { border-width: 3px; }
@keyframes mkBrillo { 50% { opacity: .7; } }
.mk-carga i { position: absolute; left: 50%; top: 50%; width: 110%; height: 110%; border-radius: 50%; border: 2px dashed var(--b); transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--b); animation: mkGira 1.2s linear infinite; opacity: .8; }
.mk-carga i:nth-child(2) { width: 80%; height: 80%; animation-duration: .8s; animation-direction: reverse; }
@keyframes mkGira { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── La rama se nota: aura bajo tus pies, brillo, HUD ─────────── */
.cb-aura { position: absolute; height: 24px; transform: translate(-50%, -60%); pointer-events: none; z-index: 1; --r: var(--rama, #fff);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--r) 75%, transparent) 0, color-mix(in srgb, var(--r) 25%, transparent) 45%, transparent 70%);
  border-radius: 50%; animation: auraLate 1.6s ease-in-out infinite; }
@keyframes auraLate { 50% { opacity: .65; transform: translate(-50%, -60%) scale(.9); } }
.cb-aura i { position: absolute; bottom: 50%; width: 5px; height: 5px; background: var(--r); box-shadow: 0 0 5px var(--r); animation: auraSube 1.8s linear infinite; }
.cb-aura i:nth-child(1) { left: 18%; } .cb-aura i:nth-child(2) { left: 42%; animation-delay: .45s; } .cb-aura i:nth-child(3) { left: 62%; animation-delay: .9s; } .cb-aura i:nth-child(4) { left: 82%; animation-delay: 1.35s; }
@keyframes auraSube { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-70px) scale(.4); opacity: 0; } }
.cb-aura.el-fuego i { width: 7px; height: 11px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: linear-gradient(to top, #FF5A1F, #FFD23F); }
.cb-aura.el-rayo i { width: 2px; height: 12px; background: #fff; box-shadow: 0 0 6px #6FF3FF, 0 0 10px #6FF3FF; animation: auraChispa .9s steps(3) infinite; }
@keyframes auraChispa { 0% { transform: translateY(0) rotate(20deg); opacity: 1; } 33% { transform: translateY(-20px) rotate(-30deg); opacity: .2; } 66% { transform: translateY(-38px) rotate(25deg); opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } }
.cb-aura.el-agua i { width: 6px; height: 6px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px #BFE6FF, 0 0 5px #3DA9FF; }
.cb-aura.el-tierra i { width: 6px; height: 5px; background: #B07A40; box-shadow: 1px 1px 0 #4A321C; animation-name: auraPiedra; animation-duration: 2.2s; }
@keyframes auraPiedra { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(-34px) rotate(40deg); opacity: 1; } 100% { transform: translateY(-40px) rotate(60deg); opacity: 0; } }
.cb-aura.el-planta i { width: 8px; height: 5px; border-radius: 0 100% 0 100%; background: #5BD65B; box-shadow: none; animation-name: auraHoja; animation-duration: 2.4s; }
@keyframes auraHoja { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(14px, -60px) rotate(260deg); opacity: 0; } }
.cb-aura.el-luz i { width: 7px; height: 7px; background: #FFF3B0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.cb-aura.el-vacio i { width: 8px; height: 8px; border-radius: 50%; background: #2A0B4F; box-shadow: 0 0 6px #B77BFF, 0 0 10px #6B2FC4; animation-name: auraEspiral; }
@keyframes auraEspiral { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(10px, -30px) scale(.8); } 100% { transform: translate(-8px, -60px) scale(.3); opacity: 0; } }
/* un brillo fino del color de la rama alrededor de tu dibujo (sin pisar escudo, herido, cura…) */
.combate[data-rama] .luchador-px.yo.cb-con-aura:not(.herido):not(.con-escudo):not(.rpg-guardia):not(.curando):not(.aturdido):not(.derrotado) {
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 3px color-mix(in srgb, var(--rama) 80%, transparent)); }
/* HUD: tu barra, la barra del especial y el botón del especial, del color de tu rama */
.combate[data-rama] #v-yo { border-color: var(--rama); box-shadow: 0 0 8px color-mix(in srgb, var(--rama) 55%, transparent); }
.combate[data-rama] .carga-especial > span:first-child { color: var(--rama); }
.combate[data-rama] .carga-especial i { border-color: color-mix(in srgb, var(--rama) 60%, #fff); }
.combate[data-rama] .carga-especial i.on { background: var(--rama); box-shadow: 0 0 8px var(--rama); }
.combate[data-rama] .rpg-menu .rpg-esp { border-color: var(--rama); }
.combate[data-rama] .rpg-menu .rpg-esp:not([disabled]) { background: var(--rama); color: #0B0C10; }
.combate[data-rama] .barra-sup { box-shadow: inset 0 -2px 0 var(--rama); }

/* ── Jefe en fase 2: su ambiente y su barra ──────────────────── */
.cb-ambiente { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; --c: #FF3B30; }
.cb-ambiente.on { display: block; box-shadow: inset 0 0 36px 8px color-mix(in srgb, var(--c) 70%, transparent); animation: ambLate 1.1s ease-in-out infinite; }
@keyframes ambLate { 50% { box-shadow: inset 0 0 56px 16px color-mix(in srgb, var(--c) 85%, transparent); } }
.cb-ambiente i { position: absolute; bottom: -6px; width: 6px; height: 6px; background: var(--c); box-shadow: 0 0 8px var(--c); animation: ambSube 2.6s linear infinite; }
.cb-ambiente i:nth-child(1) { left: 8%; } .cb-ambiente i:nth-child(2) { left: 24%; animation-delay: .4s; } .cb-ambiente i:nth-child(3) { left: 44%; animation-delay: 1.1s; }
.cb-ambiente i:nth-child(4) { left: 60%; animation-delay: .7s; } .cb-ambiente i:nth-child(5) { left: 76%; animation-delay: 1.6s; } .cb-ambiente i:nth-child(6) { left: 92%; animation-delay: 2s; }
@keyframes ambSube { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-260px) translateX(12px); opacity: 0; } }
.cb-ambiente.el-planta i { border-radius: 0 100% 0 100%; width: 10px; } .cb-ambiente.el-tierra i { background: #B07A40; box-shadow: 1px 1px 0 #4A321C; }
.cb-ambiente.el-vacio i, .cb-ambiente.el-agua i { border-radius: 50%; }
.vida.cb-fase2 { border-color: var(--c); animation: faseBarra .8s ease-in-out infinite; }
@keyframes faseBarra { 50% { box-shadow: 0 0 10px var(--c); } }

/* temblor fuerte (golpe cargado, especial de tierra, fase 2) */
.escenario.cb-temblor-fuerte { animation: cbTemblor .55s steps(8); }
@keyframes cbTemblor { 12% { transform: translate(-9px, 4px); } 25% { transform: translate(8px, -6px); } 37% { transform: translate(-7px, 3px); } 50% { transform: translate(6px, -3px); }
  62% { transform: translate(-4px, 2px); } 75% { transform: translate(3px, -2px); } 87% { transform: translate(-2px, 1px); } }

/* números: muy eficaz más grande y ácido, poco eficaz pequeño y gris */
.dmg.cb-eficaz { font-size: 20px; text-shadow: 2px 2px 0 #000, 0 0 8px #C6FF00; }
.dmg.cb-poco { font-size: 12px; opacity: .85; }
.dmg.crit { text-shadow: 2px 2px 0 #000, 0 0 10px #FFD66B; }

/* ── Versión suave (prefers-reduced-motion) ───────────────────── */
.cb-suave .cb-marca i, .cb-suave .cb-aura, .cb-suave .cb-aura i, .cb-suave .cb-ambiente, .cb-suave .cb-ambiente i, .cb-suave .mk-burbuja, .cb-suave .mk-carga i { animation: none !important; }
.cb-suave .cb-aura i, .cb-suave .cb-ambiente i, .cb-suave .mk-veneno i, .cb-suave .mk-debil i { display: none; }
.cb-suave .escenario.temblor, .cb-suave .escenario.cb-temblor-fuerte { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cb-marca i, .cb-aura, .cb-aura i, .cb-ambiente, .cb-ambiente i, .mk-burbuja, .mk-carga i { animation: none !important; }
  .cb-aura i, .cb-ambiente i { display: none; }
  .escenario.cb-temblor-fuerte { animation: none; }
}
.escenario > .turno-cartel { z-index: 8; }

/* ── 02-10 · Poderes de carta (agente JUEGO) ──────────────────────
   La carta con la que combate cada uno (chip en el HUD), el aura de su RAREZA
   detrás del luchador (rara azul, épica violeta, legendaria dorada con rayos,
   secreta holográfica), el rótulo cuando salta un poder y el compañero de
   vínculo que acude. Sin rayas de color en un solo lado: borde fino + halo. */
.rpg-hud.der { justify-content: flex-end; }
.cb-carta { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 1px 5px; border: 1.5px solid var(--rc); background: rgba(0,0,0,.45); color: #fff;
  font: 9px/1.4 var(--f-pixel); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 6px color-mix(in srgb, var(--rc) 50%, transparent); }
.cb-carta i { width: 6px; height: 6px; background: var(--rc); transform: rotate(45deg); flex: none; }
.cb-carta em { font-style: normal; color: var(--rc); }
.cb-carta.rz-mitica { border-color: #FF2E88; box-shadow: 0 0 6px #FF2E88, 0 0 10px rgba(61,227,255,.5); }
.cb-carta.rz-mitica em { background: linear-gradient(90deg, #FF2E88, #3DE3FF, #FFE600); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 360px) { .cb-carta em { display: none; } }

.cb-rz-aura { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; display: none; --g1: transparent; }
.cb-rz-aura.rz-rara, .cb-rz-aura.rz-epica, .cb-rz-aura.rz-legendaria, .cb-rz-aura.rz-mitica { display: block; }
.cb-rz-aura::before { content: ''; position: absolute; inset: 6% 12% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 62%, var(--g1) 0, transparent 70%); animation: rzLate 2.6s ease-in-out infinite; }
.cb-rz-aura.rz-rara { --g1: rgba(79,155,255,.30); }
.cb-rz-aura.rz-epica { --g1: rgba(176,123,255,.40); }
.cb-rz-aura.rz-legendaria { --g1: rgba(242,196,81,.48); }
.cb-rz-aura.rz-mitica { --g1: rgba(255,46,136,.36); }
.cb-rz-aura.rz-legendaria::after, .cb-rz-aura.rz-mitica::after { content: ''; position: absolute; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: rzGira 16s linear infinite; }
.cb-rz-aura.rz-legendaria::after { background: repeating-conic-gradient(from 0deg, rgba(255,224,138,.30) 0 5deg, transparent 5deg 20deg); }
.cb-rz-aura.rz-mitica::after { background: conic-gradient(from 0deg, rgba(255,46,136,.45), rgba(61,227,255,.45), rgba(255,230,0,.4), rgba(139,108,255,.45), rgba(255,46,136,.45)); animation-duration: 6s; opacity: .7; }
.cb-rz-aura i { position: absolute; bottom: 14%; display: none; }
.cb-rz-aura.rz-epica i, .cb-rz-aura.rz-legendaria i, .cb-rz-aura.rz-mitica i { display: block; animation: rzSube 2.3s linear infinite; }
.cb-rz-aura.rz-epica i { width: 4px; height: 4px; border-radius: 50%; background: #D9C2FF; box-shadow: 0 0 6px #B07BFF; }
.cb-rz-aura.rz-legendaria i { width: 3px; height: 8px; background: #FFE9A8; box-shadow: 0 0 6px #F2C451, 0 0 10px #F2C451; }
.cb-rz-aura.rz-mitica i { width: 6px; height: 6px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(135deg, #FF2E88, #3DE3FF); }
.cb-rz-aura i:nth-child(1) { left: 22%; } .cb-rz-aura i:nth-child(2) { left: 38%; animation-delay: .45s; } .cb-rz-aura i:nth-child(3) { left: 54%; animation-delay: .9s; }
.cb-rz-aura i:nth-child(4) { left: 68%; animation-delay: 1.35s; } .cb-rz-aura i:nth-child(5) { left: 82%; animation-delay: 1.8s; }
@keyframes rzSube { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }
@keyframes rzGira { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rzLate { 50% { opacity: .62; transform: scale(.94); } }
/* el borde de luz de su rareza en el propio dibujo (sumado al de tu rama) */
.combate[data-rama] .luchador-px.yo.cb-con-aura.cb-rz-rara:not(.herido):not(.con-escudo):not(.rpg-guardia):not(.curando):not(.aturdido):not(.derrotado) {
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 3px color-mix(in srgb, var(--rama) 70%, transparent)) drop-shadow(0 0 5px rgba(79,155,255,.55)); }
.combate[data-rama] .luchador-px.yo.cb-con-aura.cb-rz-epica:not(.herido):not(.con-escudo):not(.rpg-guardia):not(.curando):not(.aturdido):not(.derrotado) {
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 2px #E2D0FF) drop-shadow(0 0 7px rgba(176,123,255,.7)); }
.combate[data-rama] .luchador-px.yo.cb-con-aura.cb-rz-legendaria:not(.herido):not(.con-escudo):not(.rpg-guardia):not(.curando):not(.aturdido):not(.derrotado) {
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 2px #FFF1C2) drop-shadow(0 0 8px rgba(242,196,81,.8)); }
.combate[data-rama] .luchador-px.yo.cb-con-aura.cb-rz-mitica:not(.herido):not(.con-escudo):not(.rpg-guardia):not(.curando):not(.aturdido):not(.derrotado) {
  animation: rzHolo 3.2s linear infinite; }
.combate .luchador-px.rival.cb-rz-rara:not(.herido):not(.aturdido):not(.derrotado):not(.cargando) { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 5px rgba(79,155,255,.55)); }
.combate .luchador-px.rival.cb-rz-epica:not(.herido):not(.aturdido):not(.derrotado):not(.cargando) { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 7px rgba(176,123,255,.7)); }
.combate .luchador-px.rival.cb-rz-legendaria:not(.herido):not(.aturdido):not(.derrotado):not(.cargando) { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(242,196,81,.8)); }
.combate .luchador-px.rival.cb-rz-mitica:not(.herido):not(.aturdido):not(.derrotado):not(.cargando) { animation: rzHolo 3.2s linear infinite; }
@keyframes rzHolo {
  0%   { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 7px rgba(255,46,136,.85)); }
  33%  { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 7px rgba(61,227,255,.85)); }
  66%  { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 7px rgba(255,230,0,.8)); }
  100% { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 7px rgba(255,46,136,.85)); } }

/* rótulo de un poder (pasiva, despertar, rival, vínculo) */
.cb-rotulo { position: absolute; top: 5px; z-index: 7; max-width: min(80%, 310px); display: flex; gap: 7px; align-items: center; padding: 5px 9px 5px 5px; pointer-events: none;
  background: rgba(11,12,16,.9); color: #fff; border: 1.5px solid var(--rc); box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent), 3px 3px 0 #000; animation: rotEntra .28s ease-out both; }
.cb-rotulo.izq { left: 6px; } .cb-rotulo.der { right: 6px; flex-direction: row-reverse; text-align: right; padding: 5px 5px 5px 9px; }
.cb-rotulo img { width: 32px; height: 46px; object-fit: cover; border: 1.5px solid var(--rc); flex: none; background: #000; }
.cb-rotulo > div { min-width: 0; }
.cb-rotulo small { display: block; font: 8.5px/1.25 var(--f-pixel); color: var(--rc); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-rotulo b { display: block; font: 11.5px/1.2 var(--f-pixel); text-transform: uppercase; margin: 1px 0 2px; font-weight: normal; }
.cb-rotulo span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 10.5px/1.28 var(--f-texto); color: #D5DAE5; }
.cb-rotulo.rz-legendaria { background: linear-gradient(135deg, rgba(64,46,8,.94), rgba(11,12,16,.92)); }
.cb-rotulo.rz-mitica { background: linear-gradient(135deg, rgba(74,10,44,.94), rgba(8,32,46,.92)); border-color: #FF2E88; box-shadow: 0 0 14px rgba(255,46,136,.5), 0 0 22px rgba(61,227,255,.3), 3px 3px 0 #000; }
.cb-rotulo.vinculo { top: auto; bottom: 6px; }
.cb-rotulo.fuera { animation: rotSale .24s ease-in forwards; }
@keyframes rotEntra { from { transform: translateY(-10px); opacity: 0; } }
@keyframes rotSale { to { transform: translateY(-8px); opacity: 0; } }
.cb-poder-mini { position: absolute; top: 20%; z-index: 6; max-width: 46%; padding: 2px 6px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 9.5px/1.3 var(--f-pixel); text-transform: uppercase; color: #fff; background: rgba(0,0,0,.72); border: 1.5px solid var(--rc); box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 50%, transparent);
  animation: rpgEficacia 1.2s steps(10) forwards; }
.cb-poder-mini.izq { left: 4%; } .cb-poder-mini.der { right: 4%; }
.dmg.cb-esquiva { color: #9AF2FF; font-size: 15px; text-shadow: 2px 2px 0 #000, 0 0 8px #3DE3FF; }
.dmg.cb-espinas { color: #B6FF9E; }
/* el compañero de vínculo que acude */
.luchador-px.cb-cameo { left: 0; z-index: 0; }
.cb-suave .cb-rz-aura::before, .cb-suave .cb-rz-aura::after, .cb-suave .cb-rz-aura i, .cb-suave .cb-rotulo, .cb-suave .luchador-px[class*="cb-rz-"] { animation: none !important; }
.cb-suave .cb-rz-aura i { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cb-rz-aura::before, .cb-rz-aura::after, .cb-rz-aura i, .cb-rotulo, .luchador-px[class*="cb-rz-"] { animation: none !important; }
  .cb-rz-aura i { display: none !important; }
}
/* 02-10: en «Titanio claro» la capa se vuelve blanca (.capa); el combate sigue siendo de noche */
:root[data-theme="titanio-claro"] .capa.combate { background: #0b0d12; color: #fff; }