/* Raid Game CSS */

/* Force overflow visible on all character divs to override inline styles */
[id^="character-"]:not(.character-stats-menu):not([class*="menu"]):not([class*="popup"]) {
    overflow: visible !important;
}

/* Also target by class in case ID selector doesn't work */
.character:not(.character-stats-menu) {
    overflow: visible !important;
}

/* Target character slots specifically */
.character-slot .character {
    overflow: visible !important;
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* Alice R: Pounce Barrage card bounce */
@keyframes alicePounceBarrageCardBounce {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    20% { transform: translate3d(0, -10px, 0) scale(1.02); }
    45% { transform: translate3d(0, 4px, 0) scale(0.99); }
    70% { transform: translate3d(0, -6px, 0) scale(1.01); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

.character-slot.alice-pounce-barrage-card {
    animation: alicePounceBarrageCardBounce 0.5s ease-in-out;
}

@keyframes chocolateBunnyDripPath {
    0%, 100% { transform: translateY(0) scaleY(1); }
    38% { transform: translateY(3px) scaleY(1.04); }
    72% { transform: translateY(8px) scaleY(1.14); }
}

@keyframes chocolateBunnyBorderGlow {
    0%, 100% { opacity: 0.34; }
    50% { opacity: 0.5; }
}

.character-slot.chocolate-bunny-alice-card {
    position: relative;
    overflow: visible !important;
    isolation: auto;
}

.battle-container.chocolate-bunny-card-bleed,
.battle-container.chocolate-bunny-card-bleed .top-section,
.battle-container.chocolate-bunny-card-bleed .bottom-section,
.battle-container.chocolate-bunny-card-bleed .characters-container,
.battle-container.chocolate-bunny-card-bleed .top-section .characters-container,
.battle-container.chocolate-bunny-card-bleed .bottom-section .characters-container {
    overflow: hidden !important;
}

[id^="character-"].character-slot.chocolate-bunny-alice-card,
.character.character-slot.chocolate-bunny-alice-card,
.character-slot.chocolate-bunny-alice-card.character {
    overflow: visible !important;
}

.skin-card-art-chocolate.skin-card-art-detached {
    display: none !important;
}

.character-slot.chocolate-bunny-alice-card .skin-card-art-chocolate {
    display: none !important;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #121212;
}

body {
    background-color: #121212;
    color: white;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Global VFX overlay root (outside scaled battle-container) */
.vfx-overlay-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 8;
}

/* Ability SVG VFX overlay layer — use normal blend so it's always visible */
.ability-svg-vfx-layer {
    mix-blend-mode: normal !important;
    isolation: isolate;
}

/* Elphelt-specific overlay layer (uses shared scaling variable from Tailwind integration) */
.elphelt-vfx-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    --elphelt-scale: var(--raid-game-scale, 1);
}

/* Scaling wrapper for consistent resolution */
.game-container {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* Improve image quality globally */
img {
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    backface-visibility: visible;
}

/* Battle container */
.battle-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    /* Prevent margin shifts from affecting layout - but allow transform for scaling */
    margin: 0 !important;
    /* VFX inside battle-container are in 1920Ă—1080 game-space coordinates.
       The JS transform already scales everything visually, so override
       --raid-game-scale to 1 here to prevent double-scaling of VFX sizes. */
    --raid-game-scale: 1;
}

/* Prevent shake animations from being applied to battle-container */
.battle-container.screen-shake,
.battle-container.shake-animation,
.battle-container.strong-shake {
    animation: none !important;
}

.apex-robot-spawning {
    position: relative;
    overflow: hidden !important;
    animation: apexRobotBodyPhaseIn 0.95s ease-out;
}

.apex-robot-spawning img,
.apex-robot-spawning .character-image,
.apex-robot-spawning .character-portrait {
    filter: brightness(0.45) contrast(1.35) saturate(0.15) hue-rotate(-18deg);
}

.apex-robot-spawn-effect {
    position: absolute;
    inset: -12px;
    pointer-events: none;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 55%, var(--spawn-glow-soft, rgba(255, 140, 0, 0.24)) 0%, rgba(20, 20, 20, 0.25) 44%, rgba(0, 0, 0, 0.65) 78%, rgba(0, 0, 0, 0.86) 100%);
    box-shadow: 0 0 24px var(--spawn-glow-mid, rgba(255, 140, 0, 0.42)), inset 0 0 20px var(--spawn-glow-soft, rgba(255, 140, 0, 0.28));
}

.apex-robot-spawn-effect::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: linear-gradient(180deg, transparent 0%, var(--spawn-scan, rgba(255, 140, 0, 0.8)) 50%, transparent 100%);
    animation: apexRobotScanSweep 0.95s ease-out;
}

.apex-robot-spawn-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, var(--spawn-lines, rgba(255, 140, 0, 0.2)) 0px, var(--spawn-lines, rgba(255, 140, 0, 0.2)) 2px, rgba(0, 0, 0, 0) 4px, rgba(0, 0, 0, 0) 8px);
    mix-blend-mode: screen;
    animation: apexRobotScanLines 0.45s linear infinite;
}

.apex-robot-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, var(--spawn-spark-core, #ffd08a) 0%, var(--spawn-spark, #ff8c00) 55%, rgba(255, 140, 0, 0.05) 100%);
    box-shadow: 0 0 8px var(--spawn-spark-glow, rgba(255, 140, 0, 0.8));
    animation: apexRobotSparkBurst 0.9s ease-out forwards;
}

@keyframes apexRobotBodyPhaseIn {
    0% {
        transform: scale(0.92);
        opacity: 0.2;
    }
    35% {
        transform: scale(1.02);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes apexRobotScanSweep {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes apexRobotScanLines {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(8px);
    }
}

@keyframes apexRobotSparkBurst {
    0% {
        transform: translateY(0) scale(0.4);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translateY(-6px) scale(1);
    }
    100% {
        transform: translateY(-28px) scale(0.2);
        opacity: 0;
    }
}

.paintstream-spawning {
    position: relative;
    overflow: hidden !important;
    animation: paintstreamSpawnCardReveal 1.55s cubic-bezier(0.18, 0.74, 0.2, 1);
}

.paintstream-spawning img,
.paintstream-spawning .character-image,
.paintstream-spawning .character-portrait {
    filter: brightness(0.72) saturate(1.28) contrast(1.05);
}

.paintstream-spawn-effect {
    --paint-spawn-pink: #ff79c8;
    --paint-spawn-cyan: #5bd8ff;
    --paint-spawn-lime: #a4f56d;
    --paint-spawn-yellow: #ffe888;
    --paint-spawn-white: #fff7ff;
    position: absolute;
    inset: -12px;
    z-index: 130;
    pointer-events: none;
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 40%),
        radial-gradient(circle at 74% 70%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 44%),
        conic-gradient(from 40deg at 50% 55%, var(--paint-spawn-pink), var(--paint-spawn-cyan), var(--paint-spawn-lime), var(--paint-spawn-yellow), var(--paint-spawn-pink));
    box-shadow:
        0 0 22px rgba(255, 164, 222, 0.5),
        0 0 28px rgba(132, 224, 255, 0.36),
        inset 0 0 26px rgba(255, 255, 255, 0.24);
    animation: paintstreamSpawnSplashBurst 1.2s ease-out forwards;
}

.paintstream-spawn-effect::before {
    content: "";
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(circle at 28% 58%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 74% 36%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    mix-blend-mode: screen;
    animation: paintstreamSpawnRipple 1.4s ease-out forwards;
}

.paintstream-spawn-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0)),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
    mix-blend-mode: screen;
    animation: paintstreamSpawnFade 1.55s ease-out forwards;
}

.paintstream-spawn-emblem {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 50px;
    height: 66px;
    transform: translate(-50%, -50%) scale(0.4) rotate(-16deg);
    border-radius: 52% 52% 45% 45% / 58% 58% 42% 42%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    background:
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.08) 38%),
        linear-gradient(142deg, rgba(255, 121, 200, 0.96), rgba(91, 216, 255, 0.9) 40%, rgba(164, 245, 109, 0.92) 74%, rgba(255, 232, 136, 0.92));
    box-shadow:
        0 0 24px rgba(255, 183, 227, 0.74),
        0 0 16px rgba(91, 216, 255, 0.5);
    animation: paintstreamSpawnEggBurst 1.2s ease-out forwards;
}

.paintstream-spawn-emblem::before {
    content: "";
    position: absolute;
    left: 22%;
    top: 16%;
    width: 56%;
    height: 70%;
    border-radius: 52% 52% 48% 48% / 56% 56% 44% 44%;
    border: 2px dashed rgba(255, 255, 255, 0.65);
    transform: rotate(-15deg);
    opacity: 0.8;
}

.paintstream-spawn-stream {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 14px;
    height: 86px;
    border-radius: 999px;
    transform-origin: 50% 8%;
    transform: translate(-50%, -50%) rotate(var(--stream-rotation, 0deg)) scaleY(0.1);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 26%),
        linear-gradient(180deg, rgba(255, 121, 200, 0.95), rgba(91, 216, 255, 0.9) 50%, rgba(164, 245, 109, 0.82));
    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.45),
        0 0 24px rgba(255, 121, 200, 0.42);
    mix-blend-mode: screen;
    animation: paintstreamSpawnStreamFlow 1.04s ease-out forwards;
}

.paintstream-spawn-ring {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.86);
    box-shadow:
        0 0 12px rgba(91, 216, 255, 0.62),
        0 0 24px rgba(255, 121, 200, 0.48);
    transform: translate(-50%, -50%) scale(0.22);
    opacity: 0;
    animation: paintstreamSpawnRingPulse 1.08s ease-out forwards;
}

.paintstream-spawn-droplet {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, var(--paint-spawn-white) 0%, var(--paint-spawn-cyan) 36%, var(--paint-spawn-pink) 76%, rgba(255, 121, 200, 0) 100%);
    box-shadow: 0 0 9px rgba(255, 255, 255, 0.7);
    animation: paintstreamSpawnDroplet 1.15s ease-out forwards;
}

@keyframes paintstreamSpawnCardReveal {
    0% {
        transform: scale(0.92);
        opacity: 0.28;
    }
    52% {
        transform: scale(1.03);
        opacity: 0.86;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes paintstreamSpawnSplashBurst {
    0% {
        transform: scale(0.75);
        opacity: 0;
        filter: saturate(1.35) blur(0.4px);
    }
    44% {
        opacity: 0.95;
    }
    100% {
        transform: scale(1.26);
        opacity: 0;
        filter: saturate(1.15) blur(0.8px);
    }
}

@keyframes paintstreamSpawnRipple {
    0% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.12;
    }
    100% {
        transform: scale(1.25) rotate(12deg);
        opacity: 0;
    }
}

@keyframes paintstreamSpawnFade {
    0% {
        opacity: 0.56;
    }
    100% {
        opacity: 0;
    }
}

@keyframes paintstreamSpawnEggBurst {
    0% {
        transform: translate(-50%, -50%) scale(0.34) rotate(-26deg);
        opacity: 0;
        filter: saturate(1.4);
    }
    35% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.26) rotate(18deg);
        opacity: 0;
        filter: blur(0.7px) saturate(1.12);
    }
}

@keyframes paintstreamSpawnStreamFlow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--stream-rotation, 0deg)) scaleY(0.08);
    }
    30% {
        opacity: 0.95;
        transform: translate(-50%, -50%) rotate(var(--stream-rotation, 0deg)) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(calc(var(--stream-rotation, 0deg) + 10deg)) translateY(16px) scaleY(0.45);
    }
}

@keyframes paintstreamSpawnRingPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    28% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3);
    }
}

@keyframes paintstreamSpawnDroplet {
    0% {
        transform: translate(0, 0) scale(0.32);
        opacity: 0;
    }
    25% {
        opacity: 1;
        transform: translate(calc(var(--drop-x) * 0.45), calc(var(--drop-y) * -0.25)) scale(1);
    }
    100% {
        transform: translate(var(--drop-x), var(--drop-y)) scale(0.2);
        opacity: 0;
    }
}

.stage-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    overflow: hidden; /* Prevent iframe scrollbars */
}

/* --- Stage Lighting Overlay (per-stage visual effects) --- */
.stage-lighting-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Above stage background (incl. video/iframe) + characters, below most UI */
    z-index: 200;
    display: none;
}

:root {
    /* 0..2. Controlled via Options menu (default 200%). */
    --stage-light-intensity: 2;
}

/* Global toggle to disable any stage lighting */
body.stage-lighting-off .stage-lighting-overlay {
    display: none !important;
}

/* Jungle lighting: dappled canopy shadows + drifting light patches */
body.stage-light-jungle .stage-lighting-overlay {
    display: block;
}

/* Spectral lighting: cold cursed fog + eerie glow */
body.stage-light-spectral .stage-lighting-overlay {
    display: block;
}

/* Spectral green lighting: cursed green tint that reads over characters */
body.stage-light-spectral-green .stage-lighting-overlay {
    display: block;
}

/* Underwater lighting: blue-green depth haze + caustic light shimmer */
body.stage-light-underwater .stage-lighting-overlay {
    display: block;
}

/* Optional: lightly green-grade characters/slots too (kept subtle) */
body.stage-light-spectral-green:not(.stage-lighting-off) .top-section,
body.stage-light-spectral-green:not(.stage-lighting-off) .bottom-section {
    filter: hue-rotate(12deg) saturate(1.03) brightness(0.98);
}

body.stage-light-jungle .stage-lighting-overlay::before {
    content: "";
    position: absolute;
    inset: -6%;
    /* Dappled shadow pattern (pure CSS, no assets) */
    background:
        radial-gradient(ellipse at 18% 14%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.13) 28%, rgba(0, 0, 0, 0) 55%),
        radial-gradient(ellipse at 74% 20%, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.11) 30%, rgba(0, 0, 0, 0) 58%),
        radial-gradient(ellipse at 45% 62%, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0) 52%),
        radial-gradient(ellipse at 88% 78%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.10) 28%, rgba(0, 0, 0, 0) 58%),
        radial-gradient(ellipse at 10% 82%, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.09) 26%, rgba(0, 0, 0, 0) 56%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0) 66%);
    /* Use normal compositing so the effect is visible on characters consistently */
    mix-blend-mode: normal;
    filter: blur(1.4px) contrast(1.08);
    /* Max at 200% intensity: 1.0 */
    opacity: calc(var(--stage-light-intensity, 1) * 0.50);
    transform: translateZ(0);
    animation: jungleShadowDrift 16s ease-in-out infinite alternate;
}

body.stage-light-spectral .stage-lighting-overlay::before {
    content: "";
    position: absolute;
    inset: -8%;
    /* Soft cursed fog bands */
    background:
        radial-gradient(ellipse at 18% 22%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 34%, rgba(0, 0, 0, 0) 62%),
        radial-gradient(ellipse at 78% 18%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.10) 32%, rgba(0, 0, 0, 0) 64%),
        radial-gradient(ellipse at 48% 72%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(ellipse at 12% 82%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0) 58%);
    mix-blend-mode: normal;
    filter: blur(1.8px) contrast(1.08);
    opacity: calc(var(--stage-light-intensity, 1) * 0.55);
    transform: translateZ(0);
    animation: spectralFogDrift 18s ease-in-out infinite alternate;
}

body.stage-light-spectral-green .stage-lighting-overlay::before {
    content: "";
    position: absolute;
    inset: -10%;
    /* Dark cursed fog bands (keeps contrast, reads on character cards) */
    background:
        radial-gradient(ellipse at 20% 24%, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.12) 34%, rgba(0, 0, 0, 0) 64%),
        radial-gradient(ellipse at 78% 20%, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.11) 32%, rgba(0, 0, 0, 0) 64%),
        radial-gradient(ellipse at 50% 78%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0) 60%);
    mix-blend-mode: normal;
    filter: blur(1.9px) contrast(1.10);
    opacity: calc(var(--stage-light-intensity, 1) * 0.55);
    transform: translateZ(0);
    animation: spectralFogDrift 18s ease-in-out infinite alternate;
}

body.stage-light-jungle .stage-lighting-overlay::after {
    content: "";
    position: absolute;
    inset: -10%;
    /* Soft moving “light patches” */
    background:
        radial-gradient(circle at 22% 22%, rgba(170, 255, 140, 0.20) 0%, rgba(170, 255, 140, 0.00) 46%),
        radial-gradient(circle at 62% 28%, rgba(210, 255, 170, 0.16) 0%, rgba(210, 255, 170, 0.00) 44%),
        radial-gradient(circle at 70% 72%, rgba(140, 255, 120, 0.14) 0%, rgba(140, 255, 120, 0.00) 48%),
        radial-gradient(circle at 30% 78%, rgba(245, 255, 220, 0.10) 0%, rgba(245, 255, 220, 0.00) 52%);
    mix-blend-mode: normal;
    filter: blur(0.9px) saturate(1.28) hue-rotate(6deg);
    /* Max at 200% intensity: 0.6 */
    opacity: calc(var(--stage-light-intensity, 1) * 0.30);
    transform: translateZ(0);
    animation: jungleLightDrift 18s ease-in-out infinite;
}

body.stage-light-spectral .stage-lighting-overlay::after {
    content: "";
    position: absolute;
    inset: -12%;
    /* Eerie glow patches */
    background:
        radial-gradient(circle at 26% 26%, rgba(170, 220, 255, 0.18) 0%, rgba(170, 220, 255, 0.00) 52%),
        radial-gradient(circle at 70% 30%, rgba(185, 170, 255, 0.14) 0%, rgba(185, 170, 255, 0.00) 50%),
        radial-gradient(circle at 68% 76%, rgba(120, 230, 210, 0.12) 0%, rgba(120, 230, 210, 0.00) 54%),
        radial-gradient(circle at 30% 78%, rgba(220, 240, 255, 0.10) 0%, rgba(220, 240, 255, 0.00) 58%);
    mix-blend-mode: normal;
    filter: blur(1.1px) saturate(1.10);
    opacity: calc(var(--stage-light-intensity, 1) * 0.32);
    transform: translateZ(0);
    animation: spectralGlowDrift 20s ease-in-out infinite;
}

body.stage-light-spectral-green .stage-lighting-overlay::after {
    content: "";
    position: absolute;
    inset: -12%;
    /* Green glow wash. Screen blend ensures it shows on dark character cards too. */
    background:
        radial-gradient(circle at 22% 26%, rgba(120, 255, 170, 0.22) 0%, rgba(120, 255, 170, 0.00) 54%),
        radial-gradient(circle at 70% 30%, rgba(90, 255, 140, 0.18) 0%, rgba(90, 255, 140, 0.00) 52%),
        radial-gradient(circle at 64% 76%, rgba(160, 255, 210, 0.14) 0%, rgba(160, 255, 210, 0.00) 58%),
        radial-gradient(circle at 30% 78%, rgba(200, 255, 220, 0.12) 0%, rgba(200, 255, 220, 0.00) 60%);
    mix-blend-mode: screen;
    filter: blur(1.15px) saturate(1.20) hue-rotate(10deg);
    opacity: calc(var(--stage-light-intensity, 1) * 0.38);
    transform: translateZ(0);
    animation: spectralGlowDrift 20s ease-in-out infinite;
}

body.stage-light-underwater .stage-lighting-overlay::before {
    content: "";
    position: absolute;
    inset: -10%;
    /* Depth haze + gentle vignette */
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.36) 70%, rgba(0, 0, 0, 0.55) 100%),
        radial-gradient(ellipse at 30% 35%, rgba(70, 170, 190, 0.14) 0%, rgba(70, 170, 190, 0.00) 60%),
        radial-gradient(ellipse at 72% 26%, rgba(120, 220, 210, 0.10) 0%, rgba(120, 220, 210, 0.00) 55%);
    mix-blend-mode: normal;
    filter: blur(1.8px) contrast(1.06);
    opacity: calc(var(--stage-light-intensity, 1) * 0.52);
    transform: translateZ(0);
    animation: underwaterHazeDrift 22s ease-in-out infinite alternate;
}

body.stage-light-underwater .stage-lighting-overlay::after {
    content: "";
    position: absolute;
    inset: -12%;
    /* Caustic shimmer (pure CSS): layered highlights that drift and pulse */
    background:
        radial-gradient(circle at 18% 22%, rgba(180, 255, 245, 0.16) 0%, rgba(180, 255, 245, 0.00) 44%),
        radial-gradient(circle at 62% 28%, rgba(160, 240, 255, 0.14) 0%, rgba(160, 240, 255, 0.00) 48%),
        radial-gradient(circle at 78% 70%, rgba(140, 220, 255, 0.12) 0%, rgba(140, 220, 255, 0.00) 52%),
        radial-gradient(circle at 30% 78%, rgba(210, 255, 255, 0.10) 0%, rgba(210, 255, 255, 0.00) 56%);
    mix-blend-mode: screen;
    filter: blur(1.2px) saturate(1.10);
    opacity: calc(var(--stage-light-intensity, 1) * 0.36);
    transform: translateZ(0);
    animation: underwaterCaustics 16s ease-in-out infinite;
}

/* Optional dynamic blobs (created by GameManager when stage_light = jungle) */
body.stage-light-jungle .stage-lighting-overlay .jungle-light-blob {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle at 40% 35%, rgba(245, 255, 220, 0.14) 0%, rgba(120, 255, 130, 0.08) 35%, rgba(0, 0, 0, 0) 68%);
    mix-blend-mode: normal;
    filter: blur(12px) saturate(1.35) hue-rotate(6deg);
    opacity: 0.6;
    transform: translateZ(0);
    animation-name: jungleBlobFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

/* Optional dynamic blobs (created by GameManager when stage_light = spectral) */
body.stage-light-spectral .stage-lighting-overlay .spectral-light-blob {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle at 40% 35%, rgba(220, 245, 255, 0.16) 0%, rgba(140, 200, 255, 0.10) 36%, rgba(120, 160, 255, 0.06) 52%, rgba(0, 0, 0, 0) 70%);
    mix-blend-mode: normal;
    filter: blur(14px) saturate(1.10) hue-rotate(210deg);
    opacity: 0.55;
    transform: translateZ(0);
    animation-name: spectralBlobFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

body.stage-light-spectral-green .stage-lighting-overlay .spectral-light-blob {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle at 40% 35%, rgba(200, 255, 230, 0.14) 0%, rgba(120, 255, 190, 0.10) 36%, rgba(90, 255, 150, 0.06) 52%, rgba(0, 0, 0, 0) 70%);
    mix-blend-mode: screen;
    filter: blur(14px) saturate(1.18) hue-rotate(12deg);
    opacity: 0.55;
    transform: translateZ(0);
    animation-name: spectralBlobFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

@keyframes jungleBlobFloat {
    0% { transform: translate3d(-4px, 2px, 0) scale(1); opacity: 0.45; }
    50% { transform: translate3d(5px, -3px, 0) scale(1.03); opacity: 0.62; }
    100% { transform: translate3d(4px, 3px, 0) scale(1.01); opacity: 0.48; }
}

@keyframes spectralBlobFloat {
    0% { transform: translate3d(-5px, 3px, 0) scale(1); opacity: 0.40; }
    50% { transform: translate3d(6px, -4px, 0) scale(1.03); opacity: 0.60; }
    100% { transform: translate3d(4px, 4px, 0) scale(1.01); opacity: 0.44; }
}

@keyframes jungleShadowDrift {
    0% { transform: translate3d(-0.28%, -0.18%, 0) scale(1.005); }
    100% { transform: translate3d(0.34%, 0.22%, 0) scale(1.01); }
}

@keyframes spectralFogDrift {
    0% { transform: translate3d(-0.32%, -0.16%, 0) scale(1.01); }
    100% { transform: translate3d(0.36%, 0.22%, 0) scale(1.02); }
}

@keyframes jungleLightDrift {
    0% { transform: translate3d(-0.36%, 0.24%, 0) scale(1.01); }
    50% { transform: translate3d(0.28%, -0.20%, 0) scale(1.02); }
    100% { transform: translate3d(0.36%, 0.24%, 0) scale(1.01); }
}

@keyframes spectralGlowDrift {
    0% { transform: translate3d(-0.40%, 0.26%, 0) scale(1.01); }
    50% { transform: translate3d(0.30%, -0.22%, 0) scale(1.03); }
    100% { transform: translate3d(0.40%, 0.26%, 0) scale(1.01); }
}

@keyframes underwaterHazeDrift {
    0% { transform: translate3d(-0.30%, -0.22%, 0) scale(1.02); }
    100% { transform: translate3d(0.34%, 0.26%, 0) scale(1.03); }
}

@keyframes underwaterCaustics {
    0% { transform: translate3d(-0.38%, 0.20%, 0) scale(1.02); opacity: calc(var(--stage-light-intensity, 1) * 0.30); }
    50% { transform: translate3d(0.28%, -0.22%, 0) scale(1.05); opacity: calc(var(--stage-light-intensity, 1) * 0.42); }
    100% { transform: translate3d(0.38%, 0.20%, 0) scale(1.02); opacity: calc(var(--stage-light-intensity, 1) * 0.32); }
}

/* Support for iframe backgrounds */
.stage-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    z-index: -1;
}

/* Character sections */
.top-section, .bottom-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.top-section {
    align-items: flex-end;
    overflow: visible;
    padding-bottom: 35px;
    position: relative;
    z-index: 1;
}

.top-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 20%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0.3) 80%, 
        transparent 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.bottom-section {
    align-items: flex-start;
    overflow: visible;
    padding-top: 35px;
    z-index: 1;
}

.characters-container {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1400px;
    overflow: visible;
}

/* Adjustments for the top (AI) character container to fit more characters */
.top-section .characters-container {
    max-width: 1400px;
    gap: 20px;
    overflow: visible;
}

/* Increase width for player character container */
.bottom-section .characters-container {
    max-width: 1400px;
    gap: 20px;
    overflow: visible;
}

/* Character slot */
.character-slot {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    padding: 10px;
    border: 3px solid #333;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    overflow: visible;
    z-index: 10;
    width: 255px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.character-slot.selected {
    border: 3px solid #3498db;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.7);
}

/* If the selected caster is also a valid target (e.g. self-target abilities),
   keep the caster's selected styling while still showing it's targetable. */
.character-slot.selected.valid-target {
    border: 3px solid #3498db;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.7), 0 0 12px rgba(46, 204, 113, 0.45);
    animation: none;
}

.character-slot.valid-target {
    border: 3px solid #2ecc71;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.7);
    cursor: pointer;
    animation: validTarget 1.5s infinite alternate;
}

.character-slot.invalid-target {
    border-color: red;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.65);
    cursor: not-allowed;
}

/* Keyboard-focused target (WASD + Enter targeting) */
.character-slot.keyboard-target {
    /* Gold outline to distinguish from green valid-target and blue selected */
    outline: 3px dashed rgba(241, 196, 15, 0.9);
    outline-offset: 3px;
}

@keyframes validTarget {
    0% { box-shadow: 0 0 15px rgba(46, 204, 113, 0.4); }
    100% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.9); }
}

/* Character video support */
.character-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    pointer-events: auto; /* Allow pointer events for context menu */
    user-select: none;
    -webkit-user-select: none;
}

/* Ensure video plays correctly in character slots */
.character-slot video.character-image {
    background: #000;
    display: block;
}

/* Video loading states */
.character-video:not([data-loaded]) {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.character-video[data-loaded] {
    background: transparent;
}

/* Character image and video styling */
.character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    pointer-events: auto; /* Allow pointer events for context menu */
    user-select: none;
    -webkit-user-select: none;
}

/* Disable video controls */
.character-video::-webkit-media-controls {
    display: none !important;
}

.character-video::-webkit-media-controls-panel {
    display: none !important;
}

.character-video::-webkit-media-controls-play-button {
    display: none !important;
}

.character-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* Allow right-click context menu on videos */
.character-video {
    -webkit-context-menu: default;
    -moz-context-menu: default;
}

/* Character image */
.image-container {
    position: relative;
    height: 320px;
    overflow: visible;
    border-radius: 8px;
    border: 2px solid #444;
    margin: 0 auto 8px; /* Center the image horizontally and keep the existing bottom margin */
}

/* Allow overflow for crow crown visual effects */
.crow-crown-visual .image-container {
    overflow: visible;
}

.character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    backface-visibility: visible;
    /* Enhanced support for skin images with 9:16 aspect ratio */
    transition: opacity 0.3s ease;
}

/* Remove hover effect for character images */
.character-slot:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

/* Character info */
.character-info {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    padding: 5px;
    overflow: visible;
}

/* ==========================
   Naga King: Sirenstone Gaze
   ========================== */

/* Petrified filter + subtle "stone weight" */
.character-slot.naga-petrified .character-image,
[id^="character-"].naga-petrified .character-image {
    filter: grayscale(1) saturate(0.25) contrast(1.25) brightness(0.85);
    transform: translateZ(0) scale(0.995);
}

.naga-stone-shell,
.naga-stone-glyphs,
.naga-stone-dust,
.naga-sirenstone-cast,
.naga-sirenstone-impact,
.naga-stone-shatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 8px;
    z-index: 50;
}

/* Stone shell: layered gradients + crack-like texture */
.naga-stone-shell {
    opacity: 0.92;
    background:
        radial-gradient(140% 95% at 20% 15%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.00) 45%),
        radial-gradient(120% 90% at 80% 85%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.00) 55%),
        linear-gradient(180deg, rgba(110,110,110,0.58) 0%, rgba(70,70,70,0.62) 100%);
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.35),
        inset 0 0 22px rgba(0,0,0,0.55);
    animation: nagaStoneSettle 900ms ease-out forwards;
}

.naga-stone-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    opacity: 0.5;
    background:
        repeating-linear-gradient(115deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, rgba(0,0,0,0.00) 10px, rgba(0,0,0,0.00) 18px),
        repeating-linear-gradient(35deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, rgba(255,255,255,0.00) 12px, rgba(255,255,255,0.00) 20px);
    mix-blend-mode: multiply;
}

/* Glyphs: faint tide-runes drifting across the stone */
.naga-stone-glyphs {
    opacity: 0.35;
    background:
        radial-gradient(circle at 30% 35%, rgba(200, 255, 255, 0.12) 0%, rgba(200, 255, 255, 0.00) 42%),
        radial-gradient(circle at 70% 65%, rgba(200, 255, 255, 0.10) 0%, rgba(200, 255, 255, 0.00) 45%);
    filter: blur(0.2px);
    animation: nagaGlyphDrift 2.8s ease-in-out infinite;
}

/* Dust motes: subtle stone grit */
.naga-stone-dust {
    opacity: 0.22;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.12) 0 1px, rgba(255,255,255,0.00) 2px),
        radial-gradient(circle at 62% 28%, rgba(255,255,255,0.10) 0 1px, rgba(255,255,255,0.00) 2px),
        radial-gradient(circle at 74% 64%, rgba(255,255,255,0.10) 0 1px, rgba(255,255,255,0.00) 2px),
        radial-gradient(circle at 35% 78%, rgba(255,255,255,0.08) 0 1px, rgba(255,255,255,0.00) 2px);
    animation: nagaDustFloat 3.6s linear infinite;
}

/* Cast VFX: watery ring + vertical flash */
.naga-sirenstone-cast {
    z-index: 70;
    background:
        radial-gradient(circle at 50% 55%, rgba(150, 255, 255, 0.00) 0%, rgba(150, 255, 255, 0.20) 35%, rgba(150, 255, 255, 0.00) 62%),
        linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(210,255,255,0.28) 50%, rgba(255,255,255,0.00) 100%);
    mix-blend-mode: screen;
    filter: blur(0.2px);
    animation: nagaSirenstoneCast 1.0s ease-out forwards;
}

/* Target impact: quick ripple + crack pulse */
.naga-sirenstone-impact {
    z-index: 75;
    background:
        radial-gradient(circle at 50% 55%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.00) 58%),
        radial-gradient(circle at 50% 55%, rgba(150, 255, 255, 0.18) 0%, rgba(150, 255, 255, 0.00) 70%);
    mix-blend-mode: screen;
    animation: nagaSirenstoneImpact 0.9s ease-out forwards;
}

/* Shatter on removal: crumble burst */
.naga-stone-shatter {
    z-index: 80;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.00) 35%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.00) 38%),
        repeating-linear-gradient(120deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, rgba(0,0,0,0.00) 10px, rgba(0,0,0,0.00) 18px);
    mix-blend-mode: screen;
    animation: nagaStoneShatter 1.05s ease-out forwards;
}

@keyframes nagaStoneSettle {
    0% { opacity: 0; transform: scale(1.03); }
    55% { opacity: 0.95; transform: scale(1.00); }
    100% { opacity: 0.92; transform: scale(1.00); }
}

