/* ============================================ */
/* SHIELD.CSS - Shield Line, Animations,       */
/* Floating Clouds, Reactor Core, Pylon        */
/* ============================================ */

/* ============================================ */
/* SHIELD - Plasma Wave (Design 2)             */
/* ============================================ */
.shield-container {
    pointer-events: none;
}

/* Shield Core - Solid purple energy bar */
.shield-core {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 10px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #6644ff 3%, #8866ff 50%, #6644ff 97%, transparent 100%);
    box-shadow: 0 0 20px 6px rgba(102,68,255,0.5), 0 0 40px 12px rgba(102,68,255,0.2);
    filter: blur(2px);
    animation: shieldPulse 3s ease-in-out infinite;
}

/* Shield Wave - Scrolling overlay pattern */
.shield-wave {
    position: absolute;
    left: 50%;
    top: -360px;
    transform: translateX(-50%);
    width: 20px;
    height: 100%;
    background: repeating-linear-gradient(180deg,
        transparent 0px,
        rgba(136,102,255,0.3) 15px,
        transparent 30px
    );
    animation: shieldWaveMove 2s linear infinite;
    filter: blur(3px);
}

/* Pulse animation - glow breathing on core */
@keyframes shieldPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 20px 6px rgba(102,68,255,0.5); }
    50% { opacity: 0.8; box-shadow: 0 0 30px 10px rgba(102,68,255,0.6); }
}

/* Wave scroll animation */
@keyframes shieldWaveMove {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(30px); }
}

