/* ================================================
   BATTLE ARENA — 3D Dragon Battle System
   VS Screen + 3D Battle Field + Result Overlay
   ================================================ */

/* ===== VS SCREEN ===== */
.ba-vs-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ba-vs-bg {
    position: absolute;
    inset: 0;
}

.ba-vs-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a237e, #283593, #1565c0);
    clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
    animation: baVsSlideL 0.6s ease-out;
}

.ba-vs-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #b71c1c, #c62828, #e53935);
    clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
    animation: baVsSlideR 0.6s ease-out;
}

@keyframes baVsSlideL {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes baVsSlideR {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.ba-vs-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.ba-vs-lines::before,
.ba-vs-lines::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    animation: baSpeedLine 0.8s ease-out forwards;
}

.ba-vs-lines::before {
    top: 25%;
    transform: rotate(-5deg);
    animation-delay: 0.3s;
}

.ba-vs-lines::after {
    top: 75%;
    transform: rotate(5deg);
    animation-delay: 0.5s;
}

@keyframes baSpeedLine {
    from {
        left: -100%;
        opacity: 0;
    }

    to {
        left: 30%;
        opacity: 1;
    }
}

.ba-vs-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 850px;
    gap: 10px;
    padding: 0 16px;
}

.ba-vs-badge {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(180deg, #FFD700, #FF6B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 12px rgba(255, 150, 0, 0.5));
    animation: baVsBadge 0.5s 0.3s ease-out both;
    flex-shrink: 0;
}

@keyframes baVsBadge {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    70% {
        transform: scale(1.3) rotate(5deg);
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.ba-vs-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ba-vs-left {
    align-items: flex-start;
    animation: baVsTeamL 0.5s ease-out both;
}

.ba-vs-right {
    align-items: flex-end;
    animation: baVsTeamR 0.5s ease-out both;
}

@keyframes baVsTeamL {
    from {
        transform: translateX(-60px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes baVsTeamR {
    from {
        transform: translateX(60px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.ba-vs-team-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
}

.ba-vs-team-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
}

.ba-vs-team-power {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffd54f;
}

.ba-vs-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 260px;
    width: 100%;
    animation: baVsCardPop 0.3s ease-out both;
}

@keyframes baVsCardPop {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ba-vs-card-img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
}

.ba-vs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ba-vs-card-info {
    flex: 1;
    min-width: 0;
}

.ba-vs-card-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ba-vs-card-meta {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 6px;
    align-items: center;
}

.ba-vs-pos {
    font-size: 0.5rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

.ba-vs-pos.front {
    background: rgba(231, 76, 60, 0.35);
    color: #ff6b6b;
}

.ba-vs-pos.back {
    background: rgba(52, 152, 219, 0.35);
    color: #74b9ff;
}

/* ===== 3D BATTLE SCENE ===== */
.ba-scene {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #0d0a06 0%, #1a120a 30%, #2d1f0f 60%, #1a120a 100%);
}

.ba-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255, 165, 50, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(139, 69, 19, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(200, 120, 40, 0.06) 0%, transparent 50%);
}

.ba-sky::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 25% 8%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 40% 22%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(1px 1px at 55% 5%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1px 1px at 70% 18%, rgba(255, 255, 255, 0.25), transparent),
        radial-gradient(1px 1px at 85% 12%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 15% 30%, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(1px 1px at 90% 25%, rgba(255, 255, 255, 0.2), transparent);
    animation: baStarTwinkle 4s ease-in-out infinite alternate;
}

.ba-sky::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 50, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

@keyframes baStarTwinkle {
    0% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* HUD */
.ba-hud {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ba-hud-side {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}

.ba-hud-turn {
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.15);
    padding: 4px 14px;
    border-radius: 10px;
}

/* 3D ARENA WRAPPER — Isometric perspective tilt */
.ba-arena-wrap {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    overflow: hidden;
}

/* Arena floor background */
.ba-arena-floor {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background:
        url('/img/arena_floor.png') center center / cover no-repeat,
        radial-gradient(ellipse at center, rgba(80, 50, 20, 0.6) 0%, rgba(30, 18, 8, 0.9) 70%);
    z-index: 0;
    filter: brightness(0.45) saturate(0.7);
}

/* Vignette overlay for arena depth */
.ba-arena-floor::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

/* Arena center divider glow */
.ba-arena-center {
    height: 3px;
    margin: 6px auto;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(255, 200, 50, 0.5), rgba(255, 215, 0, 0.8), rgba(255, 200, 50, 0.5), transparent);
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 180, 30, 0.2);
    z-index: 3;
    position: relative;
}

/* 3D BATTLE FIELD (layout container for dragons) */
.ba-field-3d {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 8px 16px;
}

.ba-team-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 6px 0;
    position: relative;
    z-index: 3;
}

/* ===== 3D DRAGON CARD ===== */
.ba-dragon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    cursor: default;
    transform-style: preserve-3d;
    animation: baDragonFloat 2.8s ease-in-out infinite;
    transition: filter 0.3s, opacity 0.3s;
    transform: scale(var(--depth, 1));
}

.ba-dragon:nth-child(1) {
    animation-delay: 0s;
}

.ba-dragon:nth-child(2) {
    animation-delay: 0.5s;
}

.ba-dragon:nth-child(3) {
    animation-delay: 1s;
}

.ba-dragon:nth-child(4) {
    animation-delay: 1.5s;
}

.ba-dragon:nth-child(5) {
    animation-delay: 2s;
}

@keyframes baDragonFloat {

    0%,
    100% {
        transform: translateY(0) rotateX(0deg) rotateZ(0deg);
    }

    20% {
        transform: translateY(-7px) rotateX(2.5deg) rotateZ(0.8deg);
    }

    50% {
        transform: translateY(-3px) rotateX(-1.5deg) rotateZ(-0.5deg);
    }

    70% {
        transform: translateY(-10px) rotateX(2deg) rotateZ(0.3deg);
    }
}

.ba-dragon-3d {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.3s;
    position: relative;
}

/* ===== ELEMENT AURA (::before) ===== */
.ba-dragon-3d::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
    animation: baAuraPulse 2s ease-in-out infinite;
}

@keyframes baAuraPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.15);
    }
}

/* Element-specific auras */
[data-elem="fire"] .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.6), rgba(255, 107, 107, 0.2), transparent);
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.5), 0 0 60px rgba(231, 76, 60, 0.2);
}

[data-elem="water"] .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.6), rgba(116, 185, 255, 0.2), transparent);
    box-shadow: 0 0 30px rgba(52, 152, 219, 0.5), 0 0 60px rgba(52, 152, 219, 0.2);
}

[data-elem="metal"] .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(189, 195, 199, 0.6), rgba(236, 240, 241, 0.2), transparent);
    box-shadow: 0 0 30px rgba(189, 195, 199, 0.5), 0 0 60px rgba(189, 195, 199, 0.2);
}

[data-elem="wood"] .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(0, 184, 148, 0.6), rgba(85, 239, 196, 0.2), transparent);
    box-shadow: 0 0 30px rgba(0, 184, 148, 0.5), 0 0 60px rgba(0, 184, 148, 0.2);
}

[data-elem="earth"] .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(212, 165, 116, 0.6), rgba(253, 203, 110, 0.2), transparent);
    box-shadow: 0 0 30px rgba(212, 165, 116, 0.5), 0 0 60px rgba(212, 165, 116, 0.2);
}

[data-elem="light"] .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.7), rgba(255, 249, 196, 0.25), transparent);
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.6), 0 0 70px rgba(255, 215, 0, 0.25);
}

[data-elem="dark"] .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(108, 92, 231, 0.6), rgba(162, 155, 254, 0.2), transparent);
    box-shadow: 0 0 30px rgba(108, 92, 231, 0.5), 0 0 60px rgba(108, 92, 231, 0.2);
}