@keyframes nagaGlyphDrift {
    0% { transform: translateY(0px); opacity: 0.22; }
    50% { transform: translateY(-2px); opacity: 0.38; }
    100% { transform: translateY(0px); opacity: 0.24; }
}

@keyframes nagaDustFloat {
    0% { transform: translateY(0px); opacity: 0.16; }
    50% { transform: translateY(-3px); opacity: 0.25; }
    100% { transform: translateY(0px); opacity: 0.16; }
}

@keyframes nagaSirenstoneCast {
    0% { opacity: 0; transform: scale(0.88); }
    18% { opacity: 0.95; transform: scale(1.02); }
    55% { opacity: 0.55; transform: scale(1.06); }
    100% { opacity: 0; transform: scale(1.10); }
}

@keyframes nagaSirenstoneImpact {
    0% { opacity: 0; transform: scale(0.92); }
    25% { opacity: 0.9; transform: scale(1.00); }
    100% { opacity: 0; transform: scale(1.12); }
}

@keyframes nagaStoneShatter {
    0% { opacity: 0; transform: scale(0.98); filter: blur(0px); }
    25% { opacity: 1; transform: scale(1.03); filter: blur(0px); }
    100% { opacity: 0; transform: scale(1.18); filter: blur(1px); }
}

/* Naga King: Spiritwalk (borrowed rules from Kagome, Naga-flavored VFX) */
.naga-spiritwalk-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 65;
    background:
        radial-gradient(circle at 50% 60%, rgba(120, 255, 240, 0.00) 0%, rgba(120, 255, 240, 0.18) 35%, rgba(120, 255, 240, 0.00) 70%),
        linear-gradient(180deg, rgba(120, 255, 240, 0.10) 0%, rgba(255,255,255,0.00) 70%);
    mix-blend-mode: screen;
    animation: nagaSpiritwalkPulse 0.9s ease-out forwards;
}

@keyframes nagaSpiritwalkPulse {
    0% { opacity: 0; transform: scale(0.96); }
    30% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.07); }
}

/* ==========================
   End Naga King Petrify
   ========================== */

/* Hide character name - per requirements */
.character-name {
    display: none;
}

/* Resource bars */
.bar-container {
    height: 24px;
    background-color: #222;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid #444;
    transition: all 0.3s ease;
}

/* HP Bar Animations */
.bar-container.hp-damage {
    animation: hpDamageShake 0.6s ease-out;
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.8), inset 0 0 10px rgba(255, 0, 0, 0.3);
}

.bar-container.hp-critical-damage {
    animation: hpCriticalDamage 1s ease-out;
    box-shadow: 0 0 25px rgba(255, 0, 0, 1), inset 0 0 15px rgba(255, 50, 50, 0.5);
}

.bar-container.hp-healing {
    animation: hpHealingGlow 1s ease-out;
    box-shadow: 0 0 20px rgba(50, 255, 100, 0.8), inset 0 0 10px rgba(100, 255, 150, 0.3);
}

.bar-container.hp-critical-healing {
    animation: hpCriticalHealing 1.5s ease-out;
    box-shadow: 0 0 30px rgba(100, 255, 200, 1), inset 0 0 20px rgba(150, 255, 200, 0.5);
}

.bar-container.hp-low {
    animation: hpLowWarning 2s infinite;
    border-color: #ff4444;
}

.bar-container.hp-very-low {
    animation: hpCriticalWarning 1s infinite;
    border-color: #ff0000;
}

/* Mana Bar Animations */
.bar-container.mana-drain {
    animation: manaDrain 0.8s ease-out;
    box-shadow: 0 0 15px rgba(100, 150, 255, 0.6);
}

.bar-container.mana-restore {
    animation: manaRestore 1s ease-out;
    box-shadow: 0 0 20px rgba(150, 200, 255, 0.8);
}

.bar-container.mana-empty {
    animation: manaEmpty 2s infinite;
    border-color: #6666ff;
}

/* Resource bar text overlay - positioned absolutely to always be visible */
.bar-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.45);
    font-size: 12px;
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.bar-text.damage-text {
    animation: damageTextEffect 1.35s ease-out;
    color: #ffcccc;
    text-shadow: 0 0 8px rgba(255, 100, 100, 0.8);
}

.bar-text.healing-text {
    animation: healingTextEffect 1.55s ease-out;
    color: #ccffcc;
    text-shadow: 0 0 8px rgba(100, 255, 100, 0.8);
}

/* Shield bar overlay for HP bar */
.shield-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #C0C0C0 0%, #E0E0E0 50%, #C0C0C0 100%);
    border-radius: 3px;
    z-index: 2;
    opacity: 0.9;
    transition: width 0.3s ease, opacity 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    display: none; /* visible by default, shown when character has shield */
    transform-origin: right; /* Ensure scaling happens from the right */
}

.shield-bar.shield-damaged {
    animation: shieldHit 0.5s ease-out, shieldShimmer 3s infinite;
}

.shield-bar.shield-broken {
    animation: shieldBreak 1s ease-out forwards;
}

.shield-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%), 
                linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.1) 75%), 
                linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    animation: shield-pattern 2s linear infinite;
    pointer-events: none;
}

@keyframes shield-pattern {
    0% { background-position: 0 0, 0 4px, 4px -4px, -4px 0px; }
    100% { background-position: 8px 0, 8px 4px, 12px -4px, 4px 0px; }
}

.hp-bar {
    height: 100%;
    background: linear-gradient(to right, #c0392b, #e74c3c);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    z-index: 2; /* Ensure HP bar is above shield bar */
    overflow: hidden;
}

.hp-bar.hp-regenerating {
    animation: hpRegen 2s infinite;
}

.hp-bar.hp-draining {
    animation: hpDrain 1s ease-out;
}

.hp-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 85%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 35%, rgba(255,255,255,0.12) 0 3px, transparent 4px),
        radial-gradient(circle at 40% 65%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
        linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    background-size: 40px 100%, 55px 100%, 65px 100%, 100% 100%;
    background-position: 0 8px, 0 12px, 0 6px, 0 0;
    animation: barBubbles 3.8s linear infinite;
    pointer-events: none;
}

.hp-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: none;
    pointer-events: none;
}

.hp-bar.hp-healing::after {
    animation: healingWave 1s ease-out;
}

/* Visible HP drain sweep when taking damage */
.hp-bar.hp-draining::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.55), transparent);
    animation: hpDrainWave 0.9s ease-out;
}

/* Visible HP drain sweep when taking damage */
.hp-bar.hp-draining::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.55), transparent);
    animation: hpDrainWave 0.9s ease-out;
}

.mana-bar {
    height: 100%;
    background: linear-gradient(to right, #1a5276, #3498db);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mana-bar.mana-casting {
    animation: manaCasting 0.5s ease-out;
}

.mana-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 25% 85%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 40%, rgba(255,255,255,0.12) 0 3px, transparent 4px),
        radial-gradient(circle at 45% 65%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
        linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    background-size: 40px 100%, 55px 100%, 65px 100%, 100% 100%;
    background-position: 0 8px, 0 12px, 0 6px, 0 0;
    animation: barBubbles 3.8s linear infinite;
    pointer-events: none;
}

/* Idle bubbly animation used by HP/Mana bar overlays */
@keyframes barBubbles {
    0% {
        background-position: 0 10px, 0 14px, 0 8px, 0 0;
    }
    100% {
        background-position: 40px -16px, 55px -22px, 65px -14px, 0 0;
    }
}

/* Extra clarity on mana drain (bar-level pulse) */
.mana-bar.mana-draining {
    animation: manaDrainPulse 0.8s ease-out;
}

@keyframes manaDrainPulse {
    0% { filter: brightness(1); }
    40% { filter: brightness(0.65); }
    100% { filter: brightness(1); }
}

@keyframes hpDrainWave {
    0% { left: 100%; opacity: 0; }
    10% { opacity: 1; }
    100% { left: -100%; opacity: 0; }
}

@keyframes manaDrainWave {
    0% { left: 100%; opacity: 0; }
    10% { opacity: 1; }
    100% { left: -100%; opacity: 0; }
}

/* Settings: allow disabling idle bubbles */
body.disable-bar-bubbles .hp-bar::before,
body.disable-bar-bubbles .mana-bar::before {
    animation: none !important;
}

.mana-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(100,200,255,0.6), transparent);
    animation: none;
    pointer-events: none;
}

.mana-bar.mana-restoring::after {
    animation: manaWave 1s ease-out;
}

/* Visible mana drain sweep */
.mana-bar.mana-draining::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.45), transparent);
    animation: manaDrainWave 0.9s ease-out;
}

/* Visible mana drain sweep */
.mana-bar.mana-draining::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.45), transparent);
    animation: manaDrainWave 0.9s ease-out;
}

.energy-bar {
    height: 100%;
    background: linear-gradient(to right, #f1c40f, #ffeb3b);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}
.energy-bar.energy-casting {
    animation: energyCasting 0.5s ease-out;
}
.energy-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    pointer-events: none;
}
.energy-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,235,59,0.8), transparent);
    animation: none;
    pointer-events: none;
}
.energy-bar.energy-restoring::after {
    animation: energyWave 1s ease-out;
}

/* Animation Keyframes */
@keyframes hpDamageShake {
    0%, 100% { margin-left: 0; }
    10%, 30%, 50%, 70%, 90% { margin-left: -2px; }
    20%, 40%, 60%, 80% { margin-left: 2px; }
}

@keyframes hpCriticalDamage {
    0% { transform: scale(1) rotate(0deg); }
    15% { transform: scale(1.05) rotate(-1deg); }
    30% { transform: scale(0.98) rotate(1deg); }
    45% { transform: scale(1.02) rotate(-0.5deg); }
    60% { transform: scale(0.99) rotate(0.5deg); }
    75% { transform: scale(1.01) rotate(-0.2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes hpHealingGlow {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes hpCriticalHealing {
    0% { transform: scale(1); }
    25% { transform: scale(1.05); }
    50% { transform: scale(1.02); }
    75% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes hpLowWarning {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 68, 68, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 68, 68, 0.9); }
}

@keyframes hpCriticalWarning {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
        border-color: #ff0000;
    }
    50% { 
        box-shadow: 0 0 25px rgba(255, 0, 0, 1);
        border-color: #ff4444;
    }
}

@keyframes manaDrain {
    0% { filter: brightness(1); }
    50% { filter: brightness(0.7); }
    100% { filter: brightness(1); }
}

@keyframes manaRestore {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes manaEmpty {
    0%, 100% { box-shadow: 0 0 5px rgba(102, 102, 255, 0.5); }
    50% { box-shadow: 0 0 15px rgba(102, 102, 255, 0.9); }
}

@keyframes hpRegen {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

@keyframes hpDrain {
    0% { filter: brightness(1) hue-rotate(0deg); }
    50% { filter: brightness(0.8) hue-rotate(10deg); }
    100% { filter: brightness(1) hue-rotate(0deg); }
}

@keyframes manaCasting {
    0% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.2) saturate(1.3); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes healingWave {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes manaWave {
    0% { left: -100%; }
    100% { left: 100%; }
}
@keyframes energyCasting {
    0% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.2) saturate(1.3); }
    100% { filter: brightness(1) saturate(1); }
}
@keyframes energyWave {
    0% { left: -100%; }
    100% { left: 100%; }
}
@keyframes energyDrain {
    0% { filter: brightness(1); }
    50% { filter: brightness(0.7); }
    100% { filter: brightness(1); }
}
@keyframes energyRestore {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}
@keyframes energyEmpty {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 235, 59, 0.6); }
    50% { box-shadow: 0 0 15px rgba(255, 235, 59, 1.0); }
}

@keyframes shieldShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

@keyframes shieldHit {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(0.95); filter: brightness(1.5); }
    50% { transform: scale(1.05); filter: brightness(0.8); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes shieldBreak {
    0% { 
        opacity: 1; 
        transform: scale(1);
    }
    25% {
        opacity: 0.8;
        transform: scale(1.1);
        filter: brightness(2);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9);
        filter: brightness(0.5);
    }
    75% {
        opacity: 0.2;
        transform: scale(1.05);
        filter: blur(1px);
    }
    100% { 
        opacity: 0; 
        transform: scale(0.8);
        filter: blur(2px);
    }
}

@keyframes damageTextEffect {
    0% {
        transform: translateY(6px) scale(0.92);
        color: white;
        opacity: 0.6;
    }
    18% {
        transform: translateY(0px) scale(1.12);
        color: #ff8888;
        opacity: 1;
    }
    35% {
        transform: translateY(-2px) scale(1.02);
        color: #ffaaaa;
        opacity: 1;
    }
    100% {
        transform: translateY(0px) scale(1);
        color: white;
        opacity: 1;
    }
}

@keyframes healingTextEffect {
    0% {
        transform: translateY(6px) scale(0.92);
        color: white;
        opacity: 0.6;
    }
    18% {
        transform: translateY(0px) scale(1.12);
        color: #88ff88;
        opacity: 1;
    }
    35% {
        transform: translateY(-2px) scale(1.02);
        color: #aaffaa;
        opacity: 1;
    }
    100% {
        transform: translateY(0px) scale(1);
        color: white;
        opacity: 1;
    }
}

/* Particle effects for HP changes */
.hp-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.hp-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
}

.hp-particle.damage {
    background: radial-gradient(circle, #ff4444, #cc0000);
    animation: damageParticle 1s ease-out forwards;
}

.hp-particle.healing {
    background: radial-gradient(circle, #44ff44, #00cc00);
    animation: healingParticle 1s ease-out forwards;
}

@keyframes damageParticle {
    0% {
        opacity: 1;
        transform: scale(0) translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: scale(1) translate(var(--random-x, 0), var(--random-y, 0));
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translate(calc(var(--random-x, 0) * 2), calc(var(--random-y, 0) * 2));
    }
}

@keyframes healingParticle {
    0% {
        opacity: 0;
        transform: scale(0) translate(0, 20px);
    }
    20% {
        opacity: 1;
        transform: scale(1) translate(var(--random-x, 0), 0);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translate(var(--random-x, 0), -30px);
    }
}

/* Screen shake effect for critical damage - DISABLED to prevent resolution issues */
/* @keyframes screenShake { 0%, 100% { margin-left: 0; } 10%, 30%, 50%, 70%, 90% { margin-left: -3px; } 20%, 40%, 60%, 80% { margin-left: 3px; } } */

/* Abilities */
.abilities {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 5px;
}

.ability {
    width: 50px;
    height: 50px;
    background-color: #222;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #555;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.ability:hover {
    border-color: #f39c12;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.6);
}

.ability.selected {
    border-color: #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.7);
    transform: scale(1.05);
    animation: selectedAbility 1.5s infinite alternate;
}

@keyframes selectedAbility {
    0% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.4); }
    100% { box-shadow: 0 0 15px rgba(231, 76, 60, 0.9); }
}

.ability-cost {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background-color: #3498db;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    border: 1px solid #2980b9;
    z-index: 3;
}

/* Elf Workshop Discounts: subtle mana-cost highlight */
.ability-cost.elf-workshop-discount {
    animation: elfWorkshopCostPulse 1.6s ease-in-out infinite;
}

.ability-cost.elf-workshop-discount::after {
    content: "-20%";
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #3498db;
    border: 1px solid #2980b9;
    color: #ffffff;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 4px;
    z-index: 4;
    transform: scale(0.95);
}

@keyframes elfWorkshopCostPulse {
    0% {
        box-shadow: 0 0 0 rgba(52, 152, 219, 0.0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 10px rgba(52, 152, 219, 0.55);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 rgba(52, 152, 219, 0.0);
        transform: scale(1);
    }
}

.ability-cooldown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 2;
    border-radius: 6px;
    cursor: not-allowed;
}

.ability-cooldown .ability-cooldown-label {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.ability-cooldown.rush-cooldown {
    --cooldown-progress: 1;
    --rush-cooldown-accent: rgba(102, 191, 255, 0.62);
    --rush-cooldown-accent-soft: rgba(102, 191, 255, 0.18);
    background:
        radial-gradient(circle at center, rgba(8, 14, 24, 0.56) 0 52%, rgba(8, 14, 24, 0.42) 53%, rgba(8, 14, 24, 0.08) 63%, rgba(8, 14, 24, 0.00) 66%),
        conic-gradient(from -90deg,
            var(--rush-cooldown-accent) 0 calc(var(--cooldown-progress, 1) * 100%),
            rgba(255, 255, 255, 0.07) calc(var(--cooldown-progress, 1) * 100%) 100%);
    border-radius: 50%;
    border: 1px solid rgba(156, 219, 255, 0.42);
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.34),
        0 0 8px rgba(82, 170, 255, 0.12);
    font-size: 13px;
    letter-spacing: 0.01em;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}

.ability-cooldown.rush-cooldown::after {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

/* Make parent ability non-interactive when on cooldown */
.ability:has(.ability-cooldown) {
    cursor: not-allowed;
    border-color: #555;
    filter: grayscale(40%);
}

.ability:has(.ability-cooldown):hover {
    border-color: #555;
    transform: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.ability-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    backface-visibility: visible;
}

/* Ability keybind indicator */
.ability-keybind {
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #f1c40f;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid #f1c40f;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

/* Highlight keybind on hover */
.ability:hover .ability-keybind {
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    border-color: #ffffff;
}

/* Status effects */
.status-effects {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 150px;
    z-index: 160;
}

.buffs {
    top: 10px;
    left: 10px;
}

.debuffs {
    bottom: 10px;
    right: 10px;
}

/* Status icon container - new parent element for better styling */
.status-icon-container {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    background-color: rgba(10, 10, 15, 0.8);
    transition: all 0.25s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.status-icon-container:hover {
    transform: translateY(-3px);
    z-index: 161;
}

/* Buff container specific styling */
.buff-container {
    border: 2px solid #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

.buff-container:hover {
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.8);
}

.buff-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), transparent 70%);
    pointer-events: none;
}

/* Debuff container specific styling */
.debuff-container {
    border: 2px solid #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
}

.debuff-container:hover {
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.8);
}

.debuff-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), transparent 70%);
    pointer-events: none;
}

/* Status icon styling */
.status-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    position: relative;
    transition: transform 0.2s ease;
    z-index: 2;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    backface-visibility: visible;
}

.status-icon:hover {
    transform: scale(1.1);
}

/* Old buff/debuff icon styles kept for backwards compatibility */
.buff-icon {
    filter: drop-shadow(0 0 2px rgba(46, 204, 113, 0.7));
}

.debuff-icon {
    filter: drop-shadow(0 0 2px rgba(231, 76, 60, 0.7));
}

/* Redesigned duration indicator */
.status-duration {
    position: absolute;
    bottom: -1px;
    right: -1px;
    min-width: 18px;
    height: 18px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    z-index: 3;
    padding: 0 4px;
    box-sizing: border-box;
}

/* Duration indicator specific to buff/debuff */
.buff-container .status-duration {
    border: 1px solid #2ecc71;
    background-color: rgba(10, 30, 20, 0.9);
    color: #56ff9d;
    text-shadow: 0 0 3px rgba(46, 204, 113, 0.7);
}

.debuff-container .status-duration {
    border: 1px solid #e74c3c;
    background-color: rgba(40, 10, 10, 0.9);
    color: #ff7b70;
    text-shadow: 0 0 3px rgba(231, 76, 60, 0.7);
}

/* Duration fade-in animation when turns change */
@keyframes durationPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.status-duration.updated {
    animation: durationPulse 0.5s ease;
}

/* Specific styling for status with 1 turn left */
.status-duration[data-turns="1"] {
    animation: durationPulse 1s infinite;
}

.buff-container .status-duration[data-turns="1"] {
    background-color: rgba(20, 40, 30, 0.95);
    font-weight: bold;
}

.debuff-container .status-duration[data-turns="1"] {
    background-color: rgba(50, 15, 15, 0.95);
    font-weight: bold;
}

/* Status effect tooltip */
.status-tooltip {
    position: absolute;
    background-color: rgba(20, 20, 35, 0.95);
    color: white;
    padding: 10px;
    border-radius: 6px;
    z-index: 1000;
    width: 220px;
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    font-size: 14px;
    transform: translateY(10px);
    scrollbar-width: thin;
    scrollbar-color: #555 rgba(0, 0, 0, 0.3);
}

.status-tooltip::-webkit-scrollbar {
    width: 6px;
}

.status-tooltip::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.status-tooltip::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}

.status-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.status-tooltip-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

.status-tooltip-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 4px;
}

.status-tooltip-name {
    font-size: 16px;
    font-weight: bold;
    flex-grow: 1;
}

.status-tooltip-turns {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid #555;
}

.status-tooltip-turns.last-turn {
    background-color: rgba(150, 30, 30, 0.8);
    color: #fff;
    border-color: #c33;
    font-weight: bold;
    animation: pulseTurn 1.5s infinite;
    padding: 3px 8px;
}

@keyframes pulseTurn {
    0% { box-shadow: 0 0 0 0 rgba(220, 50, 50, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(220, 50, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 50, 50, 0); }
}

.status-tooltip-description {
    font-size: 13px;
    line-height: 1.4;
    color: #ccc;
    margin-bottom: 8px;
}

.status-tooltip-source {
    font-size: 11px;
    font-style: italic;
    color: #999;
    padding-top: 5px;
    border-top: 1px dotted #555;
    margin-top: 5px;
}

.buff-tooltip .status-tooltip-name {
    color: #2ecc71;
}

.buff-tooltip .status-tooltip-turns {
    border-color: #2ecc71;
    color: #56ff9d;
}

.debuff-tooltip .status-tooltip-name {
    color: #e74c3c;
}

.debuff-tooltip .status-tooltip-turns {
    border-color: #e74c3c;
    color: #ff7b70;
}

.status-tooltip-description {
    font-size: 13px;
    line-height: 1.4;
    color: #ccc;
}

/* Style for the flower bomb disable debuff icon */

/* Style for a disabled ability */
.ability.disabled {
    filter: grayscale(100%);
    cursor: not-allowed;
    position: relative; /* Needed for the overlay */
}

.ability.disabled::after {
    content: '\1F6AB'; /* Or use a background image/icon font */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: rgba(255, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 2px;
    line-height: 1;
    pointer-events: none; /* Don't interfere with clicks */
}

.ability.disabled:hover {
    filter: grayscale(100%); /* Keep grayscale on hover */
    transform: none; /* Disable hover scaling */
}

/* Debuff-disabled ability (e.g. Cupid Charm): visually disabled but not permanent */
.ability.debuff-disabled,
.ability.locked-out {
    filter: grayscale(100%);
    cursor: not-allowed;
    position: relative;
}

.ability.debuff-disabled:hover,
.ability.locked-out:hover {
    filter: grayscale(100%);
    transform: none;
}

.ability .ability-icon.debuff-disabled-icon-state,
.ability img.debuff-disabled-icon-state,
.ability-button .ability-icon.debuff-disabled-icon-state,
.ability .ability-icon.locked-out-icon-state,
.ability img.locked-out-icon-state,
.ability-button .ability-icon.locked-out-icon-state {
    filter: grayscale(100%) saturate(0.35) brightness(0.55) contrast(1.12);
    transform: scale(0.94);
    border-radius: 7px;
    box-shadow: inset 0 0 0 2px rgba(165, 58, 45, 0.78), 0 0 9px rgba(129, 35, 30, 0.55);
    transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ability .disabled-ability-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: debuff-disabled-pulse 2s infinite;
}

.ability .disabled-ability-icon::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: var(--disabled-icon-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 5px rgba(255, 120, 200, 0.9));
    opacity: 0.9;
    transform: scale(1);
    animation: debuff-disabled-icon-pulse 2s infinite;
}

@keyframes debuff-disabled-pulse {
    0% { box-shadow: 0 0 5px 1px rgba(255, 120, 200, 0.35) inset; }
    50% { box-shadow: 0 0 10px 3px rgba(255, 120, 200, 0.55) inset; }
    100% { box-shadow: 0 0 5px 1px rgba(255, 120, 200, 0.35) inset; }
}

@keyframes debuff-disabled-icon-pulse {
    0% { transform: scale(0.95); opacity: 0.75; }
    50% { transform: scale(1.1); opacity: 0.95; }
    100% { transform: scale(0.95); opacity: 0.75; }
}

/* Flower Bomb VFX */
.flower-bomb-vfx {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    pointer-events: none;
    z-index: 100; /* Ensure it appears above character */
}

.effect-icon {
    width: 20px;
    height: 20px;
}

.effect-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Turn Counter (Top Left) */
.turn-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
}

