/* ============================================= */
/* ====== SOLAR KNIGHT - COMBAT STYLES ====== */
/* ============================================= */

/* --- Combat Scene Transition --- */

.combat-scene {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; visibility: hidden; z-index: 5;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.8s cubic-bezier(0.34, 1.1, 0.64, 1);
    perspective: 1000px; overflow: hidden; pointer-events: none;
    transform-origin: center center; transform: scale(0.7) translateZ(-300px);
    will-change: transform, opacity;
}
.combat-scene.active {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: scale(1) translateZ(0);
}
/* Hide world container during combat */
.combat-active #container {
    transform: scale(0.1) translateZ(-500px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.68, -0.3, 0.27, 1.3), opacity 0.6s ease-out;
    transform-origin: 50% 75%;
}

/* --- Battle Stage & Background --- */

.battle-stage {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.34, 1.1, 0.64, 1);
    perspective: 600px;
}
.battle-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--game-bg); /* Uses variable from style.css */
    z-index: -1;
    background-image: linear-gradient(
        to bottom,
        var(--game-bg) 0%,
        var(--game-bg) 60%,
        rgba(255, 255, 255, 0.1) 80%,
        rgba(255, 255, 255, 0.2) 90%,
        rgba(255, 255, 255, 0.3) 100%
    );
}

/* --- Battle Player --- */