/* ===== SPARKLE PARTICLES (::after) ===== */
.ba-dragon-3d::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    top: 10%;
    right: 5%;
    opacity: 0;
    z-index: 2;
    animation: baSparkle 2.2s ease-in-out infinite;
    box-shadow:
        -15px 30px 0 rgba(255, 255, 255, 0.5),
        10px 45px 0 rgba(255, 255, 255, 0.3),
        -25px 15px 0 rgba(255, 255, 255, 0.4);
}

@keyframes baSparkle {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    30% {
        opacity: 0.8;
        transform: translateY(-8px) scale(1.2);
    }

    60% {
        opacity: 0.4;
        transform: translateY(-15px) scale(0.8);
    }

    90% {
        opacity: 0;
        transform: translateY(-22px) scale(0.3);
    }
}

.ba-dragon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    /* Bright outline for visibility */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7));
    /* Breathing animation */
    animation: baDragonBreathe 3s ease-in-out infinite;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Dragon ground shadow */
.ba-dragon-shadow {
    width: 50px;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35), transparent);
    border-radius: 50%;
    margin-top: -4px;
    animation: baShadowPulse 2.8s ease-in-out infinite;
}

@keyframes baShadowPulse {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 0.6;
    }

    50% {
        transform: scaleX(0.85);
        opacity: 0.4;
    }
}

@keyframes baDragonBreathe {

    0%,
    100% {
        transform: scale(1) rotateY(0deg);
    }

    30% {
        transform: scale(1.04) rotateY(2deg);
    }

    60% {
        transform: scale(0.98) rotateY(-1deg);
    }
}

/* Defender faces forward, Attacker faces backward (mirror) */
.ba-def-front .ba-dragon-img,
.ba-def-back .ba-dragon-img {
    --dir: 1;
}

.ba-atk-front .ba-dragon-img,
.ba-atk-back .ba-dragon-img {
    --dir: -1;
}

.ba-atk-front .ba-dragon-3d,
.ba-atk-back .ba-dragon-3d {
    transform: scaleX(-1);
}

.ba-dragon-emoji {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.ba-dragon-bar {
    width: 90px;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ba-dragon-hp {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.5s ease;
}

.ba-dragon-hp.low {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.ba-dragon-hp.critical {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    animation: baHpFlash 0.5s infinite;
}

@keyframes baHpFlash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.ba-dragon-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    text-align: center;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 6px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.ba-dragon-lv {
    font-size: 0.45rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== BATTLE STATES ===== */

/* Death: cinematic shrink + spin + fade */
.ba-dragon.ba-dead {
    animation: baDragonDeath 0.8s ease-out forwards !important;
    pointer-events: none;
}

.ba-dragon.ba-dead .ba-dragon-3d::before,
.ba-dragon.ba-dead .ba-dragon-3d::after {
    display: none;
}

@keyframes baDragonDeath {
    0% {
        opacity: 1;
        transform: scale(1) rotateZ(0);
        filter: none;
    }

    30% {
        opacity: 0.8;
        transform: scale(1.1) rotateZ(-5deg);
        filter: brightness(2) saturate(0.5);
    }

    60% {
        opacity: 0.5;
        transform: scale(0.6) rotateZ(8deg);
        filter: grayscale(0.8) brightness(0.6);
    }

    100% {
        opacity: 0.25;
        transform: scale(0.3) rotateZ(15deg) translateY(20px);
        filter: grayscale(1) brightness(0.3);
    }
}

/* Hit: Strong shake with red flash */
.ba-dragon.ba-hit {
    animation: baHitShake 0.5s ease-out !important;
}

.ba-dragon.ba-hit .ba-dragon-img {
    filter: brightness(2) saturate(2) hue-rotate(-20deg) !important;
    animation: baHitFlash 0.5s ease-out !important;
}

@keyframes baHitFlash {
    0% {
        filter: brightness(3) saturate(0.5);
    }

    20% {
        filter: brightness(0.5) saturate(2);
    }

    40% {
        filter: brightness(2) saturate(1);
    }

    100% {
        filter: none;
    }
}

@keyframes baHitShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-8px) rotateZ(-4deg);
    }

    25% {
        transform: translateX(8px) rotateZ(4deg);
    }

    40% {
        transform: translateX(-6px) rotateZ(-2deg);
    }

    55% {
        transform: translateX(6px) rotateZ(2deg);
    }

    70% {
        transform: translateX(-3px);
    }

    85% {
        transform: translateX(3px);
    }
}

/* Attack: Powerful lunge + scale-up + glow */
.ba-dragon.ba-attacking .ba-dragon-3d {
    animation: baAttackLunge 0.6s ease-out;
}

.ba-dragon.ba-attacking .ba-dragon-img {
    animation: baDragonBreathe 3s ease-in-out infinite, baAttackGlow 0.6s ease-out !important;
}

.ba-dragon.ba-attacking .ba-dragon-3d::before {
    opacity: 0.9 !important;
    transform: scale(1.4) !important;
}

@keyframes baAttackLunge {
    0% {
        transform: scale(1) translateY(0);
    }

    25% {
        transform: scale(1.25) translateY(-12px) rotateY(20deg);
    }

    50% {
        transform: scale(1.35) translateY(-8px) rotateY(10deg);
    }

    100% {
        transform: scale(1) translateY(0) rotateY(0);
    }
}

@keyframes baAttackGlow {
    0% {
        filter: brightness(1);
    }

    30% {
        filter: brightness(1.6) saturate(1.5) drop-shadow(0 0 12px currentColor);
    }

    100% {
        filter: brightness(1);
    }
}

/* Attacker side: flip attack lunge direction */
.ba-atk-front .ba-dragon.ba-attacking .ba-dragon-3d,
.ba-atk-back .ba-dragon.ba-attacking .ba-dragon-3d {
    animation: baAttackLungeAtk 0.6s ease-out;
}

@keyframes baAttackLungeAtk {
    0% {
        transform: scaleX(-1) scale(1) translateY(0);
    }

    25% {
        transform: scaleX(-1) scale(1.25) translateY(-12px) rotateY(-20deg);
    }

    50% {
        transform: scaleX(-1) scale(1.35) translateY(-8px) rotateY(-10deg);
    }

    100% {
        transform: scaleX(-1) scale(1) translateY(0) rotateY(0);
    }
}

/* ===== ELEMENT PROJECTILES ===== */
.ba-projectile {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0;
    transition: none;
    animation: baProjSpin 0.8s linear infinite;
}

.ba-projectile img {
    animation: baProjGlow 0.3s ease-in-out infinite alternate;
}

@keyframes baProjSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes baProjGlow {
    0% {
        filter: brightness(1) drop-shadow(0 0 6px currentColor);
    }

    100% {
        filter: brightness(1.5) drop-shadow(0 0 14px currentColor);
    }
}

.ba-projectile.ba-proj-fly {
    opacity: 1;
    transition: left 0.45s ease-in, top 0.45s ease-in;
}

/* Fire */
.ba-proj-fire {
    box-shadow: 0 0 16px #e74c3c, 0 0 32px rgba(231, 76, 60, 0.5), 0 0 48px rgba(255, 107, 107, 0.3);
}

/* Water */
.ba-proj-water {
    box-shadow: 0 0 16px #3498db, 0 0 32px rgba(52, 152, 219, 0.5);
    border-radius: 50% 25% 50% 25%;
}

/* Metal */
.ba-proj-metal {
    box-shadow: 0 0 14px #bdc3c7, 0 0 28px rgba(189, 195, 199, 0.4);
    border-radius: 25% 50% 25% 50%;
    animation: baProjSpin 0.4s linear infinite;
}

/* Wood */
.ba-proj-wood {
    box-shadow: 0 0 14px #00b894, 0 0 30px rgba(0, 184, 148, 0.5);
    border-radius: 60% 40% 60% 40%;
    animation: baProjSpin 1.2s linear infinite;
}

/* Earth */
.ba-proj-earth {
    box-shadow: 0 0 14px #d4a574, 0 0 28px rgba(212, 165, 116, 0.5);
    border-radius: 40% 55% 35% 60%;
    animation: baProjSpin 0.6s linear infinite;
}

/* Light */
.ba-proj-light {
    box-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3);
}