.turn-counter-label {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.turn-count-value {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

/* Co-op Status (Top Right) */
.coop-status {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 110;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    letter-spacing: 0.2px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

/* Stickers: in-battle popup sticker above character cards */
.battle-sticker-pop {
    position: absolute;
    top: -18px;
    left: 50%;
    width: 110px;
    height: 110px;
    transform: translate(-50%, -100%) scale(0.65);
    z-index: 2700;
    pointer-events: none;
    animation: battleStickerPopIn 220ms ease-out forwards;
}

.battle-sticker-pop-fixed {
    position: fixed !important;
    z-index: 2147483000 !important;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -108%) scale(0.88);
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.battle-container .battle-sticker-pop-scaled {
    position: absolute !important;
    z-index: 4200 !important;
    width: 190px;
    height: 190px;
    transform: translate(-50%, -108%) scale(0.88);
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.battle-sticker-pop-on-image {
    position: absolute !important;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%) scale(0.88);
    z-index: 4300 !important;
}

.battle-sticker-pop-global-left {
    position: absolute !important;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%) scale(0.88);
    z-index: 4300 !important;
}

.battle-sticker-pop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    animation: stickerImageIn 220ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.battle-sticker-pop.fade-out {
    animation: battleStickerPopOut 200ms ease-in forwards;
}

.battle-sticker-pop.fade-out img {
    animation: stickerImageOut 180ms ease-in forwards;
}

@keyframes battleStickerPopIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes battleStickerPopOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes stickerImageIn {
    0% { transform: scale(0.6) rotate(-4deg); opacity: 0; }
    70% { transform: scale(1.08) rotate(1deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes stickerImageOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.84); opacity: 0; }
}

/* Global sticker wheel (hold T when no character is selected) */
.global-sticker-wheel {
    position: fixed;
    left: 50%;
    bottom: 96px;
    width: 280px;
    height: 280px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 56%, rgba(0, 0, 0, 0.18) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 4100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.global-sticker-wheel.visible {
    opacity: 1;
    visibility: visible;
}

.global-sticker-wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.1);
}

.global-sticker-wheel-item {
    position: absolute;
    width: 66px;
    height: 66px;
    margin-left: -33px;
    margin-top: -33px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 15, 20, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transform: scale(1);
    transition: transform 100ms ease, border-color 100ms ease;
}

.global-sticker-wheel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.global-sticker-wheel-item.selected {
    transform: scale(1.15);
    border-color: rgba(255, 245, 180, 0.95);
}

/* Kill Count Display (Top Right - Draft/Tournament Mode Only) */
.kill-count-display {
    position: absolute;
    top: 20px;
    right: 20px;
    display: none; /* visible by default, shown only in draft/tournament mode */
    background-color: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 12px 20px;
    border-radius: 8px;
    border: 2px solid #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    gap: 16px;
    transition: all 0.3s ease;
}

/* Mid Kill Score (Center - Draft/Ranked Only) */
.mid-kill-score {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    z-index: 95;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.mid-kill-team {
    font-size: 26px;
    font-weight: 800;
    min-width: 24px;
    text-align: center;
    line-height: 1;
}

.mid-kill-vs {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Existing colors used elsewhere in this stylesheet */
.mid-kill-player { color: #4a90e2; }
.mid-kill-ai { color: #e74c3c; }

.kill-count-display:hover {
    background-color: rgba(240, 240, 240, 0.95);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.kill-count-section {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

.kill-count-section.player-kills {
    color: #000;
}

.kill-count-section.ai-kills {
    color: #000;
}

.kill-count-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kill-count-value {
    font-size: 18px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.kill-count-separator {
    font-size: 14px;
    opacity: 0.5;
    margin: 0 2px;
}

.kill-count-target {
    font-size: 14px;
    opacity: 0.6;
}

.kill-count-divider {
    width: 1px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.2);
}

/* Close to victory animation */
.kill-count-section.close-to-victory .kill-count-value {
    animation: killCountPulse 1.5s ease-in-out infinite;
}

@keyframes killCountPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Battle log */
.battle-log-container {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 350px; /* Increased width */
    height: 300px; /* Start with fully open height */
    background-color: rgba(15, 15, 20, 0.92); /* Slightly more opaque */
    border-radius: 10px;
    border: 1px solid #444;
    overflow: hidden;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* Enhanced shadow */
    display: flex;
    flex-direction: column;
    user-select: none; /* Prevent text selection during dragging */
    /* Force visibility - prevent any hiding */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.battle-log-container:hover {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
}

.battle-log-header {
    padding: 8px 12px;
    background-color: rgba(30, 35, 50, 0.9); /* Darker, more contrasty header */
    border-bottom: 1px solid #555;
    font-weight: bold;
    font-size: 14px;
    color: #fff; /* Brighter text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}

.battle-log-drag-handle {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    cursor: grab;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.battle-log-drag-handle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.battle-log-drag-handle:hover .battle-log-title::after {
    content: " \22EE\22EE";
    opacity: 0.6;
    font-size: 12px;
    margin-left: 5px;
}

.battle-log-drag-handle:active {
    cursor: grabbing;
    background-color: rgba(255, 255, 255, 0.15);
}

.battle-log-title {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    user-select: none;
}

.battle-log-controls {
    display: flex;
    gap: 8px;
}

.log-button {
    background: rgba(60, 70, 90, 0.6);
    border: none;
    color: #fff;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.log-button:hover {
    background: rgba(80, 90, 120, 0.8);
}

.battle-log-header.flash {
    animation: header-flash 0.5s ease;
}

@keyframes header-flash {
    0%, 100% { background-color: rgba(30, 35, 50, 0.9); }
    50% { background-color: rgba(60, 70, 120, 0.95); }
}

.battle-log-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible; /* Prevent horizontal scrolling */
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: #555 rgba(0, 0, 0, 0.2);
}

.battle-log-content::-webkit-scrollbar {
    width: 6px;
}

.battle-log-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.battle-log-content::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}

/* For toggling battle log size */
.battle-log-container.collapsed {
    height: 180px;
}

/* Show log button (when battle log is closed) */
.show-log-button {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9), rgba(60, 70, 90, 0.9));
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.show-log-button:hover {
    background: linear-gradient(135deg, rgba(60, 70, 90, 0.95), rgba(80, 90, 120, 0.95));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

.show-log-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.battle-log {
    font-size: 13px;
    color: #eee; /* Brighter text */
    padding: 0 14px;
    /* Ensure log content is visible */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    min-height: 50px; /* Ensure minimum height */
}

.log-entry {
    margin-bottom: 9px;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: rgba(40, 45, 55, 0.85); /* Much more visible background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    transition: all 0.2s ease;
    border-left: 4px solid #555; /* Visible left border */
    /* color: #ffffff !important;  Force white text */
    font-size: 12px;
    line-height: 1.4;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.log-entry:hover {
    background-color: rgba(40, 40, 60, 0.7);
    margin-left: 3px;
}

.log-entry:last-child {
    position: relative;
}

.log-entry:last-child::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.player-turn {
    color: #4da6ff;
    border-left: 3px solid #4da6ff;
}


.enemy-turn {
    color: #ff5e57;
    border-left: 3px solid #ff5e57;
}

.enemy-turn::before {
    content: "\1F47F ";
}

.system {
    color: #ffbb33;
    font-weight: bold;
    border-left: 3px solid #ffbb33;
}

.system::before {
    content: "\1F4D8 ";
}

.system-update {
    color: #00ffff;
    font-weight: bold;
    border-left: 3px solid #00ffff;
    animation: pulseHighlight 2s ease-in-out;
}

.system-update::before {
    content: "\2699\FE0F ";
}

@keyframes pulseHighlight {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(0, 255, 255, 0.1); }
}

.critical {
    color: #ff5252;
    font-weight: bold;
    border-left: 3px solid #ff5252;
}

.critical::before {
    content: "\1F4A5 ";
}

.heal {
    color: #5aff5a;
    border-left: 3px solid #5aff5a;
}

.heal::before {
    content: "\1F49A ";
}

/* Splash-specific log styles (no heart) */
.log-entry.splash-heal { color:#58cfff; border-left:3px solid #58cfff; background:rgba(80,180,255,0.08); }
.log-entry.splash-heal::before { content:""; }
.log-entry.splash-damage { color:#2aa1ff; border-left:3px solid #2aa1ff; background:rgba(60,150,255,0.04); }
.log-entry.splash-damage::before { content:""; }

.stage-modifier {
    color: #ff9800;
    font-weight: bold;
    border-left: 3px solid #ff9800;
    background-color: rgba(255, 152, 0, 0.1);
}

.stage-modifier::before {
    content: "\26A1 ";
}

/* Loading screen */
.loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-text {
    font-size: 24px;
    margin-top: 20px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.loader {
    border: 5px solid #444;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Game over screen */
.game-over-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.game-over-container.active {
    opacity: 1;
    pointer-events: all;
}

.game-over-content {
    background-color: rgba(20, 20, 20, 0.9);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    border: 1px solid #555;
    max-width: 500px;
    width: 90%;
}

.game-over-title {
    font-size: 32px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.victory {
    color: #2ecc71;
}

.defeat {
    color: #e74c3c;
}

.game-over-message {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.game-over-button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.game-over-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Tooltip */
.tooltip {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #555;
    z-index: 200000;
    width: 300px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tooltip.visible {
    opacity: 1;
}

.tooltip-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #3498db;
}

.tooltip-description {
    font-size: 12px;
    line-height: 1.4;
}

/* Context Menu Styles */
.context-menu {
    position: absolute;
    background-color: rgba(30, 30, 40, 0.95); /* Dark semi-transparent background */
    color: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #555; /* Subtle border */
    z-index: 1001; /* Ensure it's above most elements */
    width: 200px; /* Adjusted width */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Soft shadow */
    opacity: 0; /* Start visible */
    transform: scale(0.95); /* Start slightly smaller */
    transform-origin: top left; /* Scale from top-left */
    transition: opacity 0.15s ease, transform 0.15s ease; /* Smooth transition */
    pointer-events: none; /* Initially not interactable */
}

.context-menu.visible {
    opacity: 1; /* Fully visible */
    transform: scale(1); /* Normal size */
    pointer-events: auto; /* Allow interaction when visible */
}

.context-menu-item {
    padding: 8px 12px; /* Increased padding */
    cursor: pointer;
    border-radius: 3px;
    margin-bottom: 3px; /* Slightly more spacing */
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 14px; /* Ensure readability */
}

.context-menu-item:hover {
    background-color: rgba(80, 90, 120, 0.8); /* Highlight on hover */
}

.context-menu-item:active {
    background-color: rgba(60, 70, 100, 0.8); /* Slightly darker on click */
}

.context-menu-item-icon {
    margin-right: 10px; /* More space for icon */
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8; /* Slightly faded icon */
}

.context-menu-divider {
    height: 1px;
    background-color: #555;
    margin: 6px 0; /* Adjusted margins */
}

/* Responsive design */
@media (max-width: 768px) {
    .battle-log-container {
        width: 280px;
        height: 180px;
        right: 10px;
        bottom: 10px;
    }
    
    .battle-log-header {
        padding: 6px 8px;
        font-size: 13px;
    }

    .battle-log-drag-handle {
        padding: 2px 4px;
    }

    .battle-log-title {
        font-size: 13px;
    }
    
    .battle-log {
        font-size: 12px;
    }

    .show-log-button {
        right: 10px;
        bottom: 10px;
        padding: 8px 12px;
        font-size: 11px;
    }
    
    .log-entry {
        padding: 4px 6px;
        margin-bottom: 6px;
    }
    
    .character-slot {
        width: 150px;
    }
    
    .character-image, .image-container, .character-info {
        width: 135px;
    }
    
    .character-image, .image-container {
        height: 135px;
    }
    
    .ability {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .top-section, .bottom-section {
        padding: 10px;
    }
    
    .battle-log-container {
        width: 220px;
        height: 150px;
        right: 5px;
        bottom: 5px;
    }
    
    .battle-log-container:hover {
        height: 220px;
    }
    
    .battle-log-header {
        padding: 4px 6px;
        font-size: 12px;
    }

    .battle-log-drag-handle {
        padding: 1px 2px;
    }

    .battle-log-title {
        font-size: 12px;
    }
    
    .battle-log {
        font-size: 11px;
        padding: 0 8px;
    }

    .show-log-button {
        right: 5px;
        bottom: 5px;
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .log-entry {
        padding: 3px 5px;
        margin-bottom: 5px;
    }
    
    .character-slot {
        width: 120px;
    }
    
    .character-image, .image-container, .character-info {
        width: 105px;
    }
    
    .character-image, .image-container {
        height: 105px;
    }
    
    .ability {
        width: 24px;
        height: 24px;
    }
    
    .character-name {
        font-size: 12px;
    }
    
    .middle-section {
        height: 50px;
    }
    
    .turn-counter, #battle-phase {
        font-size: 14px;
    }
}

/* Message grouping */
.log-entry.player-turn + .log-entry.player-turn,
.log-entry.enemy-turn + .log-entry.enemy-turn {
    border-top: none;
    margin-top: -6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.log-entry.player-turn:not(:first-child):not(:has(+ .log-entry.player-turn)),
.log-entry.enemy-turn:not(:first-child):not(:has(+ .log-entry.enemy-turn)) {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-bottom: 10px;
}

/* Timestamp for log entries */
.battle-log-timestamp {
    font-size: 0.8em;
    color: #ccc !important;
    position: absolute;
    right: 8px;
    top: 2px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
}

/* Ensure log message text is visible */
.log-entry, .log-entry * {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    visibility: visible !important;
    opacity: 1 !important;
}

.log-entry .log-message {
    display: inline-block !important;
    color: #ffffff !important;
    font-weight: normal;
    margin-right: 60px; /* Space for timestamp */
}

.character-slot.acted {
    position: relative;

}

.character-slot.acted::before {
    content: "\2713 ACTED";
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #27ae60;
    color: white;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
    z-index: 99999;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 14px rgba(39, 174, 96, 0.55);
}

.character-slot.acted .abilities .ability {
    opacity: 0.5;
    cursor: not-allowed;
}


/* AI planning indicator */
.ai-character.planning {
    position: relative;
    animation: aiPlanning 1.2s infinite;
}

/* Acting indicator (player or AI): blinking red border so it's obvious who is acting */
.character-slot.is-acting {
    position: relative;
    border-color: #00b7ff;
    animation: characterActingBlink 0.35s infinite;
}

@keyframes characterActingBlink {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 183, 255, 0.0), 0 0 0 rgba(0, 183, 255, 0.0);
        outline: 0 solid rgba(0, 183, 255, 0.0);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(0, 183, 255, 1), 0 0 30px rgba(0, 183, 255, 0.95);
        outline: 3px solid rgba(0, 183, 255, 0.95);
        outline-offset: 0;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 183, 255, 0.0), 0 0 0 rgba(0, 183, 255, 0.0);
        outline: 0 solid rgba(0, 183, 255, 0.0);
    }
}

.ai-character.planning::before {
    content: "...";
    position: absolute;
    top: 6px;
    right: 8px;
    left: auto;
    transform: none;
    background-color: #f39c12;
    color: white;
    width: 30px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 50;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

@keyframes aiPlanning {
    0% { border-color: #333; }
    50% { border-color: #f39c12; }
    100% { border-color: #333; }
}

/* Planning phase overlay */
.planning-phase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.planning-phase-overlay.active {
    opacity: 1;
}

.planning-phase-content {
    background-color: rgba(20, 20, 20, 0.9);
    padding: 20px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.planning-phase-title {
    font-size: 24px;
    margin-bottom: 10px;
    color: #f39c12;
}

/* End Turn Button (Middle Left) */
.end-turn-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.95);
    color: #fff;
    font-weight: bold;
    padding: 16px 28px;
    border: 2px solid #fff;
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
    font-size: 16px;
    z-index: 100;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.end-turn-button:hover {
    background-color: rgba(20, 20, 20, 0.98);
    padding-right: 32px;
    box-shadow: 6px 0 16px rgba(0, 0, 0, 0.7);
}

.end-turn-button:disabled {
    background-color: rgba(64, 64, 64, 0.7);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Damage and healing animations */
@keyframes shake {
    0%, 100% { margin-left: 0; }
    10%, 30%, 50%, 70%, 90% { margin-left: -5px; }
    20%, 40%, 60%, 80% { margin-left: 5px; }
}

.shake-animation {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Damage VFX */
.damage-vfx {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e74c3c;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
    z-index: 100;
    animation: card-damage-float 2.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
    pointer-events: none;
}

.damage-vfx.critical {
    color: #e67e22;
    font-size: 32px;
    text-shadow: 0 0 10px #e67e22, 2px 2px 3px rgba(0, 0, 0, 0.8);
    animation-duration: 2.6s;
}

@keyframes card-damage-float {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%) scale(0.86);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
    }
    22% {
        opacity: 1;
        transform: translate(-50%, -54%) scale(1.04);
    }
    78% {
        opacity: 1;
        transform: translate(-50%, -84%) scale(1.0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -112%) scale(0.96);
    }
}

/* Blood VFX */
.blood-vfx {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(ellipse at center, rgba(231, 76, 60, 0.6) 0%, rgba(231, 76, 60, 0) 70%);
    z-index: 90;
    pointer-events: none;
    animation: fadeOut 0.8s ease-out forwards;
}

/* Magic damage VFX */
.magic-vfx {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.6) 0%, rgba(155, 89, 182, 0) 70%);
    z-index: 90;
    pointer-events: none;
    animation: magicPulse 0.8s ease-out forwards;
}

@keyframes magicPulse {
    0% { 
        opacity: 0.8; 
        background-size: 50% 50%;
    }
    100% { 
        opacity: 0; 
        background-size: 200% 200%;
    }
}

/* Heal VFX */
.heal-vfx {
    position: absolute;
    color: #4CAF50; /* Standard green */
    font-size: 20px;
    font-weight: bold;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 5px rgba(105, 240, 174, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.6);
    animation: card-heal-float 2.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
    white-space: nowrap;
    z-index: 105; /* Ensure it's above other elements */
}

.heal-vfx.critical {
    color: #FFD700; /* Gold color for critical heal */
    font-size: 24px; /* Slightly larger */
    text-shadow: 0 0 8px #FFFACD, 0 0 12px #FFEC8B, 1px 1px 3px rgba(0, 0, 0, 0.7);
    animation: card-crit-heal-float 2.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.heal-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
}

.heal-particles::before,
.heal-particles::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    border-radius: 50%;
    box-shadow: 0 0 6px #69F0AE;
    animation: healing-particle-flow 1.5s infinite linear;
    opacity: 0;
}

.heal-particles.critical::before,
.heal-particles.critical::after {
    background-color: #FFD700; /* Gold particles for crit */
    box-shadow: 0 0 8px #FFFACD, 0 0 12px #FFEC8B;
    width: 10px; /* Slightly larger particles */
    height: 10px;
    animation-duration: 1.8s; /* Match animation duration */
}

.heal-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.heal-particles::after {
    top: 70%;
    left: 80%;
    animation-delay: 0.5s;
}

@keyframes card-heal-float {
    0% {
        transform: translate(-50%, -40%) scale(0.86);
        opacity: 0;
    }
    12% {
        transform: translate(-50%, -50%) scale(1.16);
        opacity: 1;
    }
    22% {
        transform: translate(-50%, -54%) scale(1.03);
        opacity: 1;
    }
    78% {
        transform: translate(-50%, -84%) scale(1.0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -110%) scale(0.96);
        opacity: 0;
    }
}

@keyframes crit-heal-float {
    0% { 
        transform: translate(-50%, -50%) scale(0.9); 
        opacity: 0;
    }
    10% { 
        transform: translate(-50%, -50%) scale(1.4) rotate(-5deg); 
        opacity: 1;
    }
    90% { 
        transform: translate(-50%, -90%) scale(1.1) rotate(5deg); 
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -100%) scale(0.9); 
        opacity: 0;
    }
}

@keyframes healing-particle-flow {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translateY(-10px) scale(1);
        opacity: 0.8;
    }
    80% {
        transform: translateY(-40px) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-50px) scale(0.5);
        opacity: 0;
    }
}

/* Add new log entry style */
.log-entry.critical-heal {
    color: #FFEC8B; /* Lighter gold for text */
    font-weight: bold;
    background-color: rgba(255, 215, 0, 0.1); /* Faint gold background */
    border-left: 3px solid #FFD700;
}

.log-entry.critical-heal::before {
    content: '\2728';
    margin-right: 5px;
    color: #FFD700;
}

/* Armor and Shield Reduction Log Entries */
.log-entry.armor-reduction {
    color: #FFA500;
    border-left: 3px solid #FFA500;
    background-color: rgba(255, 165, 0, 0.1);
}

.log-entry.armor-reduction::before {
    content: '\1F6E1\FE0F';
    margin-right: 5px;
}

.log-entry.shield-reduction {
    color: #4169E1;
    border-left: 3px solid #4169E1;
    background-color: rgba(65, 105, 225, 0.1);
}

.log-entry.shield-reduction::before {
    content: '\2728';
    margin-right: 5px;
}

/* Primal Fury (W Buff) Active VFX */
.image-container.primal-fury-active {
    animation: primalFuryPulse 1.5s infinite alternate;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff3300;
}

.burning-ground-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.burning-ground-vfx {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255,50,0,0.4) 0%, rgba(255,80,0,0.1) 70%, rgba(255,0,0,0) 100%);
}

.ember {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    background-color: rgba(255, 165, 0, 0.8);
    border-radius: 50%;
    animation: ember-float linear;
    z-index: 6;
    box-shadow: 0 0 3px 1px rgba(255, 60, 0, 0.5);
}

@keyframes ember-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Stage Modifiers Styles - Redesigned */
/* (Deduped) Full Stage Modifiers UI styling exists later in this file. */

/* Hide legacy floating buttons now replaced by quick bar - only in raid game context */
.raid-game-context #quest-panel-toggle,
.raid-game-context #show-talents-button,
.raid-game-context #show-log-button,
.raid-game-context #show-statistics-button {
    display: none !important;
}

/* Audio Controls - visible by default */
.audio-control {
    display: none;
}

.audio-control.show {
    display: block;
}

.character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    backface-visibility: visible;
    /* Enhanced support for skin images with 9:16 aspect ratio */
    transition: opacity 0.3s ease;
}

/* Remove hover effect for character images */
.character-slot:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

/* Character info */
.character-info {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    padding: 5px;
    overflow: visible;
}

/* Hide character name - per requirements */
.character-name {
    display: none;
}

/* Resource bars */
.bar-container {
    height: 24px;
    background-color: #222;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid #444;
    transition: all 0.3s ease;
}

/* HP Bar Animations */
.bar-container.hp-damage {
    animation: hpDamageShake 0.6s ease-out;
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.8), inset 0 0 10px rgba(255, 0, 0, 0.3);
}

.bar-container.hp-critical-damage {
    animation: hpCriticalDamage 1s ease-out;
    box-shadow: 0 0 25px rgba(255, 0, 0, 1), inset 0 0 15px rgba(255, 50, 50, 0.5);
}

.bar-container.hp-healing {
    animation: hpHealingGlow 1s ease-out;
    box-shadow: 0 0 20px rgba(50, 255, 100, 0.8), inset 0 0 10px rgba(100, 255, 150, 0.3);
}

.bar-container.hp-critical-healing {
    animation: hpCriticalHealing 1.5s ease-out;
    box-shadow: 0 0 30px rgba(100, 255, 200, 1), inset 0 0 20px rgba(150, 255, 200, 0.5);
}

.bar-container.hp-low {
    animation: hpLowWarning 2s infinite;
    border-color: #ff4444;
}

.bar-container.hp-very-low {
    animation: hpCriticalWarning 1s infinite;
    border-color: #ff0000;
}

/* Mana Bar Animations */
.bar-container.mana-drain {
    animation: manaDrain 0.8s ease-out;
    box-shadow: 0 0 15px rgba(100, 150, 255, 0.6);
}

.bar-container.mana-restore {
    animation: manaRestore 1s ease-out;
    box-shadow: 0 0 20px rgba(150, 200, 255, 0.8);
}

.bar-container.mana-empty {
    animation: manaEmpty 2s infinite;
    border-color: #6666ff;
}

/* Resource bar text overlay - positioned absolutely to always be visible */
.bar-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 12px;
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.bar-text.damage-text {
    animation: damageTextEffect 1.35s ease-out;
    color: #ffcccc;
    text-shadow: 0 0 8px rgba(255, 100, 100, 0.8);
}

.bar-text.healing-text {
    animation: healingTextEffect 1.55s ease-out;
    color: #ccffcc;
    text-shadow: 0 0 8px rgba(100, 255, 100, 0.8);
}

/* Shield bar overlay for HP bar */
.shield-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #C0C0C0 0%, #E0E0E0 50%, #C0C0C0 100%);
    border-radius: 3px;
    z-index: 2;
    opacity: 0.9;
    transition: width 0.3s ease, opacity 0.3s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    display: none; /* visible by default, shown when character has shield */
    transform-origin: right; /* Ensure scaling happens from the right */
}

.shield-bar.shield-damaged {
    animation: shieldHit 0.5s ease-out, shieldShimmer 3s infinite;
}

.shield-bar.shield-broken {
    animation: shieldBreak 1s ease-out forwards;
}

.shield-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%), 
                linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.1) 75%), 
                linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    animation: shield-pattern 2s linear infinite;
    pointer-events: none;
}

@keyframes shield-pattern {
    0% { background-position: 0 0, 0 4px, 4px -4px, -4px 0px; }
    100% { background-position: 8px 0, 8px 4px, 12px -4px, 4px 0px; }
}

.hp-bar {
    height: 100%;
    background: linear-gradient(to right, #c0392b, #e74c3c);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    z-index: 2; /* Ensure HP bar is above shield bar */
    overflow: hidden;
}

.hp-bar.hp-regenerating {
    animation: hpRegen 2s infinite;
}

.hp-bar.hp-draining {
    animation: hpDrain 1s ease-out;
}

.hp-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 85%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 35%, rgba(255,255,255,0.12) 0 3px, transparent 4px),
        radial-gradient(circle at 40% 65%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
        linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    background-size: 40px 100%, 55px 100%, 65px 100%, 100% 100%;
    background-position: 0 8px, 0 12px, 0 6px, 0 0;
    animation: barBubbles 3.8s linear infinite;
    pointer-events: none;
}

.hp-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: none;
    pointer-events: none;
}

.hp-bar.hp-healing::after {
    animation: healingWave 1s ease-out;
}

.mana-bar {
    height: 100%;
    background: linear-gradient(to right, #1a5276, #3498db);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mana-bar.mana-casting {
    animation: manaCasting 0.5s ease-out;
}

.mana-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 25% 85%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 40%, rgba(255,255,255,0.12) 0 3px, transparent 4px),
        radial-gradient(circle at 45% 65%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
        linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    background-size: 40px 100%, 55px 100%, 65px 100%, 100% 100%;
    background-position: 0 8px, 0 12px, 0 6px, 0 0;
    animation: barBubbles 3.8s linear infinite;
    pointer-events: none;
}

.mana-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(100,200,255,0.6), transparent);
    animation: none;
    pointer-events: none;
}

.mana-bar.mana-restoring::after {
    animation: manaWave 1s ease-out;
}

.energy-bar {
    height: 100%;
    background: linear-gradient(to right, #f1c40f, #ffeb3b);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}
.energy-bar.energy-casting {
    animation: energyCasting 0.5s ease-out;
}
.energy-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    pointer-events: none;
}
.energy-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,235,59,0.8), transparent);
    animation: none;
    pointer-events: none;
}
.energy-bar.energy-restoring::after {
    animation: energyWave 1s ease-out;
}

/* Animation Keyframes */
@keyframes hpDamageShake {
    0%, 100% { margin-left: 0; }
    10%, 30%, 50%, 70%, 90% { margin-left: -2px; }
    20%, 40%, 60%, 80% { margin-left: 2px; }
}

@keyframes hpCriticalDamage {
    0% { transform: scale(1) rotate(0deg); }
    15% { transform: scale(1.05) rotate(-1deg); }
    30% { transform: scale(0.98) rotate(1deg); }
    45% { transform: scale(1.02) rotate(-0.5deg); }
    60% { transform: scale(0.99) rotate(0.5deg); }
    75% { transform: scale(1.01) rotate(-0.2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes hpHealingGlow {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes hpCriticalHealing {
    0% { transform: scale(1); }
    25% { transform: scale(1.05); }
    50% { transform: scale(1.02); }
    75% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes hpLowWarning {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 68, 68, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 68, 68, 0.9); }
}

@keyframes hpCriticalWarning {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
        border-color: #ff0000;
    }
    50% { 
        box-shadow: 0 0 25px rgba(255, 0, 0, 1);
        border-color: #ff4444;
    }
}

@keyframes manaDrain {
    0% { filter: brightness(1); }
    50% { filter: brightness(0.7); }
    100% { filter: brightness(1); }
}

@keyframes manaRestore {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes manaEmpty {
    0%, 100% { box-shadow: 0 0 5px rgba(102, 102, 255, 0.5); }
    50% { box-shadow: 0 0 15px rgba(102, 102, 255, 0.9); }
}

@keyframes hpRegen {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

@keyframes hpDrain {
    0% { filter: brightness(1) hue-rotate(0deg); }
    50% { filter: brightness(0.8) hue-rotate(10deg); }
    100% { filter: brightness(1) hue-rotate(0deg); }
}

@keyframes manaCasting {
    0% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.2) saturate(1.3); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes healingWave {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes manaWave {
    0% { left: -100%; }
    100% { left: 100%; }
}
@keyframes energyCasting {
    0% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.2) saturate(1.3); }
    100% { filter: brightness(1) saturate(1); }
}
@keyframes energyWave {
    0% { left: -100%; }
    100% { left: 100%; }
}
@keyframes energyDrain {
    0% { filter: brightness(1); }
    50% { filter: brightness(0.7); }
    100% { filter: brightness(1); }
}
@keyframes energyRestore {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.02); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}
@keyframes energyEmpty {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 235, 59, 0.6); }
    50% { box-shadow: 0 0 15px rgba(255, 235, 59, 1.0); }
}

@keyframes shieldShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

@keyframes shieldHit {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(0.95); filter: brightness(1.5); }
    50% { transform: scale(1.05); filter: brightness(0.8); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes shieldBreak {
    0% { 
        opacity: 1; 
        transform: scale(1);
    }
    25% {
        opacity: 0.8;
        transform: scale(1.1);
        filter: brightness(2);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9);
        filter: brightness(0.5);
    }
    75% {
        opacity: 0.2;
        transform: scale(1.05);
        filter: blur(1px);
    }
    100% { 
        opacity: 0; 
        transform: scale(0.8);
        filter: blur(2px);
    }
}

@keyframes damageTextEffect {
    0% {
        transform: translateY(6px) scale(0.92);
        color: white;
        opacity: 0.6;
    }
    18% {
        transform: translateY(0px) scale(1.12);
        color: #ff8888;
        opacity: 1;
    }
    35% {
        transform: translateY(-2px) scale(1.02);
        color: #ffaaaa;
        opacity: 1;
    }
    100% {
        transform: translateY(0px) scale(1);
        color: white;
        opacity: 1;
    }
}

@keyframes healingTextEffect {
    0% {
        transform: translateY(6px) scale(0.92);
        color: white;
        opacity: 0.6;
    }
    18% {
        transform: translateY(0px) scale(1.12);
        color: #88ff88;
        opacity: 1;
    }
    35% {
        transform: translateY(-2px) scale(1.02);
        color: #aaffaa;
        opacity: 1;
    }
    100% {
        transform: translateY(0px) scale(1);
        color: white;
        opacity: 1;
    }
}

/* Particle effects for HP changes */
.hp-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.hp-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
}

.hp-particle.damage {
    background: radial-gradient(circle, #ff4444, #cc0000);
    animation: damageParticle 1s ease-out forwards;
}

.hp-particle.healing {
    background: radial-gradient(circle, #44ff44, #00cc00);
    animation: healingParticle 1s ease-out forwards;
}

@keyframes damageParticle {
    0% {
        opacity: 1;
        transform: scale(0) translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: scale(1) translate(var(--random-x, 0), var(--random-y, 0));
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translate(calc(var(--random-x, 0) * 2), calc(var(--random-y, 0) * 2));
    }
}

@keyframes healingParticle {
    0% {
        opacity: 0;
        transform: scale(0) translate(0, 20px);
    }
    20% {
        opacity: 1;
        transform: scale(1) translate(var(--random-x, 0), 0);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translate(var(--random-x, 0), -30px);
    }
}

/* Screen shake effect for critical damage - DISABLED to prevent resolution issues */
/* @keyframes screenShake { 0%, 100% { margin-left: 0; } 10%, 30%, 50%, 70%, 90% { margin-left: -3px; } 20%, 40%, 60%, 80% { margin-left: 3px; } } */

/* Abilities */
.abilities {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 5px;
}

.ability {
    width: 50px;
    height: 50px;
    background-color: #222;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #555;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.ability:hover {
    border-color: #f39c12;
    transform: scale(1.05);
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.6);
}

.ability.selected {
    border-color: #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.7);
    transform: scale(1.05);
    animation: selectedAbility 1.5s infinite alternate;
}

@keyframes selectedAbility {
    0% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.4); }
    100% { box-shadow: 0 0 15px rgba(231, 76, 60, 0.9); }
}

.ability-cost {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background-color: #3498db;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    border: 1px solid #2980b9;
    z-index: 3;
}

.ability-cooldown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 2;
    border-radius: 6px;
    cursor: not-allowed;
}

.ability-cooldown .ability-cooldown-label {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.ability-cooldown.rush-cooldown {
    --cooldown-progress: 1;
    --rush-cooldown-accent: rgba(102, 191, 255, 0.62);
    --rush-cooldown-accent-soft: rgba(102, 191, 255, 0.18);
    background:
        radial-gradient(circle at center, rgba(8, 14, 24, 0.56) 0 52%, rgba(8, 14, 24, 0.42) 53%, rgba(8, 14, 24, 0.08) 63%, rgba(8, 14, 24, 0.00) 66%),
        conic-gradient(from -90deg,
            var(--rush-cooldown-accent) 0 calc(var(--cooldown-progress, 1) * 100%),
            rgba(255, 255, 255, 0.07) calc(var(--cooldown-progress, 1) * 100%) 100%);
    border-radius: 50%;
    border: 1px solid rgba(156, 219, 255, 0.42);
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.34),
        0 0 8px rgba(82, 170, 255, 0.12);
    font-size: 13px;
    letter-spacing: 0.01em;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}

.ability-cooldown.rush-cooldown::after {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

/* Make parent ability non-interactive when on cooldown */
.ability:has(.ability-cooldown) {
    cursor: not-allowed;
    border-color: #555;
    filter: grayscale(40%);
}

.ability:has(.ability-cooldown):hover {
    border-color: #555;
    transform: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.ability-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    backface-visibility: visible;
}

/* Ability keybind indicator */
.ability-keybind {
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #f1c40f;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid #f1c40f;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

/* Highlight keybind on hover */
.ability:hover .ability-keybind {
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    border-color: #ffffff;
}

/* Status effects */
.status-effects {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 150px;
    z-index: 160;
}

.buffs {
    top: 10px;
    left: 10px;
}

.debuffs {
    bottom: 10px;
    right: 10px;
}

/* Status icon container - new parent element for better styling */
.status-icon-container {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    background-color: rgba(10, 10, 15, 0.8);
    transition: all 0.25s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.status-icon-container:hover {
    transform: translateY(-3px);
    z-index: 161;
}

/* Buff container specific styling */
.buff-container {
    border: 2px solid #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

.buff-container:hover {
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.8);
}

.buff-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), transparent 70%);
    pointer-events: none;
}

/* Debuff container specific styling */
.debuff-container {
    border: 2px solid #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
}

.debuff-container:hover {
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.8);
}

.debuff-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), transparent 70%);
    pointer-events: none;
}

/* Status icon styling */
.status-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    position: relative;
    transition: transform 0.2s ease;
    z-index: 2;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    backface-visibility: visible;
}

.status-icon:hover {
    transform: scale(1.1);
}

/* Old buff/debuff icon styles kept for backwards compatibility */
.buff-icon {
    filter: drop-shadow(0 0 2px rgba(46, 204, 113, 0.7));
}

.debuff-icon {
    filter: drop-shadow(0 0 2px rgba(231, 76, 60, 0.7));
}

/* Redesigned duration indicator */
.status-duration {
    position: absolute;
    bottom: -1px;
    right: -1px;
    min-width: 18px;
    height: 18px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    z-index: 3;
    padding: 0 4px;
    box-sizing: border-box;
}

/* Duration indicator specific to buff/debuff */
.buff-container .status-duration {
    border: 1px solid #2ecc71;
    background-color: rgba(10, 30, 20, 0.9);
    color: #56ff9d;
    text-shadow: 0 0 3px rgba(46, 204, 113, 0.7);
}

.debuff-container .status-duration {
    border: 1px solid #e74c3c;
    background-color: rgba(40, 10, 10, 0.9);
    color: #ff7b70;
    text-shadow: 0 0 3px rgba(231, 76, 60, 0.7);
}

/* Duration fade-in animation when turns change */
@keyframes durationPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.status-duration.updated {
    animation: durationPulse 0.5s ease;
}

/* Specific styling for status with 1 turn left */
.status-duration[data-turns="1"] {
    animation: durationPulse 1s infinite;
}

.buff-container .status-duration[data-turns="1"] {
    background-color: rgba(20, 40, 30, 0.95);
    font-weight: bold;
}

.debuff-container .status-duration[data-turns="1"] {
    background-color: rgba(50, 15, 15, 0.95);
    font-weight: bold;
}

/* Status effect tooltip */
.status-tooltip {
    position: absolute;
    background-color: rgba(20, 20, 35, 0.95);
    color: white;
    padding: 10px;
    border-radius: 6px;
    z-index: 1000;
    width: 220px;
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    font-size: 14px;
    transform: translateY(10px);
    scrollbar-width: thin;
    scrollbar-color: #555 rgba(0, 0, 0, 0.3);
}

.status-tooltip::-webkit-scrollbar {
    width: 6px;
}

.status-tooltip::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.status-tooltip::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}

.status-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.status-tooltip-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

.status-tooltip-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 4px;
}

.status-tooltip-name {
    font-size: 16px;
    font-weight: bold;
    flex-grow: 1;
}

.status-tooltip-turns {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid #555;
}

.status-tooltip-turns.last-turn {
    background-color: rgba(150, 30, 30, 0.8);
    color: #fff;
    border-color: #c33;
    font-weight: bold;
    animation: pulseTurn 1.5s infinite;
    padding: 3px 8px;
}