.battle-player {
    position: absolute;
    bottom: 100px;
    left: 35%; /* Adjusted position */
    width: 220px;
    height: 180px;
    z-index: 6;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    transform: translateX(-50%) translateZ(0); /* Base transform */
    transform-origin: bottom center;
    background-image: url('images/characters/player/hero-back.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    will-change: transform, opacity;
    animation: player-idle 3s ease-in-out infinite;
}

/* --- Battle Enemy --- */

.battle-enemy {
    position: absolute;
    bottom: 170px;
    right: 35%; /* Adjusted position */
    width: 120px; /* Base size for size-1 */
    height: 120px;
    z-index: 4;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    transform: translateX(50%) translateZ(0); /* Base transform */
    transform-origin: bottom center;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    will-change: transform, opacity;
    /* Idle animation applied via size classes */
}
.battle-enemy::before { display: none; } /* Ensure no fallback face */

/* Enemy Size Variations & Idle */
.battle-enemy.size-1 { --current-transform: translateX(50%) translateZ(0) scale(0.85); animation: enemy-idle 3s ease-in-out infinite; }
.battle-enemy.size-2 { --current-transform: translateX(50%) translateZ(0) scale(1.7); animation: enemy-idle-large 3s ease-in-out infinite; }
.battle-enemy.size-3 { --current-transform: translateX(50%) translateZ(0) scale(2.5); animation: enemy-idle-huge 3s ease-in-out infinite; bottom: 118px; } /* Adjust bottom for huge */

@keyframes player-idle { 0%, 100% { transform: translateX(-50%) translateZ(0) translateY(0px); } 50% { transform: translateX(-50%) translateZ(0) translateY(-5px); } }
@keyframes enemy-idle { 0%, 100% { transform: var(--current-transform) translateX(-3px); } 50% { transform: var(--current-transform) translateX(3px); } }
@keyframes enemy-idle-large { 0%, 100% { transform: var(--current-transform) translateX(-2px); } 50% { transform: var(--current-transform) translateX(2px); } }
@keyframes enemy-idle-huge { 0%, 100% { transform: var(--current-transform) translateX(-1px); } 50% { transform: var(--current-transform) translateX(1px); } }

/* --- Combat Action Text (REMOVED) --- */
/* .battle-action-text { ... REMOVED ... } */
/* .battle-action-text.visible { ... REMOVED ... } */
/* @keyframes simpleFadeInOut { ... REMOVED ... } */
/* .day .battle-action-text { ... REMOVED ... } */
/* .night .battle-action-text { ... REMOVED ... } */

/* --- Status Effects Display --- */

.player-status-effects, .enemy-status-effects.battle-enemy-status {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    position: absolute; width: 100%; max-width: 120px;
    transform: translateY(-30px) translateZ(50px); z-index: 999; pointer-events: none;
}
.player-status-effects { left: calc(38% - 60px); top: calc(80% - 40px); justify-content: flex-start; }
.enemy-status-effects.battle-enemy-status { right: calc(35% - 60px); left: auto; top: calc(60% - 40px); justify-content: flex-end; }

.status-effect {
    display: flex; align-items: center; background: rgba(0, 0, 0, 0.55);
    border-radius: 4px; padding: 2px 5px; font-size: 0.85em; position: relative;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1);
    will-change: transform, opacity;
}
.status-effect-icon { margin-right: 4px; font-size: 1em; }
.status-effect-counter { font-weight: bold; min-width: 14px; text-align: center; margin-top: -5px; }
.status-effect.freeze { background: linear-gradient(to right, rgba(0, 50, 100, 0.7), rgba(100, 200, 255, 0.7)); border-color: #6ab4ff; color: #e0f0ff; }
.status-effect.burn { background: linear-gradient(to right, rgba(100, 0, 0, 0.7), rgba(255, 100, 50, 0.7)); border-color: #ff7744; color: #ffe0d0; }
.status-effect.poison { background: linear-gradient(to right, rgba(50, 100, 0, 0.7), rgba(150, 255, 100, 0.7)); border-color: #77dd44; color: #e0ffd0; }
.status-effect.confusion { background: linear-gradient(to right, rgba(75, 0, 130, 0.7), rgba(216, 191, 216, 0.7)); border-color: #cc77ff; color: #f0e0ff; }
.status-effect.freeze .status-effect-icon, .status-effect.burn .status-effect-icon,
.status-effect.poison .status-effect-icon, .status-effect.confusion .status-effect-icon {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
}
@keyframes simpleStatusPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.05); opacity: 1; } }
.status-effect-new { animation: simpleStatusPulse 0.6s ease-in-out; }

/* --- Combat Action Animations --- */

/* Dodge Reaction - Refined Player Dodge */
@keyframes dodge-move-player {
    0%, 100% {
        /* Start and end at base player transform */
        transform: translateX(-50%) translateZ(0);
        opacity: 1;
    }
    50% {
        /* Apply dodge movement relative to base */
        transform: translateX(calc(-50% - 25px)) translateZ(-10px) rotateY(-10deg);
        opacity: 0.7;
    }
}
@keyframes dodge-move-enemy { /* Seems okay as it uses --current-transform */
    0%, 100% { transform: var(--current-transform); opacity: 1; }
    50% { transform: var(--current-transform) translateX(25px) translateZ(-10px) rotateY(10deg); opacity: 0.7; }
}
.battle-player.dodge { animation: dodge-move-player 0.4s ease-out forwards; }
.battle-enemy.dodge { animation: dodge-move-enemy 0.4s ease-out forwards; }

/* Physical Attack - Refined Player Attack */
@keyframes player-phys-attack {
    0%, 100% {
        /* Start and end at base player transform */
        transform: translateX(-50%) translateZ(0);
    }
    40% {
         /* Apply attack movement relative to base */
        transform: translateX(calc(-50% + 30px)) translateZ(40px) rotateY(-5deg);
    }
}
@keyframes enemy-phys-attack { /* Seems okay as it uses --current-transform */
    0%, 100% { transform: var(--current-transform); }
    40% { transform: var(--current-transform) translateX(-30px) translateZ(40px) rotateY(5deg); }
}
.battle-player.attacking { animation: player-phys-attack 0.5s ease-out forwards; }
.battle-enemy.attacking { animation: enemy-phys-attack 0.5s ease-out forwards; }

/* Magic Attack - REFINED (No changes needed, already additive) */
/* Apply animation additively */

/* Enemy Defeat - Ensure smooth start */
@keyframes enemy-defeated {
    0% { transform: var(--current-transform); opacity: 1; } /* Explicitly start from current */
    25% { transform: var(--current-transform) translateX(60px) translateY(-100px) rotate(45deg); opacity: 0.9; } /* Relative changes from current */
    50% { transform: var(--current-transform) translateX(120px) translateY(-180px) rotate(90deg) scale(0.95); opacity: 0.7; } /* Adjusted relative scale slightly */
    100% { transform: var(--current-transform) translateX(250px) translateY(-250px) rotate(270deg) scale(0.6); opacity: 0; } /* Adjusted relative scale */
}
@keyframes enemy-defeated-large {
    0% { transform: var(--current-transform); opacity: 1; } /* Explicitly start from current */
    25% { transform: var(--current-transform) translateX(70px) translateY(-110px) rotate(45deg); opacity: 0.9; }
    50% { transform: var(--current-transform) translateX(140px) translateY(-200px) rotate(90deg) scale(0.9); opacity: 0.7; } /* Adjusted relative scale */
    100% { transform: var(--current-transform) translateX(280px) translateY(-280px) rotate(270deg) scale(0.6); opacity: 0; } /* Adjusted relative scale */
}
@keyframes enemy-defeated-huge {
    0% { transform: var(--current-transform); opacity: 1; } /* Explicitly start from current */
    25% { transform: var(--current-transform) translateX(80px) translateY(-130px) rotate(45deg); opacity: 0.9; }
    50% { transform: var(--current-transform) translateX(160px) translateY(-220px) rotate(90deg) scale(0.8); opacity: 0.7; } /* Adjusted relative scale */
    100% { transform: var(--current-transform) translateX(300px) translateY(-320px) rotate(270deg) scale(0.6); opacity: 0; } /* Adjusted relative scale */
}
.battle-enemy.defeated {
    animation-duration: 0.9s !important;
    animation-timing-function: ease-in !important;
    animation-fill-mode: forwards !important;
    pointer-events: none;
    z-index: 100;
    /* Base transform is still controlled by --current-transform via size class until animation takes over */
}
.battle-enemy.size-1.defeated { animation-name: enemy-defeated !important; }
.battle-enemy.size-2.defeated { animation-name: enemy-defeated-large !important; }
.battle-enemy.size-3.defeated { animation-name: enemy-defeated-huge !important; }

/* --- Damage Indicators --- */

.damage-indicator { position: absolute; font-weight: bold; color: #ff0000; text-shadow: 0 0 4px #000; z-index: 2000; font-family: 'Cinzel', serif; will-change: transform, opacity; }
.damage-indicator.tier-1 { font-size: 22px; color: #ff6666; animation: damage-float-small 1.2s forwards; }
.damage-indicator.tier-2 { font-size: 26px; color: #ff3333; animation: damage-float-medium 1.2s forwards; }
.damage-indicator.tier-3 { font-size: 32px; color: #ff0000; animation: damage-float-large 1.2s forwards; }
.damage-indicator.tier-4 { font-size: 40px; color: #ff0000; text-shadow: 0 0 8px #700, 0 0 15px #f00; animation: damage-float-huge 1.2s forwards; font-weight: 900; }
.damage-indicator.tier-5 { font-size: 48px; color: #ff0000; text-shadow: 0 0 10px #900, 0 0 20px #f00, 0 0 30px #f00; animation: damage-float-massive 1.2s forwards; font-weight: 900; letter-spacing: 1px; }
@keyframes damage-float-small { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-25px) scale(0.9); opacity: 0; } }
@keyframes damage-float-medium { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-30px) scale(0.95); opacity: 0; } }
@keyframes damage-float-large { 0% { transform: translateY(0) scale(1); opacity: 1; } 20% { transform: translateY(-10px) scale(1.1); } 100% { transform: translateY(-40px) scale(0.9); opacity: 0; } }
@keyframes damage-float-huge { 0% { transform: translateY(0) scale(1); opacity: 1; } 10% { transform: translateY(-5px) scale(1.1); } 30% { transform: translateY(-15px) scale(1.2); } 100% { transform: translateY(-50px) scale(0.9); opacity: 0; } }
@keyframes damage-float-massive { 0% { transform: translateY(0) scale(1); opacity: 1; } 5% { transform: translateY(-5px) scale(1.1); } 20% { transform: translateY(-15px) scale(1.2); } 40% { transform: translateY(-25px) scale(1.1); } 100% { transform: translateY(-60px) scale(0.9); opacity: 0; } }
.damage-indicator.critical { color: #ffcc00; text-shadow: 0 0 8px #700, 0 0 15px #f90; animation-duration: 1.5s; }

/* --- Screen Shake --- */

@keyframes shake-small { 0%, 100% { transform: translate(0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-1px, 0); } 20%, 40%, 60%, 80% { transform: translate(1px, 0); } }
@keyframes shake-medium { 0%, 100% { transform: translate(0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-2px, 0); } 20%, 40%, 60%, 80% { transform: translate(2px, 0); } }
@keyframes shake-large { 0%, 100% { transform: translate(0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-3px, -1px); } 20%, 40%, 60%, 80% { transform: translate(3px, 1px); } }
@keyframes shake-huge { 0%, 100% { transform: translate(0, 0) rotate(0); } 10%, 50%, 90% { transform: translate(-4px, -2px) rotate(-0.5deg); } 30%, 70% { transform: translate(4px, 2px) rotate(0.5deg); } }
.shake-small { animation: shake-small 0.4s cubic-bezier(.36,.07,.19,.97) both; }
.shake-medium { animation: shake-medium 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.shake-large { animation: shake-large 0.6s cubic-bezier(.36,.07,.19,.97) both; }
.shake-huge { animation: shake-huge 0.8s cubic-bezier(.36,.07,.19,.97) both; }

/* --- Magic Projectile/Impact --- */

.magic-projectile { position: absolute; width: 30px; height: 30px; border-radius: 50%; z-index: 10; animation: magic-projectile 0.6s ease-out forwards; will-change: transform, opacity; }
.magic-impact { position: absolute; width: 60px; height: 60px; border-radius: 50%; z-index: 10; transform: translate(-50%, -50%); animation: magic-impact 0.5s ease-out forwards; will-change: transform, opacity; }
@keyframes magic-projectile { 0% { transform: scale(0.2) translate(0, 0); opacity: 0.8; } 100% { transform: scale(1) translate(var(--target-x), var(--target-y)); opacity: 0; } }
@keyframes magic-impact { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
.magic-projectile.burn, .magic-impact.burn { background: radial-gradient(circle, #ff8800, #ff0000); box-shadow: 0 0 15px #ff4400, 0 0 30px #ff2200; }
.magic-projectile.freeze, .magic-impact.freeze { background: radial-gradient(circle, #88ccff, #0066ff); box-shadow: 0 0 15px #55aaff, 0 0 30px #0066ff; }
.magic-projectile.poison, .magic-impact.poison { background: radial-gradient(circle, #88ff88, #00aa00); box-shadow: 0 0 15px #55cc55, 0 0 30px #008800; }
.magic-projectile.confusion, .magic-impact.confusion { background: radial-gradient(circle, #ff88ff, #cc00cc); box-shadow: 0 0 15px #ff55ff, 0 0 30px #cc00cc; }

@keyframes cosmic-void {
    0% {
        background-color: #000;
        transform: scale(1);
    }
    50% {
        background-color: #1a1a2e;
        transform: scale(1.2);
    }
    100% {
        background-color: #000;
        transform: scale(1);
    }
}