/* Dark */
.ba-proj-dark {
    box-shadow: 0 0 16px #6c5ce7, 0 0 32px rgba(108, 92, 231, 0.5);
    animation: baProjSpin 1s linear infinite reverse;
}

/* Projectile trail */
.ba-projectile::after {
    content: '';
    position: absolute;
    top: 10%;
    left: -60%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    opacity: 0.4;
    filter: blur(8px);
    background: inherit;
    animation: baProjTrail 0.3s ease-in-out infinite alternate;
}

@keyframes baProjTrail {
    0% {
        opacity: 0.25;
        transform: scale(0.7);
    }

    100% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* ===== HIT BURST ===== */
.ba-burst {
    position: absolute;
    pointer-events: none;
    z-index: 90;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: baBurst 0.5s ease-out forwards;
}

@keyframes baBurst {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.ba-burst-fire {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.7), rgba(255, 107, 107, 0.3), transparent);
}

.ba-burst-water {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.7), rgba(116, 185, 255, 0.3), transparent);
}

.ba-burst-metal {
    background: radial-gradient(circle, rgba(189, 195, 199, 0.6), rgba(236, 240, 241, 0.3), transparent);
}

.ba-burst-wood {
    background: radial-gradient(circle, rgba(0, 184, 148, 0.7), rgba(85, 239, 196, 0.3), transparent);
}

.ba-burst-earth {
    background: radial-gradient(circle, rgba(212, 165, 116, 0.7), rgba(253, 203, 110, 0.3), transparent);
}

.ba-burst-light {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.8), rgba(255, 249, 196, 0.4), transparent);
}

.ba-burst-dark {
    background: radial-gradient(circle, rgba(108, 92, 231, 0.7), rgba(162, 155, 254, 0.3), transparent);
}

/* ===== DAMAGE POPUP ===== */
.ba-dmg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 50, 50, 0.4);
    animation: baDmgPop 0.9s ease-out forwards;
    pointer-events: none;
    z-index: 110;
    font-family: 'Baloo 2', monospace;
}

.ba-dmg-crit {
    font-size: 1.3rem;
    color: #ffd700;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 215, 0, 0.5);
}

@keyframes baDmgPop {
    0% {
        transform: translateX(-50%) translateY(0) scale(0.5);
        opacity: 0;
    }

    15% {
        transform: translateX(-50%) translateY(-8px) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-45px) scale(0.7);
        opacity: 0;
    }
}

/* ===== BATTLE LOG (fixed bottom) ===== */
.ba-log {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    max-height: 75px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    padding: 6px 12px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.ba-log::-webkit-scrollbar {
    width: 3px;
}

.ba-log::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.ba-log-row {
    padding: 1px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ===== RESULT OVERLAY ===== */
.ba-result {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    animation: baResultFade 0.3s ease-out;
}

@keyframes baResultFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ba-result-text {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    animation: baResultPop 0.5s ease-out;
}

.ba-result-text.win {
    background: linear-gradient(180deg, #FFD700, #FF8C00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 12px rgba(255, 150, 0, 0.5));
}

.ba-result-text.lose {
    color: #aaa;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@keyframes baResultPop {
    0% {
        transform: scale(0) rotate(-10deg);
    }

    60% {
        transform: scale(1.3) rotate(3deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.ba-result-detail {
    margin-top: 14px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.6;
}

.ba-result-btn {
    margin-top: 20px;
    padding: 10px 28px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    font-family: 'Baloo 2', sans-serif;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
    transition: all 0.2s;
}

.ba-result-btn:hover {
    transform: translateY(-2px) scale(1.05);
}

/* ===== SKIP BUTTON ===== */
.ba-skip {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 10001;
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: 'Baloo 2', sans-serif;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}

.ba-skip:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
    .ba-dragon-3d {
        width: 85px;
        height: 85px;
    }

    .ba-dragon-bar {
        width: 80px;
        height: 6px;
    }

    .ba-dragon-name {
        font-size: 0.65rem;
        max-width: 120px;
    }

    .ba-vs-badge {
        font-size: 4.5rem;
    }

    .ba-vs-card {
        max-width: 300px;
    }

    .ba-projectile {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 380px) {
    .ba-dragon-3d {
        width: 52px;
        height: 52px;
    }

    .ba-dragon-bar {
        width: 45px;
        height: 4px;
    }

    .ba-dragon-name {
        font-size: 0.48rem;
        max-width: 55px;
    }

    .ba-vs-badge {
        font-size: 2.5rem;
    }

    .ba-vs-card-img {
        width: 32px;
        height: 32px;
    }
}

/* ================================================
   ELEMENTAL SKILL FX — Battle Animations
   ================================================ */

/* Screen shake for big hits */
@keyframes baScreenShake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-3px, 2px) rotate(-0.5deg); }
    20% { transform: translate(4px, -2px) rotate(0.5deg); }
    30% { transform: translate(-5px, 3px) rotate(-0.3deg); }
    40% { transform: translate(3px, -3px) rotate(0.3deg); }
    50% { transform: translate(-2px, 1px) rotate(-0.2deg); }
    60% { transform: translate(2px, -1px) rotate(0.2deg); }
    80% { transform: translate(1px, 0) rotate(0); }
}

.ba-scene.ba-shaking {
    animation: baScreenShake 0.4s ease-out !important;
}

/* Skill cast glow on caster — enhanced with scale pulse */
.ba-skill-cast {
    animation: baSkillCast 0.8s ease-out !important;
}

@keyframes baSkillCast {
    0% { filter: brightness(1); transform: scale(1); }
    15% { filter: brightness(3) saturate(2.5) drop-shadow(0 0 20px rgba(255,255,255,0.8)); transform: scale(1.15); }
    40% { filter: brightness(2) saturate(2); transform: scale(1.1); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* Floating skill text effect — enhanced with glow trail */
.ba-skill-fx {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    animation: baSkillFloat 1.2s ease-out forwards;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 12px currentColor;
    backdrop-filter: blur(4px);
}

@keyframes baSkillFloat {
    0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.4); filter: blur(0); }
    20% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.1); }
    60% { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.8); filter: blur(2px); }
}

/* Element-specific skill colors — enhanced with gradient bg */
.ba-skill-fire {
    color: #FF6B6B;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.4), rgba(255, 165, 0, 0.3));
    border: 1px solid rgba(231, 76, 60, 0.6);
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.4), inset 0 0 8px rgba(255, 107, 107, 0.2);
}

.ba-skill-water {
    color: #74b9ff;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.4), rgba(116, 185, 255, 0.3));
    border: 1px solid rgba(52, 152, 219, 0.6);
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.4), inset 0 0 8px rgba(116, 185, 255, 0.2);
}

.ba-skill-earth {
    color: #FDCB6E;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.4), rgba(253, 203, 110, 0.3));
    border: 1px solid rgba(212, 165, 116, 0.6);
    box-shadow: 0 0 15px rgba(212, 165, 116, 0.4), inset 0 0 8px rgba(253, 203, 110, 0.2);
}

.ba-skill-wood {
    color: #55efc4;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.4), rgba(85, 239, 196, 0.3));
    border: 1px solid rgba(46, 204, 113, 0.6);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.4), inset 0 0 8px rgba(85, 239, 196, 0.2);
}

.ba-skill-metal {
    color: #dfe6e9;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.4), rgba(236, 240, 241, 0.3));
    border: 1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.4), inset 0 0 8px rgba(236, 240, 241, 0.2);
}

.ba-skill-dark {
    color: #a29bfe;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.4), rgba(108, 92, 231, 0.3));
    border: 1px solid rgba(142, 68, 173, 0.6);
    box-shadow: 0 0 15px rgba(142, 68, 173, 0.4), inset 0 0 8px rgba(108, 92, 231, 0.2);
}

.ba-skill-light {
    color: #FFD700;
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.4), rgba(255, 215, 0, 0.3));
    border: 1px solid rgba(241, 196, 15, 0.6);
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.5), inset 0 0 8px rgba(255, 249, 196, 0.3);
}