@keyframes pulseTurn {
    0% { box-shadow: 0 0 0 0 rgba(220, 50, 50, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(220, 50, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 50, 50, 0); }
}

.status-tooltip-description {
    font-size: 13px;
    line-height: 1.4;
    color: #ccc;
    margin-bottom: 8px;
}

.status-tooltip-source {
    font-size: 11px;
    font-style: italic;
    color: #999;
    padding-top: 5px;
    border-top: 1px dotted #555;
    margin-top: 5px;
}

.buff-tooltip .status-tooltip-name {
    color: #2ecc71;
}

.buff-tooltip .status-tooltip-turns {
    border-color: #2ecc71;
    color: #56ff9d;
}

.debuff-tooltip .status-tooltip-name {
    color: #e74c3c;
}

.debuff-tooltip .status-tooltip-turns {
    border-color: #e74c3c;
    color: #ff7b70;
}

.status-tooltip-description {
    font-size: 13px;
    line-height: 1.4;
    color: #ccc;
}

/* Style for the flower bomb disable debuff icon */

/* Colorful ability description text styling */
.damage-value {
    color: #ff4444;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255, 68, 68, 0.5);
}

.utility-value {
    color: #4488ff;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(68, 136, 255, 0.5);
}

.duration-value {
    color: #ff8844;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255, 136, 68, 0.5);
}

.healing-value {
    color: #44ff44;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(68, 255, 68, 0.5);
}

.talent-effect {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    margin: 0 2px;
    display: inline-block;
}

.talent-effect.damage {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: #ffffff;
    border: 1px solid #ff3030;
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
}

.talent-effect.utility {
    background: linear-gradient(135deg, #4fc3f7, #29b6f6);
    color: #ffffff;
    border: 1px solid #1976d2;
    box-shadow: 0 0 8px rgba(79, 195, 247, 0.4);
}

.talent-effect.healing {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
    color: #ffffff;
    border: 1px solid #2e7d32;
    box-shadow: 0 0 8px rgba(102, 187, 106, 0.4);
}

.talent-effect.resource {
    background: linear-gradient(135deg, #ab47bc, #8e24aa);
    color: #ffffff;
    border: 1px solid #6a1b9a;
    box-shadow: 0 0 8px rgba(171, 71, 188, 0.4);
}

.talent-effect:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Style for a disabled ability */
.ability.disabled {
    filter: grayscale(100%);
    cursor: not-allowed;
    position: relative; /* Needed for the overlay */
}

.ability.disabled::after {
    content: '\1F6AB'; /* Or use a background image/icon font */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: rgba(255, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 2px;
    line-height: 1;
    pointer-events: none; /* Don't interfere with clicks */
}

.ability.disabled:hover {
    filter: grayscale(100%); /* Keep grayscale on hover */
    transform: none; /* Disable hover scaling */
}

/* Flower Bomb VFX */
.flower-bomb-vfx {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    pointer-events: none;
    z-index: 100; /* Ensure it appears above character */
}

.effect-icon {
    width: 20px;
    height: 20px;
}

.effect-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Middle section */
.middle-section {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 2;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.turn-counter {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 18px;
    border: 1px solid #555;
}

#battle-phase {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Battle log */
.battle-log-container {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 350px; /* Increased width */
    height: 300px; /* Start with fully open height */
    background-color: rgba(15, 15, 20, 0.92); /* Slightly more opaque */
    border-radius: 10px;
    border: 1px solid #444;
    overflow: hidden;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* Enhanced shadow */
    display: flex;
    flex-direction: column;
    user-select: none; /* Prevent text selection during dragging */
    /* Force visibility - prevent any hiding */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.battle-log-container:hover {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
}

.battle-log-header {
    padding: 8px 12px;
    background-color: rgba(30, 35, 50, 0.9); /* Darker, more contrasty header */
    border-bottom: 1px solid #555;
    font-weight: bold;
    font-size: 14px;
    color: #fff; /* Brighter text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}

.battle-log-drag-handle {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    cursor: grab;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.battle-log-drag-handle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.battle-log-drag-handle:hover .battle-log-title::after {
    content: " \22EE\22EE";
    opacity: 0.6;
    font-size: 12px;
    margin-left: 5px;
}

.battle-log-drag-handle:active {
    cursor: grabbing;
    background-color: rgba(255, 255, 255, 0.15);
}

.battle-log-title {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    user-select: none;
}

.battle-log-controls {
    display: flex;
    gap: 8px;
}

.log-button {
    background: rgba(60, 70, 90, 0.6);
    border: none;
    color: #fff;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.log-button:hover {
    background: rgba(80, 90, 120, 0.8);
}

.battle-log-header.flash {
    animation: header-flash 0.5s ease;
}

@keyframes header-flash {
    0%, 100% { background-color: rgba(30, 35, 50, 0.9); }
    50% { background-color: rgba(60, 70, 120, 0.95); }
}

.battle-log-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible; /* Prevent horizontal scrolling */
    padding: 10px 0;
    scrollbar-width: thin;
    scrollbar-color: #555 rgba(0, 0, 0, 0.2);
}

.battle-log-content::-webkit-scrollbar {
    width: 6px;
}

.battle-log-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.battle-log-content::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}

/* For toggling battle log size */
.battle-log-container.collapsed {
    height: 180px;
}

/* Show log button (when battle log is closed) */
.show-log-button {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.9), rgba(60, 70, 90, 0.9));
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.show-log-button:hover {
    background: linear-gradient(135deg, rgba(60, 70, 90, 0.95), rgba(80, 90, 120, 0.95));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

.show-log-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.battle-log {
    font-size: 13px;
    color: #eee; /* Brighter text */
    padding: 0 14px;
    /* Ensure log content is visible */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    min-height: 50px; /* Ensure minimum height */
}

.log-entry {
    margin-bottom: 9px;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: rgba(40, 45, 55, 0.85); /* Much more visible background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    transition: all 0.2s ease;
    border-left: 4px solid #555; /* Visible left border */
    color: #ffffff !important; /* Force white text */
    font-size: 12px;
    line-height: 1.4;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.log-entry:hover {
    background-color: rgba(40, 40, 60, 0.7);
    margin-left: 3px;
}

.log-entry:last-child {
    position: relative;
}

.log-entry:last-child::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.player-turn {
    color: #4da6ff;
    border-left: 3px solid #4da6ff;
}


.enemy-turn {
    color: #ff5e57;
    border-left: 3px solid #ff5e57;
}

.enemy-turn::before {
    content: "\1F47F ";
}

.system {
    color: #ffbb33;
    font-weight: bold;
    border-left: 3px solid #ffbb33;
}

.system::before {
    content: "\1F4D8 ";
}

.system-update {
    color: #00ffff;
    font-weight: bold;
    border-left: 3px solid #00ffff;
    animation: pulseHighlight 2s ease-in-out;
}

.system-update::before {
    content: "\2699\FE0F ";
}

@keyframes pulseHighlight {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(0, 255, 255, 0.1); }
}

.critical {
    color: #ff5252;
    font-weight: bold;
    border-left: 3px solid #ff5252;
}

.critical::before {
    content: "\1F4A5 ";
}

.heal {
    color: #5aff5a;
    border-left: 3px solid #5aff5a;
}

.heal::before {
    content: " ";
}

.stage-modifier {
    color: #ff9800;
    font-weight: bold;
    border-left: 3px solid #ff9800;
    background-color: rgba(255, 152, 0, 0.1);
}

.stage-modifier::before {
    content: "\26A1 ";
}

/* Loading screen */
.loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-text {
    font-size: 24px;
    margin-top: 20px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.loader {
    border: 5px solid #444;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Game over screen */
.game-over-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.game-over-container.active {
    opacity: 1;
    pointer-events: all;
}

.game-over-content {
    background-color: rgba(20, 20, 20, 0.9);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    border: 1px solid #555;
    max-width: 500px;
    width: 90%;
}

.game-over-title {
    font-size: 32px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.victory {
    color: #2ecc71;
}

.defeat {
    color: #e74c3c;
}

.game-over-message {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
}

.game-over-button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.game-over-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Tooltip */
.tooltip {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #555;
    z-index: 200000;
    width: 300px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tooltip.visible {
    opacity: 1;
}

.tooltip-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #3498db;
}

.tooltip-description {
    font-size: 12px;
    line-height: 1.4;
}

/* Context Menu Styles */
.context-menu {
    position: absolute;
    background-color: rgba(30, 30, 40, 0.95); /* Dark semi-transparent background */
    color: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #555; /* Subtle border */
    z-index: 1001; /* Ensure it's above most elements */
    width: 200px; /* Adjusted width */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Soft shadow */
    opacity: 0; /* Start visible */
    transform: scale(0.95); /* Start slightly smaller */
    transform-origin: top left; /* Scale from top-left */
    transition: opacity 0.15s ease, transform 0.15s ease; /* Smooth transition */
    pointer-events: none; /* Initially not interactable */
}

.context-menu.visible {
    opacity: 1; /* Fully visible */
    transform: scale(1); /* Normal size */
    pointer-events: auto; /* Allow interaction when visible */
}

.context-menu-item {
    padding: 8px 12px; /* Increased padding */
    cursor: pointer;
    border-radius: 3px;
    margin-bottom: 3px; /* Slightly more spacing */
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 14px; /* Ensure readability */
}

.context-menu-item:hover {
    background-color: rgba(80, 90, 120, 0.8); /* Highlight on hover */
}

.context-menu-item:active {
    background-color: rgba(60, 70, 100, 0.8); /* Slightly darker on click */
}

.context-menu-item-icon {
    margin-right: 10px; /* More space for icon */
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8; /* Slightly faded icon */
}

.context-menu-divider {
    height: 1px;
    background-color: #555;
    margin: 6px 0; /* Adjusted margins */
}

/* Responsive design */
@media (max-width: 768px) {
    .battle-log-container {
        width: 280px;
        height: 180px;
        right: 10px;
        bottom: 10px;
    }
    
    .battle-log-header {
        padding: 6px 8px;
        font-size: 13px;
    }

    .battle-log-drag-handle {
        padding: 2px 4px;
    }

    .battle-log-title {
        font-size: 13px;
    }
    
    .battle-log {
        font-size: 12px;
    }

    .show-log-button {
        right: 10px;
        bottom: 10px;
        padding: 8px 12px;
        font-size: 11px;
    }
    
    .log-entry {
        padding: 4px 6px;
        margin-bottom: 6px;
    }
    
    .character-slot {
        width: 150px;
    }
    
    .character-image, .image-container, .character-info {
        width: 135px;
    }
    
    .character-image, .image-container {
        height: 135px;
    }
    
    .ability {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .top-section, .bottom-section {
        padding: 10px;
    }
    
    .battle-log-container {
        width: 220px;
        height: 150px;
        right: 5px;
        bottom: 5px;
    }
    
    .battle-log-container:hover {
        height: 220px;
    }
    
    .battle-log-header {
        padding: 4px 6px;
        font-size: 12px;
    }

    .battle-log-drag-handle {
        padding: 1px 2px;
    }

    .battle-log-title {
        font-size: 12px;
    }
    
    .battle-log {
        font-size: 11px;
        padding: 0 8px;
    }

    .show-log-button {
        right: 5px;
        bottom: 5px;
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .log-entry {
        padding: 3px 5px;
        margin-bottom: 5px;
    }
    
    .character-slot {
        width: 120px;
    }
    
    .character-image, .image-container, .character-info {
        width: 105px;
    }
    
    .character-image, .image-container {
        height: 105px;
    }
    
    .ability {
        width: 24px;
        height: 24px;
    }
    
    .character-name {
        font-size: 12px;
    }
    
    .middle-section {
        height: 50px;
    }
    
    .turn-counter, #battle-phase {
        font-size: 14px;
    }
}

/* Message grouping */
.log-entry.player-turn + .log-entry.player-turn,
.log-entry.enemy-turn + .log-entry.enemy-turn {
    border-top: none;
    margin-top: -6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.log-entry.player-turn:not(:first-child):not(:has(+ .log-entry.player-turn)),
.log-entry.enemy-turn:not(:first-child):not(:has(+ .log-entry.enemy-turn)) {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-bottom: 10px;
}

/* Timestamp for log entries */
.battle-log-timestamp {
    font-size: 0.8em;
    color: #ccc !important;
    position: absolute;
    right: 8px;
    top: 2px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
}

/* Ensure log message text is visible */
.log-entry, .log-entry * {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    visibility: visible !important;
    opacity: 1 !important;
}

.log-entry .log-message {
    display: inline-block !important;
    color: #ffffff !important;
    font-weight: normal;
    margin-right: 60px; /* Space for timestamp */
}

.character-slot.acted {
    position: relative;

}

.character-slot.acted::before {
    content: "\2713 ACTED";
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #27ae60;
    color: white;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
    z-index: 99999;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 14px rgba(39, 174, 96, 0.55);
}

.character-slot.acted .abilities .ability {
    opacity: 0.5;
    cursor: not-allowed;
}

/* AI planning indicator */
.ai-character.planning {
    position: relative;
    animation: aiPlanning 1.2s infinite;
}

.ai-character.planning::before {
    content: "...";
    position: absolute;
    top: 6px;
    right: 8px;
    left: auto;
    transform: none;
    background-color: #f39c12;
    color: white;
    width: 30px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 50;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

@keyframes aiPlanning {
    0% { border-color: #333; }
    50% { border-color: #f39c12; }
    100% { border-color: #333; }
}

/* Planning phase overlay */
.planning-phase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.planning-phase-overlay.active {
    opacity: 1;
}

.planning-phase-content {
    background-color: rgba(20, 20, 20, 0.9);
    padding: 20px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.planning-phase-title {
    font-size: 24px;
    margin-bottom: 10px;
    color: #f39c12;
}

/* Damage and healing animations */
@keyframes shake {
    0%, 100% { margin-left: 0; }
    10%, 30%, 50%, 70%, 90% { margin-left: -5px; }
    20%, 40%, 60%, 80% { margin-left: 5px; }
}

.shake-animation {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Damage VFX */
.damage-vfx {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e74c3c;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
    z-index: 100;
    animation: card-damage-float 2.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
    pointer-events: none;
}

.damage-vfx.critical {
    color: #e67e22;
    font-size: 32px;
    text-shadow: 0 0 10px #e67e22, 2px 2px 3px rgba(0, 0, 0, 0.8);
    animation-duration: 2.6s;
}

/* Blood VFX */
.blood-vfx {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(ellipse at center, rgba(231, 76, 60, 0.6) 0%, rgba(231, 76, 60, 0) 70%);
    z-index: 90;
    pointer-events: none;
    animation: fadeOut 0.8s ease-out forwards;
}

/* Magic damage VFX */
.magic-vfx {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.6) 0%, rgba(155, 89, 182, 0) 70%);
    z-index: 90;
    pointer-events: none;
    animation: magicPulse 0.8s ease-out forwards;
}

@keyframes magicPulse {
    0% { 
        opacity: 0.8; 
        background-size: 50% 50%;
    }
    100% { 
        opacity: 0; 
        background-size: 200% 200%;
    }
}

/* Heal VFX */
.heal-vfx {
    position: absolute;
    color: #4CAF50; /* Standard green */
    font-size: 20px;
    font-weight: bold;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 5px rgba(105, 240, 174, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.6);
    animation: card-heal-float 2.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
    white-space: nowrap;
    z-index: 105; /* Ensure it's above other elements */
}

.heal-vfx.critical {
    color: #FFD700; /* Gold color for critical heal */
    font-size: 24px; /* Slightly larger */
    text-shadow: 0 0 8px #FFFACD, 0 0 12px #FFEC8B, 1px 1px 3px rgba(0, 0, 0, 0.7);
    animation: card-crit-heal-float 2.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.heal-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
}

.heal-particles::before,
.heal-particles::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    border-radius: 50%;
    box-shadow: 0 0 6px #69F0AE;
    animation: healing-particle-flow 1.5s infinite linear;
    opacity: 0;
}

.heal-particles.critical::before,
.heal-particles.critical::after {
    background-color: #FFD700; /* Gold particles for crit */
    box-shadow: 0 0 8px #FFFACD, 0 0 12px #FFEC8B;
    width: 10px; /* Slightly larger particles */
    height: 10px;
    animation-duration: 1.8s; /* Match animation duration */
}

.heal-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.heal-particles::after {
    top: 70%;
    left: 80%;
    animation-delay: 0.5s;
}

@keyframes card-crit-heal-float {
    0% {
        transform: translate(-50%, -40%) scale(0.9);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) scale(1.32) rotate(-4deg);
        opacity: 1;
    }
    22% {
        transform: translate(-50%, -54%) scale(1.08) rotate(2deg);
        opacity: 1;
    }
    80% {
        transform: translate(-50%, -90%) scale(1.02) rotate(3deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -118%) scale(0.96) rotate(0deg);
        opacity: 0;
    }
}

/* Add new log entry style */
.log-entry.critical-heal {
    color: #FFEC8B; /* Lighter gold for text */
    font-weight: bold;
    background-color: rgba(255, 215, 0, 0.1); /* Faint gold background */
    border-left: 3px solid #FFD700;
}

.log-entry.critical-heal::before {
    content: '\2728';
    margin-right: 5px;
    color: #FFD700;
}

/* Armor and Shield Reduction Log Entries */
.log-entry.armor-reduction {
    color: #FFA500;
    border-left: 3px solid #FFA500;
    background-color: rgba(255, 165, 0, 0.1);
}

.log-entry.armor-reduction::before {
    content: '\1F6E1\FE0F';
    margin-right: 5px;
}

.log-entry.shield-reduction {
    color: #4169E1;
    border-left: 3px solid #4169E1;
    background-color: rgba(65, 105, 225, 0.1);
}

.log-entry.shield-reduction::before {
    content: '\2728';
    margin-right: 5px;
}

/* Primal Fury (W Buff) Active VFX */
.image-container.primal-fury-active {
    animation: primalFuryPulse 1.5s infinite alternate;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff3300;
}

.burning-ground-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.burning-ground-vfx {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255,50,0,0.4) 0%, rgba(255,80,0,0.1) 70%, rgba(255,0,0,0) 100%);
}

.ember {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    background-color: rgba(255, 165, 0, 0.8);
    border-radius: 50%;
    animation: ember-float linear;
    z-index: 6;
    box-shadow: 0 0 3px 1px rgba(255, 60, 0, 0.5);
}

@keyframes ember-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Stage Modifiers Styles - Redesigned */
.stage-modifiers-container {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.95), rgba(25, 25, 40, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    min-width: 220px;
    max-width: 280px;
    z-index: 1100;
    color: #fff;
    font-size: 14px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    user-select: none;
}

.stage-modifiers-container:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.stage-modifiers-heading {
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
    color: #f8f9fa;
    font-size: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.stage-modifiers-heading::before {
    content: "\26A1";
    font-size: 18px;
    animation: headingIconPulse 2s ease-in-out infinite;
}

.stage-modifiers-heading::after {
    content: "\26A1";
    font-size: 18px;
    animation: headingIconPulse 2s ease-in-out infinite;
    animation-delay: 1s;
}

.stage-modifiers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-modifier {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: help;
    position: relative;
    overflow: hidden;
}

.stage-modifier::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.stage-modifier:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.25);
    margin-left: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.stage-modifier:hover::before {
    left: 100%;
}

.stage-modifier-icon {
    font-size: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    animation: iconFloat 3s ease-in-out infinite;
}

.stage-modifier:hover .stage-modifier-icon {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.stage-modifier-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stage-modifier-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    line-height: 1.2;
}

.stage-modifier-type {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Specific modifier type styling */
.stage-modifier[data-modifier-type="damage"] {
    border-left: 3px solid #e74c3c;
}

.stage-modifier[data-modifier-type="damage"] .stage-modifier-icon {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(231, 76, 60, 0.1));
    border-color: rgba(231, 76, 60, 0.3);
}

.stage-modifier[data-modifier-type="healing"] {
    border-left: 3px solid #2ecc71;
}

.stage-modifier[data-modifier-type="healing"] .stage-modifier-icon {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(46, 204, 113, 0.1));
    border-color: rgba(46, 204, 113, 0.3);
}

.stage-modifier[data-modifier-type="utility"] {
    border-left: 3px solid #3498db;
}

.stage-modifier[data-modifier-type="utility"] .stage-modifier-icon {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.1));
    border-color: rgba(52, 152, 219, 0.3);
}

.stage-modifier[data-modifier-type="debuff"] {
    border-left: 3px solid #f39c12;
}

.stage-modifier[data-modifier-type="debuff"] .stage-modifier-icon {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(243, 156, 18, 0.1));
    border-color: rgba(243, 156, 18, 0.3);
}

.stage-modifier[data-modifier-type="mixed"] {
    border-left: 3px solid #9b59b6;
}

.stage-modifier[data-modifier-type="mixed"] .stage-modifier-icon {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(155, 89, 182, 0.1));
    border-color: rgba(155, 89, 182, 0.3);
}

/* Animations */
@keyframes headingIconPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* Tooltip enhancement for stage modifiers */
.stage-modifier-tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(15, 15, 25, 0.98), rgba(25, 25, 40, 0.98));
    color: white;
    padding: 16px;
    border-radius: 12px;
    z-index: 1200;
    min-width: 280px;
    max-width: 350px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
}

.stage-modifier-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.stage-modifier-tooltip-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.stage-modifier-tooltip-icon {
    font-size: 28px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.stage-modifier-tooltip-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    flex: 1;
}

.stage-modifier-tooltip-description {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}

.stage-modifier-tooltip-effect {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

/* Empty state */
.stage-modifiers-empty {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.stage-modifiers-empty::before {
    content: "\2728";
    display: block;
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Responsive design */
@media (max-width: 768px) {
    .stage-modifiers-container {
        top: 10px;
        right: 10px;
        min-width: 200px;
        max-width: 250px;
        padding: 12px;
    }
    
    .stage-modifier {
        padding: 8px 10px;
    }
    
    .stage-modifier-icon {
        width: 32px;
        height: 32px;
        font-size: 20px;
        margin-right: 10px;
    }
    
    .stage-modifier-name {
        font-size: 13px;
    }
    
    .stage-modifier-type {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .stage-modifiers-container {
        top: 5px;
        right: 5px;
        min-width: 180px;
        max-width: 220px;
        padding: 10px;
    }
    
    .stage-modifiers-heading {
        font-size: 14px;
    }
    
    .stage-modifier {
        padding: 6px 8px;
    }
    
    .stage-modifier-icon {
        width: 28px;
        height: 28px;
        font-size: 18px;
        margin-right: 8px;
    }
    
    .stage-modifier-name {
        font-size: 12px;
    }
    
    .stage-modifier-type {
        font-size: 9px;
    }
}

/* Add a subtle glow effect for active modifiers */
.stage-modifier[data-modifier-id="weaklings"] {
    border-left: 3px solid #ff9900;
}

/* Go Dormant (Angry Carrot) Stun VFX */
.status-effect-stunned.go-dormant-stun .character-image-container::after,
.status-effect-stunned.go-dormant-stun .image-container::after { /* Target both potential container class names */
    content: 'Z';
    position: absolute;
    top: 0;
    left: 90%; /* Position slightly to the right */
    font-size: 20px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    opacity: 0;
    animation: zzz-float 2s infinite ease-in-out;
    z-index: 10; /* Ensure it's visible */
}

.status-effect-stunned.go-dormant-stun .character-image-container::before,
.status-effect-stunned.go-dormant-stun .image-container::before { /* Add a second Z */
    content: 'Z';
    position: absolute;
    top: 15px;
    left: 100%; /* Position further right */
    font-size: 16px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    opacity: 0;
    animation: zzz-float 2s infinite ease-in-out;
    animation-delay: 0.5s; /* Delay the second Z */
    z-index: 10;
}

/* Add a third Z for more effect */
.status-effect-stunned.go-dormant-stun .image-container::after { /* Assuming image-container is more common */
    content: 'Z';
    position: absolute;
    top: 30px;
    left: 95%; /* Slightly different horizontal position */
    font-size: 18px;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    opacity: 0;
    animation: zzz-float 2s infinite ease-in-out;
    animation-delay: 1s; /* Delay the third Z */
    z-index: 10;
}


@keyframes zzz-float {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    25% {
        transform: translateY(-10px) scale(1);
        opacity: 1;
    }
    75% {
        transform: translateY(-25px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-35px) scale(0.8);
        opacity: 0;
    }
}

/* Styling for dead characters */
.character-slot.character-dead {
    /* Do not desaturate the whole slot to avoid greying overlays */
    pointer-events: none; /* Disable interactions */
}

.character-slot.character-dead .abilities .ability {
    /* Ensure abilities are visually disabled too */
    opacity: 0.3;
    cursor: not-allowed;
    background-color: #555;
}

.character-slot.character-dead .character-image {
    /* Desaturate and dim only the portrait image, not overlays */
    filter: grayscale(100%);
    opacity: 0.5;
}

.character-slot.character-dead .hp-bar {
    background-color: #333; /* Dark background for dead HP bar */
}
.character-slot.character-dead .hp-bar::before {
    width: 0 !important; /* Ensure fill is 0 */
}

.character-slot.character-dead .mana-bar {
     background-color: #333;
}
.character-slot.character-dead .mana-bar::before {
    width: 0 !important;
}
.character-slot.character-dead .energy-bar {
     background-color: #333;
}
.character-slot.character-dead .energy-bar::before {
    width: 0 !important;
}

/* Energy Animation Styles */
.bar-container.energy-drain {
    animation: energyDrain 0.5s ease-out;
}
.bar-container.energy-restore {
    animation: energyRestore 0.3s ease-out;
}
.bar-container.energy-empty {
    animation: energyEmpty 1s infinite alternate;
}

.character-slot.character-dead .status-icon {
    opacity: 0.4;
}

/* Revive countdown overlay: big red number centered on portrait */
.revive-countdown-badge {
    position: absolute;
    inset: 0; /* cover the whole portrait area */
    display: none; /* shown while pending */
    align-items: center;
    justify-content: center;
    z-index: 2000; /* above most VFX in image-container */
    pointer-events: none;
}
.revive-countdown-text {
    font-family: inherit;
    font-size: clamp(32px, 6vw, 72px);
    font-weight: 900;
    color: #ff2a2a;
    text-shadow: 0 0 6px rgba(0,0,0,0.6), 0 0 18px rgba(0,0,0,0.5);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
    line-height: 1;
}

.stage-damage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to top, rgba(255,50,0,0.4) 0%, rgba(255,80,0,0.1) 70%, rgba(255,0,0,0) 100%);
}

/* Character stats right-click menu */
.character-stats-menu {
    position: absolute;
    z-index: 1000;
    background-color: rgba(20, 20, 20, 0.95);
    border: 2px solid #444;
    border-radius: 10px;
    width: 450px; /* Increased from 350px */
    max-height: 65vh; /* Reduced from 75vh to prevent excessive height */
    overflow-y: auto; /* Ensure content is scrollable */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
    padding: 15px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: #f0f0f0;
    font-size: 14px;
}

.character-stats-menu::-webkit-scrollbar {
    width: 8px;
}

.character-stats-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.character-stats-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.character-stats-menu.bottom-character {
    transform: translateY(-30%);
}

.stats-menu-header {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #3498db;
    text-align: center;
}

/* Stats menu tabs */
.character-stats-menu .stats-menu-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 8px 0 12px;
}

.character-stats-menu .stats-menu-tab {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.character-stats-menu .stats-menu-tab:hover {
    background: rgba(255, 255, 255, 0.09);
}

.character-stats-menu .stats-menu-tab.active {
    border-color: rgba(52, 152, 219, 0.8);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Applied modifiers */
.character-stats-menu .stats-modifier-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.character-stats-menu .stats-modifier-empty {
    color: rgba(255, 255, 255, 0.65);
    padding: 8px 0;
    text-align: center;
}

.character-stats-menu .stats-modifier-chip {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
}

.character-stats-menu .stats-modifier-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
}

.character-stats-menu .stats-modifier-name {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
}

/* Rarity accents (re-using existing palette already present in this stylesheet) */
.character-stats-menu .stats-modifier-common { border-left: 3px solid rgba(34, 197, 94, 0.9); }
.character-stats-menu .stats-modifier-uncommon { border-left: 3px solid rgba(34, 197, 94, 0.6); }
.character-stats-menu .stats-modifier-rare { border-left: 3px solid rgba(59, 130, 246, 0.9); }
.character-stats-menu .stats-modifier-epic { border-left: 3px solid rgba(168, 85, 247, 0.9); }
.character-stats-menu .stats-modifier-legendary { border-left: 3px solid rgba(245, 158, 11, 0.95); }
.character-stats-menu .stats-modifier-mythic { border-left: 3px solid rgba(124, 252, 255, 0.95); }

/* Hover description tooltip (no extra UI, just hover) */
.character-stats-menu .stats-modifier-chip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% + 10px);
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
    z-index: 10002;
    pointer-events: none;
    white-space: normal;
}

.stats-menu-section {
    margin-bottom: 15px;
}

.stats-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
}

.stat-name {
    font-weight: bold;
}

.stat-value {
    font-family: 'Courier New', monospace;
    color: #ffffff;
}

.stat-value.buffed {
    color: #2ecc71;
}

.stat-value.debuffed {
    color: #e74c3c;
}

.stat-value.dragon-buffed-earth,
.stat-value.buffed.dragon-buffed-earth {
    color: #b07a3c;
}

/* ─── Stat Breakdown Tooltip ─────────────────────────────────── */
.stat-breakdown-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: rgba(12, 15, 26, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    padding: 10px 13px;
    min-width: 170px;
    max-width: 270px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
    font-size: 12px;
    color: #ccc;
    display: none;
    line-height: 1.55;
}
.stat-breakdown-tooltip.visible {
    display: block;
}
.sbt-header {
    font-size: 13px;
    font-weight: bold;
    color: #eee;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sbt-title {
    color: #fff;
}
.sbt-delta {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.9;
}
.sbt-delta.positive { color: #2ecc71; }
.sbt-delta.negative { color: #e74c3c; }
.sbt-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.09);
    margin: 5px 0;
}
.sbt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0;
}
.sbt-label {
    color: #999;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}
.sbt-val {
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    white-space: nowrap;
    font-weight: bold;
}
.sbt-val.positive { color: #2ecc71; }
.sbt-val.negative { color: #e74c3c; }
.sbt-val.neutral  { color: #ffffff; }
.sbt-mechanic {
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.09);
    color: #888;
    font-style: italic;
    font-size: 11px;
    line-height: 1.4;
}
/* stat-item hover hint when tooltip is available */
.stat-item.has-tooltip {
    cursor: help;
}
.stat-item.has-tooltip:hover .stat-name {
    text-decoration: underline dotted rgba(255,255,255,0.35);
    text-underline-offset: 2px;
}
/* ─── End Stat Breakdown Tooltip ─────────────────────────────── */

.stats-menu-subheader {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0;
    margin: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e67e22;
}

.buffs-section, .abilities-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buff-item, .ability-item, .passive-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    border-left: 3px solid #3498db;
}

.buff-header, .ability-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.buff-icon-small, .ability-icon-small {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.buff-name, .ability-name, .passive-name {
    font-weight: bold;
    color: #f39c12;
    flex-grow: 1;
}

.buff-duration {
    font-size: 12px;
    color: #bdc3c7;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 10px;
}

.buff-description, .ability-description, .passive-description {
    font-size: 13px;
    line-height: 1.4;
    color: #ecf0f1;
}

.ability-details {
    margin-top: 8px;
    font-size: 12px;
    color: #95a5a6;
    padding: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Enhanced Level and XP Section Styling */
.level-xp-section {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(155, 89, 182, 0.15));
    border: 2px solid rgba(52, 152, 219, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.level-xp-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #9b59b6, #f39c12, #3498db);
    animation: levelXPGlow 4s ease-in-out infinite;
}

.character-level-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.character-level-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

.level-badge {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    border: 2px solid #d68910;
    border-radius: 25px;
    padding: 12px 20px;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
    position: relative;
    overflow: hidden;
}

.level-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: levelBadgeShimmer 3s ease-in-out infinite;
}

.level-icon {
    font-size: 24px;
    margin-right: 12px;
    animation: levelStarPulse 2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.level-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.level-number {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.character-xp-info {
    margin-top: 8px;
}

.xp-progress-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.xp-progress-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

.xp-current {
    color: #2ecc71;
    font-weight: bold;
}

.xp-divider {
    color: rgba(255, 255, 255, 0.6);
}

.xp-needed {
    color: #3498db;
    font-weight: bold;
}

.xp-label {
    color: #ecf0f1;
    font-weight: 600;
}

.xp-percentage {
    color: #f39c12;
    font-weight: bold;
    font-size: 12px;
}

.xp-fallback .xp-progress-text {
    color: #95a5a6;
    font-style: italic;
}

.xp-bar-container {
    height: 14px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    margin: 8px 0;
    overflow: hidden;
    border: 2px solid rgba(52, 152, 219, 0.5);
    position: relative;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(52, 152, 219, 0.2);
}

.xp-bar {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #3498db, #f39c12);
    border-radius: 25px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
}

.xp-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: xpShimmer 2.5s linear infinite;
}

.character-total-xp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(155, 89, 182, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(155, 89, 182, 0.3);
}

.total-xp-icon {
    font-size: 16px;
    animation: totalXPGlow 3s ease-in-out infinite;
}

.total-xp-text {
    font-size: 12px;
    color: #bdc3c7;
    font-weight: 600;
}

.total-xp-number {
    font-size: 14px;
    color: #9b59b6;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(155, 89, 182, 0.5);
}

/* Enhanced Ability Details Styling */
.ability-mana-cost {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ability-mana-cost::before {
    content: '\1F4A7';
    font-size: 10px;
}

.ability-cooldown-info {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.ability-cooldown-info::before {
    content: '\23F0';
    font-size: 10px;
}

.ability-cooldown-info.on-cooldown {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    animation: cooldownPulse 1.5s ease-in-out infinite;
    border: 1px solid #bdc3c7;
}

.ability-cooldown-info.on-cooldown::before {
    content: '\1F6AB';
}

.ability-keybind-info {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(155, 89, 182, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.ability-keybind-info::before {
    content: '\2328\FE0F';
    font-size: 10px;
}

/* Animation Keyframes */
@keyframes levelXPGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
        transform: translateX(100%);
    }
}

@keyframes levelStarPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes levelBadgeShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes xpShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes totalXPGlow {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes cooldownPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.stats-menu-close {
    width: 100%;
    padding: 8px;
    background: linear-gradient(to bottom, #2c3e50, #1a252f);
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.stats-menu-close:hover {
    background: linear-gradient(to bottom, #34495e, #2c3e50);
}

.character-stats-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #555;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
    color: white;
    z-index: 1001;
    max-width: 250px;
    pointer-events: none;
}

/* Character Inventory Display in Stats Menu */
.character-inventory-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    margin-top: 15px;
}

.character-inventory-display {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    align-content: start;
}

.inventory-slot-display {
    width: 56px;
    height: 56px;
    border: 2px solid #444;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: help;
    transition: all 0.2s ease;
    overflow: hidden;
}

.inventory-slot-display-label {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.inventory-slot-display.has-item .inventory-slot-display-label {
    display: none;
}

.inventory-slot-display:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.05);
}

.inventory-slot-display-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    padding: 3px;
    background: radial-gradient(circle at 50% 35%, rgba(35, 52, 82, 0.45), rgba(9, 14, 24, 0.55));
}

.inventory-slot-empty {
    color: #666;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}

.inventory-slot-qty {
    position: absolute;
    bottom: 2px;
    right: 3px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none;
}

/* Item tooltip styling */
.item-tooltip {
    position: absolute;
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    font-size: 12px;
    max-width: 250px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* Dodge VFX */
.dodge-vfx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 150;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: dodgeFlash 0.8s ease-out forwards;
}

.dodge-text {
    font-size: 28px;
    font-weight: bold;
    color: #3498db;
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.8), 2px 2px 3px rgba(0, 0, 0, 0.8);
    transform: rotate(-5deg);
    animation: dodgeTextEffect 0.8s ease-out forwards;
    opacity: 0;
    z-index: 160;
}

.dodge-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    animation: dodgeImageEffect 0.8s ease-out forwards;
}

/* Dodge Particles */
.dodge-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 155;
}

.dodge-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #3498db, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: dodgeParticleEffect 0.6s ease-out forwards;
}

.dodge-particle:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.dodge-particle:nth-child(2) { top: 80%; left: 70%; animation-delay: 0.1s; }
.dodge-particle:nth-child(3) { top: 50%; left: 10%; animation-delay: 0.05s; }
.dodge-particle:nth-child(4) { top: 30%; left: 90%; animation-delay: 0.15s; }
.dodge-particle:nth-child(5) { top: 70%; left: 50%; animation-delay: 0.08s; }
.dodge-particle:nth-child(6) { top: 10%; left: 60%; animation-delay: 0.12s; }

/* Dodge Afterimage */
.dodge-afterimage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    filter: blur(2px);
    animation: dodgeAfterimageEffect 0.7s ease-out forwards;
    z-index: 145;
}

/* Speed Lines for movement effect */
.dodge-speed-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 152;
    overflow: hidden;
}

.speed-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3498db, transparent);
    opacity: 0;
    animation: speedLineEffect 0.4s ease-out forwards;
}

.speed-line:nth-child(1) { top: 25%; width: 40px; animation-delay: 0s; }
.speed-line:nth-child(2) { top: 45%; width: 35px; animation-delay: 0.05s; }
.speed-line:nth-child(3) { top: 65%; width: 30px; animation-delay: 0.1s; }

/* === IMMUNITY (Physical) Indicator & VFX === */
.passive-indicator-fluid-form,
.passive-indicator-granular-body {
    font-family: inherit;
    line-height: 1;
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
}



/* Body Water Explosion Ability Indicator */
.body-water-explosion-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 24px;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.9), rgba(0, 100, 200, 0.9));
    border-radius: 6px;
    border: 1px solid #1E90FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 15;
    cursor: help;
    animation: water-explosion-glow 2s infinite;
}