/* Hit animations (class on container) */
.shield-container.hit .shield-core {
    animation: shieldHitCore 0.12s ease-out;
}
.shield-container.hit .shield-wave {
    animation: shieldHitWave 0.12s ease-out;
}
@keyframes shieldHitCore {
    0% { width: 10px; filter: blur(2px); top: -360px; }
    15% { width: 24px; filter: blur(6px); background: #ff66ff; top: -360px; }
    40% { width: 6px; filter: blur(1px); top: -360px; }
    100% { width: 10px; filter: blur(2px); top: 0; }
}
@keyframes shieldHitWave {
    0% { opacity: 1; }
    15% { opacity: 0; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ---- Shield Stages ---- */

/* Stage 1: 100-80% - Full Power */
.shield-stage-1 .shield-core {
    background: linear-gradient(180deg, transparent 0%, #6644ff 3%, #8866ff 50%, #6644ff 97%, transparent 100%);
    box-shadow: 0 0 25px 8px rgba(102,68,255,0.55), 0 0 50px 15px rgba(102,68,255,0.3);
}
.shield-stage-1 .shield-wave {
    background: repeating-linear-gradient(180deg, transparent 0px, rgba(136,102,255,0.35) 15px, transparent 30px);
}

/* Stage 2: 80-60% - Strong */
.shield-stage-2 .shield-core {
    background: linear-gradient(180deg, transparent 0%, #5c3dee 3%, #7755ee 50%, #5c3dee 97%, transparent 100%);
    box-shadow: 0 0 22px 6px rgba(92,61,238,0.5), 0 0 45px 12px rgba(92,61,238,0.22);
}
.shield-stage-2 .shield-wave {
    background: repeating-linear-gradient(180deg, transparent 0px, rgba(120,90,238,0.3) 15px, transparent 30px);
}

/* Stage 3: 60-40% - Medium */
.shield-stage-3 .shield-core {
    background: linear-gradient(180deg, transparent 0%, #5038cc 3%, #6850dd 50%, #5038cc 97%, transparent 100%);
    box-shadow: 0 0 18px 5px rgba(80,56,204,0.4), 0 0 35px 10px rgba(80,56,204,0.18);
}
.shield-stage-3 .shield-wave {
    background: repeating-linear-gradient(180deg, transparent 0px, rgba(100,75,210,0.25) 15px, transparent 30px);
}

/* Stage 4: 40-20% - Weak */
.shield-stage-4 .shield-core {
    background: linear-gradient(180deg, transparent 0%, #4530aa 3%, #5540bb 50%, #4530aa 97%, transparent 100%);
    box-shadow: 0 0 14px 4px rgba(69,48,170,0.35), 0 0 28px 8px rgba(69,48,170,0.15);
}
.shield-stage-4 .shield-wave {
    background: repeating-linear-gradient(180deg, transparent 0px, rgba(85,65,180,0.2) 15px, transparent 30px);
}

/* Stage 5: 20-1% - Critical */
.shield-stage-5 .shield-core {
    background: linear-gradient(180deg, transparent 0%, #3a2890 3%, #4838a0 50%, #3a2890 97%, transparent 100%);
    box-shadow: 0 0 10px 3px rgba(58,40,144,0.3), 0 0 20px 6px rgba(58,40,144,0.12);
}
.shield-stage-5 .shield-wave {
    background: repeating-linear-gradient(180deg, transparent 0px, rgba(70,55,150,0.15) 15px, transparent 30px);
}

/* Stage 0: Depleted */
.shield-stage-0 .shield-core {
    background: linear-gradient(180deg, transparent 0%, rgba(60,45,130,0.3) 3%, rgba(70,55,140,0.4) 50%, rgba(60,45,130,0.3) 97%, transparent 100%);
    box-shadow: 0 0 8px 2px rgba(60,45,130,0.15);
}
.shield-stage-0 .shield-wave {
    background: repeating-linear-gradient(180deg, transparent 0px, rgba(60,50,140,0.08) 15px, transparent 30px);
}

/* ============================================ */
/* FLOATING CLOUDS - DOM Elements              */
/* ============================================ */
.cloud-element {
    position: absolute;
    pointer-events: none !important;
    z-index: 500 !important;
}
.cloud-element.cloud1 {
    top: 150px;
    animation: cloudMove1 60s linear infinite;
}
.cloud-element.cloud2 {
    top: 200px;
    animation: cloudMove2 80s linear infinite;
    animation-delay: -20s;
}
@keyframes cloudMove1 {
    0% { left: 1400px; top: 150px; }
    100% { left: -200px; top: 150px; }
}
@keyframes cloudMove2 {
    0% { left: 1600px; top: 180px; }
    100% { left: -250px; top: 200px; }
}
.cloud-container,
.cloud-container * {
    pointer-events: none !important;
    position: relative;
}

.cloud-body {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
}

.cloud-body.darker {
    background: rgba(238, 238, 238, 0.8);
}

.cloud-shadow {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
}

/* Make sure Phaser DOM wrappers for clouds/shield/emitter/enemies don't block clicks */
.shield-container,
.shield-container *,
.cloud-container,
.cloud-container *,
.crystal-emitter-container,
.crystal-emitter-container *,
.shield-recharger-container,
.shield-recharger-container *,
.shield-emitter-preview-wrapper,
.shield-emitter-preview-wrapper *,
.shield-recharger-preview-wrapper,
.shield-recharger-preview-wrapper *,
.enemy-container,
.enemy-container *,
.enemy-robot,
.enemy-robot *,
.top-bar-container {
    pointer-events: none !important;
}
/* Re-enable pointer events for top bar button */
.top-bar-container .end-line {
    pointer-events: auto !important;
}

/* ============================================ */
/* REACTOR CORE - Shield Emitter Building      */
/* 1x1 Grid Size (40x40 pixels)                */
/* ============================================ */
.shield-emitter-container {
    pointer-events: none;
    width: 39px;
    height: 39px;
    position: relative;
}
.emitter-housing {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: linear-gradient(180deg, #505060, #303040);
    border-radius: 4px;
    border: 2px solid #606070;
}
.emitter-vent {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 4px;
    background: #303040;
}
.emitter-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid #404050;
    border-radius: 50%;
    background: #202030;
}
.emitter-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #80ff80, #40a040);
    border-radius: 50%;
    box-shadow: 0 0 10px #80ff80;
    animation: emitterCorePulse 0.8s ease-in-out infinite;
}
@keyframes emitterCorePulse {
    0%, 100% { box-shadow: 0 0 6px #80ff80; transform: translate(-50%, -50%) scale(1); }
    50% { box-shadow: 0 0 14px #80ff80; transform: translate(-50%, -50%) scale(1.15); }
}

/* ============================================ */
/* PYLON - Shield Recharger Building           */
/* 1x1 Grid Size (40x40 pixels)                */
/* ============================================ */
.shield-recharger-container {
    pointer-events: none;
    width: 40px;
    height: 40px;
    position: relative;
}
.recharger-leg-left {
    position: absolute;
    bottom: 0;
    left: 8px;
    width: 4px;
    height: 20px;
    background: #606070;
    transform: skewX(-10deg);
}
.recharger-leg-right {
    position: absolute;
    bottom: 0;
    right: 8px;
    width: 4px;
    height: 20px;
    background: #606070;
    transform: skewX(10deg);
}
.recharger-core {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #304050, #506070);
    border: 2px solid #7080a0;
    border-radius: 4px;
}
.recharger-gem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #80c0ff, #4080c0);
    border-radius: 2px;
    box-shadow: 0 0 8px #80c0ff;
    animation: rechargerGemPulse 1.2s ease-in-out infinite;
}
@keyframes rechargerGemPulse {
    0%, 100% { box-shadow: 0 0 4px #80c0ff; transform: translate(-50%, -50%) scale(1); }
    50% { box-shadow: 0 0 12px #80c0ff; transform: translate(-50%, -50%) scale(1.1); }
}
.recharger-beam {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, rgba(68, 170, 255, 0.8), rgba(68, 170, 255, 0));
    animation: rechargerBeamPulse 2s ease-in-out infinite;
}
@keyframes rechargerBeamPulse {
    0%, 100% { height: 0; opacity: 0; }
    50% { height: 24px; opacity: 1; }
}