/* Stunned text */
.ba-stun-txt {
    color: #55efc4 !important;
    font-size: 0.65rem !important;
}

/* Shield absorbed text */
.ba-shield-txt {
    color: #D4A574 !important;
    font-size: 0.6rem !important;
}

/* Counter reflected text */
.ba-counter-txt {
    color: #C0C0C0 !important;
    font-size: 0.6rem !important;
}

/* Skill log entry highlight */
.ba-log-skill {
    background: rgba(241, 196, 15, 0.05);
    border-left: 2px solid rgba(241, 196, 15, 0.3);
    padding-left: 6px !important;
}

/* ===== ENHANCED BATTLE STATES ===== */

/* Shielded — animated golden diamond barrier */
.ba-shielded .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(212, 165, 116, 0.7), rgba(253, 203, 110, 0.3), transparent) !important;
    box-shadow: 0 0 30px rgba(212, 165, 116, 0.6), 0 0 60px rgba(212, 165, 116, 0.3),
                0 0 90px rgba(253, 203, 110, 0.15) !important;
    animation: baShieldPulse 1.5s ease-in-out infinite !important;
}

.ba-shielded::after {
    content: '🛡️';
    position: absolute;
    top: -8px;
    left: -8px;
    font-size: 0.85rem;
    animation: baShieldOrbit 3s linear infinite;
    z-index: 20;
    filter: drop-shadow(0 0 6px rgba(212, 165, 116, 0.8));
}

@keyframes baShieldPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes baShieldOrbit {
    0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

/* CC'd (stunned) — enhanced with spiral chains */
.ba-cc .ba-dragon-img {
    filter: grayscale(0.6) brightness(0.6) !important;
    animation: baCCShiver 0.3s ease-in-out infinite !important;
}

.ba-cc::after {
    content: '🌿⛓️';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 0.9rem;
    animation: baCCBounce 1s ease-in-out infinite;
    z-index: 20;
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.8));
}

@keyframes baCCBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-6px) rotate(5deg); }
}

@keyframes baCCShiver {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Counter-active — enhanced electric steel aura */
.ba-counter-active .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(192, 192, 192, 0.9), rgba(236, 240, 241, 0.4), transparent) !important;
    box-shadow: 0 0 35px rgba(192, 192, 192, 0.8), 0 0 70px rgba(192, 192, 192, 0.4),
                0 0 100px rgba(236, 240, 241, 0.2) !important;
    animation: baCounterFlash 0.8s ease-in-out infinite !important;
}

.ba-counter-active::after {
    content: '⚔️';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.85rem;
    animation: baCounterSpin 2s linear infinite;
    z-index: 20;
}

@keyframes baCounterFlash {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    25% { opacity: 1; transform: scale(1.2); }
    50% { opacity: 0.7; transform: scale(1.05); }
    75% { opacity: 0.95; transform: scale(1.15); }
}

@keyframes baCounterSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Burning — enhanced with flicker + ember particles */
.ba-burning .ba-dragon-3d::before {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.9), rgba(255, 165, 0, 0.4), transparent) !important;
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.8), 0 0 60px rgba(230, 126, 34, 0.4),
                0 0 90px rgba(255, 165, 0, 0.2) !important;
    animation: baBurning 0.5s ease-in-out infinite !important;
}

.ba-burning::after {
    content: '🔥';
    position: absolute;
    top: -12px;
    left: 50%;
    font-size: 1rem;
    animation: baEmberRise 1s ease-out infinite;
    z-index: 20;
    filter: drop-shadow(0 0 4px rgba(231, 76, 60, 0.8));
}

@keyframes baBurning {
    0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
    25% { opacity: 1; transform: scale(1.1) rotate(1deg); }
    50% { opacity: 0.8; transform: scale(1.2) rotate(-1deg); }
    75% { opacity: 1; transform: scale(1.05) rotate(0.5deg); }
}

@keyframes baEmberRise {
    0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    50% { opacity: 0.8; transform: translateX(-45%) translateY(-15px) scale(0.8); }
    100% { opacity: 0; transform: translateX(-55%) translateY(-35px) scale(0.3); }
}

/* ===== ENHANCED HIT BURST — Triple ring explosion ===== */
.ba-burst {
    position: absolute;
    pointer-events: none;
    z-index: 90;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: baBurst 0.6s ease-out forwards;
}

.ba-burst::before {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    animation: baBurstRing 0.5s 0.1s ease-out forwards;
}

.ba-burst::after {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: 0;
    animation: baBurstRing 0.6s 0.2s ease-out forwards;
}