.body-water-explosion-indicator .indicator-icon {
    font-size: 12px;
    margin-right: 2px;
}

.body-water-explosion-indicator .indicator-text {
    font-size: 10px;
    font-weight: bold;
    min-width: 12px;
    text-align: center;
}

@keyframes water-explosion-glow {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(30, 144, 255, 0.4);
    }
    50% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(30, 144, 255, 0.6);
    }
}

.water-immune-pulse { animation: waterImmunePulse 0.4s ease-out; }
.sand-immune-pulse { animation: sandImmunePulse 0.4s ease-out; }
.gold-immune-pulse { animation: goldImmunePulse 0.4s ease-out; }

@keyframes waterImmunePulse {
    0% { box-shadow: 0 0 0 0 rgba(0,160,255,0.7); }
    70% { box-shadow: 0 0 12px 6px rgba(0,160,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,160,255,0); }
}
@keyframes sandImmunePulse {
    0% { box-shadow: 0 0 0 0 rgba(194,150,74,0.9); }
    70% { box-shadow: 0 0 12px 6px rgba(194,150,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(194,150,74,0); }
}

@keyframes goldImmunePulse {
    0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.95); }
    70% { box-shadow: 0 0 12px 6px rgba(212,175,55,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

.image-container .floating-immune-text.gold { filter: drop-shadow(0 0 3px rgba(212,175,55,.85)); }
.floating-immune-text.gold { color:#fff1b8; }

/* Coin Toss VFX (simple overlay) */
.coin-toss-vfx {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 180;
    background: radial-gradient(circle at 50% 40%, rgba(212,175,55,0.55), rgba(212,175,55,0.0) 60%);
    animation: coinTossFlash 900ms ease-out forwards;
}

@keyframes coinTossFlash {
    0% { opacity: 0; transform: scale(0.9); }
    20% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

/* Rampage VFX (used by lava_chimp_abilities.js) */
.rampage-cast-animation {
    animation: rampageCastPulse 450ms ease-out;
    filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.65));
}

.rampage-impact-shake {
    animation: rampageImpactShake 320ms ease-in-out;
}

.rampage-impact-explosion {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 220;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 45%, rgba(255, 68, 0, 0.55), rgba(255, 170, 0, 0.15) 45%, rgba(255, 170, 0, 0) 70%);
    animation: rampageImpactExplosion 650ms ease-out forwards;
}

.rampage-impact-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 221, 0, 0.95);
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(0);
    animation: rampageImpactParticle 650ms ease-out forwards;
    animation-delay: var(--particle-delay);
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.75);
}

@keyframes rampageCastPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes rampageImpactShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

@keyframes rampageImpactExplosion {
    0% { opacity: 0; transform: scale(0.85); }
    20% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.15); }
}

@keyframes rampageImpactParticle {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(0) scale(0.9); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(44px) scale(0.6); }
}

@keyframes rampage-leap {
    0% { opacity: 0; }
    10% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes rampage-chain {
    0% { opacity: 0; transform: scaleX(0.5); }
    20% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.05); }
}

@keyframes rampage-chain-particle {
    0% { opacity: 0; transform: scale(0.6); }
    20% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.4) translateY(-10px); }
}

@keyframes rampage-damage-float {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.9); }
    15% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -38px) scale(0.95); }
}

.floating-immune-text {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translate(-50%, 0);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    pointer-events: none;
    z-index: 500; /* above most per-character overlays */
    text-shadow: 0 0 6px #000, 0 0 3px rgba(0,0,0,.6);
    animation: immune-pop 700ms ease-out forwards;
}
.image-container .floating-immune-text { mix-blend-mode: normal; }
.image-container .floating-immune-text.water { filter: drop-shadow(0 0 3px rgba(0,160,255,.9)); }
.image-container .floating-immune-text.sand { filter: drop-shadow(0 0 3px rgba(194,150,74,.85)); }
.floating-immune-text.water { color:#cfefff; }
.floating-immune-text.sand { color:#ffe9c2; }

@keyframes immune-pop {
    0% { opacity:0; transform:translate(-50%, 6px) scale(.85); }
    25% { opacity:1; transform:translate(-50%, -4px) scale(1); }
    70% { opacity:1; transform:translate(-50%, -10px) scale(1); }
    100% { opacity:0; transform:translate(-50%, -20px) scale(.9); }
}
.speed-line:nth-child(4) { top: 75%; width: 45px; animation-delay: 0.02s; }

@keyframes dodgeFlash {
    0% {
        background: radial-gradient(circle, rgba(52, 152, 219, 0.4) 0%, rgba(52, 152, 219, 0) 50%);
        opacity: 0;
    }
    20% {
        background: radial-gradient(circle, rgba(52, 152, 219, 0.6) 0%, rgba(52, 152, 219, 0.1) 80%);
        opacity: 1;
    }
    50% {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(52, 152, 219, 0.2) 60%);
        opacity: 0.8;
    }
    100% {
        background: radial-gradient(circle, rgba(52, 152, 219, 0) 0%, rgba(52, 152, 219, 0) 100%);
        opacity: 0;
    }
}

@keyframes dodgeTextEffect {
    0% {
        transform: scale(0.8) rotate(-5deg) translateY(10px);
        opacity: 0;
    }
    20% {
        transform: scale(1.3) rotate(-5deg) translateY(-5px);
        opacity: 1;
    }
    60% {
        transform: scale(1.1) rotate(-5deg) translateY(-15px);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(-5deg) translateY(-25px);
        opacity: 0;
    }
}

@keyframes dodgeImageEffect {
    0% {
        transform: translateX(0) scale(1);
        opacity: 0.7;
        filter: blur(0px);
    }
    15% {
        transform: translateX(-12px) scale(0.98);
        opacity: 0.9;
        filter: blur(1px);
    }
    30% {
        transform: translateX(10px) scale(1.02);
        opacity: 0.8;
        filter: blur(2px);
    }
    45% {
        transform: translateX(-8px) scale(0.99);
        opacity: 0.7;
        filter: blur(1px);
    }
    60% {
        transform: translateX(6px) scale(1.01);
        opacity: 0.6;
        filter: blur(1px);
    }
    75% {
        transform: translateX(-4px) scale(1);
        opacity: 0.5;
        filter: blur(0px);
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 0.3;
        filter: blur(0px);
    }
}

@keyframes dodgeParticleEffect {
    0% {
        opacity: 0;
        transform: scale(0.5) translate(0, 0);
    }
    30% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translate(var(--dx, 30px), var(--dy, -20px));
    }
}

@keyframes dodgeAfterimageEffect {
    0% {
        opacity: 0.4;
        margin-left: 0;
    }
    20% {
        opacity: 0.3;
        margin-left: -8px;
    }
    50% {
        opacity: 0.2;
        margin-left: -15px;
    }
    100% {
        opacity: 0;
        margin-left: -25px;
    }
}

@keyframes speedLineEffect {
    0% {
        opacity: 0;
        margin-left: -50px;
        width: 0px;
    }
    50% {
        opacity: 0.8;
        margin-left: 0px;
    }
    100% {
        opacity: 0;
        margin-left: 50px;
        width: 60px;
    }
}

/* Dodge Screen Shake - DISABLED to prevent resolution issues */
.battle-container.dodge-shake {
    animation: none !important;
}

@keyframes dodgeScreenShake {
    0% { margin-left: 0; }
    25% { margin-left: -2px; }
    75% { margin-left: 2px; }
    100% { margin-left: 0; }
}

/* Dual Sword Strike screen shake animations */
.battle-container.dual-sword-shake-1 {
    animation: dualSwordShake1 0.3s ease-out;
}

.battle-container.dual-sword-shake-2 {
    animation: dualSwordShake2 0.3s ease-out;
}

@keyframes dualSwordShake1 { 0%, 100% { margin-left: 0; margin-top: 0; } 25% { margin-left: -4px; margin-top: 2px; } 50% { margin-left: 4px; margin-top: -2px; } 75% { margin-left: -2px; margin-top: 1px; } }

@keyframes dualSwordShake2 { 0%, 100% { margin-left: 0; margin-top: 0; } 25% { margin-left: 4px; margin-top: -2px; } 50% { margin-left: -4px; margin-top: 2px; }
    75% { margin-left: 2px; margin-top: -1px; }
}

/* Skress Parry persistent stance VFX */
.character-slot.parry-active-stance,
.character.parry-active-stance {
    box-shadow: 0 0 0 1px rgba(90, 140, 255, 0.35), 0 0 18px rgba(90, 140, 255, 0.28);
}

.parry-persistent-aura {
    position: absolute;
    inset: -8px;
    pointer-events: none;
    z-index: 120;
    border-radius: 12px;
    overflow: visible;
}

.parry-persistent-aura::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid rgba(118, 168, 255, 0.45);
    box-shadow: 0 0 14px rgba(87, 140, 255, 0.35);
    animation: parryShieldPulse 1.5s ease-in-out infinite;
}

.parry-orbit {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin-left: -4px;
    margin-top: -4px;
    background: radial-gradient(circle, rgba(212, 226, 255, 1) 0%, rgba(121, 165, 255, 0.75) 45%, rgba(121, 165, 255, 0) 80%);
    filter: drop-shadow(0 0 6px rgba(118, 168, 255, 0.9));
}

.parry-orbit-1 { animation: parryOrbitOne 1.8s linear infinite; }
.parry-orbit-2 { animation: parryOrbitTwo 2.15s linear infinite; }
.parry-orbit-3 { animation: parryOrbitThree 2.55s linear infinite; }

@keyframes parryShieldPulse {
    0%, 100% { opacity: 0.58; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.03); }
}

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

@keyframes parryOrbitTwo {
    0% { transform: rotate(120deg) translateX(28px) rotate(-120deg); }
    100% { transform: rotate(-240deg) translateX(28px) rotate(240deg); }
}

@keyframes parryOrbitThree {
    0% { transform: rotate(-40deg) translateX(38px) rotate(40deg); }
    100% { transform: rotate(320deg) translateX(38px) rotate(-320deg); }
}

/* Remove auto-select button CSS */
.auto-select-button {
    display: none !important;
}

/* === ENHANCED STUN VISUAL EFFECTS === */
/* Primary stun VFX that appears when stun is first applied */
.stun-vfx {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    animation: stun-appear 0.6s ease-out forwards;
}

/* Persistent stun indicator that stays while stunned */
.stun-indicator {
    position: absolute;
    top: -25px;
    right: -10px;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    animation: stun-indicator-appear 0.5s ease-out 0.3s forwards;
}

/* Stun indicator background */
.stun-indicator-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 200, 0, 0.9) 0%, rgba(255, 150, 0, 0.6) 70%, transparent 100%);
    border-radius: 50%;
    border: 2px solid #ffaa00;
    box-shadow: 0 0 15px rgba(255, 200, 0, 0.8);
    animation: stun-indicator-pulse 2s ease-in-out infinite;
}

/* Stun indicator icon */
.stun-indicator-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 5px #000;
    animation: stun-indicator-wobble 1.5s ease-in-out infinite;
}

/* Enhanced stun stars with better positioning */
.stun-star {
    position: absolute;
    font-size: 28px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 1), 0 0 20px rgba(255, 215, 0, 0.8);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.9));
    opacity: 0;
    animation: stun-star-orbit 2s ease-in-out infinite;
}

.stun-star:nth-child(1) {
    animation-delay: 0s;
    --orbit-radius: 35px;
    --orbit-angle: 0deg;
}

.stun-star:nth-child(2) {
    animation-delay: 0.4s;
    --orbit-radius: 35px;
    --orbit-angle: 120deg;
}

.stun-star:nth-child(3) {
    animation-delay: 0.8s;
    --orbit-radius: 35px;
    --orbit-angle: 240deg;
}

/* Enhanced stun text with better visibility */
.stun-text {
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 
        0 0 5px #000,
        0 0 10px #000,
        0 0 15px rgba(255, 200, 0, 0.8),
        0 0 20px rgba(255, 200, 0, 0.6);
    background: linear-gradient(45deg, #ffd700, #ffaa00, #ffd700);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: stun-text-glow 1.5s ease-in-out infinite alternate;
    margin-top: 10px;
}

/* Stun break VFX for when stun is removed */
.stun-break-vfx {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    animation: stun-break-appear 0.5s ease-out forwards;
}

.stun-break-text {
    color: #00ff88;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 
        0 0 5px #000,
        0 0 10px #000,
        0 0 15px rgba(0, 255, 136, 0.8);
    animation: stun-break-text-zoom 0.8s ease-out forwards;
}

.stun-break-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    opacity: 0;
    animation: stun-break-particle-burst 1s ease-out forwards;
}

/* === STUN ANIMATIONS === */
@keyframes stun-appear {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5) translateY(20px);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
}

@keyframes stun-indicator-appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes stun-indicator-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 200, 0, 0.8);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 200, 0, 1);
        transform: scale(1.05);
    }
}

@keyframes stun-indicator-wobble {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-5deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(5deg);
    }
}

@keyframes stun-star-orbit {
    0% {
        opacity: 0;
        transform: rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle))) scale(0.8);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        transform: rotate(calc(var(--orbit-angle) + 180deg)) translateX(var(--orbit-radius)) rotate(calc(-1 * (var(--orbit-angle) + 180deg))) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(calc(var(--orbit-angle) + 360deg)) translateX(var(--orbit-radius)) rotate(calc(-1 * (var(--orbit-angle) + 360deg))) scale(0.8);
    }
}

@keyframes stun-text-glow {
    0% {
        background-position: 0% 50%;
        text-shadow: 
            0 0 5px #000,
            0 0 10px #000,
            0 0 15px rgba(255, 200, 0, 0.8),
            0 0 20px rgba(255, 200, 0, 0.6);
    }
    100% {
        background-position: 100% 50%;
        text-shadow: 
            0 0 5px #000,
            0 0 10px #000,
            0 0 15px rgba(255, 200, 0, 1),
            0 0 20px rgba(255, 200, 0, 0.9),
            0 0 30px rgba(255, 200, 0, 0.5);
    }
}

@keyframes stun-break-appear {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.3);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes stun-break-text-zoom {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes stun-break-particle-burst {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translate(
            calc(cos(var(--angle)) * 40px), 
            calc(sin(var(--angle)) * 40px)
        );
    }
}

/* Character overlay when stunned (toned down to cool tint to avoid 'dead' look)
   The previous warm/golden overlay made stunned characters look like they were dead.
   Use a subtle cool overlay here; main halo is handled by per-character image container styles.
*/
.character-slot.stunned {
    position: relative;
}

.character-slot.stunned::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(200, 235, 255, 0.04) 0%,
        rgba(180, 220, 255, 0.03) 50%,
        rgba(200, 235, 255, 0.04) 100%);
    border: 1px solid rgba(0, 140, 220, 0.06);
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    animation: stun-character-glow 2s ease-in-out infinite;
}

/* Ability icon styling when character is stunned: dim, cool tint and subtle pulse to indicate disabled state */
.character-slot.stunned .ability .ability-icon {
    filter: grayscale(100%) brightness(0.75) sepia(6%) contrast(0.9) hue-rotate(-20deg);
    opacity: 0.9;
    transition: filter 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}

.character-slot.stunned .ability .ability-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0,140,220,0.08) inset;
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms ease;
}

.character-slot.stunned .ability:hover .ability-icon::after {
    opacity: 1;
}

@keyframes stun-character-glow {
    0%, 100% {
        border-color: rgba(255, 200, 0, 0.3);
        box-shadow: inset 0 0 20px rgba(255, 200, 0, 0.1);
    }
    50% {
        border-color: rgba(255, 200, 0, 0.6);
        box-shadow: inset 0 0 30px rgba(255, 200, 0, 0.2);
    }
}

@keyframes spin-star {
    0% {
        transform: rotate(0deg) translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg) translate(30px, -20px);
        opacity: 0;
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/* Rain VFX for "It finally rains!" stage modifier */
.rain-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.raindrop {
    position: absolute;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));
    top: -20px;
    opacity: 0.8;
    animation: rainfall linear infinite;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

@keyframes rainfall {
    0% {
        transform: translateY(-20px) rotate(20deg);
        opacity: 0.8;
    }
    85% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(120vh) rotate(20deg);
        opacity: 0;
    }
}

/* Rain modifier icon in the stage modifiers list */
.stage-modifier[data-modifier-id="it_finally_rains"] {
    background-color: rgba(0, 120, 255, 0.2);
    border-color: rgba(0, 120, 255, 0.7);
}

/* Rain healing VFX */
.rain-heal-vfx {
    color: #3cf;
    text-shadow: 0 0 8px rgba(0, 190, 255, 0.8), 0 0 15px rgba(0, 120, 255, 0.6);
    animation: rain-heal-float 2s ease-out forwards;
    font-weight: bold;
}

.rain-heal-particles {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.rain-heal-particles::before,
.rain-heal-particles::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(128, 212, 255, 0.8);
    box-shadow: 0 0 10px #3cf;
    animation: rain-heal-particle-flow 1.5s ease-out infinite;
}

.rain-heal-particles::before {
    animation-delay: 0.2s;
}

.rain-heal-particles::after {
    animation-delay: 0.6s;
}

@keyframes rain-heal-float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(1.2);
        opacity: 0;
    }
}

@keyframes rain-heal-particle-flow {
    0% {
        transform: translate(0, 0) scale(0.7);
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(20px - 40px * var(--random-x, 0.5)),
            calc(-30px * var(--random-y, 0.5))
        ) scale(0.1);
        opacity: 0;
    }
}

/* Add a slight blue tint to the stage when rain modifier is active */
.stage-background.rain-active {
    position: relative;
}

.stage-background.rain-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(0, 80, 170, 0.05) 0%,
        rgba(0, 40, 100, 0.2) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Adjust log entry styling for rain healing */
.log-entry.stage-effect.heal {
    color: #3cf;
    background-color: rgba(0, 120, 255, 0.15);
}

.log-entry.stage-effect.positive {
    color: #3cf;
    background-color: rgba(0, 120, 255, 0.15);
}

.log-entry.stage-effect.positive::before {
    content: '\1F327\FE0F'; /* Rain emoji */
    margin-right: 5px;
}
/* --- NEW: Floating Text Styling --- */
.floating-text {
    position: absolute; /* Already set by JS, but good for clarity */
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    z-index: 220;
    pointer-events: none;
    /* Animation handled by JS */
}

.floating-text.damage {
    color: #e74c3c; /* Red for damage */
}

.floating-text.heal {
    color: #2ecc71; /* Green for heal */
}

.floating-text.buff {
    color: #3498db; /* Blue for buff */
}

.floating-text.debuff {
    color: #e67e22; /* Orange for debuff */
}

.floating-text.miss, .floating-text.dodge {
    color: #bdc3c7; /* Grey for miss/dodge */
    font-style: italic;
}

.floating-text.critical {
    color: #f1c40f; /* Gold for critical */
    font-size: 24px; /* Slightly larger */
    text-shadow: 0 0 5px #f1c40f, 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.floating-text.passive {
    color: #e0c4ff; /* Light purple for passive */
}

.floating-text.bonus-damage {
    color: #FFD700; /* Gold for bonus damage */
    font-size: 22px;
    text-shadow: 0 0 8px #FFD700, 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.floating-text.immune {
    color: #aee8ff;
    text-shadow: 0 0 6px rgba(0,180,255,0.9), 0 0 12px rgba(0,140,255,0.6), 1px 1px 3px rgba(0,0,0,0.8);
    font-size: 22px;
    letter-spacing: 1px;
    filter: drop-shadow(0 0 4px rgba(0,200,255,0.9));
}

.floating-text.lotusbloom-market {
    color: #ffe8a8;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-shadow:
        0 0 6px rgba(255, 214, 112, 0.95),
        0 0 14px rgba(255, 141, 79, 0.75),
        1px 1px 3px rgba(0, 0, 0, 0.85);
    filter: drop-shadow(0 0 6px rgba(255, 189, 74, 0.75));
}

/* NEW: Style for talent bonus text in descriptions */
.talent-bonus {
    color: #4caf50; /* Green color for positive talent effects */
    font-weight: bold;
}

/* --- END Floating Text Styling --- */

/* Talent-related description styling */
.tooltip-description .talent-effect {
    color: #4caf50;
    font-weight: bold;
    border-left: 2px solid #4caf50;
    padding-left: 5px;
    margin-top: 3px;
}

.status-tooltip-description .talent-effect {
    color: #4caf50;
    font-weight: bold;
    border-left: 2px solid #4caf50;
    padding-left: 5px;
    margin-top: 3px;
    display: block;
}

/* For right-click context menu descriptions */
.ability-description .talent-effect {
    color: #4caf50;
    font-weight: bold;
    border-left: 2px solid #4caf50;
    padding-left: 5px;
    margin-top: 5px;
    display: block;
}

.ability-description .apex-tooltip-upgrades,
.tooltip-description .apex-tooltip-upgrades,
.status-tooltip-description .apex-tooltip-upgrades {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed rgba(255, 232, 92, 0.65);
    border-radius: 8px;
    background: rgba(255, 232, 92, 0.08);
}

.ability-description .apex-tooltip-upgrades-label,
.tooltip-description .apex-tooltip-upgrades-label,
.status-tooltip-description .apex-tooltip-upgrades-label {
    color: #FFE85C;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.ability-description .apex-tooltip-upgrades-item,
.tooltip-description .apex-tooltip-upgrades-item,
.status-tooltip-description .apex-tooltip-upgrades-item {
    display: block;
    margin-top: 3px;
}

.ability-description .ball-tooltip-modifier-block,
.tooltip-description .ball-tooltip-modifier-block,
.status-tooltip-description .ball-tooltip-modifier-block {
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(120, 225, 255, 0.45);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(20, 42, 58, 0.65), rgba(16, 26, 41, 0.65));
}

.ability-description .ball-tooltip-modifier-title,
.tooltip-description .ball-tooltip-modifier-title,
.status-tooltip-description .ball-tooltip-modifier-title {
    color: #9be8ff;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 5px;
}

.ability-description .ball-tooltip-modifier-item,
.tooltip-description .ball-tooltip-modifier-item,
.status-tooltip-description .ball-tooltip-modifier-item {
    display: block;
    margin-top: 3px;
    color: #d8f5ff;
}

/* Variation for buff-related talents */
.talent-effect.healing {
    color: #2ecc71;
    border-left-color: #2ecc71;
}

/* Variation for damage-related talents */
.talent-effect.damage {
    color: #e74c3c;
    border-left-color: #e74c3c;
}

/* Variation for utility-related talents */
.talent-effect.utility {
    color: #3498db;
    border-left-color: #3498db;
}

/* Variation for AoE-related talents */
.talent-effect.aoe {
    color: #9b59b6;
    border-left-color: #9b59b6;
}

/* Variation for resource-related talents */
.talent-effect.resource {
    color: #f39c12;
    border-left-color: #f39c12;
}

.character-stats-menu .passive-description {
    margin-top: 8px;
    line-height: 1.4;
    color: #e0e0e0;
}

.character-stats-menu .passive-base-description {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.character-stats-menu .passive-description .talent-effect {
    display: block;
    margin: 5px 0;
    padding: 3px 0;
}

.character-stats-menu .talent-effect.damage {
    color: #ff7b7b;
}

.character-stats-menu .talent-effect.healing {
    color: #7bff7b;
}

.character-stats-menu .talent-effect.utility {
    color: #7bc8ff;
}

.character-stats-menu .talent-effect.aoe {
    color: #ffc97b;
}

/* Talents Panel */
.talents-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: rgba(20, 20, 30, 0.95);
    border-right: 2px solid #6e4a9e;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out;
}

.talents-panel.collapsed {
    transform: translateX(-100%);
}

.talents-panel-header {
    padding: 15px;
    background: linear-gradient(to right, #4a2a70, #6e4a9e);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #8161be;
}

.talents-panel-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.toggle-talents-panel {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: all 0.2s;
    border-radius: 4px;
}

.toggle-talents-panel:hover {
    background: rgba(255, 255, 255, 0.2);
}

.show-talents-button {
    position: absolute;
    bottom: 80px;
    left: 0;
    background: #6e4a9e;
    color: white;
    border: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 8px 6px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 999;
    display: none;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
}

.show-talents-button:hover {
    background: #8161be;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}



.talents-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

/* Character section in talents panel */
.talents-character {
    margin: 0 15px 20px;
    background: rgba(60, 50, 80, 0.4);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.talents-character-header {
    background: linear-gradient(to right, #3a2a60, #5d3a8e);
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #8161be;
}

.character-portrait-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #8161be;
    margin-right: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    object-fit: cover;
}

.character-name-small {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.talents-list {
    padding: 5px 10px;
}

.talent-item {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 5px 0;
    background: rgba(40, 30, 60, 0.8);
    border-radius: 6px;
    border-left: 3px solid #8161be;
    transition: all 0.2s;
}

.talent-item:hover {
    background: rgba(50, 40, 70, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.talent-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(110, 74, 158, 0.6);
    margin-right: 10px;
    border: 1px solid #8161be;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    padding: 2px;
}

.talent-name {
    color: #e2d3ff;
    font-size: 0.9rem;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    flex: 1;
}

.no-talents-message {
    color: #a68ed1;
    padding: 15px;
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
}

.talent-item[data-powerful="true"] {
    border-left: 3px solid #ffc107;
    background: linear-gradient(to right, rgba(80, 50, 100, 0.8), rgba(40, 30, 60, 0.8));
}

.talent-item[data-powerful="true"] .talent-icon {
    border-color: #ffc107;
    box-shadow: 0 0 6px rgba(255, 193, 7, 0.7);
}

.talent-item[data-powerful="true"] .talent-name {
    color: #ffe082;
}

.talent-item[data-tier="special"] {
    border-left: 3px solid #ff5722;
    background: linear-gradient(to right, rgba(100, 40, 40, 0.8), rgba(40, 30, 60, 0.8));
}

.talent-item[data-tier="special"] .talent-icon {
    border-color: #ff5722;
    box-shadow: 0 0 6px rgba(255, 87, 34, 0.7);
}

.talent-item[data-tier="special"] .talent-name {
    color: #ffccbc;
}

.talents-panel-content::-webkit-scrollbar {
    width: 8px;
}

.talents-panel-content::-webkit-scrollbar-track {
    background: rgba(30, 20, 40, 0.5);
}

.talents-panel-content::-webkit-scrollbar-thumb {
    background: rgba(110, 74, 158, 0.7);
    border-radius: 4px;
}

.talents-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 97, 190, 0.8);
}

@media (max-width: 768px) {
    .talents-panel {
        width: 240px;
    }
    
    .talent-item {
        padding: 6px;
    }
    
    .talent-icon {
        width: 20px;
        height: 20px;
    }
    
    .talent-name {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .talents-panel {
        width: 200px;
    }
    
    .talents-panel-header h2 {
        font-size: 1rem;
    }
    
    .character-portrait-small {
        width: 30px;
        height: 30px;
    }
    
    .character-name-small {
        font-size: 0.9rem;
    }
    

}

.talents-error-message {
    color: #ff5e5e;
    padding: 15px;
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
    background: rgba(50, 0, 0, 0.3);
    border-radius: 6px;
    margin: 15px;
    border: 1px solid rgba(255, 94, 94, 0.3);
}

/* Cooldown Reset Effect */
.ability.cooldown-reset {
    animation: cooldown-reset-pulse 1.5s ease-out;
    overflow: hidden;
}

.ability.cooldown-reset::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0,255,200,0.6) 0%, rgba(0,255,200,0) 70%);
    border-radius: 50%;
    z-index: 2;
    animation: cooldown-reset-glow 1.5s ease-out;
}

@keyframes cooldown-reset-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 200, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px 5px rgba(0, 255, 200, 0.9);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 255, 200, 0);
    }
}

@keyframes cooldown-reset-glow {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    25% {
        transform: scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Add style for controller ability selection that requires a second press */
.ability.controller-ability-selected {
    animation: pulseAbilityConfirm 1.5s infinite;
    box-shadow: 0 0 10px 2px rgba(255, 223, 0, 0.8);
    border: 2px solid #ffdf00;
    position: relative;
}

.ability.controller-ability-selected::after {
    content: "Press A to confirm";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffdf00;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 100;
}

@keyframes pulseAbilityConfirm {
    0% {
        box-shadow: 0 0 10px 2px rgba(255, 223, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(255, 223, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 10px 2px rgba(255, 223, 0, 0.5);
    }
}

.stat-value.debuffed {
    color: #e74c3c; /* Red for debuffed stats */
}

/* NEW: Style for Pain into Power crit damage bonus indication */
.stat-item[data-stat-key="critDamage"] .stat-value.buffed.pain-power-triggered {
    animation: painPowerPulse 0.6s ease-out;
}

@keyframes painPowerPulse {
    0% { transform: scale(1); color: #2ecc71; }
    50% { transform: scale(1.15); color: #f1c40f; text-shadow: 0 0 5px #f1c40f; }
    100% { transform: scale(1); color: #2ecc71; }
}
/* END NEW */

.stats-menu-subheader {
    color: #e0e0e0;
}

.log-entry.renee {
    color: #b97aff;
    font-weight: bold;
    border-left: 3px solid #b97aff;
    background: linear-gradient(90deg, rgba(185,122,255,0.10) 0%, rgba(80,0,120,0.08) 100%);
    box-shadow: 0 2px 8px rgba(185,122,255,0.10);
}

.log-entry.renee::before {
    content: "\1F43A ";
}

/* Wind VFX styles */
.wind-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.wind-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(169, 208, 142, 0.8), rgba(169, 208, 142, 0.2));
    border-radius: 50%;
    animation: wind-drift infinite linear;
    box-shadow: 0 0 4px rgba(169, 208, 142, 0.5);
}

.wind-particle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: scale(0.7);
    opacity: 0.6;
}

@keyframes wind-drift {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(var(--end-left, 100vw)) translateY(-20px) rotate(360deg);
        opacity: 0;
    }
}

/* Wind healing VFX */
.wind-heal-vfx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #a9d08e;
    text-shadow: 
        0 0 8px rgba(169, 208, 142, 0.8),
        0 0 16px rgba(169, 208, 142, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: wind-heal-float 2s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

.wind-heal-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.wind-heal-particles::before,
.wind-heal-particles::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(169, 208, 142, 0.9), rgba(169, 208, 142, 0.3));
    border-radius: 50%;
    animation: wind-heal-particle-flow 2s ease-out infinite;
    box-shadow: 0 0 6px rgba(169, 208, 142, 0.7);
}

.wind-heal-particles::before {
    animation-delay: 0s;
    left: 20%;
    top: 30%;
}

.wind-heal-particles::after {
    animation-delay: 0.3s;
    right: 20%;
    top: 40%;
}

@keyframes wind-heal-float {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -70%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.8);
    }
}