@keyframes baBurst {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
    50% { opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

@keyframes baBurstRing {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.ba-burst-fire { background: radial-gradient(circle, rgba(231, 76, 60, 0.8), rgba(255, 165, 0, 0.3), transparent); color: rgba(231, 76, 60, 0.5); }
.ba-burst-water { background: radial-gradient(circle, rgba(52, 152, 219, 0.8), rgba(116, 185, 255, 0.3), transparent); color: rgba(52, 152, 219, 0.5); }
.ba-burst-metal { background: radial-gradient(circle, rgba(189, 195, 199, 0.7), rgba(236, 240, 241, 0.3), transparent); color: rgba(189, 195, 199, 0.5); }
.ba-burst-wood { background: radial-gradient(circle, rgba(0, 184, 148, 0.8), rgba(85, 239, 196, 0.3), transparent); color: rgba(0, 184, 148, 0.5); }
.ba-burst-earth { background: radial-gradient(circle, rgba(212, 165, 116, 0.8), rgba(253, 203, 110, 0.3), transparent); color: rgba(212, 165, 116, 0.5); }
.ba-burst-light { background: radial-gradient(circle, rgba(255, 215, 0, 0.9), rgba(255, 249, 196, 0.4), transparent); color: rgba(255, 215, 0, 0.6); }
.ba-burst-dark { background: radial-gradient(circle, rgba(108, 92, 231, 0.8), rgba(162, 155, 254, 0.3), transparent); color: rgba(108, 92, 231, 0.5); }

/* ===== ENHANCED PROJECTILE ===== */
.ba-projectile {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0;
    transition: none;
    animation: baProjSpin 0.8s linear infinite;
}

.ba-projectile img {
    animation: baProjGlow 0.3s ease-in-out infinite alternate;
}

@keyframes baProjSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes baProjGlow { 0% { filter: brightness(1) drop-shadow(0 0 6px currentColor); } 100% { filter: brightness(1.8) drop-shadow(0 0 18px currentColor); } }

.ba-projectile.ba-proj-fly { opacity: 1; transition: left 0.4s ease-in, top 0.4s ease-in; }

/* Projectile glow trail — enhanced */
.ba-projectile::after {
    content: '';
    position: absolute;
    top: 5%;
    left: -80%;
    width: 100%;
    height: 90%;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(10px);
    background: inherit;
    animation: baProjTrail 0.2s ease-in-out infinite alternate;
}

.ba-projectile::before {
    content: '';
    position: absolute;
    top: 15%;
    left: -140%;
    width: 80%;
    height: 70%;
    border-radius: 50%;
    opacity: 0.25;
    filter: blur(14px);
    background: inherit;
    animation: baProjTrail 0.3s ease-in-out infinite alternate-reverse;
}

@keyframes baProjTrail { 0% { opacity: 0.2; transform: scale(0.6); } 100% { opacity: 0.5; transform: scale(1.2); } }

/* Element projectile styles */
.ba-proj-fire { box-shadow: 0 0 16px #e74c3c, 0 0 32px rgba(231, 76, 60, 0.5), 0 0 56px rgba(255, 165, 0, 0.3); }
.ba-proj-water { box-shadow: 0 0 16px #3498db, 0 0 32px rgba(52, 152, 219, 0.5), 0 0 48px rgba(116, 185, 255, 0.2); border-radius: 50% 25% 50% 25%; }
.ba-proj-metal { box-shadow: 0 0 14px #bdc3c7, 0 0 28px rgba(189, 195, 199, 0.4); border-radius: 25% 50% 25% 50%; animation: baProjSpin 0.3s linear infinite; }
.ba-proj-wood { box-shadow: 0 0 14px #00b894, 0 0 30px rgba(0, 184, 148, 0.5), 0 0 50px rgba(85, 239, 196, 0.2); border-radius: 60% 40% 60% 40%; animation: baProjSpin 1.2s linear infinite; }
.ba-proj-earth { box-shadow: 0 0 14px #d4a574, 0 0 28px rgba(212, 165, 116, 0.5); border-radius: 40% 55% 35% 60%; animation: baProjSpin 0.6s linear infinite; }
.ba-proj-light { box-shadow: 0 0 20px #ffd700, 0 0 40px rgba(255, 215, 0, 0.6), 0 0 70px rgba(255, 215, 0, 0.3); }
.ba-proj-dark { box-shadow: 0 0 16px #6c5ce7, 0 0 32px rgba(108, 92, 231, 0.5), 0 0 56px rgba(162, 155, 254, 0.2); animation: baProjSpin 1s linear infinite reverse; }

/* ===== ENHANCED DAMAGE POPUP ===== */
.ba-dmg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 50, 50, 0.5);
    animation: baDmgPop 0.9s ease-out forwards;
    pointer-events: none;
    z-index: 110;
    font-family: 'Baloo 2', monospace;
}

.ba-dmg-crit {
    font-size: 1.4rem;
    color: #ffd700;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
    animation: baDmgPopCrit 1s ease-out forwards;
}

@keyframes baDmgPop {
    0% { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0; }
    15% { transform: translateX(-50%) translateY(-8px) scale(1.2); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-45px) scale(0.7); opacity: 0; }
}

@keyframes baDmgPopCrit {
    0% { transform: translateX(-50%) translateY(0) scale(0.3) rotate(-5deg); opacity: 0; }
    10% { transform: translateX(-50%) translateY(-5px) scale(1.5) rotate(3deg); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-12px) scale(1.1) rotate(-1deg); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-55px) scale(0.6) rotate(0); opacity: 0; }
}

/* ================================================
   DRAGON DEN — Skill Info Card
   ================================================ */

.dd-skill-card {
    margin: 6px 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--skill-color, rgba(255, 255, 255, 0.1));
    position: relative;
    overflow: hidden;
}

.dd-skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--skill-color), transparent);
    opacity: 0.6;
}

.dd-skill-card.locked {
    opacity: 0.5;
    border-color: rgba(255, 255, 255, 0.05);
}

.dd-skill-card.locked::before {
    display: none;
}

.dd-skill-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.dd-skill-icon {
    font-size: 1.2rem;
}

.dd-skill-name {
    font-weight: 800;
    font-size: 0.78rem;
    color: #fff;
    flex: 1;
}

.dd-skill-dots {
    display: flex;
    gap: 4px;
}

.dd-skill-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

.dd-skill-dot.active {
    border-color: transparent;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.dd-skill-desc {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 4px;
}

.dd-skill-next {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 3px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

.dd-skill-hint {
    font-size: 0.55rem;
    color: rgba(241, 196, 15, 0.6);
    margin-top: 4px;
    font-style: italic;
}

/* ========== SPELL CAST OVERLAY — Enhanced Cinematic ========== */
.ba-spell-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: baSpellOverlayIn 0.85s ease-out forwards;
}

@keyframes baSpellOverlayIn {
    0% { opacity: 0; }
    10% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* Glassmorphism backdrop with vignette */
.ba-spell-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.4) 80%);
    backdrop-filter: blur(6px) brightness(0.5) saturate(1.3);
    animation: baSpellBgPulse 0.85s ease-out forwards;
}

@keyframes baSpellBgPulse {
    0% { opacity: 0; }
    10% { opacity: 1; }
    65% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* Radial energy explosion */
.ba-spell-overlay::after {
    content: '';
    position: absolute;
    width: 350%;
    height: 350%;
    border-radius: 50%;
    animation: baSpellRadial 0.85s ease-out forwards;
}

@keyframes baSpellRadial {
    0% { transform: scale(0); opacity: 0.9; }
    30% { transform: scale(0.5); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Spell-type-specific radial colors — richer gradients */
.ba-spell-overlay[data-spell="heal"]::after { background: radial-gradient(circle, rgba(46,204,113,0.6) 0%, rgba(46,204,113,0.15) 35%, transparent 65%); }
.ba-spell-overlay[data-spell="attack"]::after { background: radial-gradient(circle, rgba(231,76,60,0.6) 0%, rgba(255,165,0,0.15) 35%, transparent 65%); }
.ba-spell-overlay[data-spell="shield"]::after { background: radial-gradient(circle, rgba(52,152,219,0.6) 0%, rgba(52,152,219,0.15) 35%, transparent 65%); }
.ba-spell-overlay[data-spell="thunder"]::after { background: radial-gradient(circle, rgba(241,196,15,0.7) 0%, rgba(255,255,255,0.2) 35%, transparent 65%); }
.ba-spell-overlay[data-spell="poison"]::after { background: radial-gradient(circle, rgba(142,68,173,0.6) 0%, rgba(142,68,173,0.15) 35%, transparent 65%); }
.ba-spell-overlay[data-spell="megaheal"]::after { background: radial-gradient(circle, rgba(255,215,0,0.7) 0%, rgba(46,204,113,0.2) 35%, transparent 65%); }

/* Spell icon — enhanced with pulsing shadow */
.ba-spell-overlay-icon {
    font-size: 4.5rem;
    z-index: 2;
    animation: baSpellIcon 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 0 40px currentColor) drop-shadow(0 0 80px currentColor);
    text-shadow: 0 0 60px rgba(255,255,255,0.6);
}

@keyframes baSpellIcon {
    0% { transform: scale(0) rotate(-40deg); opacity: 0; }
    15% { transform: scale(1.8) rotate(10deg); opacity: 1; }
    35% { transform: scale(1) rotate(-5deg); opacity: 1; }
    60% { transform: scale(1.3) rotate(2deg); opacity: 1; }
    100% { transform: scale(2.5) rotate(0deg); opacity: 0; }
}

/* Spell name text — enhanced typography */
.ba-spell-overlay-name {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    z-index: 2;
    margin-top: 8px;
    animation: baSpellName 0.85s ease-out forwards;
    text-shadow: 0 0 30px currentColor, 0 0 60px currentColor, 0 2px 8px rgba(0,0,0,0.9);
}

.ba-spell-overlay[data-spell="heal"] .ba-spell-overlay-name { color: #2ecc71; }
.ba-spell-overlay[data-spell="attack"] .ba-spell-overlay-name { color: #e74c3c; }
.ba-spell-overlay[data-spell="shield"] .ba-spell-overlay-name { color: #74b9ff; }
.ba-spell-overlay[data-spell="thunder"] .ba-spell-overlay-name { color: #ffd700; }
.ba-spell-overlay[data-spell="poison"] .ba-spell-overlay-name { color: #a29bfe; }
.ba-spell-overlay[data-spell="megaheal"] .ba-spell-overlay-name { color: #ffd700; }

@keyframes baSpellName {
    0% { transform: translateY(30px) scale(0.3); opacity: 0; letter-spacing: 20px; }
    20% { transform: translateY(-5px) scale(1.1); opacity: 1; letter-spacing: 5px; }
    55% { transform: translateY(0) scale(1); opacity: 1; letter-spacing: 4px; }
    100% { transform: translateY(-15px) scale(0.85); opacity: 0; letter-spacing: 8px; }
}

/* Floating particles — enhanced */
.ba-spell-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.ba-spell-particle {
    position: absolute;
    border-radius: 50%;
    animation: baSpellParticle 0.85s ease-out forwards;
}

@keyframes baSpellParticle {
    0% { transform: translate(0,0) scale(0); opacity: 0; }
    15% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.ba-spell-overlay[data-spell="heal"] .ba-spell-particle { background: #2ecc71; box-shadow: 0 0 12px #2ecc71, 0 0 24px rgba(46,204,113,0.3); }
.ba-spell-overlay[data-spell="attack"] .ba-spell-particle { background: #e74c3c; box-shadow: 0 0 12px #e74c3c, 0 0 24px rgba(231,76,60,0.3); }
.ba-spell-overlay[data-spell="shield"] .ba-spell-particle { background: #3498db; box-shadow: 0 0 12px #3498db, 0 0 24px rgba(52,152,219,0.3); }
.ba-spell-overlay[data-spell="thunder"] .ba-spell-particle { background: #f1c40f; box-shadow: 0 0 12px #f1c40f, 0 0 24px rgba(241,196,15,0.3); }
.ba-spell-overlay[data-spell="poison"] .ba-spell-particle { background: #8e44ad; box-shadow: 0 0 12px #8e44ad, 0 0 24px rgba(142,68,173,0.3); }
.ba-spell-overlay[data-spell="megaheal"] .ba-spell-particle { background: #ffd700; box-shadow: 0 0 16px #ffd700, 0 0 32px rgba(255,215,0,0.4); }

/* ===== ENERGY RING — Spinning ring for skill activation ===== */
.ba-energy-ring {
    position: absolute;
    pointer-events: none;
    z-index: 95;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid;
    transform: translate(-50%, -50%) scale(0);
    animation: baEnergyRing 0.8s ease-out forwards;
    opacity: 0;
}

.ba-energy-ring::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed;
    border-color: inherit;
    opacity: 0.4;
    animation: baProjSpin 1.5s linear infinite;
}

@keyframes baEnergyRing {
    0% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0.9; }
    50% { transform: translate(-50%, -50%) scale(1.5) rotate(180deg); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(2.5) rotate(360deg); opacity: 0; }
}

.ba-energy-fire { border-color: rgba(231, 76, 60, 0.7); box-shadow: 0 0 20px rgba(231, 76, 60, 0.5); }
.ba-energy-water { border-color: rgba(52, 152, 219, 0.7); box-shadow: 0 0 20px rgba(52, 152, 219, 0.5); }
.ba-energy-earth { border-color: rgba(212, 165, 116, 0.7); box-shadow: 0 0 20px rgba(212, 165, 116, 0.5); }
.ba-energy-wood { border-color: rgba(0, 184, 148, 0.7); box-shadow: 0 0 20px rgba(0, 184, 148, 0.5); }
.ba-energy-metal { border-color: rgba(192, 192, 192, 0.7); box-shadow: 0 0 20px rgba(192, 192, 192, 0.5); }
.ba-energy-dark { border-color: rgba(108, 92, 231, 0.7); box-shadow: 0 0 20px rgba(108, 92, 231, 0.5); }
.ba-energy-light { border-color: rgba(255, 215, 0, 0.7); box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }

/* ═══════════════════════════════════════════════════
   CINEMATIC SKILL ANIMATIONS — Spectacular 2-3s FX
   ═══════════════════════════════════════════════════ */

/* ── Fullscreen skill overlay ── */
.ba-skill-cinematic {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    animation: baSkillOverlayIn 0.3s ease-out forwards;
}
.ba-skill-cinematic.fade-out {
    animation: baSkillOverlayOut 0.5s ease-in forwards;
}
@keyframes baSkillOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes baSkillOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ── Skill name banner ── */
.ba-skill-banner {
    position: fixed;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 9999;
    text-align: center;
    pointer-events: none;
    animation: baSkillBannerIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ba-skill-banner-icon {
    font-size: 3rem;
    filter: drop-shadow(0 0 20px currentColor);
    animation: baSkillIconPulse 1s ease-in-out infinite;
}
.ba-skill-banner-name {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 4px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 0 30px currentColor;
}
.ba-skill-banner.fade-out {
    animation: baSkillBannerOut 0.4s ease-in forwards;
}
@keyframes baSkillBannerIn {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.15) rotate(2deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
@keyframes baSkillBannerOut {
    to { transform: translate(-50%, -50%) scale(0.5); opacity: 0; filter: blur(8px); }
}
@keyframes baSkillIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ── Generic cinematic particle ── */
.ba-cin-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: baCinParticle var(--dur, 1s) ease-out forwards;
}
@keyframes baCinParticle {
    0% { transform: translate(0, 0) scale(1); opacity: 0.9; }
    100% { transform: translate(var(--dx, 0), var(--dy, -80px)) scale(0); opacity: 0; }
}

/* ── Caster charge-up aura ── */
.ba-skill-charge {
    animation: baSkillCharge 1.5s ease-out !important;
}
@keyframes baSkillCharge {
    0%   { filter: brightness(1); transform: scale(1); }
    10%  { filter: brightness(1.5) saturate(2); transform: scale(1.05); }
    30%  { filter: brightness(2.5) saturate(3) drop-shadow(0 0 30px currentColor); transform: scale(1.15); }
    60%  { filter: brightness(2) saturate(2.5) drop-shadow(0 0 20px currentColor); transform: scale(1.12); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* ═══ FIRE — Hỏa Viêm ═══ */
.ba-fire-pillar {
    position: absolute;
    width: 60px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 101;
}
.ba-fire-pillar-flame {
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, rgba(255,200,0,0.9), rgba(231,76,60,0.7), rgba(200,30,0,0.4), transparent);
    border-radius: 50% 50% 0 0;
    animation: baFirePillarRise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 0 40px rgba(255,100,0,0.6), 0 0 80px rgba(255,50,0,0.3);
    filter: blur(2px);
}
@keyframes baFirePillarRise {
    0% { height: 0; opacity: 0; }
    30% { height: 180px; opacity: 1; }
    60% { height: 200px; opacity: 0.9; }
    100% { height: 120px; opacity: 0; }
}
.ba-fire-ember {
    position: absolute;
    width: var(--s, 6px);
    height: var(--s, 6px);
    background: radial-gradient(circle, #ffd700, #e74c3c);
    border-radius: 50%;
    pointer-events: none;
    animation: baFireEmber var(--dur, 1.2s) ease-out forwards;
    animation-delay: var(--d, 0s);
    box-shadow: 0 0 6px #ff6b00;
}
@keyframes baFireEmber {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, -120px)) scale(0); opacity: 0; }
}

/* ═══ WATER — Thủy Liệu ═══ */
.ba-water-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid rgba(52, 152, 219, 0.6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 101;
    animation: baWaterRing 1.4s ease-out forwards;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.4), inset 0 0 20px rgba(116, 185, 255, 0.2);
}
@keyframes baWaterRing {
    0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; border-width: 4px; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); opacity: 0.7; border-width: 2px; }
    100% { transform: translate(-50%, -50%) scale(2) rotate(360deg); opacity: 0; border-width: 1px; }
}
.ba-water-drop {
    position: absolute;
    width: var(--s, 8px);
    height: calc(var(--s, 8px) * 1.4);
    background: radial-gradient(ellipse, rgba(116, 185, 255, 0.9), rgba(52, 152, 219, 0.6));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    pointer-events: none;
    animation: baWaterDrop var(--dur, 1s) ease-in forwards;
    animation-delay: var(--d, 0s);
    opacity: 0;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}
@keyframes baWaterDrop {
    0% { transform: translateY(var(--start-y, -60px)) scale(0.5); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 0; }
}

/* ═══ EARTH — Địa Giáp ═══ */
.ba-earth-shield {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 101;
    animation: baEarthShield 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ba-earth-shield-hex {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(212, 165, 116, 0.8);
    border-radius: 12px;
    transform: rotate(var(--rot, 0deg));
    background: radial-gradient(circle, rgba(253, 203, 110, 0.15), transparent);
    box-shadow: 0 0 15px rgba(212, 165, 116, 0.4), inset 0 0 15px rgba(253, 203, 110, 0.1);
}
@keyframes baEarthShield {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
    40% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(1.1) rotate(-2deg); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(0.6) rotate(0); opacity: 0; }
}
.ba-earth-rock {
    position: absolute;
    width: var(--s, 10px);
    height: var(--s, 10px);
    background: linear-gradient(135deg, #d4a574, #8d6e4c);
    border-radius: 30% 50% 40% 55%;
    pointer-events: none;
    animation: baEarthRock var(--dur, 0.8s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--d, 0s);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    opacity: 0;
}
@keyframes baEarthRock {
    0% { transform: translate(0, 40px) scale(0) rotate(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, -80px)) scale(1) rotate(var(--rot, 180deg)); opacity: 0; }
}

/* ═══ WOOD — Mộc Phong ═══ */
.ba-wood-vine {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #2ecc71, #27ae60, #1a6e3a);
    border-radius: 2px;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(var(--rot, 0deg));
    pointer-events: none;
    z-index: 101;
    animation: baWoodVine 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--d, 0s);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}
@keyframes baWoodVine {
    0% { height: 0; opacity: 0; }
    50% { height: var(--h, 100px); opacity: 1; }
    80% { height: var(--h, 100px); opacity: 0.8; }
    100% { height: var(--h, 100px); opacity: 0; }
}
.ba-wood-leaf {
    position: absolute;
    font-size: var(--s, 14px);
    pointer-events: none;
    animation: baWoodLeaf var(--dur, 1.5s) ease-out forwards;
    animation-delay: var(--d, 0s);
    opacity: 0;
}
@keyframes baWoodLeaf {
    0% { transform: translate(0,0) rotate(0) scale(0); opacity: 0; }
    20% { opacity: 1; transform: scale(1); }
    100% { transform: translate(var(--dx,20px), var(--dy,-60px)) rotate(var(--rot,180deg)) scale(0.3); opacity: 0; }
}

/* ═══ METAL — Kim Phản ═══ */
.ba-metal-shard {
    position: absolute;
    width: var(--w, 6px);
    height: var(--h, 18px);
    background: linear-gradient(180deg, #ecf0f1, #bdc3c7, #95a5a6);
    border-radius: 2px;
    pointer-events: none;
    z-index: 101;
    animation: baMetalShard var(--dur, 1s) ease-out forwards;
    animation-delay: var(--d, 0s);
    opacity: 0;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}
@keyframes baMetalShard {
    0% { transform: translate(0,0) rotate(0) scale(0); opacity: 0; }
    20% { opacity: 1; transform: scale(1) rotate(var(--rot, 90deg)); }
    100% { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(calc(var(--rot, 90deg) + 360deg)) scale(0); opacity: 0; }
}
.ba-metal-armor {
    position: absolute;
    inset: -15px;
    border: 3px solid rgba(192, 192, 192, 0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 101;
    animation: baMetalArmor 1.6s ease-out forwards;
    background: radial-gradient(circle, rgba(236, 240, 241, 0.1), transparent);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.4), inset 0 0 15px rgba(236, 240, 241, 0.15);
}
@keyframes baMetalArmor {
    0% { transform: scale(0) rotate(-60deg); opacity: 0; }
    30% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    60% { transform: scale(1) rotate(0); opacity: 0.8; }
    100% { transform: scale(0.8) rotate(0); opacity: 0; }
}

/* ═══ DARK — Sát Thủ Bóng Đêm ═══ */
.ba-dark-veil {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.85) 100%);
    z-index: 9997;
    pointer-events: none;
    animation: baDarkVeil 2.5s ease-in-out forwards;
}
@keyframes baDarkVeil {
    0% { opacity: 0; }
    20% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
.ba-dark-slash {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 102;
}
.ba-dark-slash-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #a29bfe, #6c5ce7, #a29bfe, transparent);
    transform-origin: center;
    animation: baDarkSlashLine 0.4s ease-out forwards;
    box-shadow: 0 0 10px #6c5ce7, 0 0 20px rgba(108, 92, 231, 0.5);
    opacity: 0;
}
.ba-dark-slash-line:nth-child(1) { transform: rotate(45deg); animation-delay: 0s; }
.ba-dark-slash-line:nth-child(2) { transform: rotate(-45deg); animation-delay: 0.1s; }
@keyframes baDarkSlashLine {
    0% { opacity: 0; width: 0; left: 50%; }
    40% { opacity: 1; width: 140%; left: -20%; }
    100% { opacity: 0; width: 160%; left: -30%; }
}
.ba-dark-afterimage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 101;
    filter: brightness(0) saturate(0) opacity(0.5);
    animation: baDarkAfterimage 0.6s ease-out forwards;
}
@keyframes baDarkAfterimage {
    0% { transform: translateX(var(--dir, 30px)); opacity: 0.6; filter: brightness(0) hue-rotate(260deg) saturate(3); }
    100% { transform: translateX(0); opacity: 0; filter: brightness(0) blur(4px); }
}

/* ═══ LIGHT — Thánh Quang ═══ */
.ba-light-beam {
    position: absolute;
    width: 40px;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    height: 300px;
    background: linear-gradient(180deg, rgba(255,215,0,0), rgba(255,215,0,0.6), rgba(255,249,196,0.9), rgba(255,215,0,0.6), rgba(255,215,0,0));
    pointer-events: none;
    z-index: 101;
    animation: baLightBeam 0.7s ease-out forwards;
    animation-delay: var(--d, 0s);
    opacity: 0;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.2);
    filter: blur(2px);
}
@keyframes baLightBeam {
    0% { opacity: 0; transform: translateX(-50%) scaleX(0.3); }
    30% { opacity: 1; transform: translateX(-50%) scaleX(1); }
    60% { opacity: 0.8; transform: translateX(-50%) scaleX(1.3); }
    100% { opacity: 0; transform: translateX(-50%) scaleX(0.1); }
}
.ba-light-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95), rgba(255,215,0,0.4), transparent 70%);
    z-index: 9997;
    pointer-events: none;
    animation: baLightFlash 0.5s ease-out forwards;
}
@keyframes baLightFlash {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 0; }
}
.ba-light-sparkle {
    position: absolute;
    width: var(--s, 4px);
    height: var(--s, 4px);
    background: #ffd700;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 6px #ffd700, 0 0 12px rgba(255,215,0,0.5);
    animation: baLightSparkle var(--dur, 0.8s) ease-out forwards;
    animation-delay: var(--d, 0s);
    opacity: 0;
}
@keyframes baLightSparkle {
    0% { transform: translate(0,0) scale(0); opacity: 0; }
    30% { opacity: 1; transform: scale(1.5); }
    100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0); opacity: 0; }
}