@keyframes wind-heal-particle-flow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3);
    }
    20% {
        opacity: 1;
        transform: translate(10px, -10px) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(30px, -30px) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(50px, -60px) scale(0.3);
    }
}

/* Stage modifier styles for healing farm wind */
.stage-modifier[data-modifier-id="healing_farm_wind"] {
    background: linear-gradient(135deg, rgba(169, 208, 142, 0.2), rgba(169, 208, 142, 0.1));
    border-left: 4px solid #a9d08e;
    animation: gentleGlow 3s ease-in-out infinite alternate;
}

@keyframes gentleGlow {
    0% {
        box-shadow: 0 0 5px rgba(169, 208, 142, 0.3);
    }
    100% {
        box-shadow: 0 0 15px rgba(169, 208, 142, 0.6);
    }
}

.log-entry.stage-effect.wind-heal {
    background: linear-gradient(90deg, rgba(169, 208, 142, 0.1), transparent);
    border-left: 3px solid #a9d08e;
}

.log-entry.stage-effect.wind-heal::before {
    content: "\1F343 ";
    color: #a9d08e;
    margin-right: 5px;
}

/* Challenge guide styles (tutorial challenge) */
.challenge-guide-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 10000;
    pointer-events: none;
}

.challenge-guide-highlight {
    position: fixed;
    z-index: 10001;
    border: 2px solid rgba(255, 215, 64, 0.9);
    border-radius: 14px;
    box-shadow: 0 0 0 2px rgba(255, 215, 64, 0.2), 0 0 20px rgba(255, 215, 64, 0.35);
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.challenge-guide-tooltip {
    position: fixed;
    z-index: 10002;
    width: min(340px, 90vw);
    background: linear-gradient(145deg, rgba(20, 24, 35, 0.96), rgba(34, 40, 56, 0.96));
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 64, 0.35);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    padding: 16px 18px;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.challenge-guide-tooltip.read-status {
    pointer-events: none;
}

.challenge-guide-tooltip.read-status .challenge-guide-footer {
    display: none;
}

.challenge-guide-tooltip.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.challenge-guide-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.challenge-guide-title {
    margin: 0;
    font-size: 1.05rem;
    color: #ffd740;
}

.challenge-guide-progress {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.challenge-guide-description {
    margin: 0;
    color: #f5f5f5;
    font-size: 0.95rem;
    line-height: 1.4;
}

.challenge-guide-hint {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.challenge-guide-hint.challenge-guide-waiting {
    color: #ffd740;
}

.challenge-guide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 8px;
}

.challenge-guide-button {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #0b0f1f;
    background: #ffd740;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.challenge-guide-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.challenge-guide-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(255, 215, 64, 0.35);
}

.challenge-guide-back {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.challenge-guide-skip {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.challenge-guide-active .battle-log-container,
.challenge-guide-active .turn-counter,
.challenge-guide-active .end-turn-button {
    z-index: 5;
}

/* Level Up Notification - Modal */
.level-up-notification {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    z-index: 11000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.level-up-notification.show {
    opacity: 1;
    pointer-events: auto;
}

.level-up-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: center;
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.98), rgba(15, 18, 28, 0.98));
    border: 2px solid rgba(76, 175, 80, 0.55);
    border-radius: 18px;
    padding: 28px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 24px rgba(76, 175, 80, 0.35);
    max-width: min(520px, 92vw);
}

.level-up-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.level-up-close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.level-up-icon {
    font-size: 2rem;
    animation: bounce 0.6s ease-in-out infinite alternate;
}

.level-up-text {
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.level-up-text strong {
    color: #FFD700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Heavy Rain Healing VFX for "It's raining man!" modifier */
.heavy-rain-heal-vfx-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

.heavy-rain-heal-vfx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00BFFF;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 
        0 0 10px rgba(0, 191, 255, 0.8),
        0 0 20px rgba(0, 191, 255, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: heavy-rain-heal-float 2.5s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

.rain-healing-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 191, 255, 0.3) 0%, rgba(0, 150, 255, 0.1) 50%, transparent 100%);
    border-radius: 50%;
    animation: rain-healing-aura-pulse 2s ease-in-out;
    pointer-events: none;
}

.rain-healing-droplet {
    position: absolute;
    width: 3px;
    height: 12px;
    background: linear-gradient(to bottom, rgba(135, 206, 250, 0.9), rgba(0, 191, 255, 0.5));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: rain-droplet-fall linear;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0, 191, 255, 0.6);
}

.rain-healing-lightning {
    position: absolute;
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(0, 191, 255, 0.7));
    border-radius: 1px;
    animation: lightning-flash 0.3s ease-out;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.rain-heal-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.rain-heal-particles::before,
.rain-heal-particles::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(0, 191, 255, 0.9), rgba(0, 150, 255, 0.3));
    border-radius: 50%;
    animation: rain-heal-particle-flow 2s ease-out infinite;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.7);
}

.rain-heal-particles::before {
    animation-delay: 0s;
    left: 20%;
    top: 30%;
}

.rain-heal-particles::after {
    animation-delay: 0.4s;
    right: 20%;
    top: 40%;
}

.rain-healing-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 191, 255, 0.6);
    border-radius: 50%;
    animation: rain-healing-ripple-expand 1.5s ease-out;
    pointer-events: none;
}

.rain-heal-storm-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(0, 191, 255, 0.4));
    border-radius: 50%;
    animation: storm-particle-drift 1.5s ease-out;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(0, 191, 255, 0.5);
}

.rain-heal-electric-swirl {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 191, 255, 0.4);
    border-radius: 50%;
    animation: electric-swirl-rotate 2s linear;
    pointer-events: none;
}

.rain-heal-electric-swirl::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    width: 2px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1px;
    animation: electric-spark 2s linear infinite;
}

/* Animations for heavy rain healing VFX */
@keyframes heavy-rain-heal-float {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -80%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -120%) scale(0.8);
    }
}

@keyframes rain-healing-aura-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
}

@keyframes lightning-flash {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(0.5);
    }
}

@keyframes rain-heal-particle-flow {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }
    30% {
        opacity: 1;
        transform: translate(15px, -15px) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(35px, -35px) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(50px, -60px) scale(0.3);
    }
}

@keyframes rain-healing-ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
        border-width: 3px;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes storm-particle-drift {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(20px, -20px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(40px, -50px) scale(0.3);
    }
}

@keyframes electric-swirl-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.8);
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}

@keyframes electric-spark {
    0%, 90%, 100% {
        opacity: 0;
    }
    5%, 15%, 25% {
        opacity: 1;
    }
}

/* Stage modifier styles for "It's raining man!" */
.stage-modifier[data-modifier-id="its_raining_man"] {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.3), rgba(0, 150, 255, 0.2));
    border-left: 4px solid #00BFFF;
    animation: stormGlow 2s ease-in-out infinite alternate;
}

@keyframes stormGlow {
    0% {
        box-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 191, 255, 0.8);
    }
}

.log-entry.stage-effect.rain-heal {
    background: linear-gradient(90deg, rgba(0, 191, 255, 0.15), transparent);
    border-left: 3px solid #00BFFF;
}

.log-entry.stage-effect.rain-heal::before {
    content: "\26C8\FE0F ";
    color: #00BFFF;
    margin-right: 5px;
}

/* Stage modifier styles for "Small Space" */
.stage-modifier[data-modifier-id="small_space"] {
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.4), rgba(30, 30, 30, 0.3));
    border-left: 4px solid #666666;
    animation: crammedGlow 3s ease-in-out infinite alternate;
}

@keyframes crammedGlow {
    0% {
        box-shadow: 0 0 8px rgba(100, 100, 100, 0.3);
    }
    100% {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.6);
    }
}

/* Stage modifier styles for "Healing Disabled" */
.stage-modifier[data-modifier-id="healing_disabled"] {
    background: linear-gradient(135deg, rgba(64, 0, 64, 0.4), rgba(32, 0, 32, 0.3));
    border-left: 4px solid #800080;
    animation: healingDisabledGlow 2s ease-in-out infinite alternate;
}

@keyframes healingDisabledGlow {
    0% {
        box-shadow: 0 0 8px rgba(64, 0, 64, 0.4);
        border-left-color: #400040;
    }
    100% {
        box-shadow: 0 0 20px rgba(128, 0, 128, 0.8), 0 0 30px rgba(128, 0, 128, 0.3);
        border-left-color: #800080;
    }
}

/* Log entry styles for healing blocked messages */
.log-entry.stage-effect.healing-blocked {
    color: #ff6b9d;
    border-left: 3px solid #400040;
    background: linear-gradient(135deg, rgba(64, 0, 64, 0.1), rgba(32, 0, 32, 0.05));
}

.log-entry.stage-effect.healing-blocked::before {
    content: "\1F6AB\1F49A";
    margin-right: 8px;
}

/* Stage modifier styles for "Cleansing Winds" */
.stage-modifier[data-modifier-id="cleansing_winds"] {
    background: linear-gradient(135deg, rgba(135, 206, 235, 0.15) 0%, rgba(175, 238, 238, 0.12) 50%, rgba(240, 248, 255, 0.08) 100%);
    border-left: 4px solid #87CEEB;
    animation: cleansingWindsGlow 3s ease-in-out infinite alternate;
}

@keyframes cleansingWindsGlow {
    0% {
        box-shadow: 0 0 12px rgba(135, 206, 235, 0.4);
        border-left-color: #87CEEB;
    }
    50% {
        box-shadow: 0 0 25px rgba(175, 238, 238, 0.6), 0 0 35px rgba(135, 206, 235, 0.3);
        border-left-color: #AFEEEE;
    }
    100% {
        box-shadow: 0 0 18px rgba(240, 248, 255, 0.5), 0 0 28px rgba(135, 206, 235, 0.4);
        border-left-color: #F0F8FF;
    }
}

/* Log entry styles for cleansing winds messages */
.log-entry.stage-effect.cleansing-winds {
    color: #87CEEB;
    border-left: 3px solid #87CEEB;
    background: linear-gradient(135deg, rgba(135, 206, 235, 0.1), rgba(175, 238, 238, 0.05));
}

.log-entry.stage-effect.cleansing-winds::before {
    content: "\1F32A\FE0F\2728";
    margin-right: 8px;
}

/* Modern Audio Control */
.audio-control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 25px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(74, 144, 226, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 900; /* Lower than talents panel (1000) so it appears behind it */
    min-width: 200px;
}

.audio-control:hover {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%);
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(74, 144, 226, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.audio-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-icon {
    font-size: 16px;
    color: #4a90e2;
    text-shadow: 0 0 8px rgba(74, 144, 226, 0.4);
    transition: all 0.3s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(74, 144, 226, 0.1);
}

.audio-control-row label {
    color: #e0e6ed;
    font-size: 12px;
    font-weight: 500;
    min-width: 50px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.audio-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, 
        rgba(74, 144, 226, 0.3) 0%, 
        rgba(74, 144, 226, 0.1) 100%);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.audio-slider:hover {
    background: linear-gradient(90deg, 
        rgba(74, 144, 226, 0.4) 0%, 
        rgba(74, 144, 226, 0.2) 100%);
}

.audio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 4px 12px rgba(74, 144, 226, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.audio-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, #5ba0f2 0%, #4588cd 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 6px 16px rgba(74, 144, 226, 0.6),
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: scale(1.2);
}

.audio-slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
    box-shadow: 
        0 2px 8px rgba(74, 144, 226, 0.8),
        0 1px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Firefox slider styling */
.audio-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 4px 12px rgba(74, 144, 226, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.audio-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, 
        rgba(74, 144, 226, 0.3) 0%, 
        rgba(74, 144, 226, 0.1) 100%);
    border: none;
}

/* Mobile responsive audio control */
@media (max-width: 768px) {
    .audio-control {
        top: 15px;
        left: 15px;
        padding: 12px 16px;
        min-width: 180px;
        gap: 8px;
    }
    
    .audio-icon {
        font-size: 14px;
        width: 18px;
        height: 18px;
    }
    
    .audio-control-row label {
        font-size: 11px;
        min-width: 45px;
    }
    
    .audio-slider {
        width: 80px;
        height: 5px;
    }
    
    .audio-slider::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .audio-control {
        top: 10px;
        left: 10px;
        padding: 10px 12px;
        min-width: 160px;
        gap: 6px;
    }
    
    .audio-icon {
        font-size: 12px;
        width: 16px;
        height: 16px;
    }
    
    .audio-control-row label {
        font-size: 10px;
        min-width: 40px;
    }
    
    .audio-slider {
        width: 70px;
        height: 4px;
    }
    
    .audio-slider::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
    }
}

/* Quest System Styles */
.quests-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 350px;
    max-height: 80%;
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(50, 30, 80, 0.95));
    border: 2px solid rgba(120, 80, 200, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    transition: all 0.3s ease;
}

.quests-panel:hover {
    border-color: rgba(150, 100, 255, 0.8);
    box-shadow: 0 12px 40px rgba(120, 80, 200, 0.2);
}

.quests-panel.dragging {
    transition: none;
    cursor: grabbing;
    opacity: 0.9;
}

.quests-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: linear-gradient(90deg, rgba(120, 80, 200, 0.3), rgba(80, 120, 200, 0.3));
    border-bottom: 1px solid rgba(120, 80, 200, 0.5);
    cursor: default;
}

.quest-drag-handle {
    cursor: grab;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
}

.quest-drag-handle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.quest-drag-handle:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.quests-panel-header h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    flex: 1;
    text-align: center;
}

.toggle-quests-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px;
}

.toggle-quests-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.quest-close-button {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1;
}

.quest-close-button:hover {
    background: rgba(220, 53, 69, 0.4);
    transform: translateY(-1px);
}

.quests-panel-content {
    max-height: calc(80vh - 80px);
    overflow-y: auto;
    padding: 0;
}

.quests-panel-content::-webkit-scrollbar {
    width: 6px;
}

.quests-panel-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.quests-panel-content::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 200, 0.6);
    border-radius: 3px;
}

.quests-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 100, 255, 0.8);
}

.quests-loading {
    text-align: center;
    padding: 20px;
    color: #aaa;
    font-style: italic;
}

.quests-empty {
    text-align: center;
    padding: 20px;
    color: #888;
}

.quest-item {
    background: rgba(255, 255, 255, 0.05);
    margin: 10px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(120, 80, 200, 0.3);
    transition: all 0.2s ease;
}

.quest-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(150, 100, 255, 0.5);
    transform: translateY(-1px);
}

.quest-item.completed {
    background: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.5);
    opacity: 0.8;
}

.quest-item.global-quest {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.2));
    border: 2px solid rgba(255, 193, 7, 0.6);
    position: relative;
}

.quest-item.global-quest::before {
    content: '\2728';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 20px;
    animation: sparkle 2s infinite ease-in-out;
}

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

.quest-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}

.quest-icon {
    font-size: 20px;
    margin-right: 8px;
}

.quest-title {
    color: #fff;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

.global-quest-badge {
    background: linear-gradient(135deg, #ffc107, #ff8800);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quest-description {
    color: #ccc;
    margin: 0 0 12px 0;
    font-size: 12px;
    line-height: 1.4;
}

.quest-progress-container {
    margin: 10px 0;
}

.quest-progress-bar {
    background: rgba(255, 255, 255, 0.1);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.quest-progress-fill {
    background: linear-gradient(90deg, #007bff, #00c851);
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
}

.quest-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.quest-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.quest-progress-numbers {
    color: #aaa;
}

.quest-progress-percentage {
    color: #fff;
    font-weight: 600;
}

.quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.quest-reward {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(40, 167, 69, 0.4);
}

.quest-reward.xp {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
    border-color: rgba(0, 123, 255, 0.4);
}

.quest-reward.talent-points {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.4);
}

.quest-reward.character-choice {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));
    color: #8a2be2;
    border-color: rgba(138, 43, 226, 0.4);
    animation: rewardPulse 2s infinite ease-in-out;
}

@keyframes rewardPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Toast-style quest notifications */
.quest-completion-notification,
.quest-notification,
.quest-reward-notification,
.quest-progress-notification,
.reward-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    width: min(420px, calc(100vw - 24px));
    display: block;
    background: transparent;
    z-index: 11000;
    opacity: 0;
    transform: translateX(120%);
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.quest-completion-notification.show,
.quest-notification.show,
.quest-reward-notification.show,
.quest-progress-notification.show,
.reward-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.quest-modal-card,
.quest-completion-content,
.quest-notification-content,
.reward-notification-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.98), rgba(12, 16, 26, 0.98));
    border: 2px solid rgba(120, 80, 200, 0.55);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    max-width: 100%;
    text-align: left;
}

.quest-completion-content {
    align-items: flex-start;
}

.quest-completion-text {
    width: auto;
}

.quest-completion-text h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.quest-completion-text p {
    font-size: 1rem;
    opacity: 0.85;
}

.quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.reward-xp,
.reward-tp,
.reward-currency,
.reward-item,
.reward-icon,
.reward-random-character,
.reward-specific-character {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.reward-xp {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.35);
}

.reward-tp {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.35);
}

.reward-currency {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}

.reward-item,
.reward-icon,
.reward-random-character,
.reward-specific-character {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.35);
}

.quest-notification-content,
.reward-notification-content {
    flex-direction: column;
    gap: 10px;
}

.reward-notification {
    background: rgba(0, 0, 0, 0.78);
}

.reward-notification-content {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 24px rgba(34, 197, 94, 0.35);
}

.reward-notification .reward-icon {
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-notification .reward-text {
    text-align: center;
}

.quest-modal-close {
    display: none;
}

.quest-modal-close:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.quest-completion-icon {
    font-size: 32px;
    margin-bottom: 0;
    animation: none;
}

@keyframes questIconBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

.quest-completion-text h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
}

.quest-completion-text p {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
}

.quest-rewards {
    margin-top: 15px;
}

.reward-xp {
    display: inline-block;
    background: rgba(0, 123, 255, 0.3);
    color: #007bff;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    margin: 5px;
}

.reward-tp {
    display: inline-block;
    background: rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    margin: 5px;
}

.quests-panel.collapsed .quests-panel-content {
    display: none;
}

.quests-panel.collapsed .toggle-quests-button {
    transform: rotate(180deg);
}

/* Character Choice Modal */
.character-choice-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.character-choice-content {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(50, 30, 80, 0.95));
    border: 2px solid rgba(120, 80, 200, 0.7);
    border-radius: 16px;
    padding: 30px;
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
}

.character-choice-content h3 {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 24px;
    font-weight: 700;
}

.character-choice-content p {
    color: #ccc;
    margin: 0 0 25px 0;
    font-size: 16px;
}

.character-choice-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.character-choice-option {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(120, 80, 200, 0.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 150px;
}

.character-choice-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(150, 100, 255, 0.6);
    transform: translateY(-5px);
}

.character-choice-option img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid rgba(120, 80, 200, 0.5);
}

.character-choice-option h4 {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
}

.choose-character-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.choose-character-btn:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
}

/* Quest Notification */
.quest-notification-content h3 {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 768px) {
    .quests-panel {
        width: 300px;
        right: 10px;
        top: 10px;
    }
    
    .character-choice-options {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .quests-panel {
        width: calc(100% - 20px);
        left: 10px;
        right: 10px;
    }
    
    .character-choice-content {
        padding: 20px;
        margin: 10px;
    }
}

/* Quest Panel Toggle Button */
.quest-panel-toggle {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: linear-gradient(135deg, rgba(120, 80, 200, 0.9), rgba(80, 120, 200, 0.9));
    border: 2px solid rgba(120, 80, 200, 0.7);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    z-index: 999;
}

.quest-panel-toggle:hover {
    background: linear-gradient(135deg, rgba(150, 100, 255, 0.9), rgba(100, 150, 255, 0.9));
    border-color: rgba(150, 100, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(120, 80, 200, 0.4);
}

.quest-panel-toggle:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .quest-panel-toggle {
        bottom: 70px;
        left: 10px;
        padding: 10px 14px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .quest-panel-toggle {
        bottom: 60px;
        left: 10px;
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Character Choice Modal */
.character-choice-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.character-choice-modal {
    background: linear-gradient(135deg, rgba(40, 40, 70, 0.95), rgba(70, 40, 100, 0.95));
    border: 3px solid rgba(255, 215, 0, 0.8);
    border-radius: 20px;
    padding: 30px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.character-choice-header {
    text-align: center;
    margin-bottom: 30px;
}

.character-choice-header h2 {
    color: #FFD700;
    font-size: 28px;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.character-choice-header p {
    color: #E0E0E0;
    font-size: 16px;
    margin: 0;
}

.character-choice-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.character-choice-option {
    background: linear-gradient(135deg, rgba(60, 60, 90, 0.9), rgba(90, 60, 120, 0.9));
    border: 2px solid rgba(120, 80, 200, 0.6);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.character-choice-option:hover {
    border-color: rgba(255, 215, 0, 0.8);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.character-image-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #4a4a4a, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-reward-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

.character-choice-option h3 {
    color: #FFD700;
    font-size: 18px;
    margin: 0 0 15px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.select-character-btn {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: none;
    color: #000;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.select-character-btn:hover {
    background: linear-gradient(135deg, #FFA500, #FF8C00);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}

.character-choice-footer {
    text-align: center;
}

.close-choice-modal {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.8), rgba(80, 80, 80, 0.8));
    border: 2px solid rgba(150, 150, 150, 0.6);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-choice-modal:hover {
    background: linear-gradient(135deg, rgba(120, 120, 120, 0.9), rgba(100, 100, 100, 0.9));
    border-color: rgba(180, 180, 180, 0.8);
}

/* Quest Reward Notification */
.quest-reward-notification .reward-notification-content {
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 215, 0, 0.35);
}

.reward-notification-content h3 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 15px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    font-weight: 700;
}

.reward-sparkles {
    font-size: 20px;
    animation: sparkle 1s ease-in-out infinite alternate;
}

@keyframes sparkle {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .character-choice-modal {
        padding: 20px;
        margin: 20px;
    }
    
    .character-choice-options {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .character-choice-header h2 {
        font-size: 24px;
    }
    
    .character-image-container {
        width: 80px;
        height: 80px;
    }
}

.quest-reward.random-character {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.4);
    animation: rewardPulse 2s infinite ease-in-out;
}

.reward-random-character {
    display: inline-block;
    background: rgba(40, 167, 69, 0.3);
    color: #28a745;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    margin: 5px;
}

/* Freeze Miss Visual Effects */
.freeze-miss-vfx {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 6;
}

.frost-shard {
    position: absolute;
    top: 20px;
    width: 6px;
    height: 12px;
    background: linear-gradient(to bottom, rgba(200, 240, 255, 0.9), rgba(150, 210, 255, 0.3));
    transform-origin: center;
    border-radius: 2px;
    animation: frostShardFall 1.4s ease-out forwards;
    filter: drop-shadow(0 0 4px rgba(150, 220, 255, 0.8));
}

.freeze-miss-text {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: bold;
    color: #b3e5ff;
    text-shadow: 0 0 6px rgba(180, 230, 255, 0.9);
    opacity: 0;
    animation: freezeMissText 1.2s ease-out forwards;
}

@keyframes frostShardFall {
    0% { transform: translateY(-10px) scale(1) rotate(0deg); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(60px) scale(0.3) rotate(90deg); opacity: 0; }
}

@keyframes freezeMissText {
    0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -40px) scale(1.1); opacity: 0; }
}

/* === Ice Wall Ability VFX === */
.ice-wall-barrier {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 24px;
    pointer-events: none;
    transform: translateY(-50%) scaleY(0.1);
    background: radial-gradient(circle, rgba(200,240,255,0.95) 0%, rgba(0,160,255,0.9) 40%, rgba(0,120,200,0.85) 70%, rgba(0,90,150,0) 100%);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.9), 0 0 40px rgba(0, 180, 255, 0.7);
    border-top: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    animation: iceWallRise 0.5s ease-out forwards;
    z-index: 500; /* Above characters */
}

@keyframes iceWallRise {
    from {transform: translateY(-50%) scaleY(0.05); opacity: 0;}
    to {transform: translateY(-50%) scaleY(1); opacity: 1;}
}

/* fade-out handled inline via opacity transition */
  
/* Ice Blast flash VFX */
.ice-blast-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(180, 225, 255, 0.75) 0%, rgba(180, 225, 255, 0.4) 40%, rgba(180, 225, 255, 0) 70%);
    pointer-events: none;
    animation: iceBlastFlash 0.6s ease-out forwards;
    z-index: 998;
}

@keyframes iceBlastFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
  
/* === Ice Sword Follow-Up VFX (Atlantean Sub Zero talent) === */
.ice-sword-followup-vfx {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #66ccff;
    text-shadow: 0 0 6px #a8eaff, 0 0 10px #ffffff;
    pointer-events: none;
    animation: iceSwordFollowUpFloat 1s ease-out forwards;
    font-weight: bold;
    z-index: 5;
}

@keyframes iceSwordFollowUpFloat {
    0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -30px) scale(1.3); }
}

/* Atlantean Purification VFX Animations */
@keyframes atlanteanPurificationAura {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.5); 
    }
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.2); 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(1.5); 
    }
}

@keyframes atlanteanDropletFloat {
    0% { 
        transform: translate(-50%, 0) rotate(0deg) translateY(0px);
        opacity: 0; 
    }
    25% { 
        opacity: 1; 
    }
    50% { 
        transform: translate(-50%, 0) rotate(180deg) translateY(-15px);
        opacity: 1; 
    }
    75% { 
        opacity: 1; 
    }
    100% { 
        transform: translate(-50%, 0) rotate(360deg) translateY(0px);
        opacity: 0; 
    }
}

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

@keyframes atlanteanPurificationRipple {
    0% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(0.5); 
    }
    50% { 
        opacity: 0.8; 
        transform: translate(-50%, -50%) scale(1.2); 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(2); 
    }
}

@keyframes atlanteanScreenWave {
    0% { 
        opacity: 0; 
        transform: scale(0.8); 
    }
    30% { 
        opacity: 1; 
        transform: scale(1.1); 
    }
    70% { 
        opacity: 0.8; 
        transform: scale(1); 
    }
    100% { 
        opacity: 0; 
        transform: scale(1.2); 
    }
}

@keyframes atlanteanScreenParticleFloat {
    0% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
    }
    50% { 
        transform: translateY(-50vh) rotate(180deg);
        opacity: 1; 
    }
    90% { 
        opacity: 1; 
    }
    100% { 
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0; 
    }
}

@keyframes atlanteanPurificationFlash {
    0% { 
        opacity: 0; 
    }
    20% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
    }
}

/* Stage modifier styling for Atlantean Purification */
.stage-modifier[data-modifier-id="atlantean_purification"] {
    border-left-color: rgba(100, 200, 255, 0.6);
    background: rgba(100, 200, 255, 0.1);
    animation: atlanteanPurificationGlow 3s ease-in-out infinite alternate;
}

@keyframes atlanteanPurificationGlow {
    0% { 
        box-shadow: 0 0 10px rgba(100, 200, 255, 0.3); 
    }
    100% { 
        box-shadow: 0 0 20px rgba(100, 200, 255, 0.6); 
    }
}

/* Tidal Wave Chaos Stage Modifier VFX */
.stage-modifier[data-modifier-id="tidal_wave_chaos"] {
    border-left-color: rgba(0, 100, 200, 0.8);
    background: rgba(0, 100, 200, 0.15);
    animation: tidalWaveChaosGlow 2s ease-in-out infinite alternate;
}

@keyframes tidalWaveChaosGlow {
    0% { 
        box-shadow: 0 0 15px rgba(0, 100, 200, 0.4); 
    }
    100% { 
        box-shadow: 0 0 30px rgba(0, 100, 200, 0.8); 
    }
}

/* Tidal Wave Chaos Battlefield VFX */
@keyframes tidalMassiveWave {
    0% {
        transform: translateY(100%) rotate(-5deg);
        opacity: 0;
    }
    30% {
        transform: translateY(-20%) rotate(-3deg);
        opacity: 1;
    }
    70% {
        transform: translateY(-40%) rotate(-2deg);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 0;
    }
}

@keyframes tidalWaveParticleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes tidalWaveFoam {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    30% {
        opacity: 1;
        transform: translateY(-50px) scale(1);
    }
    100% {
        transform: translateY(-150px) scale(0.3);
        opacity: 0;
    }
}

@keyframes tidalWaveDroplet {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-100px) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-200px) scale(0.3);
        opacity: 0;
    }
}

.tidal-wave-shake {
    animation: tidalWaveShake 2s ease-in-out;
}

@keyframes tidalWaveShake {
    0%, 100% { margin-left: 0; }
    10% { margin-left: -10px; margin-top: -5px; }
    20% { margin-left: 10px; margin-top: 5px; }
    30% { margin-left: -8px; margin-top: -3px; }
    40% { margin-left: 8px; margin-top: 3px; }
    50% { margin-left: -6px; margin-top: -2px; }
    60% { margin-left: 6px; margin-top: 2px; }
    70% { margin-left: -4px; margin-top: -1px; }
    80% { margin-left: 4px; margin-top: 1px; }
    90% { margin-left: -2px; }
}

/* Tidal Wave Healing VFX */
@keyframes tidalHealingAura {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes tidalHealingSparkle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(0px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(var(--distance));
        opacity: 0;
    }
}

@keyframes tidalHealText {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
        scale: 0.8;
    }
    30% {
        opacity: 1;
        scale: 1.2;
    }
    70% {
        opacity: 1;
        scale: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50px);
        opacity: 0;
        scale: 0.9;
    }
}

/* Tidal Wave Damage VFX */
@keyframes tidalDamageImpact {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

@keyframes tidalDamageParticle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(0px);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance));
        opacity: 0;
    }
}

@keyframes tidalDamageText {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
        scale: 0.8;
    }
    20% {
        opacity: 1;
        scale: 1.3;
    }
    80% {
        opacity: 1;
        scale: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-40px);
        opacity: 0;
        scale: 0.9;
    }
}

/* Sunlight resource bar for Atlantean Kotal Kahn */
.sunlight-bar {
    height: 100%;
    background: linear-gradient(to right, #ffcc33, #ffec8b);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* ------------------------------------------
   Targeting Visual Enhancements
   ------------------------------------------ */
.character-slot.targeting {
    filter: brightness(40%) contrast(80%);
    opacity: 0.6;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Highlight valid targets & the selected caster */
.character-slot.targeting.valid-target,
.character-slot.targeting.selected {
    filter: brightness(100%) contrast(100%);
    opacity: 1;
}

body.rush-targeting-active .character-slot.targeting.invalid-target {
    filter: brightness(78%) contrast(92%);
    opacity: 0.9;
}

/* ------------------------------------------
   Quick Action Bar
   ------------------------------------------ */
.quick-action-bar {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    z-index: 1200; /* slightly above panels */
}

.quick-action-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateX(-1px);
}

.quick-action-btn:active {
    transform: translateX(0);
    background: rgba(255, 255, 255, 0.10);
}

.quick-action-btn .qab-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Toggle button: keeps the bar usable when collapsed */
.quick-action-toggle .qab-icon {
    transition: transform 0.15s ease;
}

.quick-action-bar.collapsed {
    padding: 10px 6px;
}

.quick-action-bar.collapsed .quick-action-btn:not(.quick-action-toggle) {
    display: none;
}

.quick-action-bar.collapsed .quick-action-toggle .qab-icon {
    transform: rotate(180deg);
}

/* Hide legacy floating buttons now replaced by quick bar - only in raid game context */
.raid-game-context #quest-panel-toggle,
.raid-game-context #show-talents-button,
.raid-game-context #show-log-button,
.raid-game-context #show-statistics-button {
    display: none !important;
}

/* Audio Controls - visible by default */
.audio-control {
    display: none;
}

.audio-control.show {
    display: block;
}

/* ------------------------------------------
   Options Menu Modal
   ------------------------------------------ */
.options-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(1200px 600px at 50% 20%, rgba(94, 129, 244, 0.18), transparent 60%),
        rgba(0, 0, 0, 0.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 12000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: optionsFadeIn 0.18s ease-out;
}

.options-menu-overlay[style*="display: none"] {
    display: none !important;
}

@keyframes optionsFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.options-menu-content {
    width: min(920px, calc(100vw - 44px));
    max-height: min(84vh, 780px);
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(18, 20, 32, 0.98), rgba(14, 16, 26, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(94, 129, 244, 0.18) inset;
    animation: optionsSlideIn 0.22s cubic-bezier(0.2, 1.1, 0.2, 1);
}

@keyframes optionsSlideIn {
    from {
        transform: translateY(-14px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.options-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}

.options-menu-header h2 {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 20px;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.options-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.options-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.options-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    font-size: 22px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.options-close-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.options-close-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(94, 129, 244, 0.55);
}

.options-menu-body {
    padding: 16px 18px 18px;
    overflow: auto;
    max-height: calc(min(84vh, 780px) - 64px);
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.options-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
}

.options-card-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.70);
    margin-bottom: 10px;
}

.options-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.options-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-bottom: 10px;
    position: relative;
}

.options-toggle:last-child {
    margin-bottom: 0;
}

.options-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

.options-toggle:focus-within {
    box-shadow: 0 0 0 2px rgba(94, 129, 244, 0.55);
}

.options-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.options-toggle-title {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.options-toggle-desc {
    color: rgba(255, 255, 255, 0.60);
    font-size: 12px;
    line-height: 1.35;
}

.toggle-ui {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.toggle-ui::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    transition: left 0.15s ease, background 0.15s ease;
}

.options-checkbox:checked + .toggle-ui {
    background: rgba(76, 175, 80, 0.22);
    border-color: rgba(76, 175, 80, 0.45);
}

.options-checkbox:checked + .toggle-ui::after {
    left: 23px;
    background: rgba(255, 255, 255, 0.96);
}

/* Options slider */
.options-slider-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
}

.options-slider-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 13px;
    font-weight: 700;
}

.options-slider-title {
    color: rgba(255, 255, 255, 0.88);
}

.options-slider-value {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

.options-range {
    width: 100%;
}

.options-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    padding-left: 2px;
    line-height: 1.4;
}

.options-speed-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.options-speed-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.options-speed-value {
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(94, 129, 244, 0.14);
    border: 1px solid rgba(94, 129, 244, 0.25);
}

.options-speed-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.options-speed-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.90);
    border-radius: 10px;
    padding: 10px 10px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.options-speed-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
}

.options-speed-btn.active {
    border-color: rgba(94, 129, 244, 0.55);
    box-shadow: 0 0 0 2px rgba(94, 129, 244, 0.22);
}

.options-speed-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(94, 129, 244, 0.55);
}

/* Simple Character Cards Mode */
body.simple-character-cards .character-slot {
    padding: 0;
}

.options-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.options-action-btn {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 900;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.options-action-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
}

.options-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(94, 129, 244, 0.55);
}

.options-action-btn.primary {
    border-color: rgba(76, 175, 80, 0.30);
    background: rgba(76, 175, 80, 0.10);
}

.options-action-btn.primary:hover {
    border-color: rgba(76, 175, 80, 0.55);
    background: rgba(76, 175, 80, 0.16);
}

.options-action-btn.secondary {
    border-color: rgba(33, 150, 243, 0.28);
    background: rgba(33, 150, 243, 0.09);
}

.options-action-btn.secondary:hover {
    border-color: rgba(33, 150, 243, 0.50);
    background: rgba(33, 150, 243, 0.14);
}

/* Give Up Button */
.giveup-btn {
    border-color: rgba(244, 67, 54, 0.4);
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.05));
}

.giveup-btn:hover {
    border-color: rgba(244, 67, 54, 0.8);
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.25), rgba(244, 67, 54, 0.15));
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.3);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .options-menu-content {
        width: calc(100vw - 28px);
    }

    .options-grid {
        grid-template-columns: 1fr;
    }

    .options-actions {
        flex-direction: column;
    }
}

/* ------------------------------------------
   Custom Confirm Dialog
   ------------------------------------------ */
.custom-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2147483646;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: confirmFadeIn 0.2s ease-out;
}

@keyframes confirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.custom-confirm-content {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(255, 193, 7, 0.4);
    border-radius: 20px;
    padding: 40px 50px;
    min-width: 400px;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 40px rgba(255, 193, 7, 0.2);
    animation: confirmSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

@keyframes confirmSlideIn {
    from {
        transform: scale(0.8) translateY(-50px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.custom-confirm-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.custom-confirm-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffc107;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.custom-confirm-message {
    font-size: 18px;
    color: #e0e0e0;
    margin-bottom: 30px;
    line-height: 1.6;
}

.custom-confirm-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.custom-confirm-btn {
    flex: 1;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    border: 2px solid;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Exo 2', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.confirm-yes {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    border-color: rgba(76, 175, 80, 0.6);
    color: #4caf50;
}

.confirm-yes:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.2));
    border-color: #4caf50;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
    transform: translateY(-2px);
}

.confirm-no {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
    border-color: rgba(244, 67, 54, 0.6);
    color: #f44336;
}

.confirm-no:hover {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.3), rgba(244, 67, 54, 0.2));
    border-color: #f44336;
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.4);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-confirm-content {
        min-width: 300px;
        padding: 30px;
    }

    .custom-confirm-icon {
        font-size: 48px;
    }

    .custom-confirm-title {
        font-size: 22px;
    }

    .custom-confirm-message {
        font-size: 16px;
    }

    .custom-confirm-buttons {
        flex-direction: column;
    }
}

/* Character Image Flash Animations for Damage and Healing */
.character-damage-flash {
    animation: characterDamageFlash 0.6s ease-out !important;
}

.character-critical-damage-flash {
    animation: characterCriticalDamageFlash 1s ease-out !important;
}

.character-healing-flash {
    animation: characterHealingFlash 0.8s ease-out !important;
}

.character-critical-healing-flash {
    animation: characterCriticalHealingFlash 1.2s ease-out !important;
}

@keyframes characterDamageFlash {
    0% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
    }
    15% { 
        filter: brightness(1.3) saturate(1.5) hue-rotate(-10deg);
        box-shadow: 0 0 15px rgba(255, 50, 50, 0.8);
    }
    30% { 
        filter: brightness(1.1) saturate(1.2);
        box-shadow: 0 0 10px rgba(255, 100, 100, 0.6);
    }
    100% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
    }
}

@keyframes characterCriticalDamageFlash {
    0% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
        transform: scale(1);
    }
    10% { 
        filter: brightness(1.5) saturate(2) hue-rotate(-15deg);
        box-shadow: 0 0 25px rgba(255, 0, 0, 1);
        transform: scale(1.02);
    }
    25% { 
        filter: brightness(1.3) saturate(1.7) hue-rotate(-10deg);
        box-shadow: 0 0 20px rgba(255, 50, 50, 0.9);
        transform: scale(1.01);
    }
    50% { 
        filter: brightness(1.1) saturate(1.3);
        box-shadow: 0 0 15px rgba(255, 100, 100, 0.7);
        transform: scale(1);
    }
    100% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
        transform: scale(1);
    }
}

@keyframes characterHealingFlash {
    0% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
    }
    15% { 
        filter: brightness(1.2) saturate(1.4) hue-rotate(10deg);
        box-shadow: 0 0 15px rgba(50, 255, 100, 0.8);
    }
    30% { 
        filter: brightness(1.1) saturate(1.2);
        box-shadow: 0 0 10px rgba(100, 255, 150, 0.6);
    }
    100% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
    }
}

@keyframes characterCriticalHealingFlash {
    0% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
        transform: scale(1);
    }
    10% { 
        filter: brightness(1.4) saturate(1.8) hue-rotate(15deg);
        box-shadow: 0 0 25px rgba(100, 255, 200, 1);
        transform: scale(1.02);
    }
    25% { 
        filter: brightness(1.2) saturate(1.5) hue-rotate(10deg);
        box-shadow: 0 0 20px rgba(150, 255, 200, 0.9);
        transform: scale(1.01);
    }
    50% { 
        filter: brightness(1.1) saturate(1.2);
        box-shadow: 0 0 15px rgba(200, 255, 220, 0.7);
        transform: scale(1);
    }
    100% { 
        filter: brightness(1) saturate(1);
        box-shadow: none;
        transform: scale(1);
    }
}

/* Energy cost indicator for energy-based characters */
.ability-energy-cost {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background-color: #f1c40f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: #2c3e50;
    border: 1px solid #d4af37;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(241, 196, 15, 0.3);
}

/* Rage cost indicator for rage-based characters */
.ability-rage-cost {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background-color: #e74c3c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    border: 1px solid #c0392b;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

/* Rage Bar Styles - for Shao Kahn and other rage-based characters */
.rage-bar {
    height: 100%;
    background: linear-gradient(to right, #dc2626, #ef4444);
    width: 100%;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rage-bar.rage-casting {
    animation: rageCasting 0.5s ease-out;
}

.rage-bar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    pointer-events: none;
}

.rage-bar.rage-restoring::after {
    animation: rageWave 1s ease-out;
}

/* Rage Animation Keyframes */
@keyframes rageCasting {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.3) saturate(1.2); }
    100% { filter: brightness(1); }
}

@keyframes rageWave {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Rage Animation Styles */
.bar-container.rage-drain {
    animation: rageDrain 0.5s ease-out;
}

.bar-container.rage-restore {
    animation: rageRestore 0.3s ease-out;
}

.bar-container.rage-empty {
    animation: rageEmpty 0.8s ease-out;
}

@keyframes rageDrain {
    0% { filter: brightness(1); }
    50% { filter: brightness(0.7) hue-rotate(20deg); }
    100% { filter: brightness(1); }
}

@keyframes rageRestore {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.4) saturate(1.3); box-shadow: 0 0 20px rgba(239,68,68,0.6); }
    100% { filter: brightness(1); box-shadow: none; }
}

@keyframes rageEmpty {
    0%, 100% { filter: brightness(1); }
    25%, 75% { filter: brightness(0.5) grayscale(0.3); }
    50% { filter: brightness(0.3) grayscale(0.5); }
}

/* Dead character rage bar */
.character-slot.character-dead .rage-bar {
    background-color: #333;
}

.character-slot.character-dead .rage-bar::before {
    width: 0 !important;
}

/* === ATLANTEAN SPIRITWALK VISUAL EFFECTS === */

/* No image-container effects - only shield VFX now */


/* Atlantean Spiritwalk Shield Container */
.atlantean-spiritwalk-shield {
    position: absolute;
    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;
    z-index: 20;
    pointer-events: none;
    animation: atlanteanShieldActivation 1s ease-out forwards;
}

@keyframes atlanteanShieldActivation {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Atlantean Shield Dome - Pure Blue themed */
.atlantean-shield-dome {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: radial-gradient(
        circle at 30% 30%, 
        rgba(30, 144, 255, 0.4) 0%, 
        rgba(0, 119, 190, 0.3) 30%, 
        rgba(0, 100, 200, 0.2) 60%, 
        rgba(0, 50, 150, 0.1) 100%
    );
    border: 3px solid rgba(30, 144, 255, 0.8);
    border-radius: 50%;
    animation: atlanteanDomePulse 3s ease-in-out infinite;
    box-shadow: 
        inset 0 0 20px rgba(30, 144, 255, 0.4),
        0 0 30px rgba(30, 144, 255, 0.6),
        0 0 50px rgba(0, 119, 190, 0.4);
}

@keyframes atlanteanDomePulse {
    0%, 100% {
        border-color: rgba(30, 144, 255, 0.8);
        box-shadow: 
            inset 0 0 20px rgba(30, 144, 255, 0.4),
            0 0 30px rgba(30, 144, 255, 0.6),
            0 0 50px rgba(0, 119, 190, 0.4);
    }
    33% {
        border-color: rgba(30, 144, 255, 1);
        box-shadow: 
            inset 0 0 30px rgba(30, 144, 255, 0.6),
            0 0 40px rgba(30, 144, 255, 0.8),
            0 0 60px rgba(0, 119, 190, 0.6);
    }
    66% {
        border-color: rgba(0, 119, 190, 0.9);
        box-shadow: 
            inset 0 0 25px rgba(30, 144, 255, 0.5),
            0 0 35px rgba(30, 144, 255, 0.7),
            0 0 55px rgba(0, 119, 190, 0.5);
    }
}

/* Floating Atlantean Droplets - Pure Blue */
.atlantean-droplet {
    position: absolute;
    width: 6px;
    height: 8px;
    background: linear-gradient(to bottom, rgba(30, 144, 255, 0.9), rgba(0, 119, 190, 0.8));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: atlanteanDropletFloat 4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(30, 144, 255, 0.6);
}

.atlantean-droplet:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
.atlantean-droplet:nth-child(2) { top: 25%; right: 15%; animation-delay: 0.7s; }
.atlantean-droplet:nth-child(3) { top: 45%; left: 10%; animation-delay: 1.4s; }
.atlantean-droplet:nth-child(4) { top: 65%; right: 20%; animation-delay: 2.1s; }
.atlantean-droplet:nth-child(5) { bottom: 25%; left: 30%; animation-delay: 2.8s; }
.atlantean-droplet:nth-child(6) { bottom: 15%; right: 25%; animation-delay: 3.5s; }

@keyframes atlanteanDropletFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.7; 
    }
    25% { 
        transform: translateY(-8px) rotate(90deg); 
        opacity: 1; 
    }
    50% { 
        transform: translateY(-4px) rotate(180deg); 
        opacity: 0.8; 
    }
    75% { 
        transform: translateY(-12px) rotate(270deg); 
        opacity: 0.9; 
    }
}

/* Swirling Atlantean Energy Rings - Pure Blue */
.atlantean-energy-ring {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(30, 144, 255, 0.7);
    border-radius: 50%;
    animation: atlanteanRingRotation 6s linear infinite;
    border-style: dashed;
    border-spacing: 4px;
}

.atlantean-energy-ring:nth-child(odd) {
    animation-direction: reverse;
    border-color: rgba(30, 144, 255, 0.6);
}

.atlantean-energy-ring:nth-child(3n) {
    border-color: rgba(0, 119, 190, 0.8);
    animation-duration: 4s;
}

@keyframes atlanteanRingRotation {
    0% { 
        transform: rotate(0deg); 
        border-color: rgba(30, 144, 255, 0.7); 
    }
    33% { 
        border-color: rgba(30, 144, 255, 0.9); 
    }
    66% { 
        border-color: rgba(0, 119, 190, 0.8); 
    }
    100% { 
        transform: rotate(360deg); 
        border-color: rgba(30, 144, 255, 0.7); 
    }
}

/* Atlantean Shield Value Display - Pure Blue */
.atlantean-shield-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: rgba(30, 144, 255, 1);
    text-shadow: 
        0 0 8px rgba(30, 144, 255, 1),
        0 0 16px rgba(30, 144, 255, 0.8),
        0 0 24px rgba(0, 119, 190, 0.6);
    animation: atlanteanValuePulse 2.5s ease-in-out infinite;
    z-index: 25;
}

@keyframes atlanteanValuePulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.9; 
        text-shadow: 
            0 0 8px rgba(30, 144, 255, 1),
            0 0 16px rgba(30, 144, 255, 0.8);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 1; 
        text-shadow: 
            0 0 12px rgba(30, 144, 255, 1),
            0 0 24px rgba(30, 144, 255, 1),
            0 0 36px rgba(0, 119, 190, 0.8);
    }
}

/* Atlantean Shield Destruction Animation */
.atlantean-shield-destruction {
    animation: atlanteanShieldDestruction 0.5s ease-out forwards;
}

@keyframes atlanteanShieldDestruction {
    0% { 
        transform: scale(1); 
        opacity: 1; 
        filter: brightness(1);
    }
    25% { 
        transform: scale(1.1); 
        opacity: 0.8; 
        filter: brightness(1.5);
    }
    50% { 
        transform: scale(0.9); 
        opacity: 0.5; 
        filter: brightness(0.5) blur(1px);
    }
    100% { 
        transform: scale(0); 
        opacity: 0; 
        filter: brightness(0) blur(2px);
    }
}

/* === SPEECH BUBBLE FOR CHARACTER VOICES === */
.speech-bubble {
    position: absolute; /* Changed to fixed to match JS */
    /* top and left will be set by JavaScript */
    opacity: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.98));
    color: #222;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.3);
    z-index: 99999; /* Match JS z-index */
    pointer-events: none;
    white-space: nowrap;
    border: 2px solid rgba(100, 100, 100, 0.2);
}

/* Tail pointing DOWN (for bubbles above characters - player team) */
.speech-bubble-above::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.98);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

/* Tail pointing UP (for bubbles below characters - AI team) */
.speech-bubble-below::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(255, 255, 255, 0.98);
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.2));
}

/* Remove old generic tail */
.speech-bubble::after {
    display: none;
}

.speech-dots {
    display: inline-block;
    letter-spacing: 3px;
    animation: speechDots 1.4s infinite;
    font-size: 24px; /* Larger dots */
    color: #444;
}

.speech-bubble-fade {
    animation: speechBubbleFade 0.3s ease-out forwards;
}

@keyframes speechBubbleAppear {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) scale(1.1);
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

/* ==================== REACTION ABILITY SYSTEM ==================== */

/* Reaction Prompt Container */
.reaction-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 99999; /* Above everything including the freeze overlay */
    opacity: 1;
    transition: all 0.3s ease-out;
    pointer-events: all;
}

.reaction-prompt-content {
    background: #0b0b0b;
    border: 2px solid #ffffff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.75);
    min-width: 520px;
    max-width: 720px;
    animation: reactionPromptAppear 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes reactionPromptAppear {
    0% {
        transform: scale(0.5) rotateY(-20deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

/* Reaction Header */
.reaction-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.reaction-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reaction-character-portrait {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    object-fit: cover;
}

.reaction-title h3 {
    margin: 0;
    font-size: 20px;
    color: #ffffff;
    text-shadow: none;
}

.reaction-trigger {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
}

/* Minimal summary blocks (Incoming / React With / Affected) */
.reaction-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.reaction-summary-block {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
}

.reaction-summary-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.reaction-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reaction-mini-char {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    object-fit: cover;
}

.reaction-mini-ability {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    object-fit: cover;
}

.reaction-summary-sep {
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
}

.reaction-summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reaction-summary-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    line-height: 1.1;
}

.reaction-muted {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
}

.reaction-affected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reaction-affected-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    max-width: 84px;
}

.reaction-affected-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    object-fit: cover;
}

.reaction-affected-name {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 84px;
}

/* Reaction Ability Info */
.reaction-ability-info {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.reaction-ability-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 2px solid #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    object-fit: cover;
}

.reaction-ability-details {
    flex: 1;
}

.reaction-ability-details h4 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.reaction-ability-desc {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #ccc;
    line-height: 1.4;
}

.reaction-ability-cost {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mana-cost {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(30, 144, 255, 0.2);
    border: 1px solid rgba(30, 144, 255, 0.5);
    border-radius: 6px;
    color: #1e90ff;
    font-weight: bold;
    font-size: 14px;
}

.mana-icon {
    font-size: 16px;
}

/* Reaction Timer */
.reaction-timer-container {
    position: relative;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    height: 30px;
}

.reaction-timer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #ffffff;
    transition-property: width;
    box-shadow: none;
}

.reaction-timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-weight: bold;
    font-size: 16px;
    text-shadow: none;
    z-index: 1;
}

/* Reaction Buttons */
.reaction-buttons {
    display: flex;
    gap: 15px;
}

.reaction-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 25px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reaction-yes-btn {
    background: #ffffff;
    color: #000000;
    box-shadow: none;
}

.reaction-yes-btn:hover {
    transform: translateY(-1px);
}

.reaction-yes-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.reaction-no-btn {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: none;
}

.reaction-no-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
}

.reaction-no-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.btn-icon {
    font-size: 20px;
}

/* NEW VS LAYOUT - Two-Card Design */
.reaction-abilities-display {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
    padding: 0;
}

.reaction-ability-card {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.reaction-ability-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    pointer-events: none;
    border-radius: 10px;
}

/* Incoming Ability (Left Card - Danger Theme) */
.reaction-ability-card.incoming-ability {
    border-color: rgba(255, 107, 107, 0.5);
    background: rgba(255, 107, 107, 0.05);
}

.reaction-ability-card.incoming-ability::before {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.reaction-ability-card.incoming-ability .ability-card-header {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

/* Your Reaction (Right Card - Safe/Action Theme) */
.reaction-ability-card.your-reaction {
    border-color: rgba(78, 205, 196, 0.5);
    background: rgba(78, 205, 196, 0.05);
}

.reaction-ability-card.your-reaction::before {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a3d5 100%);
}

.reaction-ability-card.your-reaction .ability-card-header {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a3d5 100%);
}

/* Card Headers */
.ability-card-header {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
}

/* Ability Icons */
.ability-card-icon-wrapper {
    width: 90px;
    height: 90px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ability-card-icon {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 3px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5),
                0 5px 15px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    transition: all 0.3s ease;
}

.reaction-ability-card:hover .ability-card-icon {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.7),
                0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Card Info */
.ability-card-info {
    text-align: center;
    width: 100%;
}

.ability-card-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
}

.ability-card-source {
    font-size: 13px;
    color: #aaa;
    margin: 0;
    font-style: italic;
}

.ability-card-cost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(30, 144, 255, 0.2);
    border: 1px solid rgba(30, 144, 255, 0.5);
    border-radius: 6px;
    color: #1e90ff;
    font-weight: bold;
    font-size: 13px;
    margin-top: 4px;
}

.ability-card-cost .mana-icon {
    font-size: 14px;
}

/* Character Icons in Reaction Prompt */
.reaction-character-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.reaction-char-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.reaction-char-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    object-fit: cover;
    transition: all 0.3s ease;
}

.reaction-char-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.reaction-char-label {
    font-size: 11px;
    color: #ffd700;
    font-weight: bold;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reaction-arrow {
    font-size: 24px;
    color: #ff6b6b;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    animation: arrowPulse 1s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* VS Divider */
.reaction-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-shrink: 0;
    position: relative;
}

.reaction-vs-divider::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 215, 0, 0.3) 10%,
        rgba(255, 215, 0, 0.8) 50%,
        rgba(255, 215, 0, 0.3) 90%,
        transparent 100%);
    transform: translateX(-50%);
}

.vs-text {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #ffd700;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8),
                 0 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4),
                0 5px 20px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(255, 215, 0, 0.2);
    animation: vsGlow 2s ease-in-out infinite;
}

@keyframes vsGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.4),
                    0 5px 20px rgba(0, 0, 0, 0.5),
                    inset 0 0 20px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 45px rgba(255, 215, 0, 0.6),
                    0 5px 25px rgba(0, 0, 0, 0.6),
                    inset 0 0 30px rgba(255, 215, 0, 0.3);
    }
}

/* Description Area */
.reaction-ability-description {
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    text-align: center;
}

.reaction-ability-description p {
    margin: 0;
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
}

/* ==================== MULTI-REACTION SELECTION SYSTEM ==================== */

/* Multi-Reaction Prompt */
.multi-reaction-prompt .reaction-prompt-content {
    min-width: 600px;
    max-width: 800px;
}

.multi-reaction-content {
    max-height: 90vh;
    overflow-y: auto;
}

.reaction-subtitle {
    margin: 5px 0 0 0;
    font-size: 13px;
    color: #aaa;
    text-align: center;
}

/* Incoming Threat Info Banner */
.incoming-threat-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

.incoming-threat-info img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: none;
}

.incoming-threat-info div {
    flex: 1;
    font-size: 14px;
    color: #fff;
}

.incoming-threat-info strong {
    color: #ffffff;
}

/* Reaction Options Container */
.reaction-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
}

/* Individual Reaction Option */
.reaction-option {
    width: 100%;
}

.reaction-option-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.reaction-option-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
    transition: left 0.5s ease;
}

.reaction-option-btn:hover::before {
    left: 100%;
}

.reaction-option-btn:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.09);
    margin-left: 3px;
    box-shadow: none;
}

.reaction-option-btn:active {
    transform: translateX(3px) scale(0.98);
}

/* New option icon (simplified markup) */
.reaction-option-ability-icon {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    object-fit: cover;
    flex-shrink: 0;
}

/* Reaction Option Info */
.reaction-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.reaction-option-name {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: none;
}

.reaction-option-desc {
    font-size: 13px;
    color: #ccc;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
}

.reaction-option-stats {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

/* Skip Button */
.reaction-skip-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 15px 25px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

.reaction-skip-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
}

.reaction-skip-btn:active {
    transform: translateY(-1px) scale(1);
}

.reaction-skip-btn .btn-hint {
    font-size: 12px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
}

/* Responsive for Multi-Reaction */
@media (max-width: 768px) {
    .multi-reaction-prompt .reaction-prompt-content {
        min-width: 350px;
        max-width: 95vw;
    }

    .reaction-option-btn {
        flex-direction: column;
        text-align: center;
    }

    .reaction-option-icon {
        width: 60px;
        height: 60px;
    }

    .reaction-option-name {
        font-size: 16px;
    }

    .reaction-option-desc {
        font-size: 12px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .reaction-prompt-content {
        min-width: 350px;
        max-width: 90vw;
        padding: 20px;
    }

    .reaction-abilities-display {
        flex-direction: column;
        gap: 15px;
    }

    .reaction-vs-divider {
        width: 100%;
        height: 50px;
        flex-direction: row;
    }

    .reaction-vs-divider::before {
        top: 50%;
        left: 0;
        right: 0;
        width: auto;
        height: 2px;
        background: linear-gradient(to right, 
            transparent 0%, 
            rgba(255, 215, 0, 0.3) 10%,
            rgba(255, 215, 0, 0.8) 50%,
            rgba(255, 215, 0, 0.3) 90%,
            transparent 100%);
        transform: translateY(-50%);
    }

    .ability-card-icon-wrapper {
        width: 70px;
        height: 70px;
    }

    .ability-card-name {
        font-size: 16px;
    }
}

/* ==================== MODIFIER SELECTION (THEME OVERRIDES) ==================== */
/* Keep the clean RAID layout, but keep rarity colors/glow.
   Make cards larger and the panel not full-height. */

#modifier-overlay.modifier-overlay {
    top: 6vh !important;
    height: 88vh !important;
    background: rgba(0, 0, 0, 0.92) !important;
    border-left: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
    box-shadow: -14px 0 38px rgba(0, 0, 0, 0.65) !important;
    width: 680px !important;
    overflow: hidden !important;
}

#modifier-overlay .modifier-selection-container {
    background: #0b0b0b !important;
    padding: 16px !important;
    height: 100% !important;
    overflow-y: auto !important;
}

#modifier-overlay .modifier-header,
#ai-modifier-overlay .ai-modifier-subtitle {
    display: none !important;
}

#modifier-overlay .modifier-options {
    gap: 14px !important;
    margin-bottom: 14px !important;
    flex: 1 !important;
}

#modifier-overlay .modifier-card,
#ai-modifier-overlay .ai-modifier-card {
    min-height: 170px !important;
    padding: 16px !important;
    border-radius: 14px !important;
}

#modifier-overlay .modifier-card:hover {
    transform: translateX(-3px) scale(1.01) !important;
}

#modifier-overlay .modifier-icon img,
#ai-modifier-overlay .modifier-icon img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    object-fit: cover !important;
}

#modifier-overlay .modifier-name,
#ai-modifier-overlay .modifier-name {
    color: #ffffff !important;
    text-shadow: none !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
}

#modifier-overlay .modifier-description,
#ai-modifier-overlay .modifier-description {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

#modifier-overlay .modifier-meta {
    margin-top: 6px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Keep neon-name spans readable but not overpowering */
#modifier-overlay .neon-character-name,
#modifier-overlay .neon-character-name-red,
#ai-modifier-overlay .neon-character-name,
#ai-modifier-overlay .neon-character-name-red {
    filter: none !important;
}

#modifier-overlay .modifier-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

#modifier-overlay .reroll-modifier-btn,
#modifier-overlay .skip-modifier-btn {
    flex: 1 !important;
    border-radius: 10px !important;
    padding: 12px 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: none !important;
}

#modifier-overlay .reroll-modifier-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
}

#modifier-overlay .skip-modifier-btn {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
}

/* Restore handle for pending modifier choices */
#modifier-overlay-handle {
    position: fixed;
    left: auto;
    bottom: 14px;
    top: auto;
    right: 14px;
    transform: none;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

#modifier-overlay-handle.hidden {
    display: none;
}

@media (max-width: 768px) {
    #modifier-overlay .modifier-footer {
        grid-template-columns: 1fr !important;
    }

    #modifier-overlay-handle {
        left: auto;
        bottom: 10px;
        right: 10px;
    }
}

@media (max-width: 768px) {
    #modifier-overlay.modifier-overlay {
        top: 4vh !important;
        height: 92vh !important;
        width: 94vw !important;
    }
}

/* Reaction Burst VFX */
.reaction-burst-vfx {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    animation: reactionBurst 1s ease-out forwards;
}

.reaction-burst-vfx::before {
    content: '\26A1';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    color: #ffd700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    animation: reactionBurstIcon 1s ease-out forwards;
}

.reaction-burst-vfx::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: reactionBurstCircle 1s ease-out forwards;
}

@keyframes reactionBurst {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes reactionBurstIcon {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2) rotate(360deg);
        opacity: 0;
    }
}

@keyframes reactionBurstCircle {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* Character Reaction Glow */
.reaction-glow {
    animation: reactionCharacterGlow 1.5s ease-in-out;
}

@keyframes reactionCharacterGlow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0px transparent);
    }
    50% {
        filter: brightness(1.5) drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
    }
}

/* Reaction Ability Icon Flash Effect */
.reaction-activated-flash {
    animation: reactionIconFlash 1.5s ease-in-out;
    position: relative;
    z-index: 1000;
}

@keyframes reactionIconFlash {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(255, 215, 0, 0);
    }
    15% {
        transform: scale(1.3);
        box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 215, 0, 0.6);
    }
    30% {
        transform: scale(1.15);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
    }
    45% {
        transform: scale(1.25);
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.9), 0 0 70px rgba(255, 215, 0, 0.5);
    }
    60% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(255, 215, 0, 0);
    }
}

/* Ability Reset Flash Effect (global) */
.ability-reset-flash {
    animation: abilityResetFlash 2s linear;
    position: relative;
    z-index: 1000;
}

@keyframes abilityResetFlash {
    0%   { transform: scale(1) rotate(0deg); filter: brightness(1); box-shadow: 0 0 0px rgba(255, 215, 0, 0); }
    5%   { transform: scale(1.22) rotate(-2deg); filter: brightness(1.8); box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 90px rgba(255, 215, 0, 0.55); }
    10%  { transform: scale(1.08) rotate(2deg); filter: brightness(1.3); box-shadow: 0 0 18px rgba(255, 215, 0, 0.6), 0 0 36px rgba(255, 215, 0, 0.35); }
    15%  { transform: scale(1.25) rotate(-2deg); filter: brightness(1.9); box-shadow: 0 0 55px rgba(255, 215, 0, 1), 0 0 100px rgba(255, 215, 0, 0.6); }
    20%  { transform: scale(1.06) rotate(2deg); filter: brightness(1.25); box-shadow: 0 0 14px rgba(255, 215, 0, 0.55), 0 0 28px rgba(255, 215, 0, 0.3); }
    25%  { transform: scale(1.24) rotate(-2deg); filter: brightness(1.85); box-shadow: 0 0 52px rgba(255, 215, 0, 1), 0 0 92px rgba(255, 215, 0, 0.55); }
    30%  { transform: scale(1.05) rotate(2deg); filter: brightness(1.2); box-shadow: 0 0 12px rgba(255, 215, 0, 0.5), 0 0 22px rgba(255, 215, 0, 0.25); }
    35%  { transform: scale(1.23) rotate(-2deg); filter: brightness(1.8); box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 86px rgba(255, 215, 0, 0.5); }
    40%  { transform: scale(1.05) rotate(2deg); filter: brightness(1.15); box-shadow: 0 0 10px rgba(255, 215, 0, 0.45), 0 0 18px rgba(255, 215, 0, 0.2); }
    50%  { transform: scale(1.2) rotate(0deg); filter: brightness(1.6); box-shadow: 0 0 44px rgba(255, 215, 0, 0.95), 0 0 78px rgba(255, 215, 0, 0.45); }
    60%  { transform: scale(1.08) rotate(0deg); filter: brightness(1.2); box-shadow: 0 0 16px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.25); }
    70%  { transform: scale(1.18) rotate(0deg); filter: brightness(1.5); box-shadow: 0 0 36px rgba(255, 215, 0, 0.85), 0 0 62px rgba(255, 215, 0, 0.35); }
    80%  { transform: scale(1.06) rotate(0deg); filter: brightness(1.15); box-shadow: 0 0 12px rgba(255, 215, 0, 0.4), 0 0 22px rgba(255, 215, 0, 0.2); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); box-shadow: 0 0 0px rgba(255, 215, 0, 0); }
}