/* ═══ Impact screen effects ═══ */
.ba-screen-flash-fire {
    position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: radial-gradient(circle, rgba(231,76,60,0.3), transparent 70%);
    animation: baScreenFlash 0.4s ease-out forwards;
}
.ba-screen-flash-dark {
    position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: radial-gradient(circle, rgba(108,92,231,0.4), transparent 70%);
    animation: baScreenFlash 0.5s ease-out forwards;
}
@keyframes baScreenFlash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

/* ═══ EXECUTE INDICATOR (Dark) ═══ */
.ba-execute-indicator {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-size: 1.1rem;
    font-weight: 900;
    color: #e74c3c;
    text-shadow: 0 0 10px rgba(231,76,60,0.8), 0 0 20px rgba(142,68,173,0.6), 0 0 40px rgba(231,76,60,0.4);
    white-space: nowrap;
    pointer-events: none;
    z-index: 200;
    animation: baExecuteIndicator 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    letter-spacing: 2px;
}
@keyframes baExecuteIndicator {
    0% { transform: translateX(-50%) scale(0) rotate(-10deg); opacity: 0; }
    15% { transform: translateX(-50%) scale(1.6) rotate(3deg); opacity: 1; }
    30% { transform: translateX(-50%) scale(1.2) rotate(-1deg); opacity: 1; }
    60% { transform: translateX(-50%) scale(1.3) rotate(0) translateY(-15px); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.5) translateY(-40px); opacity: 0; }
}
.ba-screen-flash-execute {
    position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: radial-gradient(circle, rgba(231,76,60,0.5), rgba(142,68,173,0.3), transparent 70%);
    animation: baScreenFlash 0.6s ease-out forwards;
}