/* Co-op guest fallback VFX (non-WebGL) */
@keyframes coop-ability-cast-flash {
    0% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    30% { filter: brightness(1.6); box-shadow: 0 0 14px rgba(120, 200, 255, 0.8); }
    100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes coop-ability-hit-flash {
    0% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    30% { filter: brightness(1.4); box-shadow: 0 0 16px rgba(255, 120, 120, 0.85); }
    100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

.image-container.coop-ability-cast {
    animation: coop-ability-cast-flash 0.65s ease-out;
}

.image-container.coop-ability-hit {
    animation: coop-ability-hit-flash 0.65s ease-out;
}

@keyframes coop-buff-flash {
    0% { filter: brightness(1); box-shadow: 0 0 0 rgba(120, 255, 170, 0); }
    35% { filter: brightness(1.35); box-shadow: 0 0 16px rgba(120, 255, 170, 0.85); }
    100% { filter: brightness(1); box-shadow: 0 0 0 rgba(120, 255, 170, 0); }
}

@keyframes coop-debuff-flash {
    0% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 120, 120, 0); }
    35% { filter: brightness(1.35); box-shadow: 0 0 16px rgba(255, 120, 120, 0.9); }
    100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 120, 120, 0); }
}

.image-container.coop-buff-applied {
    animation: coop-buff-flash 0.65s ease-out;
}

.image-container.coop-debuff-applied {
    animation: coop-debuff-flash 0.65s ease-out;
}

/* Enhanced co-op guest VFX fallback - glow variants */
@keyframes coop-ability-cast-glow-anim {
    0% { 
        filter: brightness(1) drop-shadow(0 0 0 transparent); 
        transform: scale(1);
    }
    20% { 
        filter: brightness(1.8) drop-shadow(0 0 30px rgba(100, 180, 255, 1)); 
        transform: scale(1.1);
    }
    50% { 
        filter: brightness(1.4) drop-shadow(0 0 20px rgba(100, 180, 255, 0.7)); 
        transform: scale(1.05);
    }
    100% { 
        filter: brightness(1) drop-shadow(0 0 0 transparent); 
        transform: scale(1);
    }
}

@keyframes coop-ability-hit-glow-anim {
    0% { 
        filter: brightness(1) drop-shadow(0 0 0 transparent); 
        transform: scale(1);
    }
    15% { 
        filter: brightness(0.5) drop-shadow(0 0 35px rgba(255, 50, 50, 1)); 
        transform: scale(0.9);
    }
    35% { 
        filter: brightness(1.8) drop-shadow(0 0 30px rgba(255, 100, 80, 1)); 
        transform: scale(1.08);
    }
    70% {
        filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 80, 60, 0.7));
        transform: scale(1.02);
    }
    100% { 
        filter: brightness(1) drop-shadow(0 0 0 transparent); 
        transform: scale(1);
    }
}

@keyframes coop-ability-heal-glow-anim {
    0% { 
        filter: brightness(1) drop-shadow(0 0 0 transparent); 
        transform: scale(1);
    }
    25% { 
        filter: brightness(1.4) drop-shadow(0 0 22px rgba(100, 255, 150, 0.9)); 
        transform: scale(1.04);
    }
    60% { 
        filter: brightness(1.2) drop-shadow(0 0 12px rgba(100, 255, 150, 0.5)); 
        transform: scale(1.02);
    }
    100% { 
        filter: brightness(1) drop-shadow(0 0 0 transparent); 
        transform: scale(1);
    }
}

.image-container.coop-ability-cast-glow,
.coop-ability-cast-glow {
    animation: coop-ability-cast-glow-anim 0.8s ease-out;
}

.image-container.coop-ability-hit-glow,
.coop-ability-hit-glow {
    animation: coop-ability-hit-glow-anim 0.6s ease-out;
}

.image-container.coop-ability-heal-glow,
.coop-ability-heal-glow {
    animation: coop-ability-heal-glow-anim 0.7s ease-out;
}

/* Co-op generic VFX flash fade animation */
@keyframes coop-flash-fade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.2); }
}

/* Co-op generic projectile trail effect */
.coop-generic-projectile {
    animation: coop-projectile-pulse 0.3s ease-out infinite;
}

@keyframes coop-projectile-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 180, 80, 0.8), 0 0 30px rgba(255, 150, 50, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 200, 100, 1), 0 0 40px rgba(255, 180, 80, 0.7); }
}

/* Reaction Battle Log Styles */
.reaction-ability,
.reaction-ability-ai {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.05) 100%);
    border-left: 4px solid #ffd700;
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 4px;
    font-weight: bold;
}

.reaction-ability-ai {
    border-left-color: #ff6b6b;
}

/* ==================== END REACTION ABILITY SYSTEM ==================== */

@keyframes speechBubbleFade {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
    }
}

@keyframes speechDots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60%, 100% {
        content: '...';
    }
}
/* === END SPEECH BUBBLE === */

/* ==================== CHARACTER-LEVEL SHAKE ANIMATIONS ==================== */
/* These replace the disabled battle-container screen shake to prevent resolution issues */

/* Light character shake effect (for dodges, buffs, minor effects) */
.character-slot.shake-effect {
    animation: characterShake 0.4s ease-out;
}

@keyframes characterShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10%, 50%, 90% { transform: translate3d(-4px, 0, 0); }
    30%, 70% { transform: translate3d(4px, 0, 0); }
}

/* Intense character shake for crits/special effects */
.character-slot.intense-shake {
    animation: characterIntenseShake 0.5s ease-out;
}

@keyframes characterIntenseShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate3d(-6px, 2px, 0); }
    20%, 40%, 60%, 80% { transform: translate3d(6px, -2px, 0); }
}

/* Vertical shake for knockback effects */
.character-slot.knockback-shake {
    animation: characterKnockback 0.6s cubic-bezier(.36,.07,.19,.97);
}

@keyframes characterKnockback {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10% { transform: translate3d(-8px, -3px, 0); }
    30% { transform: translate3d(6px, 2px, 0); }
    50% { transform: translate3d(-4px, -1px, 0); }
    70% { transform: translate3d(2px, 1px, 0); }
    90% { transform: translate3d(-1px, 0, 0); }
}

/* Heavy impact shake (for massive damage) */
.character-slot.heavy-impact {
    animation: characterHeavyImpact 0.7s cubic-bezier(.36,.07,.19,.97);
}

@keyframes characterHeavyImpact {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    5% { transform: translate3d(-10px, 3px, 0) scale(1.02); }
    15% { transform: translate3d(10px, -3px, 0) scale(0.98); }
    25% { transform: translate3d(-8px, 2px, 0) scale(1.01); }
    35% { transform: translate3d(8px, -2px, 0) scale(0.99); }
    45% { transform: translate3d(-6px, 1px, 0) scale(1); }
    55% { transform: translate3d(6px, -1px, 0) scale(1); }
    65% { transform: translate3d(-4px, 0, 0) scale(1); }
    75% { transform: translate3d(4px, 0, 0) scale(1); }
    85% { transform: translate3d(-2px, 0, 0) scale(1); }
    95% { transform: translate3d(2px, 0, 0) scale(1); }
}

/* ==================== END CHARACTER-LEVEL SHAKE ANIMATIONS ==================== */

/* ==================== RESOLUTION SCALING FIXES ==================== */
/* Override tooltip positioning to work with scaled game container */
.status-tooltip {
    position: fixed !important;
    z-index: 10000 !important;
    will-change: transform, opacity;
}

.item-tooltip {
    position: fixed !important;
    z-index: 10000 !important;
    will-change: transform, opacity;
}

/* Ensure VFX elements inside scaled container maintain proper positioning */
.character .vfx-container,
.character [class*="vfx"],
.character [class*="-vfx"] {
    will-change: transform;
    backface-visibility: hidden;
}

/* Floating damage numbers and other absolutely positioned VFX */
.battle-container [style*="position: absolute"] {
    will-change: transform;
}
/* ==================== END RESOLUTION SCALING FIXES ==================== */

/* ==================== LAYER SAFETY (VFX vs UI) ==================== */
/* Keep buff/debuff icons above per-character VFX layers. */
.raid-game-context .image-container .status-effects,
.raid-game-context .image-container .buffs,
.raid-game-context .image-container .debuffs {
    z-index: 2100 !important;
}

.raid-game-context .image-container canvas[data-infernal-astaroth-vfx-js="true"] {
    z-index: 120 !important;
    pointer-events: none !important;
}

/* Ensure ESC/options always renders above any combat VFX canvas/layer. */
.raid-game-context .options-menu-overlay {
    z-index: 2147483000 !important;
}

.raid-game-context .options-menu-content {
    position: relative;
    z-index: 2147483001;
}

/* When options is open, force injected fixed canvases under the modal. */
.raid-game-context .options-menu-overlay:not([style*="display: none"]) ~ canvas[style*="position: fixed"],
.raid-game-context .options-menu-overlay:not([style*="display: none"]) ~ canvas[data-infernal-astaroth-vfx-js="true"] {
    z-index: 120 !important;
    pointer-events: none !important;
}

/* Confirm dialog and notifications must always render above the ESC menu. */
.raid-game-context .custom-confirm-overlay,
#custom-confirm-dialog {
    z-index: 2147483646 !important;
}

.raid-game-context .level-up-notification,
.raid-game-context .quest-completion-notification,
.raid-game-context .quest-notification,
.raid-game-context .quest-reward-notification,
.raid-game-context .quest-progress-notification,
.raid-game-context .reward-notification {
    z-index: 2147483646 !important;
}
/* ==================== END LAYER SAFETY ==================== */

/* ==================== RAID RESULTS / XP UI OVERRIDES (BLACK/WHITE) ==================== */
/* Override xp-rewards.css (loaded after raid-game.css) using !important. */
.xp-rewards-display .xp-display-backdrop {
    background: rgba(0, 0, 0, 0.92) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.xp-rewards-display .xp-display-content {
    background: rgba(10, 10, 10, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    max-width: 1320px !important;
    width: min(96vw, 1320px) !important;
    max-height: 92vh !important;
    overflow-y: hidden !important;
    transform: none !important;
}

.xp-rewards-display .xp-display-header {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.xp-rewards-display .xp-display-header::after {
    display: none !important;
}

.xp-rewards-display .xp-display-header h2 {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none !important;
    animation: none !important;
    letter-spacing: 0.5px !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
}

.xp-rewards-display .stage-complete {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Remove emoji-based badges/icons inside XP overlay */
.xp-rewards-display .bonus-icon,
.xp-rewards-display .level-up-burst,
.xp-rewards-display .level-up-sparkles,
.xp-rewards-display .level-icon,
.xp-rewards-display .current-level-icon {
    display: none !important;
}

.xp-rewards-display .xp-bonuses {
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.xp-rewards-display .bonus-item {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Character cards: multi-column grid so it doesn't become a tall scroll list */
.xp-rewards-display .xp-characters {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.xp-rewards-display .character-xp-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    gap: 12px !important;
    box-shadow: none !important;
}

.xp-rewards-display .character-xp-item::before {
    display: none !important;
}

.xp-rewards-display .character-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

.xp-rewards-display .character-name {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: none !important;
    font-size: 1.1rem !important;
    margin: 0 0 8px 0 !important;
}

.xp-rewards-display .xp-plus,
.xp-rewards-display .xp-number {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: none !important;
}

.xp-rewards-display .xp-label {
    color: rgba(255, 255, 255, 0.65) !important;
}

.xp-rewards-display .xp-progress-bar {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    height: 18px !important;
}

.xp-rewards-display .xp-progress-fill {
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
}

.xp-rewards-display .xp-progress-fill::before {
    display: none !important;
}

.xp-rewards-display .xp-progress-text {
    color: rgba(0, 0, 0, 0.9) !important;
    text-shadow: none !important;
}

.xp-rewards-display .xp-display-actions {
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.xp-rewards-display .xp-continue-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    letter-spacing: 0.8px !important;
}

.xp-rewards-display .xp-continue-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: none !important;
}

/* ==================== STAGE EFFECTS UI: TEXT ONLY (NO EMOJI ICONS) ==================== */
/* Keep the list readable without icon emojis (including lightning). */
.stage-modifiers-container.user-hidden {
    display: none !important;
}

.stage-modifier-icon,
.stage-modifier-tooltip-icon {
    display: none !important;
}

/* ==================== LOOT RECEIVED UI OVERRIDES (BLACK/WHITE) ==================== */
.loot-rewards-modal .loot-rewards-backdrop {
    background: rgba(0, 0, 0, 0.92) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.loot-rewards-modal .loot-rewards-container {
    background: rgba(10, 10, 10, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    max-width: 1320px !important;
    width: min(96vw, 1320px) !important;
    max-height: 92vh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    transform: none !important;
}

.loot-rewards-modal.visible .loot-rewards-container {
    transform: none !important;
}

.loot-rewards-modal .loot-rewards-header {
    margin-bottom: 16px !important;
}

.loot-rewards-modal .loot-rewards-title {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none !important;
    animation: none !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
    letter-spacing: 0.5px !important;
}

.loot-rewards-modal .loot-rewards-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
    font-style: normal !important;
}

/* Make the grid do the work instead of scrolling a tall list */
.loot-rewards-modal .loot-rewards-content {
    margin-bottom: 16px !important;
}

.loot-rewards-modal .loot-items-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    min-height: 0 !important;
    max-height: calc(92vh - 220px) !important;
    overflow: auto !important;
    padding-right: 6px !important;
}

.loot-rewards-modal .loot-item-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-shadow: none !important;
}

.loot-rewards-modal .loot-item-card.hover-effect,
.loot-rewards-modal .loot-item-card:hover {
    transform: none !important;
}

/* Remove colorful rarity styling/glow; keep everything grayscale */
.loot-rewards-modal .loot-item-card.rarity-common,
.loot-rewards-modal .loot-item-card.rarity-rare,
.loot-rewards-modal .loot-item-card.rarity-epic,
.loot-rewards-modal .loot-item-card.rarity-legendary {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    animation: none !important;
}

.loot-rewards-modal .loot-item-image {
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.loot-rewards-modal .loot-item-name {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: none !important;
    font-size: 1.05rem !important;
}

.loot-rewards-modal .loot-item-rarity {
    color: rgba(255, 255, 255, 0.6) !important;
}

.loot-rewards-modal .loot-item-description {
    color: rgba(255, 255, 255, 0.65) !important;
    max-height: 48px !important;
}

.loot-rewards-modal .loot-item-quantity,
.loot-rewards-modal .loot-item-quantity-display {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
}

/* Hide decorative sparkle/glow layers */
.loot-rewards-modal .loot-item-glow,
.loot-rewards-modal .rarity-effect {
    display: none !important;
}

.loot-rewards-modal .loot-rewards-footer {
    margin-top: 10px !important;
}

.loot-rewards-modal .loot-claim-button {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
}

.loot-rewards-modal .loot-claim-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: none !important;
}

/* ==================== END UI OVERRIDES ==================== */

/* ==================== PRACTICE MODE TOOLS ==================== */
.practice-panel-toggle {
    position: fixed;
    top: 120px;
    right: 14px;
    z-index: 1200;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(120, 200, 255, 0.7);
    background: rgba(10, 18, 28, 0.9);
    color: #8fd3ff;
    font-size: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

body.practice-mode .practice-panel-toggle {
    display: flex;
}

.practice-mode-panel {
    position: fixed;
    top: 90px;
    right: -420px;
    width: 400px;
    max-height: calc(100vh - 140px);
    background: linear-gradient(135deg, rgba(12, 18, 30, 0.98), rgba(18, 28, 45, 0.95));
    border-left: 2px solid rgba(120, 200, 255, 0.6);
    border-radius: 14px 0 0 14px;
    z-index: 1200;
    transition: right 0.25s ease;
    display: none;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
}

body.practice-mode .practice-mode-panel {
    display: flex;
}

.practice-mode-panel.open {
    right: 0;
}

.practice-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(120, 200, 255, 0.25);
    color: #bfe6ff;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.practice-panel-close {
    background: none;
    border: none;
    color: #bfe6ff;
    font-size: 22px;
    cursor: pointer;
}

.practice-panel-body {
    padding: 14px 18px 20px;
    overflow-y: auto;
    color: #dbe9f4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.practice-section {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(120, 200, 255, 0.18);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.practice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.practice-label {
    min-width: 140px;
    font-weight: 600;
    color: #bfe6ff;
}

.practice-select {
    flex: 1;
    min-width: 140px;
    background: rgba(12, 20, 35, 0.9);
    border: 1px solid rgba(120, 200, 255, 0.4);
    color: #e5f2ff;
    border-radius: 8px;
    padding: 6px 8px;
}

.practice-action {
    background: rgba(90, 160, 220, 0.25);
    border: 1px solid rgba(120, 200, 255, 0.5);
    color: #e7f4ff;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.practice-action:hover {
    background: rgba(120, 200, 255, 0.35);
    transform: translateY(-1px);
}

.practice-action.danger {
    border-color: rgba(255, 120, 120, 0.6);
    color: #ffd1d1;
}

.practice-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.practice-toggle input {
    accent-color: #7cc8ff;
}

/* ==================== END PRACTICE MODE TOOLS ==================== */

/* ==================== QUEST RESET NOTIFICATIONS ==================== */
.quest-completion-notification.daily-reset-notification,
.quest-completion-notification.weekly-reset-notification {
    top: 20px;
    right: 20px;
    background: transparent;
}

.quest-completion-notification.daily-reset-notification .notification-content,
.quest-completion-notification.weekly-reset-notification .notification-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(22, 27, 38, 0.98), rgba(12, 16, 26, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    max-width: min(420px, 92vw);
}

.quest-completion-notification.daily-reset-notification .notification-icon,
.quest-completion-notification.weekly-reset-notification .notification-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.quest-completion-notification.daily-reset-notification .notification-text h4,
.quest-completion-notification.weekly-reset-notification .notification-text h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.quest-completion-notification.daily-reset-notification .notification-text p,
.quest-completion-notification.weekly-reset-notification .notification-text p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.quest-completion-notification.daily-reset-notification .notification-text .xp-reward,
.quest-completion-notification.weekly-reset-notification .notification-text .xp-reward {
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a5f3fc;
}

/* ==================== END QUEST RESET NOTIFICATIONS ==================== */

/* ==================== ENEMY LOOT DROPS ==================== */
.enemy-loot-table-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.enemy-loot-drop-count-box {
    border: 1px solid rgba(125, 211, 252, 0.32);
    background: linear-gradient(140deg, rgba(10, 20, 35, 0.82), rgba(15, 23, 42, 0.7));
    border-radius: 12px;
    padding: 11px;
}

.enemy-loot-drop-count-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(186, 230, 253, 0.95);
    margin-bottom: 8px;
    font-weight: 700;
}

.enemy-loot-drop-count-list {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.enemy-loot-drop-count-row {
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: 11px;
    color: rgba(226, 232, 240, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 9px;
    padding: 5px 4px;
    background: rgba(15, 23, 42, 0.72);
    line-height: 1.1;
}

.enemy-loot-tier-container {
    display: grid;
    gap: 10px;
}

.enemy-loot-tier-card {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.78));
    padding: 11px;
}

.enemy-loot-tier-high {
    border-color: rgba(34, 197, 94, 0.5);
}

.enemy-loot-tier-medium {
    border-color: rgba(234, 179, 8, 0.45);
}

.enemy-loot-tier-low {
    border-color: rgba(239, 68, 68, 0.45);
}

.enemy-loot-tier-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e2e8f0;
    margin-bottom: 4px;
}

.enemy-loot-tier-chance {
    font-size: 11px;
    color: rgba(125, 211, 252, 0.95);
    margin-bottom: 9px;
}

.enemy-loot-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.enemy-loot-item-card {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.68);
    padding: 7px 7px 8px;
    display: grid;
    gap: 6px;
    min-width: 0;
    transition: transform 0.14s ease, border-color 0.14s ease;
}

.enemy-loot-item-card:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.55);
}

.enemy-loot-item-card.rarity-common {
    border-color: rgba(148, 163, 184, 0.38);
}

.enemy-loot-item-card.rarity-uncommon {
    border-color: rgba(34, 197, 94, 0.52);
}

.enemy-loot-item-card.rarity-rare {
    border-color: rgba(59, 130, 246, 0.58);
}

.enemy-loot-item-card.rarity-epic {
    border-color: rgba(168, 85, 247, 0.65);
}

.enemy-loot-item-card.rarity-legendary,
.enemy-loot-item-card.rarity-mythic {
    border-color: rgba(245, 158, 11, 0.75);
}

.enemy-loot-item-icon-wrap {
    position: relative;
    width: 46px;
    height: 46px;
}

.enemy-loot-item-icon,
.enemy-loot-item-icon-fallback {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    object-fit: cover;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.8);
}

.enemy-loot-item-qty-badge {
    position: absolute;
    right: -6px;
    bottom: -5px;
    background: rgba(8, 47, 73, 0.95);
    color: #dbeafe;
    border: 1px solid rgba(125, 211, 252, 0.6);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.enemy-loot-item-chance-badge {
    display: inline-flex;
    width: fit-content;
    font-size: 10px;
    font-weight: 700;
    color: #a5f3fc;
    border: 1px solid rgba(125, 211, 252, 0.42);
    border-radius: 999px;
    padding: 1px 7px;
    background: rgba(8, 47, 73, 0.42);
}

.enemy-loot-item-label {
    font-size: 11px;
    line-height: 1.2;
    color: rgba(226, 232, 240, 0.96);
    word-break: break-word;
}

.enemy-loot-popup {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: min(360px, calc(100vw - 24px));
    max-height: min(60vh, 460px);
    overflow: visible;
    border-radius: 14px;
    border: 1px solid rgba(125, 211, 252, 0.35);
    background: linear-gradient(145deg, rgba(2, 6, 23, 0.97), rgba(15, 23, 42, 0.97));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    z-index: 12000;
    padding: 14px 14px 12px;
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.enemy-loot-popup.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.enemy-loot-popup-inner {
    max-height: min(60vh, 460px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

.enemy-loot-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.enemy-loot-popup-close:hover {
    border-color: rgba(125, 211, 252, 0.75);
}

.enemy-loot-popup-header h3 {
    margin: 0;
    font-size: 15px;
    color: #f8fafc;
    padding-right: 30px;
}

.enemy-loot-popup-header p {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(186, 230, 253, 0.9);
}

.enemy-loot-popup-items {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 2px;
}

.enemy-loot-popup-item {
    display: grid;
    gap: 6px;
    padding: 8px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    min-width: 0;
}

.enemy-loot-popup-item.rarity-common {
    border-color: rgba(148, 163, 184, 0.35);
}

.enemy-loot-popup-item.rarity-uncommon {
    border-color: rgba(34, 197, 94, 0.5);
}

.enemy-loot-popup-item.rarity-rare {
    border-color: rgba(59, 130, 246, 0.55);
}

.enemy-loot-popup-item.rarity-epic {
    border-color: rgba(168, 85, 247, 0.62);
}

.enemy-loot-popup-item.rarity-legendary,
.enemy-loot-popup-item.rarity-mythic {
    border-color: rgba(245, 158, 11, 0.72);
}

.enemy-loot-popup-empty {
    grid-column: 1 / -1;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 9px;
    padding: 10px 12px;
    text-align: center;
    color: rgba(186, 230, 253, 0.9);
    font-size: 12px;
    background: rgba(15, 23, 42, 0.5);
}

.enemy-loot-popup-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #e2e8f0;
}

.enemy-loot-popup-item-qty {
    font-weight: 700;
    color: rgba(125, 211, 252, 0.95);
    font-size: 10px;
    position: absolute;
    right: -4px;
    bottom: -4px;
    border: 1px solid rgba(125, 211, 252, 0.62);
    border-radius: 999px;
    background: rgba(8, 47, 73, 0.94);
    padding: 1px 6px;
    line-height: 1.2;
}

.enemy-loot-popup-icon-wrap {
    position: relative;
    width: 48px;
    height: 48px;
}

.enemy-loot-popup-icon,
.enemy-loot-popup-icon-fallback {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    object-fit: cover;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.8);
}

.enemy-loot-popup-timer {
    margin-top: 10px;
    font-size: 11px;
    color: rgba(148, 163, 184, 0.92);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

@media (max-width: 420px) {
    .enemy-loot-popup-items {
        grid-template-columns: 1fr;
    }
}

/* Monochrome override for in-game loot table + popup */
.enemy-loot-table-section,
.enemy-loot-popup {
    color: #f2f2f2;
}

.enemy-loot-drop-count-box {
    border-color: rgba(255, 255, 255, 0.26);
    background: linear-gradient(140deg, rgba(10, 10, 10, 0.96), rgba(22, 22, 22, 0.94));
}

.enemy-loot-drop-count-title {
    color: rgba(255, 255, 255, 0.9);
}

.enemy-loot-drop-count-row {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(8, 8, 8, 0.9);
}

.enemy-loot-tier-card {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(145deg, rgba(18, 18, 18, 0.96), rgba(8, 8, 8, 0.94));
}

.enemy-loot-tier-high,
.enemy-loot-tier-medium,
.enemy-loot-tier-low {
    border-color: rgba(255, 255, 255, 0.22);
}

.enemy-loot-tier-title {
    color: #ffffff;
}

.enemy-loot-tier-chance {
    color: rgba(255, 255, 255, 0.76);
}

.enemy-loot-item-card {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(5, 5, 5, 0.9);
}

.enemy-loot-item-card:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.enemy-loot-item-card.rarity-common,
.enemy-loot-item-card.rarity-uncommon,
.enemy-loot-item-card.rarity-rare,
.enemy-loot-item-card.rarity-epic,
.enemy-loot-item-card.rarity-legendary,
.enemy-loot-item-card.rarity-mythic {
    border-color: rgba(255, 255, 255, 0.24);
}

.enemy-loot-item-icon,
.enemy-loot-popup-icon {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(16, 16, 16, 0.9);
}

.enemy-loot-item-icon-fallback,
.enemy-loot-popup-icon-fallback {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(16, 16, 16, 0.95);
    color: #ffffff;
}

.enemy-loot-item-qty-badge,
.enemy-loot-popup-item-qty {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.92);
}

.enemy-loot-item-chance-badge {
    color: rgba(255, 255, 255, 0.86);
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(0, 0, 0, 0.6);
}

.enemy-loot-item-label,
.enemy-loot-popup-item-name,
.enemy-loot-popup-empty,
.enemy-loot-popup-header p,
.enemy-loot-popup-timer {
    color: rgba(255, 255, 255, 0.84);
}

.enemy-loot-popup {
    border-color: rgba(255, 255, 255, 0.26);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.97), rgba(20, 20, 20, 0.97));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
}

.enemy-loot-popup-close {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
}

.enemy-loot-popup-close:hover {
    border-color: rgba(255, 255, 255, 0.65);
}

.enemy-loot-popup-item {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(5, 5, 5, 0.88);
}

.enemy-loot-popup-item.rarity-common,
.enemy-loot-popup-item.rarity-uncommon,
.enemy-loot-popup-item.rarity-rare,
.enemy-loot-popup-item.rarity-epic,
.enemy-loot-popup-item.rarity-legendary,
.enemy-loot-popup-item.rarity-mythic {
    border-color: rgba(255, 255, 255, 0.24);
}

.enemy-loot-popup-empty {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(8, 8, 8, 0.7);
}
/* ==================== END ENEMY LOOT DROPS ==================== */

/* ==================== FLOWER MAGIC PEARL COUNTER ==================== */
.flower-magic-pearl-counter {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    pointer-events: none;
    min-width: 70px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 182, 193, 0.85);
    background: linear-gradient(135deg, rgba(74, 26, 66, 0.92), rgba(23, 11, 33, 0.92));
    box-shadow: 0 0 10px rgba(255, 140, 195, 0.35);
    color: #ffeaf7;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2px;
    text-shadow: 0 0 6px rgba(255, 132, 193, 0.45);
}
/* ==================== END FLOWER MAGIC PEARL COUNTER ==================== */

/* ============================================================
   CONTROLLER SUPPORT — ControllerManager v2
   ============================================================ */

/* ── Focus ring on the currently highlighted element ──────────────────── */
.ctrl-focused {
    outline: 3px solid #00e5ff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.30), 0 0 18px rgba(0, 229, 255, 0.45) !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Ability focus: brighter ring so it stands out from cooldown overlays */
.ability.ctrl-focused {
    outline: 3px solid #ffd600 !important;
    box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.35), 0 0 14px rgba(255, 214, 0, 0.50) !important;
}

/* Enemy character focus (top section) — red tint */
.top-section .character-slot.ctrl-focused {
    outline-color: #ff5252 !important;
    box-shadow: 0 0 0 4px rgba(255, 82, 82, 0.30), 0 0 18px rgba(255, 82, 82, 0.45) !important;
}

/* ── Bottom hints bar ──────────────────────────────────────────────────── */
.ctrl-hints {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    padding: 6px 16px 8px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px 10px 0 0;
    z-index: 9900;
    pointer-events: none;
    font-family: 'Segoe UI', Arial, sans-serif;
    max-width: 900px;
    width: 100%;
}

.ctrl-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}

.ctrl-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.ctrl-hint-txt {
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
}

/* ── Options menu controller card ─────────────────────────────────────── */
.ctrl-remap-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ctrl-remap-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ctrl-remap-label {
    flex: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.80);
}

.ctrl-remap-btn {
    min-width: 52px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
    white-space: nowrap;
}

.ctrl-remap-btn:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.50);
}

/* Listening / remapping state */
.ctrl-remap-btn.ctrl-remap-listening {
    background: rgba(0, 229, 255, 0.20);
    border-color: #00e5ff;
    color: #00e5ff;
    animation: ctrlRemapPulse 0.9s ease-in-out infinite alternate;
}

@keyframes ctrlRemapPulse {
    from { box-shadow: 0 0 4px rgba(0, 229, 255, 0.40); }
    to   { box-shadow: 0 0 12px rgba(0, 229, 255, 0.80); }
}

.ctrl-remap-reset {
    width: 100%;
    padding: 6px 12px;
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.40);
    border-radius: 5px;
    color: #ff6b6b;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 4px;
}

.ctrl-remap-reset:hover {
    background: rgba(255, 82, 82, 0.28);
}

/* ── Controller-mode body state ───────────────────────────────────────── */
/* When a controller is active, hide the mouse cursor */
body.controller-mode {
    cursor: none;
}

/* Restore cursor when hovering interactive elements so mouse still works */
body.controller-mode button,
body.controller-mode .ability,
body.controller-mode .character-slot,
body.controller-mode a,
body.controller-mode input,
body.controller-mode select {
    cursor: pointer;
}

/* ==================== END CONTROLLER SUPPORT ==================== */

/* ==================== LOADING SCREEN STAGE BACKGROUND ==================== */
.loading-screen {
    position: fixed;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    z-index: 9999;
    background: #000;
}

.loading-screen-stage-frame {
    position: absolute;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--raid-game-scale, 1));
    transform-origin: center center;
    overflow: hidden;
    background-image: var(--pf-initial-loading-bg, linear-gradient(145deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.96)));
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.loading-screen-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.03);
}

.loading-screen-media video,
.loading-screen-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    pointer-events: none;
}

.loading-screen-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.62) 100%);
}

.loading-screen-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.loading-text {
    color: #ffffff;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.92),
        0 0 14px rgba(0, 0, 0, 0.7),
        0 0 22px rgba(255, 255, 255, 0.2);
    -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.7);
}

.loader {
    border: 5px solid rgba(15, 23, 42, 0.78);
    border-top: 5px solid #ffffff;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(255, 255, 255, 0.45);
}

/* ==================== END LOADING SCREEN STAGE BACKGROUND ==================== */