/* ═══ FIRE Enhanced — Heat Ring + Ground Ring ═══ */
.ba-fire-heatring {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 100;
    border: 3px solid rgba(255, 165, 0, 0.7);
    background: radial-gradient(circle, rgba(255,200,0,0.15), rgba(231,76,60,0.1), transparent 60%);
    box-shadow: 0 0 30px rgba(255,100,0,0.5), 0 0 60px rgba(255,50,0,0.2), inset 0 0 20px rgba(255,200,0,0.3);
    animation: baFireHeatRing 1.3s ease-out forwards;
}
@keyframes baFireHeatRing {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; border-width: 5px; }
    30% { transform: translate(-50%, -50%) scale(1); opacity: 1; border-width: 4px; }
    60% { transform: translate(-50%, -50%) scale(1.8); opacity: 0.6; border-width: 2px; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; border-width: 1px; }
}
.ba-fire-ground-ring {
    position: absolute;
    width: 90%;
    height: 16px;
    bottom: -4px;
    left: 5%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    background: radial-gradient(ellipse, rgba(255,100,0,0.8), rgba(231,76,60,0.4), transparent 70%);
    box-shadow: 0 0 20px rgba(255,100,0,0.6), 0 0 40px rgba(255,50,0,0.3);
    animation: baFireGroundRing 1.4s ease-out forwards;
}
@keyframes baFireGroundRing {
    0% { opacity: 0; transform: scaleX(0.2); }
    20% { opacity: 1; transform: scaleX(1.1); }
    50% { opacity: 0.8; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(0.3); }
}

/* ═══ WATER Enhanced — Pillar + Bubbles ═══ */
.ba-water-pillar {
    position: absolute;
    width: 30px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    pointer-events: none;
    z-index: 100;
    background: linear-gradient(180deg, rgba(116,185,255,0), rgba(52,152,219,0.5), rgba(116,185,255,0.7), rgba(52,152,219,0.5), rgba(116,185,255,0));
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0 25px rgba(52,152,219,0.5), 0 0 50px rgba(116,185,255,0.2);
    animation: baWaterPillar 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    filter: blur(1px);
}
@keyframes baWaterPillar {
    0% { height: 0; opacity: 0; }
    30% { height: 160px; opacity: 1; }
    60% { height: 180px; opacity: 0.8; }
    100% { height: 100px; opacity: 0; }
}
.ba-water-bubble {
    position: absolute;
    bottom: 10%;
    width: var(--s, 6px);
    height: var(--s, 6px);
    border-radius: 50%;
    border: 1px solid rgba(116, 185, 255, 0.6);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), rgba(52,152,219,0.15));
    pointer-events: none;
    z-index: 101;
    animation: baWaterBubble var(--dur, 1.5s) ease-out forwards;
    animation-delay: var(--d, 0s);
    opacity: 0;
}
@keyframes baWaterBubble {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { opacity: 0.8; transform: translateY(-10px) scale(1); }
    100% { transform: translateY(-80px) scale(0.3); opacity: 0; }
}

/* ═══ EARTH Enhanced — Shockwave + Dust ═══ */
.ba-earth-shockwave {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(0);
    pointer-events: none;
    z-index: 100;
    border: 3px solid rgba(212, 165, 116, 0.8);
    background: radial-gradient(circle, rgba(253, 203, 110, 0.2), transparent 60%);
    box-shadow: 0 0 15px rgba(212, 165, 116, 0.5);
    animation: baEarthShockwave 1s ease-out forwards;
}
@keyframes baEarthShockwave {
    0% { transform: translateX(-50%) scale(0); opacity: 1; }
    50% { transform: translateX(-50%) scale(2); opacity: 0.6; }
    100% { transform: translateX(-50%) scale(3.5); opacity: 0; }
}
.ba-earth-dust {
    position: absolute;
    width: 20px;
    height: 12px;
    bottom: 5px;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181, 137, 100, 0.5), transparent);
    pointer-events: none;
    z-index: 100;
    animation: baEarthDust 1s ease-out forwards;
    animation-delay: var(--d, 0s);
    opacity: 0;
}
@keyframes baEarthDust {
    0% { transform: translateX(0) translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 0.7; }
    100% { transform: translateX(var(--dx, 30px)) translateY(-30px) scale(1.5); opacity: 0; }
}

/* ═══ WOOD Enhanced — Prison Ring + Swirl ═══ */
.ba-wood-prison {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    border: 3px solid rgba(46, 204, 113, 0.7);
    background: radial-gradient(circle, rgba(46, 204, 113, 0.1), transparent 60%);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.5), inset 0 0 15px rgba(39, 174, 96, 0.2);
    animation: baWoodPrison 1.8s ease-out forwards;
}
@keyframes baWoodPrison {
    0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; border-width: 5px; }
    30% { transform: translate(-50%, -50%) scale(1.2) rotate(60deg); opacity: 1; border-width: 3px; }
    50% { transform: translate(-50%, -50%) scale(1) rotate(120deg); opacity: 0.8; }
    80% { transform: translate(-50%, -50%) scale(0.9) rotate(240deg); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(0.5) rotate(360deg); opacity: 0; }
}
.ba-wood-swirl {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 99;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(46,204,113,0.3), transparent, rgba(39,174,96,0.2), transparent);
    animation: baWoodSwirl 1.6s linear forwards;
    opacity: 0;
}
@keyframes baWoodSwirl {
    0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
    20% { opacity: 0.7; transform: translate(-50%, -50%) scale(1) rotate(60deg); }
    80% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.3) rotate(300deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(360deg); }
}

/* ═══ METAL Enhanced — Blade Orbit + Impact ═══ */
.ba-metal-orbit {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 102;
    animation: baMetalOrbitSpin 1.8s linear forwards;
}
@keyframes baMetalOrbitSpin {
    0% { transform: translate(-50%, -50%) rotate(0) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) rotate(60deg) scale(1); opacity: 1; }
    80% { transform: translate(-50%, -50%) rotate(600deg) scale(1.1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) rotate(720deg) scale(0.3); opacity: 0; }
}
.ba-metal-blade {
    position: absolute;
    width: 6px;
    height: 18px;
    background: linear-gradient(180deg, #fff, #c0c0c0, #808080);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform-origin: center 50px;
    transform: rotate(var(--angle, 0deg)) translateY(-40px);
    box-shadow: 0 0 6px rgba(255,255,255,0.6), 0 0 12px rgba(192,192,192,0.4);
}
.ba-metal-impact {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 101;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: radial-gradient(circle, rgba(236, 240, 241, 0.2), transparent 60%);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
    animation: baMetalImpact 0.8s ease-out forwards;
}
@keyframes baMetalImpact {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* ═══ LIGHT Enhanced — Cross Beams + Divine Halo ═══ */
.ba-light-cross {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 102;
}
.ba-light-cross-h, .ba-light-cross-v {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.8), rgba(255,255,255,0.9), rgba(255,215,0,0.8), transparent);
    box-shadow: 0 0 15px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.3);
}
.ba-light-cross-h {
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%) scaleX(0);
    animation: baLightCrossH 0.6s ease-out forwards;
}
.ba-light-cross-v {
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    transform: translateX(-50%) scaleY(0);
    animation: baLightCrossV 0.6s ease-out 0.1s forwards;
}
@keyframes baLightCrossH {
    0% { transform: translateY(-50%) scaleX(0); opacity: 0; }
    40% { transform: translateY(-50%) scaleX(1.2); opacity: 1; }
    100% { transform: translateY(-50%) scaleX(0.1); opacity: 0; }
}
@keyframes baLightCrossV {
    0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
    40% { transform: translateX(-50%) scaleY(1.2); opacity: 1; }
    100% { transform: translateX(-50%) scaleY(0.1); opacity: 0; }
}
.ba-light-halo {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 100;
    border: 2px solid rgba(255, 215, 0, 0.5);
    background: radial-gradient(circle, rgba(255,255,255,0.15), rgba(255,215,0,0.05), transparent 60%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.1);
    animation: baLightHalo 1s ease-out forwards;
}
@keyframes baLightHalo {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    60% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}