/* ==============================================
   GAME CSS STYLESHEET - TOWER DEFENSE
   ==============================================

   @import url('https://fonts.cdnfonts.com/css/ds-digital');

   ORGANIZATION CHECKLIST & STYLE GUIDE:

   📋 BREAKPOINT STANDARDS (Source of Truth):
   • Mobile: max-width: 640px (phone and smaller devices)
   • Desktop: 641px+ (default styles, no media query needed)

   📋 SIMPLIFIED MEDIA QUERY STRUCTURE:
   ✅ Mobile-first approach with consolidated breakpoints:

   📋 BRACKET VERIFICATION CHECKLIST:
   ✅ Every { has matching }
   ✅ Media queries properly closed
   ✅ No nested media queries
   ✅ Comments don't break structure

   📋 MOBILE APP OPTIMIZATIONS:
   ✅ Sleep/Wake handling with automatic pause
   ✅ Auto-save on app minimize/background
   ✅ Volume fade on background/foreground
   ✅ Reduced rendering when backgrounded
   ✅ Wake lock integration for active gameplay

   📋 CODE ORGANIZATION:
   1. Root Variables & Global Styles
   2. Canvas & Game Area (Mobile-optimized)
   3. Touch-friendly UI Components
   4. Mobile-first Button Controls
   5. Tower System (Simplified for mobile)
   6. Core Systems (Mobile-optimized)
   7. Modals & Dialogs (Mobile-sized)
   8. Animations & Effects (Performance-optimized)
   9. Consolidated Mobile Media Queries (Bottom)
   10. Mobile Responsive

   ============================================== */

/* ==============================================
   COUNT STREAK EFFECT (Thought Residue)
   ============================================== */
   .count-streak {
    position: absolute;
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    filter: blur(1px);
    transform: translateX(0) translateY(0);
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
}

/* Enhanced thought and after-thought streaks for critter count */
.count-streak-thought {
    opacity: 0.7;
    filter: blur(0.5px);
    z-index: -1;
}

.count-streak-afterthought {
    opacity: 0.4;
    filter: blur(1.5px);
    z-index: -2;
}

/* ==============================================
   SCROLLBAR STYLING
   ============================================== */
/* Width of scrollbar */
::-webkit-scrollbar {
    width: 0.86em;
}

/* Track Color ~scrollBar track background */
::-webkit-scrollbar-track {
    background: #000;
    border: 1px solid rgba(0, 255, 136, 0.36);
    /* margin-block: 0.6em; */
}

/* Handle Color and Width via border ~scrollBar*/
::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg,
            hsl(120deg 100% 15%) 0%,
            hsl(120deg 100% 35%) 25%,
            hsl(150deg 100% 50%) 50%,
            hsl(180deg 100% 45%) 75%,
            hsl(180deg 100% 25%) 100%);
    border: 4px solid transparent;
    border-radius: 10px;
    background-clip: content-box;
    box-shadow: 0 0 8px rgba(0, 255, 170, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(180deg,
            hsl(120deg 100% 25%) 0%,
            hsl(120deg 100% 45%) 25%,
            hsl(150deg 100% 60%) 50%,
            hsl(180deg 100% 55%) 75%,
            hsl(180deg 100% 35%) 100%);
    box-shadow: 0 0 12px rgba(0, 255, 170, 0.6), inset 0 1px 3px rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

/* ==============================================
   ROOT VARIABLES & GLOBAL STYLES
   ============================================== */
:root {
    /* Core Colors */
    --primary-color: #0f0;
    --secondary-color: #0ff;
    --accent-color: #0cc;
    --background-color: #000;
    --text-color-light: #fff;
    --text-color-main: #0f0;
    --danger-color: #f00;
    --warning-color: #ff9900;

    /* UI System */
    --panel-background: rgba(0, 0, 0, 0.9);
    --panel-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    --main-font: 'Courier Prime', monospace;

    /* DS-Digital font option (disabled by default) */
    --digital-font: 'DS-Digital', 'Courier Prime', monospace;

    /* ==============================================
       DEFENSE SYSTEM COLORS - SINGLE SOURCE OF TRUTH
       ============================================== */

    /* Core Defense Colors */
    --color-drone: #00ffff;
    --color-drone-glow: rgba(0, 255, 255, 0.8);
    --color-drone-border: rgba(0, 255, 255, 0.4);

    --color-critter: #ffff00;
    --color-critter-glow: rgba(255, 255, 0, 0.8);
    --color-critter-border: rgba(255, 255, 0, 0.4);

    --color-overclock: #ffa500;
    --color-overclock-glow: rgba(255, 165, 0, 0.8);
    --color-overclock-border: rgba(255, 165, 0, 0.4);

    --color-emp: #eeeeee;
    --color-emp-glow: rgba(238, 238, 238, 0.8);
    --color-emp-border: rgba(238, 238, 238, 0.4);

    --color-boss: #ff0000;
    --color-boss-glow: rgba(255, 0, 0, 0.8);
    --color-boss-border: rgba(255, 0, 0, 0.4);

    /* Breach Defense Colors */
    --color-repair: #00ff00;
    --color-repair-glow: rgba(0, 255, 0, 0.8);
    --color-repair-border: rgba(0, 255, 0, 0.4);

    --color-fortify: #ff64ff;
    --color-fortify-glow: rgba(255, 100, 255, 0.8);
    --color-fortify-border: rgba(255, 100, 255, 0.4);

    --color-shield: #00ffff;
    --color-shield-glow: rgba(0, 255, 255, 0.8);
    --color-shield-border: rgba(0, 255, 255, 0.4);

    --color-defender: #6496ff;
    --color-defender-glow: rgba(100, 150, 255, 0.8);
    --color-defender-border: rgba(100, 150, 255, 0.4);

    --color-barrier: #ffc832;
    --color-barrier-glow: rgba(255, 200, 50, 0.8);
    --color-barrier-border: rgba(255, 200, 50, 0.4);

    /* Floating popup Y distances (halved on mobile via media query) */
    --float-y-damage: -30px;
    --float-y-resource-mid: -15px;
    --float-y-resource-end: -30px;
    --float-y-decoded-80: -30px;
    --float-y-decoded-100: -40px;

    /* Enhanced Legend/Header Styling */
    --legend-font-size: 14px;
    --legend-font-size-mobile: 12px;
    --legend-font-weight: 700;
    --legend-text-shadow-base: 0 0 8px;
    --legend-text-shadow-strong: 0 0 12px;
    --legend-padding: 6px 12px;
    --legend-border-radius: 6px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

html {
    overflow-x: hidden;
}

@keyframes pauseScanScroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

body {
    background: var(--background-color);
    color: var(--text-color-main);
    font-family: var(--main-font);
    overflow: hidden;
    display: flex;
}

/* ==============================================
   DS-DIGITAL FONT TOGGLE (DISABLED BY DEFAULT)
   ==============================================
   
   To enable DS-Digital font throughout the game:
   1. Uncomment the CSS block below
   2. Add class "digital-font-enabled" to the <body> tag in index.html
   3. The font will be applied to all key UI elements
   
   Example: <body class="digital-font-enabled">
   
   The DS-Digital font gives a cyberpunk/digital display aesthetic
   perfect for Circuit Board Defense theme.
   
   Uncomment this block to enable:
   
*/

#empBackgroundEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background: transparent;
    /* CSS variables allow for dynamic styling from JavaScript */
    --grid-flash-color: #cceeff;
    --grid-line-color: rgba(173, 216, 230, 0.4);
    --grid-duration: 1.2s;
    --grid-brightness: 1.5;
}

/* emp-flash-and-grid: intentionally no keyframes — triggerBackgroundGridEffect calls
   are scattered across the codebase but the game plays best without visible flashes.
   The function and CSS vars remain as hooks if individual effects are needed later. */

/* ==============================================
   GAME LAYOUT & CORE CONTAINERS
   ============================================== */
#empBackgroundEffect.emp-active {
    animation: empGridFlash var(--grid-duration) ease-out both;
}

#empBackgroundEffect.emp-active.achievement-grid-active {
    animation-name: achievementGridFlash;
}

#empBackgroundEffect.emp-active.home-grid-active {
    animation-name: bootGridFlash;
    animation-direction: reverse;
    animation-delay: 0ms;
}

#empBackgroundEffect.emp-active.boot-grid-active {
    animation-name: bootGridFlash;
    animation-delay: var(--boot-grid-delay, 0ms);
}

#canvasWrapper.achievement-focus-pulse #gameCanvas {
    animation: gameCanvaspulse 9.6s ease-in-out infinite, achievementBoardFocus 520ms ease-out both;
}

@keyframes empGridFlash {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 50%, var(--grid-flash-color) 0%, transparent 28%),
            linear-gradient(90deg, transparent 0 48%, var(--grid-line-color) 49% 51%, transparent 52% 100%),
            linear-gradient(0deg, transparent 0 48%, var(--grid-line-color) 49% 51%, transparent 52% 100%);
        background-size: 100% 100%, 42px 42px, 42px 42px;
        filter: brightness(1) blur(0);
        transform: scale(0.996);
    }
    18% {
        opacity: 0.32;
        filter: brightness(var(--grid-brightness)) blur(0.4px);
        transform: scale(1.002);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 72px 72px, 72px 72px;
        filter: brightness(1) blur(0);
        transform: scale(1.01);
    }
}

@keyframes achievementGridFlash {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--grid-flash-color) 34%, transparent) 0%, transparent 34%),
            linear-gradient(90deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%),
            linear-gradient(0deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%);
        background-size: 100% 100%, 22px 22px, 22px 22px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(0.998);
    }
    22% {
        opacity: 0.34;
        filter: brightness(var(--grid-brightness)) saturate(1.22) blur(0.45px);
        transform: scale(1.004);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 38px 38px, 38px 38px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1.012);
    }
}

#empBackgroundEffect.emp-active.tower-unlock-grid-electric {
    animation-name: towerUnlockGridElectric;
}
#empBackgroundEffect.emp-active.tower-unlock-grid-beam {
    animation-name: towerUnlockGridBeam;
}
#empBackgroundEffect.emp-active.tower-unlock-grid-kinetic {
    animation-name: towerUnlockGridKinetic;
}
#empBackgroundEffect.emp-active.tower-unlock-grid-thermal {
    animation-name: towerUnlockGridThermal;
}
#empBackgroundEffect.emp-active.tower-unlock-grid-frost {
    animation-name: towerUnlockGridFrost;
}
#empBackgroundEffect.emp-active.tower-unlock-grid-soft {
    animation-name: towerUnlockGridSoft;
}
#empBackgroundEffect.emp-active.tower-unlock-grid-prism {
    animation-name: towerUnlockGridPrism;
}

@keyframes towerUnlockGridElectric {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--grid-flash-color) 38%, transparent) 0%, transparent 36%),
            linear-gradient(90deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%),
            linear-gradient(0deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%),
            repeating-linear-gradient(125deg, transparent 0, transparent 9px, color-mix(in srgb, var(--grid-flash-color) 55%, transparent) 9px, color-mix(in srgb, var(--grid-flash-color) 55%, transparent) 10px, transparent 10px, transparent 20px);
        background-size: 100% 100%, 18px 18px, 18px 18px, 28px 28px;
        filter: brightness(1) saturate(1.08) blur(0);
        transform: scale(0.997);
    }
    24% {
        opacity: 0.36;
        filter: brightness(var(--grid-brightness)) saturate(1.28) blur(0.42px);
        transform: scale(1.003);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 32px 32px, 32px 32px, 44px 44px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1.01);
    }
}

@keyframes towerUnlockGridBeam {
    0% {
        opacity: 0;
        background:
            radial-gradient(ellipse 120% 45% at 50% 48%, color-mix(in srgb, var(--grid-flash-color) 42%, transparent) 0%, transparent 55%),
            linear-gradient(90deg, transparent 0 46%, var(--grid-line-color) 48.5% 51.5%, transparent 54% 100%),
            linear-gradient(0deg, transparent 0 49%, color-mix(in srgb, var(--grid-line-color) 35%, transparent) 49.6% 50.4%, transparent 51% 100%);
        background-size: 100% 100%, 26px 100%, 100% 22px;
        filter: brightness(1) saturate(1.12) blur(0);
        transform: scale(0.998);
    }
    22% {
        opacity: 0.33;
        filter: brightness(var(--grid-brightness)) saturate(1.25) blur(0.38px);
        transform: scale(1.004);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 40px 100%, 100% 34px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1.011);
    }
}

@keyframes towerUnlockGridKinetic {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--grid-flash-color) 28%, transparent) 0%, transparent 30%),
            linear-gradient(90deg, transparent 0 48%, var(--grid-line-color) 49.5% 50.5%, transparent 52% 100%),
            linear-gradient(0deg, transparent 0 48%, var(--grid-line-color) 49.5% 50.5%, transparent 52% 100%);
        background-size: 100% 100%, 14px 14px, 14px 14px;
        filter: brightness(1) saturate(1.05) blur(0);
        transform: scale(0.999);
    }
    20% {
        opacity: 0.32;
        filter: brightness(var(--grid-brightness)) saturate(1.15) blur(0.35px);
        transform: scale(1.003);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 26px 26px, 26px 26px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1.009);
    }
}

@keyframes towerUnlockGridThermal {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--grid-flash-color) 44%, transparent) 0%, transparent 40%),
            linear-gradient(90deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%),
            linear-gradient(0deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%);
        background-size: 100% 100%, 28px 28px, 28px 28px;
        filter: brightness(1) saturate(1.18) blur(0);
        transform: scale(0.998);
    }
    26% {
        opacity: 0.3;
        filter: brightness(calc(var(--grid-brightness) * 1.05)) saturate(1.3) blur(0.5px);
        transform: scale(1.005);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 48px 48px, 48px 48px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1.013);
    }
}

@keyframes towerUnlockGridFrost {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--grid-flash-color) 32%, transparent) 0%, transparent 38%),
            linear-gradient(90deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%),
            linear-gradient(0deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%),
            repeating-linear-gradient(-35deg, transparent 0, transparent 11px, color-mix(in srgb, var(--grid-line-color) 80%, white) 11px, color-mix(in srgb, var(--grid-line-color) 80%, white) 12px, transparent 12px, transparent 24px);
        background-size: 100% 100%, 20px 20px, 20px 20px, 36px 36px;
        filter: brightness(1) saturate(1.1) blur(0);
        transform: scale(0.998);
    }
    24% {
        opacity: 0.28;
        filter: brightness(var(--grid-brightness)) saturate(1.2) blur(0.48px);
        transform: scale(1.003);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 36px 36px, 36px 36px, 52px 52px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1.01);
    }
}

@keyframes towerUnlockGridSoft {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--grid-flash-color) 22%, transparent) 0%, transparent 42%),
            linear-gradient(90deg, transparent 0 48%, var(--grid-line-color) 49.5% 50.5%, transparent 52% 100%),
            linear-gradient(0deg, transparent 0 48%, var(--grid-line-color) 49.5% 50.5%, transparent 52% 100%);
        background-size: 100% 100%, 24px 24px, 24px 24px;
        filter: brightness(1) saturate(1.05) blur(0);
        transform: scale(0.999);
    }
    28% {
        opacity: 0.16;
        filter: brightness(calc(1 + (var(--grid-brightness) - 1) * 0.45)) saturate(1.12) blur(0.4px);
        transform: scale(1.002);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 40px 40px, 40px 40px;
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1.006);
    }
}

@keyframes towerUnlockGridPrism {
    0% {
        opacity: 0;
        background:
            radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--grid-flash-color) 40%, transparent) 0%, transparent 36%),
            linear-gradient(90deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%),
            linear-gradient(0deg, transparent 0 47%, var(--grid-line-color) 49% 51%, transparent 53% 100%);
        background-size: 100% 100%, 22px 22px, 22px 22px;
        filter: brightness(1) saturate(1.35) blur(0);
        transform: scale(0.998);
    }
    22% {
        opacity: 0.38;
        filter: brightness(var(--grid-brightness)) saturate(1.45) blur(0.42px);
        transform: scale(1.005);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 40px 40px, 40px 40px;
        filter: brightness(1) saturate(1.2) blur(0);
        transform: scale(1.014);
    }
}

@keyframes bootGridFlash {
    0% {
        opacity: 0;
        background:
            radial-gradient(ellipse 78% 58% at 50% 50%, color-mix(in srgb, var(--grid-flash-color) 32%, transparent) 0%, transparent 52%),
            linear-gradient(90deg, transparent 0 46%, var(--grid-line-color) 48% 52%, transparent 54% 100%),
            linear-gradient(0deg, transparent 0 46%, var(--grid-line-color) 48% 52%, transparent 54% 100%),
            repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--grid-flash-color) 26%, transparent) 2px 3px, transparent 3px 5px),
            repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--grid-flash-color) 14%, transparent) 7px 8px, transparent 8px 14px);
        background-size: 100% 100%, 10px 10px, 10px 10px, 100% 5px, 14px 100%;
        background-position: center, 0 0, 0 0, 0 0, 0 0;
        filter: brightness(1.15) contrast(1.2) saturate(1.15);
        transform: scale(1.42);
    }
    6% {
        opacity: 0.52;
        filter: brightness(var(--grid-brightness)) contrast(1.48) blur(0.65px) hue-rotate(-18deg) saturate(1.4);
        transform: scale(1.32);
        background-position: center, 3px 0, 0 2px, 0 6px, 4px 0;
    }
    14% {
        opacity: 0.34;
        filter: brightness(1.45) contrast(1.62) blur(1.05px) hue-rotate(10deg);
        transform: scale(1.18);
        background-position: center, -2px 3px, 3px -2px, 0 12px, -3px 0;
    }
    22% {
        opacity: 0.42;
        filter: brightness(1.65) contrast(1.55) blur(0.75px) hue-rotate(-6deg);
        transform: scale(1.1);
    }
    34% {
        opacity: 0.24;
        filter: brightness(1.3) contrast(1.32) blur(0.5px);
        transform: scale(1.05);
    }
    48% {
        opacity: 0.16;
        transform: scale(1.02);
    }
    100% {
        opacity: 0;
        background-size: 100% 100%, 16px 16px, 16px 16px, 100% 4px, 22px 100%;
        filter: brightness(1.05) blur(0.2px) saturate(1.05);
        transform: scale(1);
    }
}

@keyframes achievementBoardFocus {
    0% {
        filter: brightness(1) saturate(1) blur(0);
    }
    28% {
        filter: brightness(1.08) saturate(1.12) blur(0.75px);
    }
    100% {
        filter: brightness(1) saturate(1) blur(0);
    }
}

#gameContainer {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Global themed title= tooltip — glass chip (HUD / welcome stat vibe); fixed layer. */
#cbd-game-tooltip.cbd-game-tooltip {
    --cbd-tip-accent: #00ddff;
    position: fixed;
    left: 0;
    top: 0;
    max-width: min(280px, min(92vw, 32rem));
    padding: 6px 11px;
    border-radius: 8px;
    font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
    font-size: clamp(8px, 1.6vw, 9px);
    line-height: 1.35;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-transform: none;
    color: #d8f8ff;
    text-align: center;
    isolation: isolate;
    background: linear-gradient(155deg,
            color-mix(in srgb, var(--cbd-tip-accent) 22%, rgba(4, 10, 16, 0.72)) 0%,
            rgba(6, 14, 22, 0.55) 48%,
            rgba(4, 12, 18, 0.68) 100%);
    border: 1px solid color-mix(in srgb, var(--cbd-tip-accent) 42%, transparent);
    text-shadow:
        0 0 10px color-mix(in srgb, var(--cbd-tip-accent) 55%, transparent),
        0 1px 0 rgba(0, 0, 0, 0.65);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 0 16px color-mix(in srgb, var(--cbd-tip-accent) 35%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px) saturate(1.25) brightness(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.25) brightness(1.08);
    pointer-events: none;
    z-index: 50000;
    opacity: 0;
    transform: translateY(3px) scale(0.98);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

#cbd-game-tooltip.cbd-game-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Boss wave — persistent subtle red vignette pulse while boss mobs are active */
#bossWaveOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(100, 0, 0, 0.06) 78%, rgba(40, 0, 0, 0.12) 100%);
    transition: opacity 0.8s ease-in;
}

#bossWaveOverlay.active {
    opacity: 1;
    animation: bossWavePulse 5s ease-in-out infinite;
}

#bossWaveOverlay.fade-out {
    animation: none;
    opacity: 0;
    transition: opacity 1.4s ease-out;
}

@keyframes bossWavePulse {

    0%,
    100% {
        opacity: 0.4;
        background-image:
            radial-gradient(ellipse at center, transparent 55%, rgba(100, 0, 0, 0.06) 78%, rgba(40, 0, 0, 0.12) 100%);
    }

    25% {
        opacity: 0.55;
        background-image:
            radial-gradient(ellipse at center, transparent 55%, rgba(100, 0, 0, 0.06) 78%, rgba(40, 0, 0, 0.12) 100%),
            repeating-linear-gradient(0deg, rgba(180, 0, 0, 0.04), rgba(180, 0, 0, 0.04) 1px, transparent 1px, transparent 18px),
            repeating-linear-gradient(90deg, rgba(180, 0, 0, 0.04), rgba(180, 0, 0, 0.04) 1px, transparent 1px, transparent 18px);
    }

    50% {
        opacity: 0.65;
        background-image:
            radial-gradient(ellipse at center, transparent 55%, rgba(120, 0, 0, 0.08) 78%, rgba(50, 0, 0, 0.14) 100%),
            repeating-linear-gradient(0deg, rgba(200, 0, 0, 0.06), rgba(200, 0, 0, 0.06) 1px, transparent 1px, transparent 14px),
            repeating-linear-gradient(90deg, rgba(200, 0, 0, 0.06), rgba(200, 0, 0, 0.06) 1px, transparent 1px, transparent 14px);
    }

    75% {
        opacity: 0.5;
        background-image:
            radial-gradient(ellipse at center, transparent 55%, rgba(100, 0, 0, 0.06) 78%, rgba(40, 0, 0, 0.12) 100%),
            repeating-linear-gradient(0deg, rgba(160, 0, 0, 0.03), rgba(160, 0, 0, 0.03) 1px, transparent 1px, transparent 22px),
            repeating-linear-gradient(90deg, rgba(160, 0, 0, 0.03), rgba(160, 0, 0, 0.03) 1px, transparent 1px, transparent 22px);
    }
}

#gameContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(90deg,
            transparent,
            transparent 50px,
            #00cccc 50px,
            #00cccc 51px);
    animation: pauseScanScroll 15s linear infinite;
}

#canvasWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform-origin: center center;
    --view-rest-tilt: 0deg;
    transform: rotate(var(--view-rest-tilt));
    will-change: transform;
}

/* Gentle camera align — tower-wheel DNA, much subtler (path / boot / modals) */
#canvasWrapper.view-align-enter {
    animation: viewAlignEnter var(--view-align-duration, 1180ms) cubic-bezier(0.33, 1, 0.45, 1) forwards;
}

#canvasWrapper.view-align-exit {
    animation: viewAlignExit var(--view-align-duration, 880ms) cubic-bezier(0.55, 0, 0.72, 0.15) forwards;
}

#canvasWrapper.view-align-snap {
    animation: viewAlignSnap var(--view-align-duration, 1100ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes viewAlignEnter {
    0% {
        transform: rotate(var(--view-tilt-from, 1.8deg)) scale(0.993);
    }

    100% {
        transform: rotate(var(--view-tilt-to, 0deg)) scale(1);
    }
}

@keyframes viewAlignExit {
    0% {
        transform: rotate(var(--view-tilt-from, 0deg)) scale(1);
    }

    100% {
        transform: rotate(var(--view-tilt-to, -1.2deg)) scale(0.995);
    }
}

@keyframes viewAlignSnap {
    0% {
        transform: rotate(var(--view-tilt-from, 1.2deg)) scale(0.996);
    }

    58% {
        transform: rotate(calc(var(--view-tilt-to, 0deg) + 0.18deg)) scale(1.001);
    }

    100% {
        transform: rotate(var(--view-tilt-to, 0deg)) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    #canvasWrapper.view-align-enter,
    #canvasWrapper.view-align-exit,
    #canvasWrapper.view-align-snap {
        animation: none;
    }
}

#gameCanvas {
    animation: gameCanvaspulse 9.6s ease-in-out infinite;
    position: absolute;
    cursor: default;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    z-index: 1;
}

#tetherOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    /* Above game canvas so breach/core tether is clearly visible when selected */
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

#ui>* {
    pointer-events: auto;
}

/* ==============================================
   OVERLAYS & FULL-SCREEN EFFECTS
   ============================================== */
#vignetteOverlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    pointer-events: none;
    opacity: 0.4;
    box-shadow: inset 0 0 12vw 5.5vw rgba(0, 0, 0, 0.82);
}

#scanline {
    display: none;
    position: fixed;
    top: -4px;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--scanline-color, #00ff00);
    /* Default to bright green, can be overridden */
    /* Enhanced glow and distortion effect */
    box-shadow: 0 0 20px 4px var(--scanline-color, #00ff00), 0 0 8px 2px #fff inset;
    /* Enhanced green glow */
    animation: scan 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
    /* Ensure it's on top of everything */
    backdrop-filter: blur(1px) contrast(1.5);
    filter: blur(1px);
}

/* The one persistent lens owns vignette treatment across every game state. */
#vignetteOverlay {
    animation: none;
    transition: none;
}

/* Shared signal-loss glitch — when a state transition (reboot/restart) fires,
   the canvas and any visible pause overlay distort and recover in unison. */
#gameCanvas.is-transitioning.boot-canvas-enter {
    opacity: 0;
    animation: bootCanvasZuzzIn var(--boot-materialize-ms, 1060ms) cubic-bezier(0.18, 0.72, 0.22, 1) var(--boot-materialize-delay, 830ms) forwards;
}

#gameCanvas.is-transitioning.boot-canvas-exit {
    animation: bootCanvasZuzzOut var(--boot-materialize-ms, 1060ms) cubic-bezier(0.55, 0.08, 0.38, 1) forwards;
}

@keyframes bootCanvasZuzzOut {
    0% {
        filter: brightness(1) saturate(1) blur(0) contrast(1);
        transform: scale(1) translateX(0);
        opacity: 1;
    }
    18% {
        filter: brightness(1.12) saturate(1.05) blur(0.2px) contrast(1.1);
        transform: scale(1.008) translateX(-1px);
        opacity: 0.94;
    }
    34% {
        filter: brightness(1.28) saturate(0.95) blur(0.55px) hue-rotate(6deg) contrast(1.2);
        transform: scale(1.02) translateX(2px);
        opacity: 0.72;
    }
    52% {
        filter: brightness(0.95) saturate(0.65) blur(1.2px) hue-rotate(-10deg) contrast(1.35);
        transform: scale(0.97) translateX(-3px);
        opacity: 0.48;
    }
    68% {
        filter: brightness(0.62) saturate(0.4) blur(2px) hue-rotate(8deg) contrast(1.45);
        transform: scale(0.9) translateX(2px);
        opacity: 0.26;
    }
    100% {
        filter: brightness(0.35) saturate(0.2) blur(3px) hue-rotate(-12deg) contrast(1.4);
        transform: scale(0.82) translateX(0);
        opacity: 0.06;
    }
}

@keyframes bootCanvasZuzzIn {
    0% {
        filter: brightness(0.35) saturate(0.2) blur(3px) hue-rotate(-12deg) contrast(1.4);
        transform: scale(0.82) translateX(0);
        opacity: 0.08;
    }
    12% {
        filter: brightness(0.55) saturate(0.35) blur(2.4px) hue-rotate(14deg) contrast(1.55);
        transform: scale(0.88) translateX(-4px);
        opacity: 0.22;
    }
    24% {
        filter: brightness(0.85) saturate(0.55) blur(1.8px) hue-rotate(-8deg) contrast(1.45);
        transform: scale(0.93) translateX(3px);
        opacity: 0.38;
    }
    38% {
        filter: brightness(1.15) saturate(0.85) blur(1.2px) hue-rotate(6deg) contrast(1.25);
        transform: scale(0.97) translateX(-2px);
        opacity: 0.58;
    }
    52% {
        filter: brightness(1.35) saturate(1.05) blur(0.75px) contrast(1.15);
        transform: scale(1.01) translateX(1px);
        opacity: 0.76;
    }
    68% {
        filter: brightness(1.12) saturate(1.02) blur(0.35px);
        transform: scale(1.008) translateX(-1px);
        opacity: 0.9;
    }
    84% {
        filter: brightness(1.04) saturate(1) blur(0.12px);
        transform: scale(1.002);
        opacity: 0.98;
    }
    100% {
        filter: brightness(1) saturate(1) blur(0) contrast(1);
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

#gameCanvas.is-transitioning:not(.boot-canvas-enter):not(.boot-canvas-exit),
#pauseOverlay.is-transitioning {
    animation: scanline-fade-glitch 1.2s ease-in-out forwards;
}

@keyframes scanline-fade-glitch {
    0% {
        filter: brightness(1) saturate(1) blur(0);
        opacity: 1;
    }

    40% {
        filter: brightness(0.4) saturate(0) blur(1px);
        /* Fade down */
        opacity: 0.8;
    }

    60% {
        filter: brightness(0.4) saturate(0) blur(1px);
        /* Hold state */
        opacity: 0.8;
    }

    100% {
        filter: brightness(1) saturate(1) blur(0);
        /* Fade back in */
        opacity: 1;
    }
}

/* ========================================
 * PATH TRANSITION ANIMATIONS - Motherboard Switching Effect
 * ======================================== */

/* Old path exit - shrink and fade upward (like leaving a motherboard) */
#gameCanvas.path-exiting {
    animation: pathExitUp var(--path-exit-ms, 1040ms) cubic-bezier(0.48, 0.02, 0.22, 1) forwards;
}

@keyframes pathExitUp {
    0% {
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    22% {
        filter: brightness(1.26) saturate(1.18) blur(0.18px) contrast(1.12);
        transform: scale(1.012) translateY(0);
        opacity: 0.96;
    }

    54% {
        filter: brightness(0.74) saturate(0.62) blur(1.15px) hue-rotate(7deg) contrast(1.3);
        transform: scale(0.965) translateY(-16px);
        opacity: 0.52;
    }

    100% {
        filter: brightness(0.08) saturate(0) blur(3.8px) hue-rotate(12deg) contrast(1.42);
        transform: scale(0.88) translateY(-54px);
        opacity: 0.06;
    }
}

/* New path enter - scale in from below (like arriving at new motherboard) */
#gameCanvas.path-entering {
    animation: pathEnterIn var(--path-enter-ms, 1320ms) cubic-bezier(0.18, 0.72, 0.22, 1) forwards;
}

@keyframes pathEnterIn {
    0% {
        filter: brightness(0.12) saturate(0) blur(3.4px) hue-rotate(-12deg) contrast(1.42);
        transform: scale(0.86) translateY(46px);
        opacity: 0.08;
    }

    26% {
        filter: brightness(0.48) saturate(0.36) blur(2px) hue-rotate(10deg) contrast(1.5);
        transform: scale(0.93) translateY(26px);
        opacity: 0.32;
    }

    56% {
        filter: brightness(1.34) saturate(1.18) blur(0.55px) contrast(1.18);
        transform: scale(1.018) translateY(-4px);
        opacity: 0.82;
    }

    78% {
        filter: brightness(1.12) saturate(1.04) blur(0.22px);
        transform: scale(1.006) translateY(0);
        opacity: 0.94;
    }

    100% {
        filter: brightness(1) saturate(1) blur(0);
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Path transition scan lines overlay - loading screen style */
#pathTransitionOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    background:
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 204, 255, 0.06) 2px,
            rgba(0, 204, 255, 0.06) 4px),
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 4px,
            rgba(0, 204, 255, 0.03) 4px,
            rgba(0, 204, 255, 0.03) 8px);
    transition: opacity 300ms ease-in-out;
}

#pathTransitionOverlay.active {
    opacity: 1;
    animation: scanLinesMove 0.075s linear infinite, pathOverlayPulse var(--path-total-ms, 2.36s) ease-in-out;
}

@keyframes scanLinesMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 4px;
    }
}

@keyframes pathOverlayPulse {
    0% {
        opacity: 0;
    }

    14% {
        opacity: 0.92;
    }

    42% {
        opacity: 1;
    }

    62% {
        opacity: 0.84;
    }

    84% {
        opacity: 0.58;
    }

    100% {
        opacity: 0;
    }
}

/* Glitch/flicker effect for transition */
#pathTransitionOverlay.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(0, 255, 180, 0.08) 42%,
            rgba(0, 204, 255, 0.16) 50%,
            rgba(255, 0, 180, 0.06) 58%,
            transparent 100%);
    mix-blend-mode: screen;
    animation: scanLineVertical var(--path-total-ms, 2.36s) cubic-bezier(0.18, 0.72, 0.22, 1) forwards;
}

#pathTransitionOverlay.active::after {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse at center, rgba(0, 255, 170, 0.22) 0%, rgba(0, 204, 255, 0.08) 34%, transparent 70%),
        linear-gradient(90deg, rgba(255, 0, 140, 0.06), transparent 28%, transparent 72%, rgba(0, 255, 255, 0.08));
    mix-blend-mode: screen;
    opacity: 0;
    animation: pathTunnelGlow var(--path-total-ms, 2.36s) ease-in-out forwards;
}

@keyframes scanLineVertical {
    0% {
        transform: translateY(-115%) scaleY(0.8);
        opacity: 0;
    }

    38% {
        transform: translateY(-10%) scaleY(1.05);
        opacity: 1;
    }

    64% {
        transform: translateY(34%) scaleY(1.18);
        opacity: 0.85;
    }

    100% {
        transform: translateY(115%) scaleY(1.42);
        opacity: 0;
    }
}

@keyframes pathTunnelGlow {
    0% {
        opacity: 0;
        transform: scale(0.92);
        filter: brightness(0.9) blur(0.2px);
    }

    34% {
        opacity: 0.58;
        transform: scale(1.03);
        filter: brightness(1.18) blur(0.3px);
    }

    52% {
        opacity: 0.9;
        transform: scale(1.11);
        filter: brightness(1.42) blur(0.7px);
    }

    100% {
        opacity: 0;
        transform: scale(1.24);
        filter: brightness(0.9) blur(1.4px);
    }
}

/* #pauseOverlay h1 removed — pause overlay uses h2.pause-main-title, not h1 */

#pauseButtons button {
    padding: 10px;
    border: 1px solid;
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(10px, 12px, 14px);
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s;
}

#pauseButtons #rebootBtn:hover {
    background: var(--secondary-color);
    color: #000;
    border-color: var(--secondary-color);
    box-shadow: 0 0 25px var(--secondary-color);
}

#pauseButtons #resetBtn {
    background: #ff00000f;
    color: var(--danger-color);
    border-color: var(--danger-color);
    backdrop-filter: blur(1px);
}

#pauseButtons #resetBtn:hover {
    background: var(--danger-color);
    color: #000;
    box-shadow: 0 0 20px var(--danger-color);
}

#pauseButtons #goHomeBtn {
    background: rgba(0, 255, 0, 0.1);
    color: #00ff00;
    border-color: #00ff00;
    backdrop-filter: blur(1px);
}

#pauseButtons #goHomeBtn:hover {
    background: #00ff00;
    color: #000;
    box-shadow: 0 0 20px #00ff00;
}

#pauseOverlay h1:focus,
#pauseOverlay h1:active {
    outline: none;
}

/* .pause-indicator moved to modal.css */

.interactive-when-paused {
    z-index: 2001;
    position: relative;
}

/* Top-right indicators container: update ready, save errors, etc. - stack or side-by-side, no overlap */
#topRightIndicators {
    position: fixed;
    top: 16px;
    right: 26px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

/* ==============================================
   UI PANELS & DISPLAYS
   ============================================== */
.ui-panel {
    background: var(--panel-background);
    border: 1px solid var(--primary-color);
    padding: 10px;
    font-size: 14px;
    box-shadow: var(--panel-shadow);
}

/* Consolidated Stats and Units Display - Glassy Background */
#stats,
#unitsDisplay {
    width: calc(16vw + 16vh);
    gap: 4px;
    border-radius: 6px;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.66);
    box-shadow:
        0 0 15px rgba(0, 255, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    isolation: isolate;
    --modal-corner-frame-opacity: 0.62;
}

/* Enhanced panel styling for better visual consistency */
#stats {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid rgba(0, 255, 255, 0.6);
    --modal-frame-rgb: 0 230 255;
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(0, 255, 255, 0.2),
        inset 1px 0 0 rgba(0, 255, 255, 0.15),
        inset -1px 0 0 rgba(0, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

/* Panel titles: same “HUD strip” read as SYSTEM PROCESSORS */
#stats>.stat-label {
    color: #9efbff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.22);
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.25);
}

#unitsDisplay>.stat-label {
    color: #b8ffc8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.24);
    text-shadow: 0 0 12px rgba(0, 255, 100, 0.2);
}

/* Unit Bits block: rule under caption (matches wave strip / panel rhythm) */
#unitsDisplay .units-bits-section {
    margin-top: 4px;
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.24);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

#unitsDisplay .units-bits-caption {
    font-size: 9px;
    margin-top: 4px;
    text-align: center;
    font-weight: bold;
}

#unitsDisplay .units-bits-caption__nums {
    color: #fff;
}

#unitsDisplay .units-bits-caption__label {
    color: #ffaa00;
    margin-left: 5px;
}

#unitsDisplay {
    position: fixed;
    top: 8px;
    /* Slightly higher on desktop */
    right: 10px;
    border: 1px solid rgba(0, 255, 0, 0.6);
    --modal-frame-rgb: 0 255 136;
    box-shadow:
        0 0 20px rgba(0, 255, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(0, 255, 0, 0.2),
        inset 1px 0 0 rgba(0, 255, 0, 0.15),
        inset -1px 0 0 rgba(0, 255, 0, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    z-index: 100;
    /* Below tower wheel (2000) but above game elements */
}

#stats::after,
#unitsDisplay::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    background: var(--modal-corner-frame-layers);
    opacity: var(--modal-corner-frame-opacity);
}

.stat-label {
    color: var(--secondary-color);
    font-size: 11px;
}


.stat-number.energy-number {
    /* Driven by updateEnergyBar() on #stats: matches bar / border tint */
    color: var(--energy-number-color, #fff);
    text-shadow: 0 0 8px var(--energy-number-glow, rgba(0, 255, 255, 0.8));
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.stat-number.units-number {
    color: #fff;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 1.0),
        0 0 20px rgba(255, 215, 0, 0.9),
        0 0 30px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

/* When Unit Bits hit 100, change Units color to yellow/gold */
.stat-number.units-number.bits-full {
    color: #ffaa00;
    text-shadow:
        0 0 15px rgba(255, 170, 0, 1.0),
        0 0 25px rgba(255, 170, 0, 0.9),
        0 0 35px rgba(255, 170, 0, 0.7),
        0 0 45px rgba(255, 170, 0, 0.5);
}

.stat-number.wave-number {
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
    transition: all 0.3s ease;
}

/* Tallying animation effects */
.resource-gain-glow {
    animation: resourceGlow 0.6s ease-in-out;
}

/* Upgrade level and cost tallying styles */
.upgrade-progress-text {
    transition: all 0.3s ease;
}

.upgrade-progress-text:hover {
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.6);
    transform: scale(1.02);
}

/* Wave statistics styling */
.wave-stat-label {
    color: var(--text-color-light);
    font-weight: normal;
    text-transform: capitalize;
}

/* Enhanced number styling for better visibility */
.stat-number,
.wave-stat-numbers {
    color: #ffff00;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 255, 0, 0.8);
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

.spawned-label {
    color: #00ccff;
    /* Cyan for spawned - active/incoming */
}

.spawned-numbers {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
}

.eliminated-label {
    color: #ff6666;
    /* Red for eliminated - completed/defeated */
}

.eliminated-numbers {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
}

/* ==============================================
   DRONE EVOLUTION COLOR SYSTEM
   ============================================== */

/* Dynamic drone evolution colors */
.drone-evolution-scout {
    --drone-color: #00ffff;
    --drone-glow: rgba(0, 255, 255, 0.8);
    --drone-border: rgba(0, 255, 255, 0.4);
}

.drone-evolution-recon {
    --drone-color: #44ff88;
    --drone-glow: rgba(68, 255, 136, 0.8);
    --drone-border: rgba(68, 255, 136, 0.4);
}

.drone-evolution-hunter {
    --drone-color: #ff8800;
    --drone-glow: rgba(255, 136, 0, 0.8);
    --drone-border: rgba(255, 136, 0, 0.4);
}

.drone-evolution-wraith {
    --drone-color: #aa44ff;
    --drone-glow: rgba(170, 68, 255, 0.8);
    --drone-border: rgba(170, 68, 255, 0.4);
}

.drone-evolution-stalker {
    --drone-color: #ff4444;
    --drone-glow: rgba(255, 68, 68, 0.8);
    --drone-border: rgba(255, 68, 68, 0.4);
}

.drone-evolution-sentinel {
    --drone-color: #ffdd00;
    --drone-glow: rgba(255, 221, 0, 0.8);
    --drone-border: rgba(255, 221, 0, 0.4);
}

.drone-evolution-apex {
    --drone-color: #ffffff;
    --drone-glow: rgba(255, 255, 255, 0.9);
    --drone-border: rgba(255, 255, 255, 0.6);
}

/* ==============================================
   SECTION-SPECIFIC COLOR SYSTEMS
   ============================================== */

/* Drone Section Styling - Cyan theme */
.drone-section {
    border-color: var(--drone-border) !important;
    border-bottom: 4px solid var(--drone-border) !important;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), rgba(0, 255, 255, 0.1)) !important;
}

.drone-section.drone-evolution-scout .drone-section-header,
.drone-section.drone-evolution-recon .drone-section-header,
.drone-section.drone-evolution-hunter .drone-section-header,
.drone-section.drone-evolution-wraith .drone-section-header,
.drone-section.drone-evolution-stalker .drone-section-header,
.drone-section.drone-evolution-sentinel .drone-section-header,
.drone-section.drone-evolution-apex .drone-section-header {
    color: var(--drone-color) !important;
    text-shadow: 0 0 12px var(--drone-glow) !important;
}

/* Critter Section Styling - Yellow theme (swapped with overclock) */
.critter-section {
    border-color: rgba(255, 255, 0, 0.6) !important;
    border-bottom: 4px solid rgba(255, 255, 0, 0.6) !important;
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.05), rgba(255, 255, 0, 0.1)) !important;
}

.critter-section-header {
    color: #ffff00 !important;
    text-shadow: 0 0 12px rgba(255, 255, 0, 0.8) !important;
}



.critter-section .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffff00, #cccc00) !important;
    color: #000 !important;
    box-shadow: 0 0 20px #ffff00, 0 0 10px #ffff00 inset !important;
    text-shadow: none !important;
}

/* NOTE: Overclock, EMP, and Boss Critter section styles moved to core-breach-ui.css */

/* Drone stat values and labels styling */
/* Drone and critter stat values - use standardized base styles above */

.drone-section.drone-evolution-scout .status-line .label,
.drone-section.drone-evolution-recon .status-line .label,
.drone-section.drone-evolution-hunter .status-line .label,
.drone-section.drone-evolution-wraith .status-line .label,
.drone-section.drone-evolution-stalker .status-line .label,
.drone-section.drone-evolution-sentinel .status-line .label,
.drone-section.drone-evolution-apex .status-line .label {
    color: var(--drone-color) !important;
    opacity: 0.9;
    text-shadow: 0 0 8px var(--drone-glow) !important;
}

.drone-section .drone-action-btn,
.drone-section .drone-upgrade-btn {
    border-color: var(--drone-border) !important;
    color: var(--drone-color) !important;
}

.drone-section .drone-action-btn:hover:not(:disabled),
.drone-section .drone-upgrade-btn:hover:not(:disabled) {
    background: var(--drone-color) !important;
    color: #000 !important;
    box-shadow: 0 0 20px var(--drone-color), 0 0 10px var(--drone-color) inset !important;
    text-shadow: none !important;
}

/* Special styling for drone evolution name */
.drone-section #drone-evolution-name {
    color: var(--drone-color) !important;
    text-shadow: 0 0 5px var(--drone-glow) !important;
    font-weight: bold;
    font-size: 1.1em;
}

/* Compact button styling removed — all sections share base .upgrade-btn styles */



/* ==============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================== */
/* Pause button styling moved to units-actions section above */

.units-actions,
.units-main-actions {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-rows: min-content;
    gap: 3px;
}

#waveButton {
    grid-column: 1;
    grid-row: 1;
}
#autoWaveBtn {
    grid-column: 2;
    grid-row: 1;
}
#pauseBtn {
    grid-column: 1;
    grid-row: 2;
}
#settingsBtn {
    grid-column: 2;
    grid-row: 2;
}

.units-main-actions button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 8px;
    min-height: 32px;
    font-size: 9px;
    font-weight: bold;
    line-height: 1.15;
    white-space: nowrap;
    gap: 6px;
}

#unitsDisplay button,
#pauseBtn {
    border: 1px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    transition: all 0.3s;
    line-height: 1;
    border-radius: 0.6em;
    font-size: 8px;
}

#unitsDisplay button:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

/* ==============================================
   GENERAL BUTTON STYLES - All buttons rounded
   ============================================== */
button,
.upgrade-btn,
.chip-claim-btn {
    border-radius: .61em;
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

/* Auto Wave Button - Orange (OFF) / Cyan (ON) to match showMessage colors */
#autoWaveBtn {
    background: #ff6600;
    /* Orange for OFF state - matches showMessage DISABLED color */
    color: #000;
    border-color: #ff6600;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
    will-change: background-color, box-shadow;
}

#autoWaveBtn.auto-wave-on,
#autoWaveBtn:hover.auto-wave-on {
    background: #00ffff;
    /* Cyan for ON state - matches showMessage ENABLED color (#0ff) */
    border-color: #00ffff;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
    color: #000;
}

#autoWaveBtn:hover:not(.auto-wave-on) {
    background: #ff8800;
    /* Lighter orange on hover when OFF */
    box-shadow: 0 0 25px rgba(255, 136, 0, 0.8);
    transform: scale(1.05);
}

/* Upgrades Button - Green theme */
#upgradesBtn {
    background: var(--primary-color);
    color: var(--background-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

#upgradesBtn:hover {
    background: var(--secondary-color);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
}

#autoWaveBtn:active,
#upgradesBtn:active {
    transform: scale(0.98);
}

/* Settings Button - Game yellow theme (distinct from other buttons) */
#settingsBtn {
    background: #ffff00;
    /* Game yellow - distinct from other button colors */
    color: #000;
    border-color: #ffff00;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.6);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    will-change: background-color, box-shadow;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#settingsBtn:hover {
    background: #cccc00;
    /* Slightly darker yellow on hover */
    box-shadow: 0 0 25px rgba(255, 255, 0, 0.8);
    transform: scale(1.05);
}

#settingsBtn:active {
    transform: scale(0.98);
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.6);
}

/* Pause Button - Orange theme (fixed flickering) */
#pauseBtn {
    background: #ffaa00;
    /* Solid orange - no gradient to prevent flickering */
    color: #000;
    border-color: #ffaa00;
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.6);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    will-change: background-color, box-shadow;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Shared icon styling for HUD and music controls */
.btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.btn-icon .icon-svg {
    display: block;
    vertical-align: middle;
}

/* Pause / Settings: keep SVG optically centered with label (no stray margins) */
#pauseBtn .btn-icon,
#settingsBtn .btn-icon {
    flex-shrink: 0;
}

#pauseBtn .btn-icon .icon-svg,
#settingsBtn .btn-icon .icon-svg {
    margin: 0;
    transform: translateY(-1px);
}

#pauseBtn:hover {
    background: #ff8800;
    /* Slightly darker orange on hover */
    box-shadow: 0 0 25px rgba(255, 170, 0, 0.8);
    transform: scale(1.05);
}

#pauseBtn:active {
    transform: scale(0.98);
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.6);
}

/* Execute Wave Button - Military Panel Style (Manual Mode = Green) */
#waveButton {
    width: 100% !important;
    padding: 6px 8px 3px;
    background: linear-gradient(180deg, #00cc44 0%, #009933 50%, #006622 100%);
    color: #000;
    border: 2px solid #00ff44;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px !important;
    font-weight: bold;
    box-shadow:
        0 0 15px rgba(0, 255, 68, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    border-radius: 0.6em;
    animation: waveButtonPulse 2.5s ease-in-out infinite;
}

#waveButton:hover:not(:disabled):not(.wave-in-progress) {
    background: linear-gradient(180deg, #00ff55 0%, #00cc44 50%, #009933 100%);
    box-shadow:
        0 0 25px rgba(0, 255, 68, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
    animation-play-state: paused;
}

#waveButton:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow: 0 0 10px rgba(0, 255, 68, 0.6);
}

/* Brief, smooth state transition */
#waveButton.wave-state-transition {
    transition: opacity 0.12s ease, transform 0.12s ease;
    opacity: 0.85;
    transform: scale(0.985);
    animation-play-state: paused;
}

/* AUTO WAVE LINKED State - Cyan to match AUTO WAVE: ON button */
#waveButton.auto-wave-linked {
    background: linear-gradient(180deg, #00ddff 0%, #00aacc 50%, #007799 100%);
    border-color: #00ffff;
    color: #000;
    box-shadow:
        0 0 18px rgba(0, 255, 255, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    animation: autoWaveLinkedPulse 2s ease-in-out infinite;
}

#waveButton.auto-wave-linked:hover:not(:disabled):not(.wave-in-progress) {
    background: linear-gradient(180deg, #00ffff 0%, #00ddff 50%, #00aacc 100%);
    box-shadow:
        0 0 30px rgba(0, 255, 255, 1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Auto Wave Linked Pulse - synced feel */
@keyframes autoWaveLinkedPulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.9), 0 0 35px rgba(0, 255, 255, 0.4);
    }
}

/* Wave In Progress State - glassy accent (matches wave badge & deploy message) */
#waveButton.wave-in-progress,
#waveButton:disabled {
    background: color-mix(in srgb, var(--wave-button-accent, #00ddff) 18%, rgba(0, 0, 0, 0.85));
    color: var(--wave-button-accent, #00ddff);
    border: 1px solid color-mix(in srgb, var(--wave-button-accent, #00ddff) 55%, transparent);
    box-shadow:
        0 0 12px color-mix(in srgb, var(--wave-button-accent, #00ddff) 45%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    cursor: not-allowed;
    animation: waveInProgressPulse 1.5s ease-in-out infinite;
    text-shadow: 0 0 8px var(--wave-button-accent, #00ddff);
}

/* Wave In Progress + Auto Wave Linked - same glassy accent, no override */
#waveButton.wave-in-progress.auto-wave-linked {
    /* Uses same --wave-button-accent for cohesive feel with wave badge and deploy message */
    animation: autoWaveInProgressPulse 1.5s ease-in-out infinite;
}

/* Auto Wave In Progress Pulse Animation - same subtle pulse; glow from --wave-button-accent */
@keyframes autoWaveInProgressPulse {

    0%,
    100% {
        opacity: 0.92;
    }

    50% {
        opacity: 1;
    }
}

/* Manual Wave In Progress Pulse Animation - opacity only; glow color from --wave-button-accent */
@keyframes waveInProgressPulse {

    0%,
    100% {
        opacity: 0.92;
    }

    50% {
        opacity: 1;
    }
}

#waveButton.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Wave / path readout: below energy; collapsed until first wave — lean slide (not instant pop) */
#waveProgress {
    width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0 solid transparent;
    box-shadow: none;
    pointer-events: none;
    transition:
        max-height 0.32s cubic-bezier(0.33, 1, 0.68, 1),
        opacity 0.22s ease,
        margin-top 0.32s cubic-bezier(0.33, 1, 0.68, 1),
        padding-top 0.32s cubic-bezier(0.33, 1, 0.68, 1),
        border-width 0.24s ease,
        border-color 0.2s ease,
        box-shadow 0.28s ease;
}

#waveProgress.wave-status-active {
    max-height: 260px;
    opacity: 1;
    margin-top: 3px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    #waveProgress {
        transition-duration: 0.01ms;
    }

    #waveProgress:not(.wave-status-active) {
        display: none;
        max-height: none;
        opacity: 0;
    }

    #waveProgress.wave-status-active {
        display: block;
        max-height: none;
        opacity: 1;
    }
}

/* ==============================================
   PROGRESS & ENERGY BARS (matches settings/music modal style)
   ============================================== */
#progressBar,
#energyBar {
    width: 100%;
    height: 8px;
    min-height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--energy-bar-border, rgba(0, 255, 255, 0.4));
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin: 2% 0;
}

#energyBar {
    height: 20px;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

#progressFill {
    height: 100%;
    /* Start → end: blue-cyan (start) to green (end) for clear progression */
    background: linear-gradient(90deg, rgba(0, 200, 255, 0.9), rgba(0, 255, 136, 0.95));
    border-radius: 3px;
    transition: width 0.08s linear;
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.4);
}

#energyFill {
    height: 100%;
    background: rgb(255, 0, 0);
    /* Default red background for critical state */
    transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s ease;
    box-shadow: 0 0 8px rgb(255, 0, 0);
}

#energyBar.warning,
#stats.warning,
#waveProgress.warning {
    animation: warningPulse 1s infinite;
}

#energyBar.critical,
#stats.critical,
#waveProgress.critical {
    /* border color driven by --energy-bar-border in JS so it matches the bar (red when low) */
    animation: criticalPulse 0.5s infinite;
}

#energyBar.overcharged {
    border-color: #00ffff;
    animation: overchargeBorder 2s ease-in-out infinite alternate;
}

/* Smooth overcharged state transitions */
#energyBar.overcharged #energyFill {
    transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 1.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 1.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s ease-in-out;
}

/* Overcharge animations */
@keyframes overchargePulse {
    0% {
        box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff;
        transform: scale(1);
    }

    100% {
        box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
        transform: scale(1.02);
    }
}

@keyframes overchargeGlow {
    0% {
        box-shadow: 0 0 15px #00ffff;
        opacity: 0.9;
    }

    100% {
        box-shadow: 0 0 25px #00ffff, 0 0 35px #0080ff;
        opacity: 1;
    }
}

@keyframes overchargeBorder {
    0% {
        border-color: #00ffff;
        box-shadow: 0 0 5px #00ffff;
    }

    100% {
        border-color: #0080ff;
        box-shadow: 0 0 10px #0080ff;
    }
}

/* Enhanced Energy Bar Animations for Milestone Glow Effects */
/* Consolidated: These animations were unused and have been removed to optimize CSS size */
/* Upgrade cards now use border-based styling (border-width and border-color) instead of expensive glow animations */

/* ==============================================
   UNITS VISUAL FEEDBACK ANIMATIONS
   ============================================== */

@keyframes unitsPop {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
    }

    50% {
        transform: scale(1.15);
        text-shadow: 0 0 15px rgba(255, 200, 0, 0.8), 0 0 25px rgba(255, 170, 0, 0.5);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
    }
}

@keyframes unitsGrow {
    0% {
        transform: scale(1);
        color: #ffaa00;
    }

    25% {
        transform: scale(1.1);
        color: #ffcc33;
    }

    50% {
        transform: scale(1.2);
        color: #ffd700;
    }

    75% {
        transform: scale(1.1);
        color: #ffcc33;
    }

    100% {
        transform: scale(1);
        color: #ffaa00;
    }
}

@keyframes bitsBarCelebration {
    0% {
        background: linear-gradient(90deg, #ff8800 0%, #ffaa00 50%, #ffcc00 100%);
        box-shadow: 0 0 10px #ffaa00;
        transform: scaleY(1);
    }

    25% {
        background: linear-gradient(90deg, #ffaa00 0%, #ffcc00 50%, #ffff00 100%);
        box-shadow: 0 0 25px #ffcc00, 0 0 40px #ffff00;
        transform: scaleY(1.2);
    }

    50% {
        background: linear-gradient(90deg, #ffff00 0%, #ffff88 50%, #ffffff 100%);
        box-shadow: 0 0 35px #ffff00, 0 0 50px #ffffff;
        transform: scaleY(1.3);
    }

    75% {
        background: linear-gradient(90deg, #ffaa00 0%, #ffcc00 50%, #ffff00 100%);
        box-shadow: 0 0 25px #ffcc00, 0 0 40px #ffff00;
        transform: scaleY(1.1);
    }

    100% {
        background: linear-gradient(90deg, #ff8800 0%, #ffaa00 50%, #ffcc00 100%);
        box-shadow: 0 0 10px #ffaa00;
        transform: scaleY(1);
    }
}

/* HUD Energy / Units: quick “gulp” when a floating reward or tally lands */
@keyframes hudResourceGulp {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    35% {
        transform: scale(1.18);
        filter: brightness(1.22);
    }

    55% {
        transform: scale(1.06);
        filter: brightness(1.08);
    }

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

.stat-number.hud-resource-gulp,
#energy.hud-resource-gulp,
#units.hud-resource-gulp {
    animation: hudResourceGulp 0.45s cubic-bezier(0.34, 1.45, 0.64, 1);
    display: inline-block;
    transform-origin: center center;
    will-change: transform;
}

/* Units display animation classes */
.units-pop {
    animation: unitsPop 0.6s ease-out;
}

.units-grow {
    animation: unitsGrow 0.8s ease-out;
}

.bits-bar-celebration {
    animation: bitsBarCelebration 1.2s ease-out;
}

/* Pop animation when bits hit 100 */
.bits-bar-pop {
    animation: bitsBarPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Cool-down animation when bits reset to 0 */
.bits-bar-cooldown {
    animation: bitsBarCooldown 0.3s ease-out;
}

.bits-overcharge-spark {
    position: fixed;
    z-index: 10000;
    width: 4px;
    height: 4px;
    pointer-events: none;
    border-radius: 50%;
    background: var(--spark-color, #ffef7a);
    box-shadow:
        0 0 8px var(--spark-color, rgba(255, 238, 122, 0.95)),
        0 0 16px var(--spark-glow, rgba(255, 170, 0, 0.55));
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    animation: bitsOverchargeSpark 560ms cubic-bezier(0.2, 0.78, 0.28, 1) var(--spark-delay, 0ms) forwards;
}

@keyframes bitsOverchargeSpark {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(45deg) scale(0);
    }

    18% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(45deg) scale(var(--spark-scale, 1));
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--spark-dx, 24px)), calc(-50% + var(--spark-dy, 0px))) rotate(120deg) scale(0.15);
    }
}

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

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 40px rgba(255, 170, 0, 1.0), 0 0 60px rgba(255, 170, 0, 0.6);
    }

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

@keyframes bitsBarCooldown {
    0% {
        opacity: 1;
        box-shadow: 0 0 40px rgba(255, 170, 0, 1.0);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 170, 0, 0.4);
    }
}

/* Bits bar elegant glow */
#bitsBucketBar {
    box-shadow:
        0 0 8px rgba(255, 170, 0, 0.4),
        0 0 15px rgba(255, 170, 0, 0.2),
        inset 0 0 5px rgba(255, 170, 0, 0.1);
    transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
    overflow: hidden;
}

#bitsBucketFill {
    box-shadow:
        0 0 10px rgba(255, 170, 0, 0.8),
        0 0 20px rgba(255, 170, 0, 0.4),
        0 0 30px rgba(255, 170, 0, 0.2);
    transition: width 0.3s ease, box-shadow 0.2s ease-out;
    max-width: 100%;
    /* Prevent visual bleeding beyond container */
}

/* ==============================================
   TOWER WHEEL & TETHER SYSTEM
   ============================================== */

/* Tether Overlay - Behind everything */

#wheelTethersOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1999 !important;
    /* Behind wheel but above backdrop */
}

/* Enhanced Wheel Backdrop */
#wheelBackdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background / backdrop-filter: inherit from .modal-overlay (modal.css) */
    z-index: 1998;
    /* Behind tethers */
    opacity: 1;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: backdropPulse 4s ease-in-out infinite;
}

/* Scan lines effect for tower wheel backdrop - matches game background (faded, subtle) */
#wheelBackdrop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 204, 204, 0.03) 2px,
            rgba(0, 204, 204, 0.03) 4px);
    animation: gameScanlinePulse 8s ease-in-out infinite;
    mix-blend-mode: overlay;
}

/* Enhanced Main Wheel Container */
#towerWheel {
    display: none;
    position: absolute;
    isolation: isolate;
    /* z-index stacking for wheel cards only */
    /* width: 450px;
    height: 350px; */
    pointer-events: none;
    z-index: 2000;
    /* Above tethers */
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.3));
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#towerWheel.is-opening {
    animation: wheelEntrance 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#towerWheel.is-closing {
    animation: wheelExit 0.33s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced Tower Option Cards with Colored Glows */
/* Enhanced Tower Option Cards with Colored Glows */
.tower-option-wheel {
    position: absolute;
    width: 127px;
    height: auto;
    min-height: 127px;
    /* Darker, flatter background for readability */
    background: rgba(10, 15, 20, 0.96);
    backdrop-filter: blur(4px) saturate(1.2) brightness(1.1);
    border: 2.5px solid var(--tower-color);
    border-radius: 50%;
    /* Use var padding if set by JS, else fallback */
    padding: var(--card-padding, 12px);
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    /* Stacking: low → high by slot index; hover jumps above all neighbors */
    z-index: calc(24 + var(--wheel-depth, 0));
    --tower-color: #0ff;
    box-shadow:
        0 0 6px var(--tower-color),
        0 0 12px rgba(var(--tower-color-rgb, 0, 255, 255), 0.25),
        inset 0 0 8px rgba(var(--tower-color-rgb, 0, 255, 255), 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 6px 20px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    will-change: transform, opacity;
    animation: towerWheelPulse 3s ease-in-out infinite;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
}

/* NEW tower badge — appears on first wheel open after a tower unlocks */
.tower-new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle, #ff4400 0%, #cc1100 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 10px #ff4400, 0 0 20px rgba(255, 68, 0, 0.6);
    animation: towerNewPulse 0.75s ease-in-out infinite alternate;
    font-family: 'Courier New', monospace;
}

@keyframes towerNewPulse {
    from { transform: scale(1);    box-shadow: 0 0 8px #ff4400, 0 0 16px rgba(255,68,0,0.5); }
    to   { transform: scale(1.28); box-shadow: 0 0 16px #ff6600, 0 0 28px rgba(255,100,0,0.75); }
}

/* =====================================================
   ACHIEVEMENT TOAST NOTIFICATION
   ===================================================== */
#achievement-toast-container {
    position: fixed;
    top: var(--achievement-toast-top, 70px);
    right: var(--achievement-toast-right, 12px);
    width: var(--achievement-toast-width, 280px);
    z-index: 9500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    contain: layout style;
}

.achievement-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: rgba(8, 20, 14, 0.96);
    border: 1px solid var(--toast-tier-color, #00ff88);
    border-left: 4px solid var(--toast-tier-color, #00ff88);
    border-radius: 6px;
    padding: 8px 10px 8px 8px;
    width: 100%;
    min-width: 0;
    max-width: min(280px, calc(100vw - 24px));
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.25), 0 2px 12px rgba(0,0,0,0.7);
    animation: achToastIn 0.48s cubic-bezier(0.18, 1, 0.28, 1) forwards;
    font-family: 'Courier New', monospace;
    pointer-events: none;
    will-change: transform, opacity;
    --modal-frame-rgb: 0 255 170;
    --modal-corner-frame-opacity: 0.75;
}

.achievement-toast::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    background: var(--modal-corner-top-right-layers);
    opacity: var(--modal-corner-frame-opacity);
}

.achievement-toast > * {
    position: relative;
    z-index: 2;
}

.achievement-toast.toast-exit {
    animation: achToastOut 0.46s cubic-bezier(0.45, 0, 0.22, 1) forwards;
}

.achievement-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--toast-tier-color, #00ff88);
    opacity: 0.95;
}

.achievement-toast-icon-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid var(--toast-tier-color, #00ff88);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2.2vw, 21px);
}

.achievement-toast-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.achievement-toast-label {
    font-size: clamp(8px, 1.15vw, 9px);
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: #d4b44a;
    text-shadow: 0 0 10px rgba(212, 180, 74, 0.35);
    opacity: 0.92;
    line-height: 1;
}

.achievement-toast-name {
    font-size: clamp(11px, 1.6vw, 13px);
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.achievement-toast-desc {
    font-size: clamp(9px, 1.35vw, 11px);
    color: rgba(215, 255, 235, 0.88);
    line-height: 1.25;
    white-space: normal;
}

.achievement-toast-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.achievement-toast-reward {
    align-self: flex-start;
    display: inline-flex;
    align-items: baseline;
    gap: 0.32em;
    padding: 5px 9px;
    border-radius: 5px;
    line-height: 1.25;
    font-size: clamp(9px, 1.35vw, 11px);
    font-weight: 800;
    color: var(--achievement-reward-color, #ffdd66);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.1), transparent 34%),
        linear-gradient(135deg, rgba(5, 18, 16, 0.34), rgba(10, 4, 18, 0.26));
    border: 1px solid color-mix(in srgb, var(--achievement-reward-color, #ffdd66) 34%, rgba(255, 255, 255, 0.08));
    text-shadow:
        0 0 12px color-mix(in srgb, var(--achievement-reward-color, #ffdd66) 44%, transparent),
        0 1px 2px rgba(0, 0, 0, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 16px color-mix(in srgb, var(--achievement-reward-color, #ffdd66) 18%, transparent);
    transform-origin: 16% 58%;
    animation: achToastRewardNumRubber 0.82s cubic-bezier(0.34, 1.18, 0.55, 1) 0.22s both;
    transition:
        opacity 0.24s ease-out,
        transform 0.38s cubic-bezier(0.34, 1.28, 0.64, 1),
        border-color 0.28s ease-out,
        background-color 0.28s ease-out;
}




/* Floating +N orbs (tower sell refund, achievement Units — shared createFloatingEnergyOrb) */
.floating-energy-orb.floating-energy-orb--hud-pill {
    font-family: Orbitron, sans-serif;
    font-weight: bold;
    border-radius: 5px;
    padding: 2px 8px;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.14), transparent 32%),
        linear-gradient(135deg, rgba(3, 18, 16, 0.36), rgba(9, 6, 18, 0.28));
    border: 1px solid rgba(0, 255, 136, 0.22);
    border: 1px solid color-mix(in srgb, var(--orb-accent, #ffff00) 32%, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.18),
        0 2px 10px rgba(0, 0, 0, 0.28),
        0 0 14px rgba(0, 255, 136, 0.12);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.16),
        0 2px 10px rgba(0, 0, 0, 0.26),
        0 0 18px color-mix(in srgb, var(--orb-accent, #00ff88) 18%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.floating-energy-orb.floating-energy-orb--hud-pill:not(.floating-energy-orb--glitch) {
    text-shadow:
        0 0 2px var(--orb-accent, #ffff00),
        0 1px 2px rgba(0, 0, 0, 0.92);
}

.floating-energy-orb.floating-energy-orb--hud-pill.floating-energy-orb--compact {
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 4px;
}

.floating-energy-orb.floating-energy-orb--hud-pill:not(.floating-energy-orb--compact) {
    font-size: 14px;
}

.floating-energy-orb.floating-energy-orb--hud-pill.floating-energy-orb--glitch {
    background: rgba(0, 0, 0, 0.72);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Brief outline pulse when an orb is absorbed into Energy / Units panels */
#stats.hud-absorb-flash,
#unitsDisplay.hud-absorb-flash {
    outline: 1px solid transparent;
    animation: hudAbsorbFlash 0.52s ease-out;
}

@keyframes hudAbsorbFlash {

    0%,
    100% {
        outline-color: transparent;
        outline-offset: 0;
    }

    45% {
        outline-color: rgba(255, 210, 96, 0.62);
        outline-offset: 3px;
    }
}

@keyframes achToastRewardNumRubber {
    0% {
        transform: translateY(7px) scale(0.78);
        opacity: 0.55;
    }
    24% {
        transform: translateY(-3px) scale(1.16);
        opacity: 1;
    }
    42% {
        transform: translateY(4px) scale(0.92);
    }
    60% {
        transform: translateY(-2px) scale(1.07);
    }
    78% {
        transform: translateY(1px) scale(0.98);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes achToastIn {
    from { opacity: 0; transform: translate3d(34px, 16px, 0) scale(0.985); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes achToastOut {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to   { opacity: 0; transform: translate3d(18px, -18px, 0) scale(0.985); }
}

/* Add subtle inner ring effect for unlocked cards */
.tower-option-wheel::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid var(--tower-color);
    border-radius: 50%;
    opacity: 0.3;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Add outer glow ring for unlocked cards */
.tower-option-wheel::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, transparent 60%, var(--tower-color) 100%);
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tower-icon-canvas,
.tower-wheel-icon-image {
    width: 53px;
    height: 53px;
    margin-top: 6px;
    /* Leave vertical room for 12px name + cost + stats inside circular card */
}

.tower-wheel-icon-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.45));
}

/* NEW: Rule for the text container */
.tower-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    /* Allow text to take remaining space */
    width: 100%;
    gap: 1px;
    /* Consistent spacing, replaces margins */
    padding: 0;
}

.tower-option-wheel .tower-name {
    font-weight: 800;
    /* Bolder for readability */
    color: var(--tower-color);
    font-size: var(--name-font-size, 12px);
    /* Hard shadow for contrast against glow */
    text-shadow: 1px 1px 0 #000, 0 0 4px var(--tower-color);
    margin: 0;
    line-height: 1.1;
}

.tower-option-wheel .tower-info {
    color: #0ff;
    font-size: var(--damage-font-size, 8px);
    /* Hard shadow for contrast */
    text-shadow: 1px 1px 0 #000;
    font-weight: 600;
    line-height: 1.05;
}

/* Locked wheel row (wave / requirement): slightly smaller than stats row */
.tower-option-wheel.locked .tower-info {
    font-size: max(6px, calc(var(--damage-font-size, 8px) * 0.85));
    line-height: 1.08;
}

/* HUB badge wrap - centers badge; shared by all towers */
.hub-badge-wrap {
    margin-top: 3px;
}

/* HUB badge - shown on tower wheel when hub bonuses are active
   Shared by all towers; width fixed to content so Chronoblade "Time Cut" (longer stat text)
   doesn't stretch the badge. Override blade: .tower-option-wheel[data-key="chronoblade"] .hub-badge */
.hub-badge {
    --hub-badge-padding-x: 3px;
    --hub-badge-padding-y: 1px;
    display: block;
    width: fit-content;
    min-width: fit-content;
    box-sizing: content-box;
    font-size: 10px;
    font-weight: 700;
    color: #0f0;
    background: rgba(0, 255, 0, 0.12);
    border: 1px solid rgba(0, 255, 0, 0.35);
    border-radius: 3px;
    padding: var(--hub-badge-padding-y) var(--hub-badge-padding-x);
    margin: 0 auto;
    letter-spacing: 0.8px;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.15);
    line-height: 1;
    text-align: center;
    animation: hubBadgeGlow 3s ease-in-out infinite alternate;
}

/* Chronoblade / blade HUB badge overrides - edit here if blade needs unique styling */
/* .tower-option-wheel[data-key="chronoblade"] .hub-badge { } */

@keyframes hubBadgeGlow {
    0% {
        text-shadow: 0 0 4px rgba(0, 255, 0, 0.5);
        box-shadow: 0 0 4px rgba(0, 255, 0, 0.1);
    }

    100% {
        text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.25);
    }
}

.tower-option-wheel .tower-cost {
    margin: 0;
    color: #ff0;
    font-size: var(--cost-font-size, 10px);
    /* Hard shadow for contrast */
    text-shadow: 1px 1px 0 #000;
    font-weight: 700;
}

.tower-option-wheel:hover {
    z-index: 160;
    transform: scale(1.08) translateZ(0);
    border-width: 4px;
    box-shadow:
        0 0 20px var(--tower-color),
        0 0 35px rgba(var(--tower-color-rgb, 0, 255, 255), 0.6),
        inset 0 0 20px rgba(var(--tower-color-rgb, 0, 255, 255), 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
        0 8px 30px rgba(0, 0, 0, 0.6);
    animation: none;
}

.tower-option-wheel:hover::before {
    opacity: 0.6;
    border-width: 1.5px;
}

.tower-option-wheel:hover::after {
    opacity: 0.4;
}

/* LOCKED CARD STYLING - self-contained tower wheel locked effect */
.tower-option-wheel.locked {
    cursor: not-allowed;
    border: 3px dotted rgba(255, 96, 96, 0.88) !important;
    background:
        linear-gradient(145deg, rgba(24, 14, 18, 0.94), rgba(16, 10, 14, 0.96)),
        radial-gradient(circle at 50% 28%, rgba(255, 72, 72, 0.14) 0%, transparent 72%) !important;
    backdrop-filter: blur(3px) saturate(0.82) brightness(0.9) !important;
    box-shadow:
        0 0 10px rgba(255, 72, 72, 0.34),
        inset 0 0 10px rgba(255, 72, 72, 0.12),
        inset 0 0 20px rgba(0, 0, 0, 0.58),
        0 5px 18px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden;
    z-index: calc(22 + var(--wheel-depth, 0));
    animation: towerLockedPulse 2.8s ease-in-out infinite;
}

/* Locked cards should not inherit unlocked hover grow/glow behavior */
.tower-option-wheel.locked:hover,
.tower-option-wheel.locked:focus,
.tower-option-wheel.locked:active {
    z-index: 160 !important;
    transform: translateZ(0) !important;
    border-width: 3px !important;
    opacity: 1 !important;
    animation: towerLockedPulse 2.8s ease-in-out infinite !important;
}

/* Keep inner ring simple and readable for locked cards */
.tower-option-wheel.locked::before {
    border-color: rgba(255, 92, 92, 0.55);
    opacity: 0.22;
    animation: towerLockedRingPulse 2.8s ease-in-out infinite;
}

/* Use outer pseudo as subtle scan overlay (non-heavy) */
.tower-option-wheel.locked::after {
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 12px,
            rgba(255, 78, 78, 0.08) 12px 13px),
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 96, 96, 0.18) 45%,
            rgba(255, 96, 96, 0.26) 50%,
            rgba(255, 96, 96, 0.18) 55%,
            transparent 100%);
    opacity: 0.22;
    z-index: 1;
    filter: saturate(1.1) contrast(1.15);
    animation: towerLockedScanSweep 7.2s ease-in-out infinite;
}

@keyframes towerLockedPulse {

    0%,
    100% {
        box-shadow:
            0 0 9px rgba(255, 72, 72, 0.3),
            inset 0 0 9px rgba(255, 72, 72, 0.1),
            inset 0 0 20px rgba(0, 0, 0, 0.58),
            0 5px 18px rgba(0, 0, 0, 0.55);
    }

    50% {
        box-shadow:
            0 0 14px rgba(255, 88, 88, 0.45),
            inset 0 0 12px rgba(255, 88, 88, 0.16),
            inset 0 0 20px rgba(0, 0, 0, 0.58),
            0 5px 18px rgba(0, 0, 0, 0.55);
    }
}

@keyframes towerLockedRingPulse {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.34;
    }
}

@keyframes towerLockedScanSweep {

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

    50% {
        transform: translateX(115%);
        opacity: 1;
    }
}

.tower-option-wheel.locked .tower-name {
    color: #ff6666 !important;
    font-weight: bold !important;
    text-shadow: 0 0 6px rgba(255, 102, 102, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    position: relative;
}

.tower-option-wheel.locked .tower-cost {
    color: #ff4444 !important;
    font-size: calc(9px + 0.5vw) !important;
    font-weight: bold !important;
    text-shadow: 0 0 4px rgba(255, 68, 68, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9) !important;
    background: rgba(255, 68, 68, 0.1);
    padding: 1px;
    border-radius: 4px;
}

/* Locked tower styling - desktop only */

.tower-option-wheel.unaffordable {
    background:
        linear-gradient(135deg, rgba(40, 25, 10, 0.95) 0%, rgba(60, 35, 15, 0.92) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 140, 0, 0.12) 0%, transparent 70%) !important;
    border: 2px solid #ff8c00 !important;
    cursor: not-allowed;
    backdrop-filter: blur(4px) saturate(0.9) brightness(0.9) !important;
    box-shadow:
        0 0 15px rgba(255, 140, 0, 0.6),
        0 0 25px rgba(255, 140, 0, 0.35),
        inset 0 0 12px rgba(255, 140, 0, 0.2),
        inset 0 0 18px rgba(0, 0, 0, 0.7),
        inset 0 2px 0 rgba(255, 140, 0, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
        0 6px 25px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 140, 0, 0.35) !important;
    animation: unaffordablePulse 2s ease-in-out infinite;
}

.tower-option-wheel.unaffordable::before {
    border-color: #ff8c00;
    opacity: 0.2;
    animation: unaffordableRingPulse 2s ease-in-out infinite;
}

.tower-option-wheel.unaffordable::after {
    background: radial-gradient(circle at 50% 50%, transparent 60%, #ff8c00 100%);
    opacity: 0.15;
}

.tower-option-wheel.unaffordable:hover {
    z-index: 160;
    transform: scale(1.02) translateZ(0);
    box-shadow:
        0 0 20px rgba(255, 140, 0, 0.7),
        0 0 30px rgba(255, 140, 0, 0.45),
        inset 0 0 15px rgba(255, 140, 0, 0.25),
        inset 0 0 20px rgba(0, 0, 0, 0.75),
        inset 0 2px 0 rgba(255, 140, 0, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.45),
        0 8px 28px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 140, 0, 0.4) !important;
    animation: none;
}

.tower-option-wheel.unaffordable .tower-cost {
    color: #ff8c00 !important;
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.9), 0 0 4px rgba(255, 140, 0, 0.6) !important;
}

.tower-option-wheel.unaffordable .tower-name {
    color: #ffbb55 !important;
    text-shadow: 0 0 6px rgba(255, 187, 85, 0.7), 0 0 3px rgba(255, 187, 85, 0.4) !important;
}

@keyframes unaffordablePulse {

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

    50% {
        opacity: 0.93;
        transform: translateZ(0) scale(1.01);
    }
}

@keyframes unaffordableRingPulse {

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

    50% {
        opacity: 0.35;
        transform: scale(1.015);
    }
}

/* Enhanced Processor Node / Close Button */

/* Synchronized Wheel Animations */
/* Unlocked and unaffordable cards use normal animation */
#towerWheel.is-opening .tower-option-wheel,
#towerWheel.is-opening .tower-option-wheel.unaffordable {
    animation: gear-spin-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--option-index) * 0.016s);
}

/* Locked cards use modified animation that ends at opacity 0.5 */
#towerWheel.is-opening .tower-option-wheel.locked {
    animation: gear-spin-in-locked 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--option-index) * 0.016s);
}

#towerWheel.is-closing .tower-option-wheel,
#towerWheel.is-closing .tower-option-wheel.unaffordable,
#towerWheel.is-closing .tower-option-wheel.locked {
    animation: gear-spin-out 0.4s cubic-bezier(0.62, 0.66, 0.245, 1) backwards;
    /* FIX: Use the same delay as the opening animation for a sequential close */
    animation-delay: calc(var(--option-index) * 0.0036s);
}

/* Tether Animations - Synchronized with cards */
#wheelTethersOverlay g {
    opacity: 0;
}

#towerWheel.is-opening~#wheelTethersOverlay g {
    animation: tethersShootOut 0.16s ease-out forwards;
}

#towerWheel.is-closing~#wheelTethersOverlay g {
    animation: tethersRetract 0.26s ease-in forwards;
}

/* Tower Info Panel */
#towerInfo {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid var(--tower-color, #0f0);
    padding: 15px;
    min-width: 200px;
    box-shadow: 0 0 30px var(--tower-color, rgba(0, 255, 0, 0.5));
    z-index: 12000;
    pointer-events: none;
    max-width: 27vw;
    font-size: 11px;
    isolation: isolate;
    /* Desktop positioning - positioned next to specific tower card in wheel */
    /* Position will be set by JavaScript relative to individual tower card */
}

#towerInfo.is-closing {
    animation: fadeOut 0.2s ease-in forwards;
}

#towerInfo h3 {
    color: var(--tower-color, var(--secondary-color));
    margin-bottom: 10px;
    font-size: 15px;
}

/* ==============================================
   TOWER & CORE STATUS PANEL
   Placed-tower option modal (#towerStatus): compact width, stat column flexes for long lines
   (siphon / hub badges); upgrade column max-content like HUB HOLD V2 cards — not full-bleed buttons.
   ============================================== */
#towerStatus {
    display: none;
    position: absolute;
    --dynamic-color: #0f0;
    background-color: rgba(13, 22, 28, 0.9);
    --modal-frame-rgb: 0 255 200;
    background-image: var(--modal-circuit-vein-layers);
    backdrop-filter: blur(2px) brightness(1.05);
    -webkit-backdrop-filter: blur(2px) brightness(1.05);
    border: 1px solid rgba(0, 255, 255, 0.4);
    border-top: 2px solid var(--dynamic-color);
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.15), 0 0 4px rgba(0, 255, 255, 0.08) inset;
    padding: 7px 10px;
    font-size: 12px;
    z-index: 2000;
    flex-direction: column;
    gap: 2px;
    top: 30vh;
    right: 3.6vh;
    --tower-action-pct: 40%;
    min-width: 340px;
    max-width: min(400px, 94vw);
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    width: clamp(240px, calc(15vw + 10.5em), 300px);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* Opening animation - scale + fade in */
#towerStatus.is-opening {
    opacity: 1;
    transform: scale(1);
}

/* Closing animation - scale + fade out */
#towerStatus.is-closing {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
}

/* Evolution glitch animation - short and sweet */
#towerStatus.evolution-glitch {
    animation: evolutionGlitch 0.4s ease-out forwards;
}

.panel-auto-close-meter {
    --panel-timer-color: #00ffff;
    --panel-timer-progress: 1;
    position: fixed;
    z-index: 2050;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 112px;
    height: 28px;
    padding: 3px 8px 3px 7px;
    border: 1px solid rgba(0, 255, 255, 0.32);
    border-top-color: var(--panel-timer-color);
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(0, 255, 255, 0.08), transparent 38%, rgba(0, 255, 136, 0.06)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
        rgba(3, 10, 12, 0.9);
    box-shadow:
        0 0 8px var(--panel-timer-color),
        inset 0 0 5px rgba(255, 255, 255, 0.05);
    color: #b9fff5;
    font-family: 'Courier New', monospace;
    font-size: 8.4px;
    font-weight: 900;
    letter-spacing: 0.32px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.panel-auto-close-meter.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.panel-auto-close-meter.is-resetting {
    animation: panelTimerResetFlash 0.24s ease-out;
}

.panel-auto-close-meter__ring {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 50%;
    background:
        conic-gradient(var(--panel-timer-color) calc(var(--panel-timer-progress) * 1turn), rgba(255, 255, 255, 0.08) 0),
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 2.5px);
    box-shadow: 0 0 7px var(--panel-timer-color);
}

.panel-auto-close-meter__copy {
    display: flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1;
    white-space: nowrap;
}

.panel-auto-close-meter__label {
    color: var(--panel-timer-color);
    text-shadow: 0 0 6px var(--panel-timer-color);
}

.panel-auto-close-meter__time {
    min-width: 20px;
    color: #ffffff;
    text-align: right;
}

@media (max-width: 640px) {
    .panel-auto-close-meter {
        gap: 5px;
        min-width: 106px;
        height: 27px;
        padding: 3px 7px 3px 6px;
        font-size: 8px;
        letter-spacing: 0.24px;
    }

    .panel-auto-close-meter__ring {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .panel-auto-close-meter__copy {
        gap: 4px;
    }
}

@keyframes panelTimerResetFlash {
    0% {
        filter: brightness(1.7);
        box-shadow:
            0 0 14px var(--panel-timer-color),
            inset 0 0 9px var(--panel-timer-color);
    }

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

@keyframes evolutionGlitch {
    0% {
        transform: translateX(0) translateY(0) skew(0deg);
        filter: hue-rotate(0deg) brightness(1);
        opacity: 1;
    }

    10% {
        transform: translateX(-2px) translateY(1px) skew(-1deg);
        filter: hue-rotate(15deg) brightness(1.1);
        opacity: 0.95;
    }

    20% {
        transform: translateX(2px) translateY(-1px) skew(1deg);
        filter: hue-rotate(-15deg) brightness(0.9);
        opacity: 0.9;
    }

    30% {
        transform: translateX(-1px) translateY(0) skew(-0.5deg);
        filter: hue-rotate(10deg) brightness(1.05);
        opacity: 0.95;
    }

    40% {
        transform: translateX(1px) translateY(0) skew(0.5deg);
        filter: hue-rotate(-10deg) brightness(0.95);
        opacity: 0.9;
    }

    50% {
        transform: translateX(0) translateY(0) skew(0deg);
        filter: hue-rotate(0deg) brightness(1);
        opacity: 1;
    }

    100% {
        transform: translateX(0) translateY(0) skew(0deg);
        filter: hue-rotate(0deg) brightness(1);
        opacity: 1;
    }
}

/* Shared hover effect - subtle (match tower modal cleanup) */
#coreStatusUI:hover,
#breachStatusUI:hover {
    box-shadow:
        0 0 6px var(--dynamic-color),
        0 0 3px var(--dynamic-color) inset,
        0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Shared closing animation */
#coreStatusUI.is-closing,
#breachStatusUI.is-closing {
    animation: fadeOut 0.3s ease-in forwards;
}

/* NOTE: Scan line effect moved to core-breach-ui.css */

/* ----- Color-Specific Overrides ----- */

/* Core Status UI - Green Theme (cleaner panel; matches showCoreStatus --dynamic-color) */
#coreStatusUI {
    --dynamic-color: #00ff88;
    background: rgba(8, 18, 10, 0.9);
    bottom: 15%;
    right: 5%;
    transform: translateY(10px);
}

/* Breach Status UI - Orange Theme (cleaner panel, match tower modal) */
#breachStatusUI {
    --dynamic-color: #ff8800;
    background: rgba(18, 10, 4, 0.9);
    bottom: 3%;
    left: 5%;
    transform: translateY(5px);
}

/* Enhanced tower header with color and level information */
/* Generic drag handle: grab cursor + concentric arc grip (same DNA as .tut-coach::before). */
.panel-drag-grip,
.mother-top-tabs {
    --drag-grip-color: var(--dynamic-color, #0ff);
}

.panel-drag-grip {
    position: relative;
    cursor: grab;
    user-select: none;
}

.panel-drag-grip::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 28px;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
    background:
        radial-gradient(circle at 100% 50%, transparent 3px, var(--drag-grip-color, #0ff) 3px, var(--drag-grip-color, #0ff) 4px, transparent 4px),
        radial-gradient(circle at 100% 50%, transparent 6px, var(--drag-grip-color, #0ff) 6px, var(--drag-grip-color, #0ff) 7px, transparent 7px),
        radial-gradient(circle at 100% 50%, transparent 9px, var(--drag-grip-color, #0ff) 9px, var(--drag-grip-color, #0ff) 10px, transparent 10px);
}

.panel-drag-grip:hover::before { opacity: 0.78; }
.panel-drag-grip:active { cursor: grabbing; }
.panel-drag-grip:active::before { opacity: 1; }

@media (min-width: 641px) {
    .mother-top-tabs::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 28px;
        opacity: 0.5;
        pointer-events: none;
        transition: opacity 0.2s ease;
        background:
            radial-gradient(circle at 100% 50%, transparent 3px, var(--drag-grip-color, #0ff) 3px, var(--drag-grip-color, #0ff) 4px, transparent 4px),
            radial-gradient(circle at 100% 50%, transparent 6px, var(--drag-grip-color, #0ff) 6px, var(--drag-grip-color, #0ff) 7px, transparent 7px),
            radial-gradient(circle at 100% 50%, transparent 9px, var(--drag-grip-color, #0ff) 9px, var(--drag-grip-color, #0ff) 10px, transparent 10px);
    }

    .mother-top-tabs:hover::before { opacity: 0.78; }
    .mother-top-tabs:active { cursor: grabbing; }
    .mother-top-tabs:active::before { opacity: 1; }
}

/* [DRAGGABLE] badge — matches .tut-coach__drag on the demo tower option card */
.panel-drag-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 0, 0.28);
    border-radius: 4px;
    background: rgba(255, 255, 0, 0.06);
    color: #ffff00;
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.85px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    flex-shrink: 0;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.panel-drag-grip:hover .panel-drag-label,
.mother-top-tabs:hover .panel-drag-label {
    border-color: rgba(255, 255, 0, 0.48);
    background: rgba(255, 255, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.18);
}

.panel-drag-label__glyph {
    opacity: 0.82;
    font-size: 9px;
    line-height: 1;
}

/* Tower panel top row: arc grip + tower name + prev/next chevrons, one grabbable row. */
#towerStatus .tower-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 30px 2px 26px; /* left: room for the arc cue; right: clears the close button */
    margin-bottom: 2px;
}
#towerStatus h3.tower-name-small {
    color: var(--dynamic-color, #0ff);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    text-shadow: 0 0 6px var(--dynamic-color, #0ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tower-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.tower-nav-btn {
    background: rgba(0, 255, 255, 0.06);
    border: 1px solid var(--dynamic-color, #0ff);
    color: var(--dynamic-color, #0ff);
    border-radius: 4px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: -1px;
    padding: 2px 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tower-nav-btn:hover:not(:disabled) {
    opacity: 1;
    background: rgba(0, 255, 255, 0.16);
    box-shadow: 0 0 8px var(--dynamic-color, #0ff);
}
.tower-nav-btn:disabled {
    opacity: 0.18;
    cursor: default;
}

@media (max-width: 640px) {
    /* No drag on mobile: drop the arc cue + grab affordance, keep name + nav arrows. */
    .panel-drag-grip { cursor: default; }
    .panel-drag-grip::before,
    .panel-drag-label { display: none; }
    #towerStatus .tower-topbar { padding-left: 8px; }
}

#towerStatus .tower-header {
    margin-bottom: 2px;
}

#towerStatus .tower-level-info .level-label {
    white-space: normal;
    line-height: 1.35;
    font-size: 1em;
}

#towerStatus .tower-level-info {
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    padding: 4px 5px 3px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    margin-top: 2px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    border: 1px solid rgba(0, 255, 255, 0.18);
}

#towerStatus .level-label {
    color: var(--dynamic-color, #0ff);
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
    margin-bottom: 0;
    white-space: nowrap;
}

#towerStatus .level-number {
    font-size: 1em;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

/* Evo badge: HUD-style so evolution stage is clear at a glance */
#towerStatus .evo-badge {
    font-weight: 700;
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    background: rgba(0, 255, 200, 0.12);
    border: 1px solid rgba(0, 255, 200, 0.35);
    margin-left: 2px;
}

#towerStatus .level-breakdown {
    color: #ffff00;
    font-size: 10px;
    font-family: monospace;
    letter-spacing: 0.2px;
    text-align: left;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    width: 100%;
    max-width: var(--tower-action-pct);
    min-width: 9.5rem;
    justify-content: space-between;
}

#towerStatus .level-breakdown .stat-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 4px;
    flex: 1;
    min-width: 0;
}

#towerStatus .evo-bar-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.92;
    filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.35));
}

#towerStatus .level-breakdown .stat-label {
    color: #ffffff;
    font-weight: bold;
    font-size: 10px;
    text-align: center;
}

#towerStatus .level-breakdown .cooldown-bar {
    height: 4px;
    margin: 0;
    width: 100%;
}

/* Restored & Improved Layout */
.tower-main-layout {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    margin-top: 1px;
}

/* Tower status: each row = stat cluster (left) + upgrade button (right); extras row = detector + lash */
#towerStatus .tower-main-layout {
    gap: 2px;
}

#towerStatus .tower-upgrade-rows-wrap.tower-stat-col,
#towerStatus .tower-stat-col.tower-upgrade-rows-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#towerStatus .tower-upgrade-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 40%);
    column-gap: 8px;
    align-items: center;
    min-width: 0;
}

#towerStatus .tower-upgrade-row__action {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

#towerStatus .tower-stat-line {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
    min-width: 0;
    margin: 0;
    padding: 1px 0;
    border-bottom: none;
    min-height: 22px;
}

#towerStatus .tower-stat-line .label {
    flex: 0 0 auto;
    margin: 0;
}

#towerStatus .tower-stat-value-cluster {
    flex: 1 1 auto;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 6px;
    min-width: 0;
}

#towerStatus .tower-stat-hub-chip-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#towerStatus .tower-stat-hub-chip {
    display: inline-block;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #1a1204;
    padding: 3px 5px 2px;
    border-radius: 4px;
    border: 1px solid rgba(255, 210, 80, 0.75);
    background: linear-gradient(165deg, rgba(255, 224, 120, 0.95), rgba(255, 180, 40, 0.88));
    box-shadow:
        0 0 8px rgba(255, 190, 60, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    white-space: nowrap;
}

#towerStatus .tower-panel-extras {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 6px;
    align-items: stretch;
    margin-top: 3px;
    padding-top: 4px;
    border-top: 1px solid rgba(0, 255, 255, 0.12);
}

#towerStatus .tower-panel-extras .tracking-module {
    margin-top: 0;
}

#towerStatus .tower-panel-extras .lash-stack {
    align-self: center;
}

/* Stats Container (Left Column) */
.stats-container,
.actions-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


#towerStatus .level-breakdown .stat-value {
    color: #ffff00;
    font-weight: bold;
    text-shadow: 0 0 3px #ffff00;
    /* Reduced from 4px (25% smaller) */
    font-size: 9px;
    /* Reduced from default (conservative) */
}

#towerStatus fieldset {
    border: 1px solid rgba(0, 136, 136, 0.7);
    border-bottom: 2px solid rgba(0, 136, 136, 0.7);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 4px 0;
    position: relative;
    overflow: hidden;
}

#towerStatus fieldset::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
    background-size: cover;
    animation: scan 3s infinite;
}

#towerStatus legend {
    color: #0ff;
    font-weight: bold;
    padding: 0 3px;
    font-size: 13px;
    text-transform: uppercase;
}

/* Tower status value - uses standardized base styles above, with additional properties */

/* Shared h3 styles - HUD-style header (match tower modal cleanup) */
#coreStatusUI h3,
#breachStatusUI h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    font-weight: 700;
    position: relative;
    color: var(--dynamic-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 2px solid var(--dynamic-color);
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 8px;
    border-radius: 4px;
}

/* Stat column: allow wrap for long formatted values (e.g. siphon / hub badges) */
#towerStatus .tower-stat-col .status-line .label {
    flex-shrink: 0;
    padding-top: 0;
}

#towerStatus .tower-stat-value-cluster>.value {
    min-width: 0;
    text-align: right;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    line-height: 1.25;
    font-size: 11px !important;
    word-break: break-word;
    color: #fff;
    font-weight: bold;
    display: inline;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

#towerStatus .tower-upgrade-rows-wrap>.tower-upgrade-row {
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#towerStatus .tower-upgrade-rows-wrap>.tower-upgrade-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

#towerStatus .tower-stat-line .label {
    color: rgba(200, 230, 255, 0.95);
    font-weight: 600;
    font-size: 11px;
}

#towerStatus .tracking-module {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 30, 20, 0.4);
    border: 1px solid rgba(0, 255, 170, 0.15);
    border-radius: 4px;
    padding: 0 8px;
    min-height: 22px;
    margin-top: 0;
    box-sizing: border-box;
}

#towerStatus .tracking-module .tm-label {
    color: rgba(200, 230, 255, 0.6);
    font-family: var(--font-display, 'Share Tech Mono', monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#towerStatus .tracking-module .tm-val {
    font-family: var(--font-display, 'Share Tech Mono', monospace);
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    text-shadow: 0 0 3px currentColor;
}


/* Core aura buff (tower in Core tether zone): stat labels align with red range ring / buff readout */
#towerStatus .tower-stat-col--core-aura .status-line .label,
#towerStatus .tower-stat-col--core-aura .tower-stat-line .label {
    color: rgba(255, 170, 170, 0.95);
    text-shadow: 0 0 6px rgba(255, 60, 60, 0.35);
}

#towerStatus .tower-stat-col--core-aura .status-line .value,
#towerStatus .tower-stat-col--core-aura .tower-stat-value-cluster>.value {
    color: #ffcccc;
    text-shadow: 0 0 8px rgba(255, 80, 80, 0.45);
}

/* Upgrade button in each aligned row */
#towerStatus .tower-upgrade-row__action>.upgrade-btn,
#towerStatus .tower-upgrade-stack>.upgrade-btn {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 6px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
}

#towerStatus .upgrade-btn {
    width: 100%;
    margin: 0;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--dynamic-color);
    color: var(--dynamic-color);
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    box-shadow:
        0 0 4px rgba(0, 0, 0, 0.5) inset,
        0 0 1px var(--dynamic-color);
}

#towerStatus .upgrade-btn:hover:not(:disabled) {
    background: var(--dynamic-color);
    color: var(--background-color, #0a0f0d);
    box-shadow:
        0 0 6px var(--dynamic-color),
        0 0 3px var(--dynamic-color) inset;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    transform: scale(1.02);
}

#towerStatus .sell-btn {
    margin-top: 5px;
    --dynamic-color: var(--danger-color, #ff4444);
    width: 100%;
    padding: 5px 8px;
    font-size: 10px;
    border-color: #ff4444;
    color: #ff4444;
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.12), rgba(255, 68, 68, 0.05));
}

#towerStatus .sell-btn:hover:not(:disabled) {
    background: var(--danger-color, #ff4444);
    color: var(--text-color-light, #fff);
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.35);
}

.drone-upgrade-btn:disabled,
#towerStatus .upgrade-btn:disabled:not(.max-level) {
    background-color: #333;
    color: #f00;
    border-color: #333;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    border: 1px dashed #fff;
    font-size: 10px;
}


/* Core tabs border */
#coreStatusUI .status-tabs {
    border-top: 2px solid #00ff00;
    border-bottom: none;
    box-shadow: 0 -2px 8px rgba(0, 255, 0, 0.1);
}

/* Breach tabs border */
#breachStatusUI .status-tabs {
    border-top: 2px solid #ff8800;
    border-bottom: none;
    box-shadow: 0 -2px 8px rgba(255, 136, 0, 0.1);
}

/* Shared status tab button base styles — evolved from buttons toward panel tabs */
#coreStatusUI .status-tab-btn,
#breachStatusUI .status-tab-btn {
    background: linear-gradient(180deg,
            rgba(32, 42, 48, 0.96) 0%,
            rgba(16, 22, 28, 0.98) 55%,
            rgba(8, 12, 16, 0.99) 100%);
    color: var(--text-color-light);
    padding: 7px 10px;
    cursor: pointer;
    font-family: var(--main-font);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-bottom: none;
    white-space: nowrap;
    flex: 1;
    min-width: fit-content;
    border-radius: 0 0 5px 5px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Core tab button colors */
#coreStatusUI .status-tab-btn {
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-top: 2px solid rgba(0, 255, 0, 0.35);
    flex: 0 0 calc(50% - 2px);
    max-width: calc(50% - 2px);
    color: rgba(140, 255, 180, 0.75);
    text-shadow: 0 0 5px rgba(0, 255, 100, 0.35), 0 0 12px rgba(0, 255, 80, 0.1);
}

/* Breach: same 2×2 tab grid as Core; per-tab accent colors still come from [data-tab] rules */
#breachStatusUI .status-tab-btn {
    border: 1px solid rgba(0, 255, 200, 0.22);
    flex: 0 0 calc(50% - 2px);
    max-width: calc(50% - 2px);
}

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

#coreStatusUI .status-tab-btn:hover:not(.locked-tab) {
    background: linear-gradient(180deg,
            rgba(20, 50, 30, 0.97) 0%,
            rgba(10, 30, 16, 0.99) 100%);
    color: #aaffcc;
    border-color: rgba(0, 255, 100, 0.45);
    text-shadow: 0 0 6px rgba(0, 255, 100, 0.5), 0 0 14px rgba(0, 255, 80, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(140, 255, 180, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 0 10px rgba(0, 255, 100, 0.12);
    transform: translateY(1px);
}

#coreStatusUI .status-tab-btn.active {
    background: linear-gradient(180deg,
            rgba(0, 200, 60, 0.35) 0%,
            rgba(0, 120, 40, 0.25) 50%,
            rgba(0, 60, 20, 0.3) 100%);
    color: #00ff66;
    border-color: rgba(0, 255, 100, 0.6);
    border-top: 2px solid #00ff66;
    text-shadow: 0 0 8px rgba(0, 255, 100, 0.7), 0 0 18px rgba(0, 255, 80, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(180, 255, 210, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 14px rgba(0, 255, 100, 0.25),
        0 0 28px rgba(0, 255, 80, 0.08);
    transform: translateY(2px);
    position: relative;
}

/* Locked tab styling */
#coreStatusUI .status-tab-btn.locked-tab,
#breachStatusUI .status-tab-btn.locked-tab {
    cursor: not-allowed;
    opacity: 0.85 !important;
    /* Match locked-item opacity */
    filter: grayscale(0.3) brightness(0.8) !important;
    /* Match locked-item filter */
    border: 2px dashed rgba(255, 68, 68, 0.6) !important;
    /* Match locked-item border style */
    border-image: linear-gradient(45deg, rgba(255, 68, 68, 0.4), rgba(255, 68, 68, 0.8), rgba(255, 68, 68, 0.4)) 1;
    background: linear-gradient(135deg, rgba(8, 4, 6, 0.95) 0%, rgba(12, 6, 8, 0.9) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.2) 0%, transparent 70%) !important;
    /* Match locked-item background */
    color: rgba(255, 180, 180, 0.9) !important;
    /* Match locked-button color */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 0 6px rgba(255, 68, 68, 0.25),
        0 0 10px rgba(255, 68, 68, 0.15),
        inset 0 0 4px rgba(255, 68, 68, 0.1),
        inset 0 0 8px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 68, 68, 0.2) !important;
    /* Match locked-item box-shadow */
    position: relative;
    overflow: hidden;
    animation: lockedFieldsetPulse 3s ease-in-out infinite, lockedBorderPulse 2s ease-in-out infinite;
    /* Match locked-item animation */
    text-shadow: 0 0 4px rgba(255, 100, 100, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    /* Match locked-button text-shadow */
}

#coreStatusUI .status-tab-btn.locked-tab::before,
#breachStatusUI .status-tab-btn.locked-tab::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 12px,
            rgba(255, 68, 68, 0.15) 12px,
            rgba(255, 68, 68, 0.15) 14px),
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 68, 68, 0.2) 20%,
            rgba(255, 68, 68, 0.4) 40%,
            rgba(255, 68, 68, 0.5) 50%,
            rgba(255, 68, 68, 0.4) 60%,
            rgba(255, 68, 68, 0.2) 80%,
            transparent 100%);
    animation: lockedTabScanLine 6.6s ease-in-out infinite;
    pointer-events: none;
    filter: saturate(1.5) contrast(1.5) brightness(1.5);
    z-index: 1;
}

@keyframes lockedTabPulse {

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

    50% {
        opacity: 0.95;
        transform: translateZ(0) scale(1.01);
    }
}

@keyframes lockedTabScanLine {

    0%,
    100% {
        transform: translateX(-100%) scaleX(0.8);
        opacity: 0;
        filter: saturate(.6);
    }

    50% {
        transform: translateX(100%) scaleX(1.2);
        opacity: 1;
        filter: contrast(4.5);
    }
}

#coreStatusUI .status-tab-btn.locked-tab:hover,
#breachStatusUI .status-tab-btn.locked-tab:hover {
    background: linear-gradient(135deg, rgba(8, 4, 6, 0.95) 0%, rgba(12, 6, 8, 0.9) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.2) 0%, transparent 70%) !important;
    /* Match locked-item background */
    color: rgba(255, 180, 180, 0.9) !important;
    /* Match locked-button color */
    border-color: rgba(255, 68, 68, 0.6) !important;
    /* Match locked-item border */
    transform: none;
    box-shadow:
        0 0 6px rgba(255, 68, 68, 0.25),
        0 0 10px rgba(255, 68, 68, 0.15),
        inset 0 0 4px rgba(255, 68, 68, 0.1),
        inset 0 0 8px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 68, 68, 0.2) !important;
    /* Match locked-item box-shadow */
    cursor: not-allowed;
}

#coreStatusUI .status-tab-btn.locked-tab:active,
#breachStatusUI .status-tab-btn.locked-tab:active {
    transform: none;
    opacity: 0.8;
}

/* Breach tab button colors */
#breachStatusUI .status-tab-btn {
    border: 1px solid rgba(255, 136, 0, 0.3);
    border-top: 2px solid rgba(255, 136, 0, 0.35);
    text-shadow: 0 0 5px rgba(255, 136, 0, 0.35), 0 0 12px rgba(255, 100, 0, 0.1);
}

#breachStatusUI .status-tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 136, 0, 0.08), transparent);
    transition: left 0.5s ease;
}

#breachStatusUI .status-tab-btn:hover:not(.locked-tab) {
    background: linear-gradient(180deg,
            rgba(50, 32, 12, 0.97) 0%,
            rgba(28, 16, 6, 0.99) 100%);
    color: #ffbb66;
    border-color: rgba(255, 160, 40, 0.45);
    text-shadow: 0 0 6px rgba(255, 150, 40, 0.5), 0 0 14px rgba(255, 120, 0, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 140, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 0 10px rgba(255, 136, 0, 0.12);
    transform: translateY(1px);
}

#breachStatusUI .status-tab-btn.active {
    background: linear-gradient(180deg,
            rgba(200, 100, 0, 0.3) 0%,
            rgba(120, 60, 0, 0.22) 50%,
            rgba(60, 30, 0, 0.28) 100%);
    color: #ff9922;
    border-color: rgba(255, 153, 34, 0.6);
    border-top: 2px solid #ff8800;
    text-shadow: 0 0 8px rgba(255, 136, 0, 0.7), 0 0 18px rgba(255, 100, 0, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 140, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 14px rgba(255, 136, 0, 0.25),
        0 0 28px rgba(255, 100, 0, 0.08);
    transform: translateY(2px);
    /* Move down when active since tabs are at bottom */
    position: relative;
}

/* Arrow indicators removed - just text, no arrows */

/* ==============================================
   TAB COLOR STYLING - Match Panel Colors
   ============================================== */

/* BREACH TAB COLOR OVERRIDES (Overclock template applied) */

/* EMP-BLAST TAB STYLING */
#breachStatusUI .status-tab-btn[data-tab="emp-blast"] {
    border-color: rgba(0, 255, 200, 0.3) !important;
    color: rgba(140, 255, 230, 0.7) !important;
    text-shadow: 0 0 4px rgba(0, 255, 200, 0.3) !important;
}


#breachStatusUI .status-tab-btn[data-tab="emp-blast"]:hover:not(.locked-tab) {
    background: linear-gradient(180deg, rgba(12, 52, 42, 0.97), rgba(4, 28, 22, 0.99)) !important;
    color: #aaffee !important;
    border-color: rgba(0, 255, 200, 0.45) !important;
    text-shadow: 0 0 6px rgba(0, 255, 200, 0.5), 0 0 14px rgba(0, 255, 180, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(140, 255, 230, 0.1), 0 0 10px rgba(0, 255, 200, 0.12) !important;
}

#breachStatusUI .status-tab-btn[data-tab="emp-blast"].active {
    background: linear-gradient(180deg, rgba(0, 200, 160, 0.3), rgba(0, 120, 90, 0.22) 50%, rgba(0, 60, 45, 0.28)) !important;
    color: #00ffc8 !important;
    border-top: 2px solid #00ffc8 !important;
    border-color: rgba(0, 255, 200, 0.6) !important;
    text-shadow: 0 0 8px rgba(0, 255, 200, 0.7), 0 0 18px rgba(0, 255, 180, 0.3) !important;
    box-shadow: inset 0 1px 0 rgba(180, 255, 240, 0.15), 0 0 14px rgba(0, 255, 200, 0.25), 0 0 28px rgba(0, 255, 180, 0.08) !important;
}

#breachStatusUI .status-tab-btn[data-tab="emp-blast"].locked-tab {
    border: 2px dashed rgba(0, 255, 200, 0.6) !important;
    border-image: linear-gradient(45deg, rgba(0, 255, 200, 0.4), rgba(0, 255, 200, 0.8), rgba(0, 255, 200, 0.4)) 1 !important;
    color: rgba(0, 255, 200, 0.7) !important;
    box-shadow: 0 0 6px rgba(0, 255, 200, 0.25), 0 0 10px rgba(0, 255, 200, 0.15), inset 0 0 4px rgba(0, 255, 200, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 255, 200, 0.2) !important;
    text-shadow: 0 0 4px rgba(0, 255, 200, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* RAM-TRAP TAB STYLING */
#breachStatusUI .status-tab-btn[data-tab="ram-trap"] {
    border-color: rgba(255, 80, 200, 0.3) !important;
    color: rgba(255, 160, 225, 0.7) !important;
    text-shadow: 0 0 4px rgba(255, 80, 200, 0.3) !important;
}


#breachStatusUI .status-tab-btn[data-tab="ram-trap"]:hover:not(.locked-tab) {
    background: linear-gradient(180deg, rgba(52, 16, 42, 0.97), rgba(28, 6, 22, 0.99)) !important;
    color: #ffaadd !important;
    border-color: rgba(255, 80, 200, 0.45) !important;
    text-shadow: 0 0 6px rgba(255, 80, 200, 0.5), 0 0 14px rgba(255, 60, 180, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 160, 225, 0.1), 0 0 10px rgba(255, 80, 200, 0.12) !important;
}

#breachStatusUI .status-tab-btn[data-tab="ram-trap"].active {
    background: linear-gradient(180deg, rgba(200, 60, 160, 0.3), rgba(120, 30, 90, 0.22) 50%, rgba(60, 15, 45, 0.28)) !important;
    color: #ff50c8 !important;
    border-top: 2px solid #ff50c8 !important;
    border-color: rgba(255, 80, 200, 0.6) !important;
    text-shadow: 0 0 8px rgba(255, 80, 200, 0.7), 0 0 18px rgba(255, 60, 180, 0.3) !important;
    box-shadow: inset 0 1px 0 rgba(255, 180, 235, 0.15), 0 0 14px rgba(255, 80, 200, 0.25), 0 0 28px rgba(255, 60, 180, 0.08) !important;
}

#breachStatusUI .status-tab-btn[data-tab="ram-trap"].locked-tab {
    border: 2px dashed rgba(255, 80, 200, 0.6) !important;
    border-image: linear-gradient(45deg, rgba(255, 80, 200, 0.4), rgba(255, 80, 200, 0.8), rgba(255, 80, 200, 0.4)) 1 !important;
    color: rgba(255, 80, 200, 0.7) !important;
    box-shadow: 0 0 6px rgba(255, 80, 200, 0.25), 0 0 10px rgba(255, 80, 200, 0.15), inset 0 0 4px rgba(255, 80, 200, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 80, 200, 0.2) !important;
    text-shadow: 0 0 4px rgba(255, 80, 200, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* SAM-DEFENSE TAB STYLING */
#breachStatusUI .status-tab-btn[data-tab="sam-defense"] {
    border-color: rgba(255, 136, 0, 0.3) !important;
    color: rgba(255, 190, 120, 0.7) !important;
    text-shadow: 0 0 4px rgba(255, 136, 0, 0.3) !important;
}

#breachStatusUI .status-tab-btn[data-tab="sam-defense"]::before {
    background: linear-gradient(90deg, transparent, rgba(255, 136, 0, 0.06), transparent) !important;
}

#breachStatusUI .status-tab-btn[data-tab="sam-defense"]:hover:not(.locked-tab) {
    background: linear-gradient(180deg, rgba(52, 32, 12, 0.97), rgba(28, 16, 4, 0.99)) !important;
    color: #ffbb66 !important;
    border-color: rgba(255, 160, 40, 0.45) !important;
    text-shadow: 0 0 6px rgba(255, 136, 0, 0.5), 0 0 14px rgba(255, 100, 0, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 200, 140, 0.1), 0 0 10px rgba(255, 136, 0, 0.12) !important;
}

#breachStatusUI .status-tab-btn[data-tab="sam-defense"].active {
    background: linear-gradient(180deg, rgba(200, 100, 0, 0.3), rgba(120, 60, 0, 0.22) 50%, rgba(60, 30, 0, 0.28)) !important;
    color: #ff8800 !important;
    border-top: 2px solid #ff8800 !important;
    border-color: rgba(255, 136, 0, 0.6) !important;
    text-shadow: 0 0 8px rgba(255, 136, 0, 0.7), 0 0 18px rgba(255, 100, 0, 0.3) !important;
    box-shadow: inset 0 1px 0 rgba(255, 200, 140, 0.15), 0 0 14px rgba(255, 136, 0, 0.25), 0 0 28px rgba(255, 100, 0, 0.08) !important;
}

#breachStatusUI .status-tab-btn[data-tab="sam-defense"].locked-tab {
    border: 2px dashed rgba(255, 136, 0, 0.6) !important;
    border-image: linear-gradient(45deg, rgba(255, 136, 0, 0.4), rgba(255, 136, 0, 0.8), rgba(255, 136, 0, 0.4)) 1 !important;
    color: rgba(255, 136, 0, 0.7) !important;
    box-shadow: 0 0 6px rgba(255, 136, 0, 0.25), 0 0 10px rgba(255, 136, 0, 0.15), inset 0 0 4px rgba(255, 136, 0, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 136, 0, 0.2) !important;
    text-shadow: 0 0 4px rgba(255, 136, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* PATHFINDER TAB STYLING */
#breachStatusUI .status-tab-btn[data-tab="pathfinder"] {
    border-color: rgba(0, 255, 255, 0.3) !important;
    color: rgba(140, 255, 255, 0.7) !important;
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.3) !important;
}

#breachStatusUI .status-tab-btn[data-tab="pathfinder"]::before {
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.06), transparent) !important;
}

#breachStatusUI .status-tab-btn[data-tab="pathfinder"]:hover:not(.locked-tab) {
    background: linear-gradient(180deg, rgba(12, 42, 52, 0.97), rgba(4, 22, 28, 0.99)) !important;
    color: #aaffff !important;
    border-color: rgba(0, 255, 255, 0.45) !important;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.5), 0 0 14px rgba(0, 230, 255, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(140, 255, 255, 0.1), 0 0 10px rgba(0, 255, 255, 0.12) !important;
}

#breachStatusUI .status-tab-btn[data-tab="pathfinder"].active {
    background: linear-gradient(180deg, rgba(0, 180, 200, 0.3), rgba(0, 100, 120, 0.22) 50%, rgba(0, 50, 60, 0.28)) !important;
    color: #00ffff !important;
    border-top: 2px solid #00ffff !important;
    border-color: rgba(0, 255, 255, 0.6) !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.7), 0 0 18px rgba(0, 230, 255, 0.3) !important;
    box-shadow: inset 0 1px 0 rgba(180, 255, 255, 0.15), 0 0 14px rgba(0, 255, 255, 0.25), 0 0 28px rgba(0, 230, 255, 0.08) !important;
}

#breachStatusUI .status-tab-btn[data-tab="pathfinder"].locked-tab {
    border: 2px dashed rgba(0, 255, 255, 0.6) !important;
    border-image: linear-gradient(45deg, rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0.4)) 1 !important;
    color: rgba(0, 255, 255, 0.7) !important;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.25), 0 0 10px rgba(0, 255, 255, 0.15), inset 0 0 4px rgba(0, 255, 255, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 255, 255, 0.2) !important;
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Core/Breach: .status-tab-content, fieldset, legend, .status-line grid — css/core-breach-ui.css (loads after this file) */

/* ===== STANDARDIZED STATUS VALUE STYLES ===== */
/* Shared base styles for all status values across all panels */
/* Font properties are standardized, colors can differ per panel */
#coreStatusUI .status-line .value,
#breachStatusUI .status-line .value,
.drone-section .drone-stat-value,
.critter-section .status-line .value {
    font-size: calc(5px + 0.3vw) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 4px #fff !important;
}

/* Panel-specific colors (font properties inherited from base) */
#coreStatusUI .status-line .value,
#breachStatusUI .status-line .value {
    color: var(--text-color-light);
}

.drone-section .drone-stat-value,
.critter-section .status-line .value {
    color: var(--text-color-light) !important;
}

/* ===== LASH stack: under upgrade buttons; two rows with iconsCutOut art ===== */
#towerStatus .lash-stack {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-display, 'Share Tech Mono', monospace);
}

#towerStatus .lash-split {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    min-height: 24px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-align: left;
    transition: opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

#towerStatus .lash-split-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 160, 80, 0.35));
}

#towerStatus .lash-split-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1;
    justify-content: center;
}

#towerStatus .lash-split-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 8px;
    opacity: 0.95;
    line-height: 1.2;
}

#towerStatus .lash-split-value {
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
}

/* ---- LOCKED (per cell) — diagonal stripe cue like HUB HOLD V2 ---- */
#towerStatus .lash-split.lash-panel-locked {
    background:
        repeating-linear-gradient(-42deg,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.35) 2px,
            rgba(40, 22, 8, 0.45) 2px,
            rgba(40, 22, 8, 0.45) 4px),
        linear-gradient(135deg, rgba(0, 0, 0, 0.45), rgba(22, 12, 4, 0.55));
    border: 1px dashed rgba(255, 136, 0, 0.38);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.35);
    opacity: 0.62;
    cursor: default;
    animation: lashLockedPulse 3s ease-in-out infinite;
}

#towerStatus .lash-split.lash-panel-locked .lash-split-title {
    color: #886644;
}

#towerStatus .lash-split.lash-panel-locked .lash-split-value {
    color: #665544;
    font-size: 9px;
    letter-spacing: 0.08em;
}

#towerStatus .lash-split.lash-panel-locked .lash-split-icon-img {
    opacity: 0.55;
    filter: grayscale(0.35) brightness(0.85);
}

@keyframes lashLockedPulse {

    0%,
    100% {
        border-color: rgba(255, 136, 0, 0.28);
    }

    50% {
        border-color: rgba(255, 136, 0, 0.52);
    }
}

/* ---- ACTIVE (per cell) ---- */
#towerStatus .lash-split.lash-panel-active {
    background:
        linear-gradient(135deg, rgba(40, 20, 0, 0.55), rgba(28, 14, 0, 0.65)),
        radial-gradient(circle at 50% 30%, rgba(255, 170, 0, 0.12) 0%, transparent 65%);
    border: 1px solid color-mix(in srgb, var(--dynamic-color, #ff8800) 35%, rgba(255, 136, 0, 0.55));
    box-shadow:
        0 0 5px rgba(255, 136, 0, 0.2),
        inset 0 0 3px rgba(255, 170, 0, 0.06);
    opacity: 1;
}

#towerStatus .lash-split.lash-panel-active .lash-split-title {
    color: #ffaa66;
    text-shadow: 0 0 3px rgba(255, 136, 0, 0.35);
}

#towerStatus .lash-split.lash-panel-active .lash-split-value {
    color: #ffcc44;
    text-shadow: 0 0 5px rgba(255, 170, 0, 0.45);
}

#towerStatus .lash-split.lash-panel-active .lash-split-icon-img {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 170, 0, 0.45));
}

/* Core status-line colors */
#coreStatusUI .status-line {
    border-bottom: 1px solid rgba(0, 255, 0, 0.15);
}

/* Removed hover effect that caused text to shift */

#coreStatusUI .status-line .label {
    color: #00ff00;
    opacity: 0.9;
    font-weight: 500;
    text-shadow: 0 0 2px rgba(0, 255, 0, 0.3);
    font-size: 8px;
}

/* Core status value - uses standardized base styles above */
#coreStatusUI .status-line .value.drone-evolution {
    text-shadow: 0 0 10px #000;
}

/* NOTE: Core/Breach upgrade button base styles moved to core-breach-ui.css */

/* Button click feedback - glitchy cyberpunk vibe */
.button-clicked {
    animation: buttonClickGlitch 0.3s ease-out !important;
}

@keyframes buttonClickGlitch {
    0% {
        transform: scale(1);
        filter: brightness(1) hue-rotate(0deg);
    }

    15% {
        transform: scale(0.92) translateX(-1px);
        filter: brightness(1.3) hue-rotate(5deg);
        box-shadow: 0 0 8px currentColor, inset 0 0 4px currentColor;
    }

    30% {
        transform: scale(0.94) translateX(1px);
        filter: brightness(1.5) hue-rotate(-5deg);
        box-shadow: 0 0 12px currentColor, inset 0 0 6px currentColor;
    }

    50% {
        transform: scale(0.96) translateX(-0.5px);
        filter: brightness(1.4) hue-rotate(3deg);
        box-shadow: 0 0 10px currentColor, inset 0 0 5px currentColor;
    }

    70% {
        transform: scale(0.98) translateX(0.5px);
        filter: brightness(1.2) hue-rotate(-2deg);
        box-shadow: 0 0 6px currentColor, inset 0 0 3px currentColor;
    }

    100% {
        transform: scale(1);
        filter: brightness(1) hue-rotate(0deg);
        box-shadow: none;
    }
}

/* Evolution flash animation - all buttons flash during evolution */
.evolution-flash {
    animation: evolutionButtonFlash 1.6s ease-in-out;
    pointer-events: none !important;
}

@keyframes evolutionButtonFlash {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--evolution-color, #00ff00);
        filter: brightness(1);
    }

    25% {
        box-shadow: 0 0 15px 3px var(--evolution-color, #00ff00),
            0 0 30px 6px var(--evolution-color, #00ff00);
        filter: brightness(1.5);
    }

    50% {
        box-shadow: 0 0 20px 4px var(--evolution-color, #00ff00),
            0 0 40px 8px var(--evolution-color, #00ff00);
        filter: brightness(1.8);
    }

    75% {
        box-shadow: 0 0 15px 3px var(--evolution-color, #00ff00),
            0 0 30px 6px var(--evolution-color, #00ff00);
        filter: brightness(1.5);
    }
}

/* Evolution locked state - buttons are disabled and visually distinct */
.evolution-locked {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.6) brightness(0.7) !important;
    transform: scale(0.98) !important;
    transition: all 0.2s ease-in-out !important;
}

/* MAX level button styles - bright gold/success (lower glow for readability) */
#coreStatusUI .upgrade-btn.max-level,
#breachStatusUI .upgrade-btn.max-level,
#towerStatus .upgrade-btn.max-level {
    background: linear-gradient(135deg, #004400, #006600) !important;
    color: #00ff00 !important;
    border-color: #00ff00 !important;
    cursor: pointer !important;
    box-shadow: 0 0 6px rgba(255, 221, 0, 0.4), inset 0 0 4px rgba(255, 221, 0, 0.15) !important;
    border: 2px solid #ffcc00 !important;
    text-shadow: 0 0 4px #ffdd00 !important;
    font-weight: bold !important;
    opacity: 1 !important;
    position: relative !important;
    pointer-events: auto !important;
    /* Allow clicks for sound feedback */
}

/* MAX level button — checkmark (tower EVO PENDING: .evolution-pending omits it) */
#coreStatusUI .upgrade-btn.max-level::after,
#breachStatusUI .upgrade-btn.max-level::after,
#towerStatus .upgrade-btn.max-level::after {
    content: "\2713" !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: #ffdd00 !important;
    text-shadow: 0 0 6px #ffdd00 !important;
    font-weight: bold !important;
}

#towerStatus .upgrade-btn.max-level.evolution-pending::after {
    content: none !important;
}

/* Waiting on evolve — tiny cyan pulse, not the gold MAX check. */
#towerStatus .upgrade-btn.max-level.evolution-pending {
    border-color: #00ddff !important;
    color: #9efcff !important;
    text-shadow: 0 0 6px rgba(0, 221, 255, 0.7) !important;
    animation: evoPendingPulse 2.2s ease-in-out infinite;
}

@keyframes evoPendingPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.22) drop-shadow(0 0 6px rgba(0, 221, 255, 0.55)); }
}

@media (prefers-reduced-motion: reduce) {
    #towerStatus .upgrade-btn.max-level.evolution-pending {
        animation: none;
    }
}

/* MAX level button hover - keep it looking maxed but allow clicks for sound */
#coreStatusUI .upgrade-btn.max-level:hover,
#breachStatusUI .upgrade-btn.max-level:hover,
#towerStatus .upgrade-btn.max-level:hover {
    background: linear-gradient(135deg, #004400, #006600) !important;
    color: #00ff00 !important;
    border-color: #00ff00 !important;
    box-shadow: 0 0 6px rgba(255, 221, 0, 0.4), inset 0 0 4px rgba(255, 221, 0, 0.15) !important;
    transform: none !important;
    cursor: pointer !important;
    /* Allow clicks for sound feedback */
}

/* Can't afford button styles - red/disabled theme (clearly different from max-level) */
#coreStatusUI .upgrade-btn.cant-afford,
#breachStatusUI .upgrade-btn.cant-afford,
#towerStatus .upgrade-btn.cant-afford {
    background: linear-gradient(135deg, #331111, #442222) !important;
    color: #ff6666 !important;
    border-color: #aa4444 !important;
    cursor: pointer !important;
    /* Allow clicks for sound feedback */
    box-shadow: 0 0 4px rgba(255, 68, 68, 0.3) !important;
    border: 1px dashed #aa4444 !important;
    text-shadow: 0 0 4px #ff6666 !important;
    opacity: 0.8 !important;
    pointer-events: auto !important;
    /* Allow clicks for sound feedback */
}

/* Can't afford button hover - show it's clickable for sound feedback */
#coreStatusUI .upgrade-btn.cant-afford:hover,
#breachStatusUI .upgrade-btn.cant-afford:hover,
#towerStatus .upgrade-btn.cant-afford:hover {
    background: linear-gradient(135deg, #441111, #552222) !important;
    border-color: #cc5555 !important;
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.5) !important;
}

/* Shared disabled button styles (fallback) - but NOT for max-level */
/* Enhanced for buttons showing cooldown - ensure text is readable and button is clearly disabled */
#coreStatusUI .upgrade-btn:disabled:not(.max-level),
#breachStatusUI .upgrade-btn:disabled:not(.max-level) {
    background: linear-gradient(135deg, #333, #444);
    color: #ff6666 !important;
    border-color: #666;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    border: 1px dashed #666;
    text-shadow: 0 0 4px rgba(255, 102, 102, 0.8), 0 0 8px rgba(255, 68, 68, 0.6) !important;
    font-size: 8px;
    font-weight: 300;
    opacity: 0.7;
    pointer-events: none;
}

/* Locked item buttons - matches unlocked button style but dimmed + non-interactive */
.locked-item .upgrade-btn:disabled,
.locked-item button:disabled {
    cursor: not-allowed;
    pointer-events: none !important;
    opacity: 0.55 !important;
    font-weight: 300 !important;
    filter: grayscale(0.3) brightness(0.8);
    animation: none !important;
}

/* Core Section-Specific Enhanced Styling */
.overclock-section {
    border-color: rgba(255, 165, 0, 0.6) !important;
    border-bottom: 4px solid rgba(255, 165, 0, 0.6) !important;
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.05), rgba(255, 165, 0, 0.1)) !important;
}

.overclock-section-header {
    color: #ffa500 !important;
    text-shadow: 0 0 12px rgba(255, 165, 0, 0.8) !important;
}



.overclock-section .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffa500, #ff8c00) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px #ffa500, 0 0 10px #ffa500 inset !important;
    text-shadow: none !important;
}

.emp-section {
    border-color: rgba(238, 238, 238, 0.6) !important;
    border-bottom: 4px solid rgba(238, 238, 238, 0.6) !important;
    background: linear-gradient(135deg, rgba(238, 238, 238, 0.05), rgba(238, 238, 238, 0.1)) !important;
}

.emp-section-header {
    color: #eeeeee !important;
    text-shadow: 0 0 12px rgba(238, 238, 238, 0.8) !important;
}

.emp-section .status-line .label {
    color: #eeeeee !important;
    opacity: 0.9;
    text-shadow: 0 0 8px rgba(238, 238, 238, 0.6) !important;
}

.emp-section .upgrade-btn {
    border-color: rgba(238, 238, 238, 0.6) !important;
    color: #eeeeee !important;
}

.emp-section .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #eeeeee, #d0d0d0) !important;
    color: #000 !important;
    box-shadow: 0 0 20px #eeeeee, 0 0 10px #eeeeee inset !important;
    text-shadow: none !important;
}

.ram-trap-section {
    border-color: rgba(255, 80, 200, 0.55) !important;
    border-bottom: 4px solid rgba(255, 80, 200, 0.45) !important;
    background: linear-gradient(135deg, rgba(255, 80, 200, 0.06), rgba(255, 80, 200, 0.12)) !important;
}

.ram-trap-section-header {
    color: #ff88dd !important;
    text-shadow: 0 0 12px rgba(255, 80, 200, 0.75) !important;
}

.ram-trap-section .status-line .label {
    color: #ffaaee !important;
    opacity: 0.92;
    text-shadow: 0 0 8px rgba(255, 80, 200, 0.5) !important;
}

.ram-trap-section .upgrade-btn {
    border-color: rgba(255, 80, 200, 0.55) !important;
    color: #ffccff !important;
}

.ram-trap-section .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff66cc, #ff3399) !important;
    color: #fff !important;
    box-shadow: 0 0 20px #ff66cc, 0 0 10px #ff66cc inset !important;
    text-shadow: none !important;
}

/* SAM Defense Section Styling - Orange/Fire theme */
.breach-sam-section {
    border-color: rgba(255, 136, 0, 0.55) !important;
    border-bottom: 4px solid rgba(255, 136, 0, 0.45) !important;
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.06), rgba(255, 136, 0, 0.12)) !important;
}

.breach-sam-legend,
.breach-sam-section legend {
    color: #ffaa00 !important;
    text-shadow: 0 0 12px rgba(255, 136, 0, 0.75) !important;
}

.breach-sam-section .status-line .label {
    color: #ffbb33 !important;
    opacity: 0.92;
    text-shadow: 0 0 8px rgba(255, 136, 0, 0.5) !important;
}

.breach-sam-section .upgrade-btn {
    border-color: rgba(255, 136, 0, 0.55) !important;
    color: #ffdd88 !important;
}

.breach-sam-section .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffaa00, #ff6600) !important;
    color: #fff !important;
    box-shadow: 0 0 20px #ffaa00, 0 0 10px #ffaa00 inset !important;
    text-shadow: none !important;
}

/* Pathfinder Section Styling - Neon Cyan theme */
.breach-pathfinder-section {
    border-color: rgba(0, 255, 255, 0.55) !important;
    border-bottom: 4px solid rgba(0, 255, 255, 0.45) !important;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.06), rgba(0, 255, 255, 0.12)) !important;
}

.breach-pathfinder-legend,
.breach-pathfinder-section legend {
    color: #00ffff !important;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.75) !important;
}

.breach-pathfinder-section .status-line .label {
    color: #88ffff !important;
    opacity: 0.92;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
}

.breach-pathfinder-section .upgrade-btn {
    border-color: rgba(0, 255, 255, 0.55) !important;
    color: #bbffff !important;
}

.breach-pathfinder-section .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #00ffff, #00cccc) !important;
    color: #000 !important;
    box-shadow: 0 0 20px #00ffff, 0 0 10px #00ffff inset !important;
    text-shadow: none !important;
}

.boss-critter-section {
    border-color: rgba(255, 0, 0, 0.6) !important;
    border-bottom: 4px solid rgba(255, 0, 0, 0.6) !important;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.1)) !important;
}

.boss-critter-section-header {
    color: #ff0000 !important;
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.8) !important;
}



.boss-critter-section .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff0000, #cc0000) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px #ff0000, 0 0 10px #ff0000 inset !important;
    text-shadow: none !important;
}

@keyframes resourceGlow {
    0% {
        box-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 170, 0, 0.8);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
        transform: scale(1);
    }
}

.stat-number.wave-number,
.stat-number.units-number {
    color: #fff;
    font-size: 1.1em;
    text-shadow: 0 0 10px #fff;
}

/* CORE STATUS wave block: two lines + progress bar divider */
#waveStatusSlot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 0;
    color: var(--text-color-light);
    font-weight: bold;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.38;
    /* Path # chip + path strip pending cells: mint, distinct from wave # (cyan --wave-badge-color) */
    --path-badge-mint: #b8ffc8;
    --path-badge-mint-border: rgba(184, 255, 200, 0.48);
    --path-badge-mint-glow: rgba(95, 210, 150, 0.42);
}

.wave-status-content.wave-active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
}

.wave-status-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    line-height: 1.25;
}

/* Micro-labels: de-emphasize copy; badges + numbers carry weight */
#waveStatusSlot .wave-info-line .wave-stat-label {
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(185, 240, 255, 0.52);
}

#waveStatusSlot .wave-info-line .wave-stat-item:last-child .wave-stat-label {
    color: rgba(255, 200, 140, 0.58);
}

#waveStatusSlot .wave-mob-line .spawned-label,
#waveStatusSlot .wave-mob-line .eliminated-label {
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.95;
}

#waveStatusSlot .wave-stat-numbers {
    font-size: .9em;
    letter-spacing: 0.03em;
}

/* Wave/Highest badges: wave # = deploy cyan (--wave-badge-color); highest = gold; Path # uses mint (--path-badge-mint) */
#waveStatusSlot .wave-number-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .9em;
    transform: skewX(-8deg);
    animation: waveNumberBadgePulse 3.8s ease-in-out infinite;
}

#waveStatusSlot .wave-number-badge:not(.wave-number-badge-highest) {
    color: var(--wave-badge-color, #00ddff);
    text-shadow: 0 0 8px var(--wave-badge-color, #00ddff);
    border: 1px solid color-mix(in srgb, var(--wave-badge-color, #00ddff) 50%, transparent);
    background: color-mix(in srgb, var(--wave-badge-color, #00ddff) 12%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--wave-badge-color, #00ddff) 40%, transparent);
}

#waveStatusSlot .wave-number-badge-highest {
    color: #ffaa00;
    text-shadow: 0 0 8px #ffaa00;
    border: 1px solid rgba(255, 170, 0, 0.5);
    background: rgba(255, 170, 0, 0.12);
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}

@keyframes waveNumberBadgePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.96;
    }
}

#waveStatusSlot .wave-stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Space between adjacent stat pairs (Wave / Highest, Spawned / Eliminated) */
#waveStatusSlot .wave-info-line>.wave-stat-item+.wave-stat-item,
#waveStatusSlot .wave-info-line .wave-ready-message>.wave-stat-item+.wave-stat-item,
#waveStatusSlot .wave-mob-line>.wave-stat-item+.wave-stat-item {
    margin-left: 0.7em;
}

#waveStatusSlot .spawned-label {
    color: var(--secondary-color);
}

#waveStatusSlot .eliminated-label {
    color: #ff6688;
}

#waveStatusSlot .eliminated-numbers {
    color: #ff8899;
}

#waveStatusSlot .wave-info-line .wave-ready-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 0;
    color: var(--text-color-light);
}

/* Mob line: fade out/in when resetting for next wave */
#waveStatusSlot .wave-mob-line {
    transition: opacity 0.16s ease-out;
}

#waveStatusSlot .wave-mob-icon {
    margin-left: 8px;
    /* Constant system green — readable on every path accent */
    color: #00ff88;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.55));
    opacity: 0.95;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 136, 0.45);
    background: linear-gradient(135deg, rgba(0, 90, 55, 0.35), rgba(0, 0, 0, 0.08));
    transform: skewX(-10deg);
    position: relative;
    overflow: hidden;
    animation: waveMobIconPulse 2.2s ease-in-out infinite;
}

#waveStatusSlot .wave-mob-icon .icon-svg {
    width: 1.32em;
    height: 1.06em;
    transform: skewX(10deg);
}

#waveStatusSlot .wave-mob-icon .ecg-scroll {
    animation: waveMobEcgMove 1.05s linear infinite;
    transform-origin: center;
    will-change: transform;
}

@keyframes waveMobIconPulse {

    0%,
    100% {
        box-shadow: 0 0 6px rgba(0, 255, 136, 0.22), inset 0 0 4px rgba(0, 255, 160, 0.12);
        filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.5));
    }

    50% {
        box-shadow: 0 0 10px rgba(0, 255, 160, 0.4), inset 0 0 5px rgba(120, 255, 200, 0.18);
        filter: drop-shadow(0 0 6px rgba(0, 255, 180, 0.72));
    }
}

@keyframes waveMobEcgMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-14px);
    }
}

#waveStatusSlot .wave-mob-line.wave-mob-fade-out {
    opacity: 0;
}

#waveStatusSlot .wave-mob-line.wave-mob-fade-in {
    animation: waveMobFadeIn 0.22s ease-out forwards;
}

@keyframes waveMobFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#waveStatusSlot .wave-progress-divider {
    width: 100%;
    margin: 2px 0 3px;
    align-self: stretch;
    opacity: 0.97;
}

/* Wave slot kill progress: constant green “scan” bar (not path-accent) */
#waveStatusSlot #progressFill {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.65), rgba(0, 230, 120, 0.95));
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.45);
}

#waveStatusSlot .wave-log-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-top: 0;
}

/* Path label + badge + segment “icons” on one row (compact) */
#waveStatusSlot .wave-log-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    width: 100%;
    min-height: 26px;
}

#waveStatusSlot .wave-log-label {
    /* Mob path green (matches on-canvas trail / tutorial path), not wave-deploy cyan */
    color: #00ff88;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.45);
    display: inline-flex;
    align-items: center;
}

/* Path # chip: soft mint — reads “route”, not wave deploy cyan */
#waveStatusSlot .wave-log-path-badge {
    color: var(--path-badge-mint, #b8ffc8);
    text-shadow:
        0 0 8px color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 85%, transparent),
        0 0 14px var(--path-badge-mint-glow, rgba(95, 210, 150, 0.35));
    border: 1px solid var(--path-badge-mint-border, rgba(184, 255, 200, 0.48));
    background: color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 18%, rgba(8, 14, 12, 0.55));
    box-shadow:
        0 0 10px var(--path-badge-mint-glow, rgba(95, 210, 150, 0.38)),
        inset 0 0 12px color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 8%, transparent);
    padding: 2px 7px;
    filter: saturate(1.08);
}

#waveStatusSlot button.wave-log-path-badge {
    appearance: none;
    min-width: 30px;
    min-height: 28px;
    margin: -2px 0;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#waveStatusSlot button.wave-log-path-badge:hover {
    color: #eafff0;
    border-color: rgba(218, 255, 226, 0.82);
    transform: translateY(-1px);
}

#waveStatusSlot button.wave-log-path-badge:focus-visible {
    outline: 2px solid #eafff0;
    outline-offset: 2px;
}

#waveStatusSlot button.wave-log-path-badge:active {
    transform: translateY(0) scale(0.96);
}

#waveStatusSlot button.wave-log-path-badge.path-trace-active {
    color: #f2fff6;
    border-color: rgba(218, 255, 226, 0.96);
    background: color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 34%, rgba(8, 14, 12, 0.62));
    box-shadow:
        0 0 7px rgba(234, 255, 240, 0.74),
        0 0 18px var(--path-badge-mint-glow, rgba(95, 210, 150, 0.48)),
        inset 0 0 14px color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #waveStatusSlot button.wave-log-path-badge {
        transition-duration: 0.01ms;
    }
}

#waveStatusSlot .wave-log-status {
    color: rgba(0, 255, 170, 0.9);
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(0, 255, 170, 0.38);
    white-space: nowrap;
}

/* Cleared / ready line: suffix after badge matches calm HUD body copy */
#waveStatusSlot .wave-morph-trailing {
    color: rgba(0, 255, 170, 0.92);
    text-shadow: 0 0 7px rgba(0, 255, 170, 0.38);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 0.12em;
}

/* Cleared-line wave # — color of the wave that just finished (boss red on 10, 20, …) */
#waveStatusSlot .wave-number-badge.wave-cleared-wave-badge {
    color: var(--cleared-wave-accent, var(--wave-badge-color, #00ddff));
    text-shadow: 0 0 8px var(--cleared-wave-accent, var(--wave-badge-color, #00ddff));
    border: 1px solid color-mix(in srgb, var(--cleared-wave-accent, var(--wave-badge-color, #00ddff)) 50%, transparent);
    background: color-mix(in srgb, var(--cleared-wave-accent, var(--wave-badge-color, #00ddff)) 12%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--cleared-wave-accent, var(--wave-badge-color, #00ddff)) 40%, transparent);
}

#waveStatusSlot .wave-log-grid {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    margin-left: 2px;
    /* Reads as icon strip next to Path badge, not a second row */
}

#waveStatusSlot .wave-log-cell {
    width: 15px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 34%, rgba(90, 95, 105, 0.58) 66%);
    background: rgba(12, 14, 18, 0.82);
    position: relative;
    overflow: hidden;
    transform: skewX(-10deg);
}

#waveStatusSlot .wave-log-cell.pending {
    opacity: 0.62;
}

@keyframes waveLogPendingPulse {

    0%,
    100% {
        opacity: 0.55;
        border-color: color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 30%, rgba(100, 110, 108, 0.42) 70%);
        box-shadow: 0 0 4px color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 18%, transparent);
        filter: brightness(1);
    }

    50% {
        opacity: 0.9;
        border-color: color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 52%, rgba(255, 200, 120, 0.22) 48%);
        box-shadow: 0 0 8px color-mix(in srgb, var(--path-badge-mint, #b8ffc8) 32%, rgba(255, 190, 100, 0.1) 68%);
        filter: brightness(1.06);
    }
}

#waveStatusSlot .wave-log-cell.perfect {
    border-color: rgba(255, 190, 60, 0.9);
    background: rgba(255, 165, 0, 0.2);
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.45);
}

#waveStatusSlot .wave-log-cell.non-perfect {
    border-color: rgba(255, 80, 80, 0.85);
    background: rgba(255, 50, 50, 0.18);
    box-shadow: 0 0 8px rgba(255, 60, 60, 0.4);
}

#waveStatusSlot .wave-log-cell.perfect::before,
#waveStatusSlot .wave-log-cell.non-perfect::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 1px;
    background-size: 3px 100%;
}

#waveStatusSlot .wave-log-cell.perfect::before {
    background-image: repeating-linear-gradient(115deg,
            rgba(255, 229, 145, 0.95) 0 1px,
            rgba(255, 180, 60, 0.1) 1px 3px);
}

#waveStatusSlot .wave-log-cell.non-perfect::before {
    background-image: repeating-linear-gradient(115deg,
            rgba(255, 140, 140, 0.95) 0 1px,
            rgba(255, 60, 60, 0.12) 1px 3px);
}

@keyframes waveLogPulsePerfect {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(255, 165, 0, 0.45);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 14px rgba(255, 190, 60, 0.8);
        filter: brightness(1.18);
    }
}

@keyframes waveLogPulseDamaged {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(255, 60, 60, 0.4);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 14px rgba(255, 90, 90, 0.75);
        filter: brightness(1.16);
    }
}

#waveStatusSlot .wave-log-stack.in-progress .wave-log-cell.pulse-target.perfect {
    animation: waveLogPulsePerfect 0.72s ease-in-out infinite;
}

#waveStatusSlot .wave-log-stack.in-progress .wave-log-cell.pulse-target.non-perfect {
    animation: waveLogPulseDamaged 0.72s ease-in-out infinite;
}

#waveStatusSlot .wave-log-stack.in-progress .wave-log-cell.pulse-target.pending {
    animation: waveLogPendingPulse 1.1s ease-in-out infinite;
}

@keyframes pathLogShiftFlash {
    0% {
        transform: translateX(-4px);
        opacity: 0.7;
    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }

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

#waveStatusSlot .wave-log-stack.path-log-shift-flash .wave-log-grid {
    animation: pathLogShiftFlash 0.35s ease-out 2;
}

#drone-evolution-name {
    text-shadow: 0 0 10px #000 !important;
}

.fieldset-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: start;
    margin: 0 0 1% 0;
}


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

.stats-row .status-line {
    margin: 0;
}

.stats-row .status-line:empty {
    display: none;
}

.actions-container {
    display: flex;
    flex-direction: column;
}

.actions-container.compact-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 6px;
    align-items: stretch;
}

.actions-container.compact-buttons .upgrade-btn {
    width: auto;
}

/* Enhanced mobile responsiveness for upgrade buttons */
.upgrade-btn {
    word-break: keep-all;
    white-space: normal;
    line-height: 1.2;
    hyphens: none;
    font-weight: 300;
}

/* Cooldown bars match settings/music progress bar style */
.cooldown-bar {
    width: 100%;
    height: 8px;
    min-height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.4);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin: 4px 0 0;
}

#coreStatusUI .fieldset-layout > .cooldown-bar,
#breachStatusUI .fieldset-layout > .cooldown-bar {
    flex-shrink: 0;
}

.cooldown-fill {
    height: 100%;
    /* Start → end: blue-cyan (start) to green (end) */
    background: linear-gradient(90deg, rgba(0, 200, 255, 0.9), rgba(0, 255, 136, 0.95));
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.4);
    width: 0%;
    transition: width 0.1s linear;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
    }
}

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

    100% {
        left: 100%;
    }
}

/* Breach status-line colors */
#breachStatusUI .status-line {
    border-bottom: 1px solid rgba(255, 136, 0, 0.15);
}

/* Removed hover effect that caused text to shift */

#breachStatusUI .status-line .label {
    color: #ff8800;
    opacity: 0.9;
    font-weight: 500;
    text-shadow: 0 0 2px rgba(255, 136, 0, 0.3);
    font-size: 8px;
}

/* Breach status value - uses standardized base styles above */

/* Breach upgrade button colors */
#breachStatusUI .upgrade-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(20, 10, 0, 0.5));
    border: 1px solid #ff8800;
    color: #ff8800;
}

#breachStatusUI .upgrade-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 136, 0, 0.3), transparent);
    transition: left 0.5s ease;
}

#breachStatusUI .upgrade-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff8800, #ffaa00);
    color: #000;
    box-shadow: 0 0 4px #ff8800, 0 0 2px #ff8800 inset;
    text-shadow: none;
}

.drone-section-header {
    color: #00ffff !important;
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.5) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 4px 8px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

/* Mobile Responsiveness for Breach Status */

/* ==============================================
   CONFIRMATION & TOWER INFO MODALS
   ============================================== */

/* Tower info styling within confirmation modal */
.tower-info-in-confirmation {
    margin: 0 0 15px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid color-mix(in srgb, var(--tower-color, #0f0) 70%, #333);
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--tower-color, #0f0) 30%, transparent);
}

.tower-info-in-confirmation h4 {
    color: var(--tower-color, #0f0);
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px color-mix(in srgb, var(--tower-color, #0f0) 60%, transparent),
        0 1px 2px rgba(0, 0, 0, 0.6);
}

.tower-info-in-confirmation div {
    color: #aaa;
    font-style: italic;
    line-height: 1.4;
}

/* Highlight styles for confirmation modal */
.highlight-name {
    color: var(--tower-color, #0f0);
    font-weight: bold;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background: color-mix(in srgb, var(--tower-color, #0f0) 10%, transparent);
    padding: 5px 3px 4px;
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--tower-color, #0f0) 60%, #333);
}

.highlight-cost {
    color: #ff8800;
    text-shadow: none;
}

/* Close button for Core and Breach status panels - uses standardized style from modal.css */
/* No additional overrides needed - inherits from .modal-close-btn base style */

/* Match global .modal-close-btn footprint (was oversized pill) */
#towerStatus .modal-close-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 13px;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==============================================
   REBOOT/CONFIRMATION MODAL SPECIFIC STYLES
   ============================================== */

#rebootModalContent,
#confirmationContent {
    background-color: rgba(0, 0, 0, 0.82);
    background-image: var(--modal-circuit-vein-layers), linear-gradient(135deg, rgba(5, 16, 14, 0.92), rgba(3, 10, 12, 0.88));
    border: 4px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 255, 0, 0.5), 0 0 15px rgba(0, 255, 0, 0.3) inset;
}

/* Tower placement: border and glow use tower color for clearer identity */
#confirmationContent.tower-confirmation {
    border: 3px solid var(--tower-color, #0f0);
    box-shadow: 0 0 20px var(--tower-color), 0 0 8px var(--tower-color) inset;
}

/* Tower confirmation: Cancel button must stay red on hover (never green) */
#confirmationContent.tower-confirmation #cancelActionBtn,
#confirmationContent.tower-confirmation #cancelActionBtn:hover {
    color: #ff4444 !important;
    border-color: #ff4444 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

#confirmationContent.tower-confirmation #cancelActionBtn:hover {
    color: #ff6666 !important;
    border-color: #ff6666 !important;
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.85), 0 0 10px rgba(255, 100, 100, 0.35) inset !important;
}

/* Tower color wash — ::before so ::after stays free for corner brackets */
#confirmationContent:not(.save-reset-content):not(.reboot-content)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            var(--tower-color, transparent),
            transparent);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

#rebootModalContent,
#confirmationContent {
    min-width: 66vw;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.66);
    background-image: var(--modal-circuit-vein-layers), linear-gradient(135deg, rgba(5, 16, 14, 0.9), rgba(3, 10, 12, 0.86));
    /* Blur only on .modal-overlay — inner backdrop-filter stacks and flickers on mobile WebKit */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 4px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 255, 0, 0.5), 0 0 15px rgba(0, 255, 0, 0.3) inset;
    padding: 3vw 5vw;
}

/* Tower tint: #confirmationContent gradient ::after (above); backdrop blur is only on .modal-overlay */

#rebootModalContent h3 {
    margin-bottom: 20px;
    color: var(--warning-color);
}

#confirmationContent h3 {
    font-size: calc(1.1vw + 1em + .6vw);
    margin-bottom: 20px;
    color: var(--secondary-color);
}

/* Enhanced styling for Save Reset confirmation content - Red theme */
#confirmationContent.save-reset-content {
    background-color: rgba(0, 0, 0, 0.66);
    background-image: var(--modal-circuit-vein-layers), linear-gradient(135deg, rgba(12, 6, 6, 0.92), rgba(8, 4, 4, 0.88));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 4px solid #ff4500;
    border-radius: 8px;
    box-shadow:
        0 0 40px rgba(255, 69, 0, 0.4),
        0 0 20px rgba(255, 0, 0, 0.2),
        inset 0 0 15px rgba(255, 69, 0, 0.1);
}

/* Enhanced styling for Reboot confirmation content - Orange theme */
#rebootModalContent.reboot-content {
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 4px solid #ffa500;
    border-radius: 8px;
    box-shadow:
        0 0 40px rgba(255, 165, 0, 0.4),
        0 0 20px rgba(255, 140, 0, 0.2),
        inset 0 0 15px rgba(255, 165, 0, 0.1);
}

/* Mobile-optimized version for Save Reset content */

/* Enhanced header styling for Save Reset */
#confirmationContent.save-reset-content h2 {
    color: #ff4500 !important;
    text-shadow:
        0 0 10px rgba(255, 69, 0, 0.8),
        0 0 20px rgba(255, 69, 0, 0.6),
        0 0 30px rgba(255, 69, 0, 0.4);
}

/* Enhanced header styling for Reboot */
#rebootModalContent.reboot-content h2 {
    color: #ffa500 !important;
    text-shadow:
        0 0 10px rgba(255, 165, 0, 0.8),
        0 0 20px rgba(255, 165, 0, 0.6),
        0 0 30px rgba(255, 165, 0, 0.4);
}

/* Mobile-optimized header styling */

#confirmationContent.save-reset-content h2 span {
    color: #ff0000 !important;
    text-shadow:
        0 0 15px rgba(255, 0, 0, 0.9),
        0 0 25px rgba(255, 0, 0, 0.7),
        0 0 35px rgba(255, 0, 0, 0.5);
}

/* Mobile-optimized span styling */

/* Enhanced pause indicator for Save Reset */
#confirmationContent.save-reset-content .pause-indicator {
    background: rgba(255, 0, 0, 0.2) !important;
    border-color: #ff4500 !important;
    color: #ffcccc !important;
    text-shadow: 0 0 8px rgba(255, 200, 200, 0.6) !important;
}

/* Mobile-optimized pause indicator */

@keyframes saveResetPauseIndicatorPulse {
    0% {
        background: rgba(255, 0, 0, 0.2);
        box-shadow: 0 0 10px rgba(255, 69, 0, 0.3);
    }

    100% {
        background: rgba(255, 0, 0, 0.3);
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
    }
}

#rebootModalContent p,
#confirmationContent p {
    color: #ccc;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
    text-align: center;
    text-shadow: none;
}

/* Enhanced message styling for Save Reset */
#confirmationContent.save-reset-content p {
    color: #ffcccc !important;
    text-shadow: 0 0 8px rgba(255, 200, 200, 0.6);
    font-weight: 500;
}

/* Mobile-optimized message styling */

#confirmationContent.save-reset-content .highlight-cost {
    color: #ff6600 !important;
    text-shadow:
        0 0 10px rgba(255, 102, 0, 0.8),
        0 0 15px rgba(255, 102, 0, 0.6);
    font-weight: bold;
}

/* Mobile-optimized highlight styling */

.highlight-cost {
    color: #ffdd00;
    font-weight: bold;
    text-shadow: 0 0 5px #ffdd00;
}

#rebootModalButtons,
#confirmationButtons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* .confirm-btn base styles live in simple-modals.css — removed zombie copy */

/* ==========================================================================
   SIMPLE MODAL BUTTON STYLES - Moved to simple-modals.css
   All themed button styles for confirmation, reboot, and reset modals
   are now in css/simple-modals.css for better organization
   ========================================================================== */

/* Mobile-optimized button styling */

/* Layout shell shared by welcome, pause, game over — vignette/blur only on #welcomeScreen */
.screen-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 66;
    text-align: center;
}

#welcomeScreen.screen-container {
    /* Loading hands off at 1.49; boot takes one last subtle 3.4% step forward. */
    --boot-monitor-rest-scale: 1.54;
    --boot-monitor-scale-14: 1.598;
    --boot-monitor-scale-36: 1.891;
    --boot-monitor-scale-56: 2.325;
    --boot-monitor-scale-78: 2.977;
    --boot-monitor-pass-scale: 3.783;
    background: transparent;
    overflow: hidden;
}

/* Compact loading settles at 0.94; preserve the same subtle forward step. */
@media (max-width: 640px), (orientation: portrait) {
    #welcomeScreen.screen-container {
        --boot-monitor-rest-scale: 1.024;
        --boot-monitor-scale-14: 1.062;
        --boot-monitor-scale-36: 1.482;
        --boot-monitor-scale-56: 2.054;
        --boot-monitor-scale-78: 2.87;
        --boot-monitor-pass-scale: 3.783;
    }
}

#welcomeScreen .screen-content {
    width: min(760px, 78vw, 132.9vh);
    padding: clamp(18px, 2.6vw, 30px) clamp(14px, 3.3vw, 36px);
}

/* CRT / circuit bezel — transparent center; shared on welcome, loading, game over */
.welcome-boot-screen-frame,
.loading-boot-screen-frame,
.game-over-boot-screen-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.welcome-boot-screen-frame {
    z-index: 1;
    opacity: 1;
    transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
    transition: filter 0.48s ease-out, transform 0.48s ease-out;
    filter: brightness(1) saturate(1);
}

.loading-boot-screen-frame {
    z-index: 0;
    opacity: 0;
    transform: scale(var(--boot-artwork-size-multiplier)) scale(0.9);
    transform-origin: center center;
    animation: loadingFramePowerOn 0.24s ease-out 0.02s forwards;
}

@keyframes loadingFramePowerOn {
    0% { opacity: 0; filter: brightness(1.35); }
    100% { opacity: 0.12; filter: brightness(0.82); }
}

#welcomeScreen.visible .welcome-boot-screen-frame {
    opacity: 1;
    transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
    filter: brightness(1) saturate(1);
    transition-delay: 0.12s;
}

/* Boot screen must sit above in-run HUD (#stats / #unitsDisplay are z-index 10000) */
#welcomeScreen.screen-container.visible {
    z-index: 10050;
}

/* Loading shell fades away over an already-solid, aligned boot frame. */
#welcomeScreen.welcome-from-load.screen-container {
    opacity: 1;
    transition: none;
}
#welcomeScreen.welcome-from-load.screen-container.visible {
    opacity: 1;
}

#welcomeScreen.welcome-from-load.visible .welcome-boot-screen-frame {
    animation: none;
    opacity: 1;
    transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
    filter: brightness(1) saturate(1);
    transition: filter 0.52s ease-out, transform 0.52s ease-out;
}

.screen-content {
    width: min(100%, 760px);
    box-sizing: border-box;
    padding: 30px 40px;
    position: relative;
}

.screen-fade-out {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.5s;
}

#welcomeScreen.boot-monitor-zoom {
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
}

#welcomeScreen.boot-monitor-zoom .welcome-boot-screen-frame {
    opacity: 1 !important;
    z-index: 4;
    animation: bootMonitorZoomIn var(--boot-zoom-ms, 836ms) cubic-bezier(0.18, 0.58, 0.22, 1) forwards;
    transition: none;
}

/* BOOT SYSTEM only: the real board and bezel share the same push curve.
   The board then settles while the enlarged bezel clears the viewport. */
#gameContainer.boot-through-glass #canvasWrapper {
    /* Same timeline fractions, with restrained depth parallax behind the glass. */
    --boot-board-scale-14: 1.012;
    --boot-board-scale-36: 1.117;
    --boot-board-scale-56: 1.282;
    --boot-board-scale-78: 1.516;
    --boot-board-scale-100: 1.78;
    animation: bootBoardThroughGlass var(--boot-total-ms, 2180ms) linear forwards;
}

#gameContainer.boot-through-glass #gameCanvas.is-transitioning.boot-canvas-enter {
    opacity: 1;
    animation: gameCanvaspulse 9.6s ease-in-out infinite;
}

@keyframes bootBoardThroughGlass {
    0% {
        transform: rotate(var(--view-rest-tilt)) scale(1);
        animation-timing-function: cubic-bezier(0.18, 0.58, 0.22, 1);
    }
    6.16% {
        transform: rotate(var(--view-rest-tilt)) scale(var(--boot-board-scale-14));
        animation-timing-function: cubic-bezier(0.18, 0.58, 0.22, 1);
    }
    15.84% {
        transform: rotate(var(--view-rest-tilt)) scale(var(--boot-board-scale-36));
        animation-timing-function: cubic-bezier(0.18, 0.58, 0.22, 1);
    }
    24.64% {
        transform: rotate(var(--view-rest-tilt)) scale(var(--boot-board-scale-56));
        animation-timing-function: cubic-bezier(0.18, 0.58, 0.22, 1);
    }
    34.32% {
        transform: rotate(var(--view-rest-tilt)) scale(var(--boot-board-scale-78));
        animation-timing-function: cubic-bezier(0.18, 0.58, 0.22, 1);
    }
    44% {
        transform: rotate(var(--view-rest-tilt)) scale(var(--boot-board-scale-100));
        animation-timing-function: cubic-bezier(0.33, 1, 0.45, 1);
    }
    82%,
    100% {
        transform: rotate(var(--view-rest-tilt)) scale(1);
    }
}

#welcomeScreen.boot-monitor-zoom #welcomeCritterCanvas,
#welcomeScreen.boot-monitor-zoom .screen-content {
    animation: bootContentDissolve 0.42s ease-out forwards;
}

#welcomeScreen.boot-monitor-zoom .welcome-scanline-overlay {
    animation: bootScanlineBurst var(--boot-zoom-ms, 836ms) steps(11, end) forwards;
    transition: none;
}
.boot-glitch-overlay {
    position: fixed;
    inset: 0;
    z-index: 10052;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
}

.boot-glitch-overlay.boot-glitch-active {
    opacity: 1;
}

.boot-glitch-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.boot-glitch-overlay.boot-glitch-active .boot-glitch-layer--scan {
    background:
        repeating-linear-gradient(0deg,
            transparent 0 2px,
            rgba(0, 255, 170, 0.09) 2px 3px,
            transparent 3px 6px);
    mix-blend-mode: screen;
    animation: bootGlitchScan var(--boot-glitch-ms, 1440ms) steps(6, end) var(--boot-glitch-delay, 420ms) forwards;
}

.boot-glitch-overlay.boot-glitch-active .boot-glitch-layer--chroma {
    background:
        linear-gradient(90deg, rgba(255, 0, 120, 0.14) 0, transparent 32%, transparent 68%, rgba(0, 255, 255, 0.16) 100%);
    mix-blend-mode: screen;
    animation: bootGlitchChroma var(--boot-glitch-ms, 1440ms) steps(8, end) var(--boot-glitch-delay, 420ms) forwards;
}

.boot-glitch-overlay.boot-glitch-active .boot-glitch-layer--noise {
    background:
        repeating-linear-gradient(115deg,
            transparent 0 3px,
            rgba(180, 255, 220, 0.07) 3px 4px,
            transparent 4px 9px),
        repeating-linear-gradient(-115deg,
            transparent 0 5px,
            rgba(0, 220, 255, 0.05) 5px 6px,
            transparent 6px 11px);
    background-size: 120% 120%, 140% 140%;
    mix-blend-mode: overlay;
    animation: bootGlitchNoise var(--boot-glitch-ms, 1440ms) linear var(--boot-glitch-delay, 420ms) forwards;
}

.boot-glitch-overlay.boot-glitch-out-active {
    opacity: 1;
}

.boot-glitch-overlay.boot-glitch-out-active .boot-glitch-layer--scan {
    background:
        repeating-linear-gradient(0deg,
            transparent 0 2px,
            rgba(0, 255, 170, 0.09) 2px 3px,
            transparent 3px 6px);
    mix-blend-mode: screen;
    animation: bootGlitchScan var(--boot-glitch-ms, 1440ms) steps(6, end) reverse forwards;
}

.boot-glitch-overlay.boot-glitch-out-active .boot-glitch-layer--chroma {
    background:
        linear-gradient(90deg, rgba(255, 0, 120, 0.14) 0, transparent 32%, transparent 68%, rgba(0, 255, 255, 0.16) 100%);
    mix-blend-mode: screen;
    animation: bootGlitchChroma var(--boot-glitch-ms, 1440ms) steps(8, end) reverse forwards;
}

.boot-glitch-overlay.boot-glitch-out-active .boot-glitch-layer--noise {
    background:
        repeating-linear-gradient(115deg,
            transparent 0 3px,
            rgba(180, 255, 220, 0.07) 3px 4px,
            transparent 4px 9px),
        repeating-linear-gradient(-115deg,
            transparent 0 5px,
            rgba(0, 220, 255, 0.05) 5px 6px,
            transparent 6px 11px);
    background-size: 120% 120%, 140% 140%;
    mix-blend-mode: overlay;
    animation: bootGlitchNoise var(--boot-glitch-ms, 1440ms) linear reverse forwards;
}

@keyframes bootGlitchScan {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    8% {
        opacity: 0.85;
        transform: translateY(-3px);
    }
    18% {
        opacity: 0.55;
        transform: translateY(5px);
    }
    32% {
        opacity: 0.92;
        transform: translateY(-6px);
    }
    46% {
        opacity: 0.62;
        transform: translateY(4px);
    }
    62% {
        opacity: 0.78;
        transform: translateY(-2px);
    }
    78% {
        opacity: 0.34;
        transform: translateY(1px);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

@keyframes bootGlitchChroma {
    0% {
        opacity: 0;
        transform: translateX(0) skewX(0deg);
    }
    10% {
        opacity: 0.72;
        transform: translateX(-8px) skewX(-2deg);
    }
    22% {
        opacity: 0.48;
        transform: translateX(10px) skewX(2.5deg);
    }
    36% {
        opacity: 0.82;
        transform: translateX(-5px) skewX(-1deg);
    }
    50% {
        opacity: 0.58;
        transform: translateX(7px) skewX(1.5deg);
    }
    66% {
        opacity: 0.38;
        transform: translateX(-3px) skewX(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(0) skewX(0deg);
    }
}

@keyframes bootGlitchNoise {
    0% {
        opacity: 0;
        background-position: 0 0, 0 0;
        filter: contrast(1.2) brightness(1.1);
    }
    12% {
        opacity: 0.55;
        background-position: 8% 4%, -6% 3%;
    }
    28% {
        opacity: 0.72;
        background-position: -5% -8%, 10% -4%;
        filter: contrast(1.55) brightness(1.35) hue-rotate(-10deg);
    }
    44% {
        opacity: 0.48;
        background-position: 6% 6%, -8% 8%;
    }
    60% {
        opacity: 0.62;
        background-position: -4% 2%, 5% -6%;
        filter: contrast(1.35) brightness(1.2) hue-rotate(8deg);
    }
    100% {
        opacity: 0;
        background-position: 0 0, 0 0;
        filter: contrast(1) brightness(1);
    }
}


@keyframes bootMonitorZoomIn {
    0% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
        filter: brightness(1) saturate(1);
    }
    14% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-14));
        filter: brightness(1.12) saturate(1.1) drop-shadow(0 0 10px rgba(0, 255, 170, 0.28));
    }
    36% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-36));
        filter: brightness(1.48) saturate(1.28) drop-shadow(0 0 22px rgba(0, 255, 170, 0.45));
    }
    56% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-56));
        filter: brightness(1.9) saturate(1.48);
    }
    78% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-78));
        filter: brightness(2.35) saturate(1.35) hue-rotate(8deg);
    }
    100% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-pass-scale));
        filter: brightness(3) saturate(1.12) hue-rotate(14deg);
    }
}

@keyframes bootMonitorZoomInPortrait {
    0% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
        filter: brightness(1) saturate(1);
    }
    14% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-14));
        filter: brightness(1.12) saturate(1.1) drop-shadow(0 0 10px rgba(0, 255, 170, 0.28));
    }
    36% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-36));
        filter: brightness(1.48) saturate(1.28) drop-shadow(0 0 22px rgba(0, 255, 170, 0.45));
    }
    56% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-56));
        filter: brightness(1.9) saturate(1.48);
    }
    78% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-78));
        filter: brightness(2.35) saturate(1.35) hue-rotate(8deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-pass-scale));
        filter: brightness(3) saturate(1.12) hue-rotate(14deg);
    }
}

@keyframes bootContentDissolve {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
        filter: blur(3px);
    }
}

@keyframes bootScanlineBurst {
    0% {
        opacity: 1;
        transform: scaleY(1);
    }
    18% {
        opacity: 0.92;
        transform: scaleY(1.06);
        filter: brightness(1.7);
    }
    100% {
        opacity: 0;
        transform: scaleY(1.35);
    }
}

@keyframes bootMonitorZoomReduced {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #welcomeScreen.boot-monitor-zoom .welcome-boot-screen-frame {
        animation: bootMonitorZoomReduced 0.45s ease-out forwards;
    }

    #gameContainer.boot-through-glass #canvasWrapper {
        animation: none;
        transform: rotate(var(--view-rest-tilt));
    }

    #gameContainer.boot-through-glass #gameCanvas.is-transitioning.boot-canvas-enter {
        animation: none;
        opacity: 1;
    }
}
#welcomeScreen.boot-monitor-zoom-out {
    pointer-events: none;
    overflow: hidden;
    display: flex;
    z-index: 10050;
    animation: bootWelcomeShellFadeIn var(--boot-total-ms, 1900ms) ease-out forwards;
}

#welcomeScreen.boot-monitor-zoom-out .welcome-boot-screen-frame {
    opacity: 1 !important;
    z-index: 4;
    animation: bootMonitorZoomOut var(--boot-zoom-ms, 836ms) cubic-bezier(0.55, 0.06, 0.24, 1) var(--boot-materialize-delay, 836ms) both;
    transition: none;
}

#welcomeScreen.boot-monitor-zoom-out #welcomeCritterCanvas,
#welcomeScreen.boot-monitor-zoom-out .screen-content {
    opacity: 0;
    animation: bootContentFadeIn 0.52s ease-out calc(var(--boot-materialize-delay, 836ms) + var(--boot-zoom-ms, 836ms) * 0.42) forwards;
}

#welcomeScreen.boot-monitor-zoom-out .welcome-scanline-overlay {
    opacity: 0;
    animation: bootScanlineReturn calc(var(--boot-zoom-ms, 836ms) * 0.85) steps(9, end) calc(var(--boot-materialize-delay, 836ms) + var(--boot-zoom-ms, 836ms) * 0.35) forwards;
    transition: none;
}

@keyframes bootWelcomeShellFadeIn {
    0%, 24% {
        opacity: 0;
    }
    42% {
        opacity: 0.32;
    }
    58% {
        opacity: 0.68;
    }
    100% {
        opacity: 1;
    }
}

@keyframes bootMonitorZoomOut {
    0% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-pass-scale));
        filter: brightness(3) saturate(1.12) hue-rotate(14deg);
    }
    18% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-78));
        filter: brightness(2.35) saturate(1.35) hue-rotate(8deg);
    }
    38% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-56));
        filter: brightness(1.75) saturate(1.45);
    }
    58% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-36));
        filter: brightness(1.28) saturate(1.18) drop-shadow(0 0 16px rgba(0, 255, 200, 0.35));
    }
    100% {
        transform: scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
        filter: brightness(1) saturate(1);
    }
}

@keyframes bootMonitorZoomOutPortrait {
    0% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-pass-scale));
        filter: brightness(3) saturate(1.12) hue-rotate(14deg);
    }
    18% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-78));
        filter: brightness(2.35) saturate(1.35) hue-rotate(8deg);
    }
    38% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-56));
        filter: brightness(1.75) saturate(1.45);
    }
    58% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-scale-36));
        filter: brightness(1.28) saturate(1.18) drop-shadow(0 0 16px rgba(0, 255, 200, 0.35));
    }
    100% {
        transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
        filter: brightness(1) saturate(1);
    }
}

@keyframes bootContentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes bootScanlineReturn {
    0% {
        opacity: 0;
        transform: scaleY(1.35);
    }
    35% {
        opacity: 0.75;
        transform: scaleY(1.06);
        filter: brightness(1.5);
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #welcomeScreen.boot-monitor-zoom-out .welcome-boot-screen-frame {
        animation: bootMonitorZoomReduced 0.45s ease-out var(--boot-materialize-delay, 836ms) forwards;
    }
}

/* By default, make all direct children of screen-content invisible and slightly moved down */
#welcomeScreen .screen-content>* {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease-out, transform 0.4s ease-out;
}

/* When the welcome screen has the 'visible' class, fade in the children */
#welcomeScreen.visible .screen-content>* {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger the animation for each element to create a boot-up sequence */
#welcomeScreen.visible .screen-content h1 {
    transition-delay: 0.03s;
}

#welcomeScreen.visible .screen-content h2 {
    transition-delay: 0.08s;
}

#welcomeScreen.visible .screen-content .welcome-stats {
    transition-delay: 0.28s;
}

/* Button rows: container eases in, then each button fades up on its own */
#welcomeScreen .screen-content > .welcome-buttons,
#welcomeScreen .screen-content > .welcome-buttons-secondary {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s ease-out, transform 0.4s ease-out;
}

#welcomeScreen.visible .screen-content > .welcome-buttons {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

#welcomeScreen.visible .screen-content > .welcome-buttons-secondary:not(.welcome-buttons-secondary--empty) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.14s;
}

#welcomeScreen.visible .screen-content > .welcome-buttons-secondary.welcome-buttons-secondary--empty {
    opacity: 0;
    transform: translateY(6px);
    margin-top: 0;
    margin-bottom: 0;
    min-height: 0;
    pointer-events: none;
}

#welcomeScreen .welcome-buttons > button {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.42s ease-out, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

#welcomeScreen.visible .welcome-buttons > button:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.14s;
}

#welcomeScreen.visible .welcome-buttons > button:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.22s;
}

#welcomeScreen .welcome-buttons-secondary.welcome-buttons-secondary--empty {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 0;
    pointer-events: none;
}

#welcomeScreen .welcome-buttons-secondary > button.welcome-boot-btn--concealed {
    display: none !important;
}

#welcomeScreen .welcome-buttons-secondary > button.welcome-boot-btn--entering {
    opacity: 0;
    transform: translateY(14px);
}

#welcomeScreen .welcome-buttons-secondary > button.welcome-boot-btn--entered {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.42s ease-out, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

#welcomeScreen h1 {
    max-width: 100%;
    font-size: clamp(26px, 4.5vw, 43px);
    color: var(--primary-color);
    text-shadow: 0 0 20px var(--primary-color);
    margin: 0 auto 18px;
    line-height: 1.12;
    letter-spacing: clamp(1px, 0.34vw, 4px);
    text-wrap: balance;
    animation: glow 2s ease-in-out infinite;
}

#welcomeScreen h2 {
    max-width: 100%;
    font-size: clamp(14px, 2.5vw, 22px);
    color: var(--secondary-color);
    margin: 0 auto clamp(24px, 4vh, 34px);
    line-height: 1.25;
    text-wrap: balance;
    opacity: 0.8;
}

/* Welcome screen scanline overlay — powers on with CRT frame + buttons */
.welcome-scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2.5;
    opacity: 0;
    transition: opacity 0.52s ease-out;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 0, 0.03) 2px,
            rgba(0, 255, 0, 0.03) 4px);
    animation: welcomeScanlinePulse 4s ease-in-out infinite;
}

#welcomeScreen.visible .welcome-scanline-overlay {
    opacity: 1;
    transition-delay: 0.14s;
}

.welcome-stats {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 4px;
    backdrop-filter: blur(2px);
    opacity: 0.7;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-stats > * {
    position: relative;
    z-index: 2;
}

/* Stat separator pipe - centered */
.stat-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    color: #666;
    flex-shrink: 0;
    font-weight: normal;
}

.stat-item {
    color: #b8ffc8;
    font-size: clamp(11px, 1.8vw, 12px);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.9;
}

/* Main menu stats: mirrored layout — label | [value chip][icon]; fixed icon box, vertical center */
.welcome-stat-pair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.welcome-stat-label {
    flex-shrink: 0;
    line-height: 1.2;
}

.welcome-stat-value-cluster {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.welcome-stats .welcome-stat-value-cluster .stat-value {
    margin-left: 0;
}

.welcome-stats .welcome-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(25px, 1.9vw, 30px);
    height: clamp(25px, 1.9vw, 30px);
    flex-shrink: 0;
    padding: 0;
}

.welcome-stats .welcome-stat-icon svg,
.welcome-stats .welcome-stat-icon img {
    width: 86%;
    height: 86%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}

.welcome-stats .welcome-stat-icon--highest {
    color: #e8c040;
    filter: drop-shadow(0 0 3px rgba(255, 200, 80, 0.55));
}

.welcome-stats .welcome-stat-icon--units {
    color: #a8ffd0;
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.45));
}

.stat-value {
    color: var(--primary-color);
    font-size: clamp(12px, 2vw, 16px);
    font-weight: bold;
    text-shadow: 0 0 3px var(--primary-color);
    font-family: 'Courier New', monospace;
    margin-left: 2px;
}

/* Welcome stat numbers: subtle glass badge treatment to match HUD chips */
.welcome-stats .stat-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    min-height: 1.45em;
    box-sizing: border-box;
    padding: 2px 7px;
    border-radius: 6px;
    transform: skewX(-8deg);
    border: 1px solid color-mix(in srgb, var(--welcome-stat-accent, #00ddff) 50%, transparent);
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--welcome-stat-accent, #00ddff) 14%, rgba(8, 12, 18, 0.88)) 0%,
            rgba(8, 12, 18, 0.86) 100%);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--welcome-stat-accent, #00ddff) 38%, transparent),
        inset 0 0 9px color-mix(in srgb, var(--welcome-stat-accent, #00ddff) 12%, transparent);
    backdrop-filter: blur(2px);
}

/* Welcome stats: match in-game semantic colors */
#welcomeHighestWave {
    --welcome-stat-accent: #ffaa00;
    color: #ffcf66;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.75);
}

#welcomeTotalGained {
    --welcome-stat-accent: #00ff88;
    color: #8bffc0;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.7);
}

.welcome-stats .stat-value.welcome-stat-value--pending {
    --welcome-stat-accent: #7df9ff;
    min-width: 7.4em;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.56em;
    letter-spacing: 0.05em;
    color: #9ee8ff;
    text-shadow: 0 0 7px rgba(0, 220, 255, 0.42);
}

/* Game Over: numeric values — glass chips; accent per stat (--game-over-stat-accent) */
.game-over-stats .stat-value {
    --game-over-stat-accent: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    padding: 1px 7px;
    margin-left: 4px;
    border-radius: 6px;
    transform: skewX(-8deg);
    border: 1px solid color-mix(in srgb, var(--game-over-stat-accent) 45%, transparent);
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--game-over-stat-accent) 14%, rgba(8, 12, 18, 0.86)) 0%,
            rgba(8, 12, 18, 0.84) 100%);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--game-over-stat-accent) 35%, transparent),
        inset 0 0 9px color-mix(in srgb, var(--game-over-stat-accent) 10%, transparent);
    backdrop-filter: blur(2px);
}

/* Welcome screen button containers - shared grid layout */
.welcome-buttons,
.welcome-buttons-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-buttons {
    margin-top: 16px;
}

.welcome-buttons-secondary {
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Shared base styles for all boot screen buttons */
.boot-btn,
#tutorialButton,
.idle-reward-btn,
.hub-btn {
    /* Shared layout */
    padding: clamp(7px, 1.1vw, 8px) clamp(8px, 1.4vw, 10px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    /* Shared typography */
    font-family: inherit;
    font-size: clamp(12px, 1.45vw, 15px);
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;

    /* Shared appearance */
    border-radius: 8px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.3s;

    /* Shared positioning */
    position: relative;
    z-index: 2;
}

/* Individual button styles - only unique properties */
/* BOOT SYSTEM - Bright neon green with subtle glow, black text */
.boot-btn {
    background: #00ff00;
    /* Bright neon green */
    color: #000;
    border-color: #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
    /* filter: brightness(1); */
    transition: all 0.2s ease;
    font-size: clamp(14px, 1.75vw, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

}

.boot-btn:hover {
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
    filter: brightness(1.4);
}

/* HOW TO PLAY - Bright cyan with subtle glow, black text */
#tutorialButton {
    background: #0ff;
    /* Bright cyan */
    color: #000;
    border-color: #0ff;
    box-shadow: 0 0 15px rgba(0, 221, 255, 0.6);
    transition: all 0.2s ease;
}

#tutorialButton:hover {
    background: #ffffff;
    color: #000;
    box-shadow: 0 0 20px rgba(0, 221, 255, 0.8);
}

/* MILESTONES & REWARDS button - Horizontal gradient orange to red, black text */
.idle-reward-btn {
    position: relative;
    /* Required for absolute positioned badges */
    background: linear-gradient(90deg, #ffff00 26%, #ff8800 100%);
    /* Orange to red horizontal */
    color: #000;
    border-color: #ff6600;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.idle-reward-btn:hover:not(.locked-btn) {
    opacity: 0.9;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.8);
    filter: brightness(1.24);
}

.idle-reward-btn.signal-log-sealed {
    overflow: hidden;
    min-height: 44px;
    border-color: rgba(0, 255, 238, 0.72);
    box-shadow:
        0 0 10px rgba(0, 255, 238, 0.34),
        0 0 16px rgba(255, 174, 0, 0.28),
        inset 0 0 8px rgba(0, 0, 0, 0.22);
}

.idle-reward-btn.signal-log-sealed .btn-text,
.idle-reward-btn.signal-log-unsealing .btn-text {
    position: relative;
    z-index: 2;
}

.idle-reward-btn.signal-log-sealed::before {
    position: absolute;
    inset: 0;
    content: '';
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(115deg, rgba(0, 255, 238, 0.34) 0%, rgba(0, 255, 238, 0.12) 38%, rgba(255, 255, 255, 0.08) 62%, rgba(0, 255, 238, 0.28) 100%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 7px);
    opacity: 0.72;
    animation: signalLogSealShimmer 2.6s ease-in-out infinite;
}

.idle-reward-btn.signal-log-unsealing {
    overflow: hidden;
    animation: signalLogUnsealSettle 380ms ease-out forwards;
}

.idle-reward-btn.signal-log-unsealing::before {
    animation: signalLogSealPeel 360ms ease-in forwards;
}

.signal-log-unseal-flash {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.42) 0%, rgba(0, 255, 238, 0.16) 42%, transparent 72%);
    opacity: 0;
    animation: signalLogUnsealFlash 360ms ease-out forwards;
}

@keyframes signalLogSealShimmer {
    0%, 100% {
        opacity: 0.58;
    }

    50% {
        opacity: 0.78;
    }
}

@keyframes signalLogSealPeel {
    0% {
        opacity: 0.72;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(108%);
    }
}

@keyframes signalLogUnsealSettle {
    0% {
        transform: scale(1);
        filter: brightness(1.04);
    }

    42% {
        transform: scale(1.02);
        filter: brightness(1.18);
    }

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

@keyframes signalLogUnsealFlash {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0.65;
    }

    100% {
        opacity: 0;
    }
}

/* Notification badge for claimable rewards - Vector.green geometric style */
/* Notification badge for Milestones - Inviting gold circle with exclamation */
/* Badge 1: Idle Income Percentage (top-right, upper position) */
.idle-reward-btn .idle-income-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    min-width: 32px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, #00d4ff 0%, #00a8cc 50%, #00d4ff 100%);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.9), 0 0 20px rgba(0, 168, 204, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.3);
    animation: milestoneBadgePulse 2s ease-in-out infinite;
    z-index: 11;
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 900;
    color: #000;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

/* Badge 2: Claimable Milestones Count (top-right, lower position) */
.idle-reward-btn .milestone-claimable-badge {
    position: absolute;
    top: 18px;
    /* Position below idle income badge */
    right: -6px;
    min-width: 32px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, #FFD700 0%, #FFE033 50%, #FFD700 100%);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 224, 51, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.3);
    animation: milestoneBadgePulse 2s ease-in-out infinite;
    z-index: 10;
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 900;
    color: #000;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.idle-reward-btn.has-notification {
    animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes vectorGlitchPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1);
    }

    25% {
        transform: scale(1.1) rotate(2deg);
        filter: brightness(1.2);
    }

    50% {
        transform: scale(1.05) rotate(-1deg);
        opacity: 0.95;
        filter: brightness(1.1);
    }

    75% {
        transform: scale(1.08) rotate(1deg);
        filter: brightness(1.15);
    }
}

@keyframes innerDiamondPulse {

    0%,
    100% {
        transform: scale(1);
        background: #000;
    }

    50% {
        transform: scale(0.8);
        background: #003300;
    }
}

@keyframes glitchSquares {

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

    25% {
        opacity: 0.9;
        transform: translate(2px, -1px);
    }

    50% {
        opacity: 0.4;
        transform: translate(-1px, 2px);
    }

    75% {
        opacity: 0.8;
        transform: translate(1px, 1px);
    }
}

@keyframes vectorButtonPulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.4), 0 0 5px rgba(255, 224, 51, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 255, 0, 0.7), 0 0 35px rgba(0, 255, 102, 0.5), 0 0 10px rgba(255, 224, 51, 0.4);
    }
}

@keyframes pulseNotification {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 102, 0, 0.8), 0 0 20px rgba(255, 102, 0, 0.5);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 102, 0, 1), 0 0 30px rgba(255, 102, 0, 0.7);
    }
}

@keyframes buttonPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 102, 0, 0.4), 0 0 5px rgba(255, 102, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 102, 0, 0.7), 0 0 30px rgba(255, 102, 0, 0.5), 0 0 10px rgba(255, 102, 0, 0.4);
    }
}

@keyframes milestoneBadgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 224, 51, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.3);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 18px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 224, 51, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.5);
    }
}

@keyframes milestoneIconBounce {

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

    50% {
        transform: scale(1.15) translateY(-1px);
    }
}

/* THE HUB button - Dark black with grid background and subtle cyan glow, cyan text */
/* HUB button - unique visual styles only (inherits base styles) */
/* NOTE: #upgradesBtn (green) has higher specificity; #welcomeScreen override restores hub look on home screen */
.hub-btn,
#welcomeScreen #upgradesBtn.hub-btn {
    --hub-btn-accent: #00ddff;
    isolation: isolate;
    overflow: hidden;
    padding-right: 50px;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(0, 255, 200, 0.045) 5px, rgba(0, 255, 200, 0.045) 6px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 221, 255, 0.075) 19px, rgba(0, 221, 255, 0.075) 20px),
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 255, 136, 0.06) 19px, rgba(0, 255, 136, 0.06) 20px),
        radial-gradient(ellipse at center, rgba(0, 221, 255, 0.16) 0%, rgba(0, 30, 30, 0.58) 52%, rgba(0, 4, 7, 0.96) 100%);
    color: var(--hub-btn-accent);
    border-color: rgba(0, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 16px rgba(0, 255, 136, 0.08),
        0 0 10px rgba(0, 221, 255, 0.26),
        0 2px 10px rgba(0, 0, 0, 0.42);
    text-shadow:
        0 0 8px rgba(0, 221, 255, 0.78),
        0 1px 2px rgba(0, 0, 0, 0.9);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, transform 0.2s ease, filter 0.2s ease;
}

.hub-btn::before,
#welcomeScreen #upgradesBtn.hub-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -110%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent);
    pointer-events: none;
    transition: left 0.62s ease;
    z-index: 1;
}

.hub-btn:hover:not(.locked-btn),
#welcomeScreen #upgradesBtn.hub-btn:hover:not(.locked-btn) {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(0, 255, 200, 0.065) 5px, rgba(0, 255, 200, 0.065) 6px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 221, 255, 0.12) 19px, rgba(0, 221, 255, 0.12) 20px),
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 255, 136, 0.1) 19px, rgba(0, 255, 136, 0.1) 20px),
        radial-gradient(ellipse at center, rgba(0, 221, 255, 0.28) 0%, rgba(0, 34, 34, 0.52) 58%, rgba(0, 7, 10, 0.96) 100%);
    border-color: #00ffff;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 0 18px rgba(0, 255, 136, 0.12),
        0 0 18px rgba(0, 221, 255, 0.42),
        0 2px 12px rgba(0, 0, 0, 0.45);
}

.hub-btn:hover:not(.locked-btn)::before,
#welcomeScreen #upgradesBtn.hub-btn:hover:not(.locked-btn)::before {
    left: 105%;
}

.hub-btn .btn-text {
    position: relative;
    z-index: 2;
}

.cbd-circuit-diamond,
.hub-btn-icon {
    width: 18px;
    height: 18px;
    border: 2px solid #00ff88;
    background:
        radial-gradient(circle at center, rgba(0, 255, 136, 0.88) 0 15%, rgba(0, 255, 136, 0.12) 16% 38%, rgba(0, 12, 10, 0.94) 39% 100%);
    box-shadow:
        0 0 10px rgba(0, 255, 136, 0.72),
        inset 0 0 8px rgba(0, 255, 136, 0.34);
}

.cbd-circuit-diamond {
    position: absolute;
    display: block;
    transform: rotate(45deg);
}

.hub-btn-icon {
    display: none;
    position: absolute;
    right: 14px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%) rotate(45deg);
}

.hub-btn.has-notification .hub-btn-icon {
    display: block;
}

.cbd-circuit-diamond::before,
.cbd-circuit-diamond::after,
.hub-btn-icon::before,
.hub-btn-icon::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(124, 255, 205, 0.72);
}

.cbd-circuit-diamond::after,
.hub-btn-icon::after {
    inset: 10px;
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.85);
}

.cbd-circuit-diamond__core,
.hub-btn-icon-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    background: rgba(0, 255, 255, 0.7);
    box-shadow: 0 0 7px rgba(0, 255, 255, 0.72);
    transform: translate(-50%, -50%);
}

.cbd-circuit-diamond__core::after,
.hub-btn-icon-core::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 22px;
    background: rgba(0, 255, 255, 0.7);
    box-shadow: 0 0 7px rgba(0, 255, 255, 0.72);
    transform: translate(-50%, -50%);
}

.hub-btn:hover:not(.locked-btn) .hub-btn-icon {
    filter: brightness(1.18) saturate(1.18);
}

.hub-btn .notification-badge {
    display: none;
}

/* Notification badge for HUB / Goals & Loot - Green geometric diamond icon */
.hub-btn .notification-badge,
.idle-reward-btn .notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #00ff00 0%, #00cc66 50%, #00ff88 100%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    /* Hide text, use pseudo-element for inner shape */
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.9), 0 0 25px rgba(0, 255, 102, 0.6);
    animation: vectorGlitchPulse 1.5s ease-in-out infinite;
    z-index: 10;
}

/* Inner geometric detail - smaller diamond inside */
.hub-btn .notification-badge::before,
.idle-reward-btn .notification-badge::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #000;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: innerDiamondPulse 1.5s ease-in-out infinite;
}

/* Glitch square particles effect */
.hub-btn .notification-badge::after,
.idle-reward-btn .notification-badge::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00ff00;
    box-shadow:
        8px -12px 0 rgba(0, 255, 0, 0.8),
        -10px 8px 0 rgba(0, 255, 102, 0.6),
        12px 6px 0 rgba(0, 204, 102, 0.7),
        -6px -10px 0 rgba(0, 255, 136, 0.5);
    animation: glitchSquares 2s linear infinite;
}

#welcomeScreen #upgradesBtn.hub-btn .notification-badge {
    display: none !important;
}

.hub-btn.has-notification {
    animation: none;
    border-color: rgba(0, 255, 136, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 18px rgba(0, 255, 136, 0.13),
        0 0 16px rgba(0, 255, 136, 0.32),
        0 2px 10px rgba(0, 0, 0, 0.42);
}

.hub-btn.has-notification .hub-btn-icon {
    animation: hubIconReadyPulse 1.55s ease-in-out infinite;
}

.hub-btn.has-notification .hub-btn-icon::after {
    animation: hubIconCoreBlink 1.55s steps(2, end) infinite;
}

@keyframes hubIconReadyPulse {
    0%, 100% {
        transform: translateY(-50%) rotate(45deg) scale(1);
        box-shadow:
            0 0 10px rgba(0, 255, 136, 0.72),
            inset 0 0 8px rgba(0, 255, 136, 0.34);
    }

    50% {
        transform: translateY(-50%) rotate(45deg) scale(1.13);
        box-shadow:
            0 0 18px rgba(0, 255, 136, 1),
            0 0 28px rgba(0, 221, 255, 0.48),
            inset 0 0 11px rgba(0, 255, 136, 0.54);
    }
}

@keyframes hubIconCoreBlink {
    0%, 100% {
        opacity: 1;
        background: #00ff88;
    }

    50% {
        opacity: 0.48;
        background: #00ffff;
    }
}

/* Locked button styling (similar to locked tabs) */
/* Locked state for boot buttons */
#tutorialButton.locked-btn,
.idle-reward-btn.locked-btn,
.hub-btn.locked-btn {
    cursor: not-allowed;
    opacity: 0.85 !important;
    filter: grayscale(0.3) brightness(0.8) !important;
    border: 2px dashed rgba(255, 68, 68, 0.6) !important;
    border-image: linear-gradient(45deg, rgba(255, 68, 68, 0.4), rgba(255, 68, 68, 0.8), rgba(255, 68, 68, 0.4)) 1;
    background: linear-gradient(135deg, rgba(8, 4, 6, 0.95) 0%, rgba(12, 6, 8, 0.9) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.2) 0%, transparent 70%) !important;
    color: rgba(255, 180, 180, 0.9) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 0 6px rgba(255, 68, 68, 0.25),
        0 0 10px rgba(255, 68, 68, 0.15),
        inset 0 0 4px rgba(255, 68, 68, 0.1),
        inset 0 0 8px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 68, 68, 0.2) !important;
    position: relative;
    overflow: hidden;
    animation: lockedFieldsetPulse 3s ease-in-out infinite, lockedBorderPulse 2s ease-in-out infinite;
}

#tutorialButton.locked-btn:hover,
.idle-reward-btn.locked-btn:hover,
.hub-btn.locked-btn:hover {
    transform: none;
    cursor: not-allowed;
}

#tutorialButton.locked-btn::after,
.idle-reward-btn.locked-btn::after,
.hub-btn.locked-btn::after {
    position: absolute;
    content: 'LOCKED';
    right: 8px;
    bottom: 4px;
    font-size: 9px;
    letter-spacing: 1.5px;
    opacity: 0.62;
    pointer-events: none;
    color: rgba(255, 120, 120, 0.95);
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.7);
}

/* Mobile responsive welcome buttons */
/* 768px welcome buttons rules moved to consolidated section */

/* 480px rules moved to consolidated media query section at bottom */

#gameOverScreen {
    display: none;
    overflow: hidden;
    opacity: 0;
}

#gameOverScreen.screen-container {
    background: transparent;
}

#gameOverScreen.screen-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(28, 0, 0, 0.46) 24%, rgba(0, 0, 0, 0.86) 72%),
        linear-gradient(180deg, rgba(18, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.48) 100%);
    backdrop-filter: blur(7px) saturate(0.38) brightness(0.44);
    -webkit-backdrop-filter: blur(7px) saturate(0.38) brightness(0.44);
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

#gameOverScreen.is-opening.screen-container::before {
    opacity: 1;
}

.game-over-boot-screen-frame {
    z-index: 1;
    opacity: 0;
    filter: sepia(0.55) hue-rotate(-32deg) saturate(2.8) brightness(0.9);
    transition: opacity 1.5s ease-out, filter 1.5s ease-out, transform 1.5s ease-out;
}

#gameOverScreen.is-opening .game-over-boot-screen-frame {
    opacity: 0.46;
    filter: sepia(0.42) hue-rotate(-36deg) saturate(3.4) brightness(1);
}

/* Core pulse reads bright behind centered title — dim sheet under shared vignette */
#gameOverScreen.modal-overlay {
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


#gameOverScreen.is-opening {
    opacity: 1;
    transition: opacity 1.5s ease-out;
}

/* Boot-screen layout, red-shifted: content sits directly on the CRT — no panel box */
#gameOverContent {
    border: none;
    background: transparent;
}

/* Mirrors #welcomeScreen h1 sizing/spacing, in crash red */
#gameOverContent h1 {
    max-width: 100%;
    font-size: clamp(26px, 4.5vw, 43px);
    color: var(--danger-color);
    text-shadow: 0 0 20px var(--danger-color), 0 0 25px #ff3300;
    margin: 0 auto 18px;
    line-height: 1.12;
    letter-spacing: clamp(1px, 0.34vw, 4px);
    text-wrap: balance;
    animation: gameOverGlow 1.5s ease-in-out infinite;
}

/* Mirrors #welcomeScreen h2 (the D.O.N.A.L.D. tagline slot), dimmed red */
#gameOverContent h2 {
    max-width: 100%;
    font-size: clamp(14px, 2.5vw, 22px);
    color: #ff8866;
    margin: 0 auto clamp(24px, 4vh, 34px);
    line-height: 1.25;
    text-wrap: balance;
    opacity: 0.8;
}

/* New Record Tooltip Styling — anchored above the whole "Highest Wave: …" row (parent .stat-item) */
.new-record-tooltip {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 50%;
    margin-bottom: 10px;
    transform: translateX(-50%) translateY(-6px) scale(1.06);
    background: linear-gradient(45deg, #00cccc, #33aadd);
    /* Initial color, will be animated by rainbow animation */
    color: #fff;
    /* White text for better contrast on rainbow background */
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(0, 204, 204, 0.6), 0 0 30px rgba(0, 204, 204, 0.3);
    border: 1px solid rgba(0, 204, 204, 0.5);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    /* Enhanced shadow for readability */
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 100;
    animation: newRecordTooltipRainbow 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

/* Rainbow background animation for new record tooltip */
@keyframes newRecordTooltipRainbow {
    0% {
        background: linear-gradient(45deg, #00cccc, #33aadd);
        box-shadow: 0 0 15px rgba(0, 204, 204, 0.6), 0 0 30px rgba(0, 204, 204, 0.3);
        border-color: rgba(0, 204, 204, 0.5);
    }

    15% {
        background: linear-gradient(45deg, #33aadd, #9013fe);
        box-shadow: 0 0 20px rgba(51, 170, 221, 0.7), 0 0 40px rgba(51, 170, 221, 0.4);
        border-color: rgba(51, 170, 221, 0.6);
    }

    30% {
        background: linear-gradient(45deg, #9013fe, #4a90e2);
        box-shadow: 0 0 25px rgba(144, 19, 254, 0.8), 0 0 50px rgba(144, 19, 254, 0.5);
        border-color: rgba(144, 19, 254, 0.7);
    }

    45% {
        background: linear-gradient(45deg, #4a90e2, #7ed321);
        box-shadow: 0 0 30px rgba(74, 144, 226, 0.9), 0 0 60px rgba(74, 144, 226, 0.6);
        border-color: rgba(74, 144, 226, 0.8);
    }

    60% {
        background: linear-gradient(45deg, #7ed321, #33aadd);
        box-shadow: 0 0 25px rgba(126, 211, 33, 0.8), 0 0 50px rgba(126, 211, 33, 0.5);
        border-color: rgba(126, 211, 33, 0.7);
    }

    75% {
        background: linear-gradient(45deg, #33aadd, #00cccc);
        box-shadow: 0 0 20px rgba(51, 170, 221, 0.7), 0 0 40px rgba(51, 170, 221, 0.4);
        border-color: rgba(51, 170, 221, 0.6);
    }

    90% {
        background: linear-gradient(45deg, #00cccc, #00ff99);
        box-shadow: 0 0 18px rgba(0, 204, 204, 0.65), 0 0 35px rgba(0, 204, 204, 0.35);
        border-color: rgba(0, 204, 204, 0.55);
    }

    100% {
        background: linear-gradient(45deg, #00cccc, #33aadd);
        box-shadow: 0 0 15px rgba(0, 204, 204, 0.6), 0 0 30px rgba(0, 204, 204, 0.3);
        border-color: rgba(0, 204, 204, 0.5);
    }
}

/* Mobile adjustments for new record tooltip - smaller and moved left */
@media (max-width: 640px) {

    /* Halve float Y distances – damage, E, lash, decoded – so numbers stay closer on small screens */
    :root {
        --float-y-damage: -15px;
        --float-y-resource-mid: -8px;
        --float-y-resource-end: -15px;
        --float-y-decoded-80: -15px;
        --float-y-decoded-100: -20px;
    }

    /* Same anchor as desktop: above the stat row, lifted so label + value stay readable */
    .new-record-tooltip {
        font-size: 9px;
        padding: 3px 8px;
        left: 50%;
        top: auto;
        bottom: 100%;
        margin-bottom: 8px;
        transform: translateX(-50%) translateY(-8px);
        animation: newRecordTooltipRainbow 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes newRecordTooltipPulseMobile {

        0%,
        100% {
            transform: translateX(-50%) scale(1);
            box-shadow: 0 0 12px rgba(0, 255, 153, 0.6), 0 0 24px rgba(0, 255, 153, 0.3);
        }

        50% {
            transform: translateX(-50%) scale(1.03);
            /* Smaller scale on mobile */
            box-shadow: 0 0 16px rgba(0, 255, 153, 0.8), 0 0 32px rgba(0, 255, 153, 0.5);
        }
    }

    /* Save/Update indicators container - move closer to top on mobile */
    #topRightIndicators {
        top: 10px !important;
        right: 10px !important;
    }

    #topRightIndicators #saveIndicator {
        font-size: 7px !important;
        padding: 6px 12px !important;
    }

    /* Boot screen buttons mobile styles */
    .welcome-buttons,
    .welcome-buttons-secondary {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 100%;
    }

    .welcome-buttons-secondary {
        margin-top: 8px;
        margin-bottom: 4px;
        align-items: stretch;
        /* Match button heights in row */
    }

    .boot-btn,
    #tutorialButton,
    .idle-reward-btn,
    .hub-btn {
        letter-spacing: 0.5px;
    }

    .idle-reward-btn.signal-log-sealed,
    .idle-reward-btn.signal-log-unsealing {
        min-height: 44px;
    }

    /* HUB button: match others on phone - same font size, aligned with Milestones */
    #welcomeScreen .hub-btn,
    #welcomeScreen #upgradesBtn.hub-btn {
        font-size: 15px;
        /* Match idle-reward-btn and tutorialButton */
        min-height: 44px;
        /* Consistent height with Milestones button */
        padding-right: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #welcomeScreen #upgradesBtn.hub-btn .hub-btn-icon {
        right: 8px;
        width: 20px;
        height: 20px;
        border-width: 1px;
    }

    #welcomeScreen #upgradesBtn.hub-btn .hub-btn-icon::before {
        inset: 4px;
    }

    #welcomeScreen #upgradesBtn.hub-btn .hub-btn-icon::after {
        inset: 8px;
    }

    #welcomeScreen #upgradesBtn.hub-btn .hub-btn-icon-core {
        width: 16px;
        height: 1px;
    }

    #welcomeScreen #upgradesBtn.hub-btn .hub-btn-icon-core::after {
        width: 1px;
        height: 16px;
    }

    /* Portrait phones: rotate bezel 90° and fill device height (crop sides if needed) */
    @media (orientation: portrait) and (max-aspect-ratio: 3 / 4) {
        #welcomeScreen.screen-container {
            /* Restore the original full regular-monitor phone push curve. */
            --boot-monitor-rest-scale: 1.12;
            --boot-monitor-scale-14: 1.14;
            --boot-monitor-scale-36: 1.3;
            --boot-monitor-scale-56: 1.47;
            --boot-monitor-scale-78: 1.67;
            --boot-monitor-pass-scale: 1.89;
        }

        #welcomeScreen,
        #loadingScreen,
        #gameOverScreen {
            overflow: hidden;
        }

        .welcome-boot-screen-frame,
        .loading-boot-screen-frame,
        .game-over-boot-screen-frame {
            inset: unset;
            top: 50%;
            left: 50%;
            width: 100vh;
            height: 100vw;
            width: 100dvh;
            height: 100dvw;
            max-width: none;
            max-height: none;
            object-fit: cover;
            object-position: center;
            transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
            transform-origin: center center;
        }

        .welcome-boot-screen-frame,
        .loading-boot-screen-frame {
            transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(1.02);
        }

        #welcomeScreen.visible .welcome-boot-screen-frame {
            transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
        }
        #welcomeScreen.welcome-from-load.visible .welcome-boot-screen-frame {
            animation: none;
            transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(var(--boot-monitor-rest-scale));
            opacity: 1;
            filter: brightness(1) saturate(1);
        }

        #welcomeScreen.boot-monitor-zoom .welcome-boot-screen-frame {
            animation-name: bootMonitorZoomInPortrait;
        }

        #gameContainer.boot-through-glass #canvasWrapper {
            --boot-board-scale-14: 1.0179;
            --boot-board-scale-36: 1.1607;
            --boot-board-scale-56: 1.3125;
            --boot-board-scale-78: 1.4911;
            --boot-board-scale-100: 1.6875;
        }

        #welcomeScreen.boot-monitor-zoom-out .welcome-boot-screen-frame {
            animation-name: bootMonitorZoomOutPortrait;
        }

        #gameOverScreen.is-opening .game-over-boot-screen-frame {
            transform: translate(-50%, -50%) rotate(90deg) scale(1.02);
        }

        #loadingScreen .loading-boot-screen-frame {
            inset: unset;
            top: 50%;
            left: 50%;
            width: 100vh;
            height: 100vw;
            width: 100dvh;
            height: 100dvw;
            object-fit: cover;
            object-position: center;
            transform: translate(-50%, -50%) rotate(90deg) scale(var(--boot-artwork-size-multiplier)) scale(1.066);
            transform-origin: center center;
        }
    }

    #welcomeScreen .screen-content {
        width: min(82vw, 139.7vh);
        padding: 20px 12px;
        max-width: none;
    }

    #tutorialButton.locked-btn::after,
    .idle-reward-btn.locked-btn::after,
    .hub-btn.locked-btn::after {
        font-size: 14px;
    }
}

#gameOverContent p {
    font-size: clamp(14px, 2.5vw, 18px);
    color: var(--primary-color);
    margin: 15px 0;
}

/* Pause overlay buttons - match game over screen style */
#pauseButtons,
#gameOverButtons {
    margin: 30px 0 10px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Slim footer strip like .welcome-stats, red-tinted; sits below the buttons */
.game-over-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 20px auto 0;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 51, 0, 0.3);
    border-radius: 4px;
    backdrop-filter: blur(2px);
    opacity: 0.8;
    width: 100%;
    max-width: 560px;
}

.game-over-stats .stat-item {
    color: var(--secondary-color);
    font-size: clamp(13px, 2vw, 16px);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.game-over-stats .stat-value {
    font-size: clamp(14px, 2.5vw, 18px);
    font-weight: bold;
    font-family: 'Courier New', monospace;
    margin-left: 3px;
}

/* Hierarchy: wave (deploy) → personal best → path (run) → breach/spawn (lifetime units) */
#finalWaveReached {
    --game-over-stat-accent: #ffaa44;
    color: #ffe4b8;
    text-shadow: 0 0 8px rgba(255, 170, 68, 0.9);
}

#finalHighestWave {
    --game-over-stat-accent: #ffcc33;
    color: #fff2a8;
    text-shadow: 0 0 8px rgba(255, 204, 51, 0.85);
}

#finalUnitsRun {
    --game-over-stat-accent: #00ff88;
    color: #b8ffd8;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
}

#finalTotalUnits {
    --game-over-stat-accent: #00ffc8;
    color: #b8fff0;
    text-shadow: 0 0 8px rgba(0, 255, 200, 0.75);
}

/* Game Over buttons - shared base styles with welcome buttons */
#rebootButton,
#homeButton {
    /* Shared with welcome buttons */
    padding: 12px 25px;
    border: 1px solid;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s;
    border-radius: 8px;
    text-align: center;
}

#pauseButtons #rebootBtn,
/* Individual game over button styles */
#rebootButton {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color);
}

#rebootButton:hover {
    background: var(--secondary-color);
    color: #000;
    border-color: var(--secondary-color);
    box-shadow: 0 0 25px var(--secondary-color);
    transform: scale(1.05);
}

#homeButton {
    background: transparent;
    color: var(--warning-color);
    border-color: var(--warning-color);
}

#homeButton:hover {
    background: var(--warning-color);
    color: #000;
    box-shadow: 0 0 20px var(--warning-color);
    transform: scale(1.05);
}

/* ==============================================
   RESOURCE GAIN POPUP
   ============================================== */
.resource-gain-popup {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    z-index: 50;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.6),
        1px 1px 2px rgba(0, 0, 0, 0.9);
    animation: resourceFloat 2.05s ease-out forwards;
    white-space: nowrap;
}

.resource-gain-popup .scaling-factor {
    font-size: 0.44em;
    /* 56% smaller than main number */
    opacity: 0.8;
    margin-left: 2px;
}

@keyframes lashPopGlow {
    0% {
        filter: brightness(1.35);
    }

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

/* ==============================================
   FLOATING TEXT & MESSAGES
   ============================================== */
#gameMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(2em + 1.166vw);
    /* 16% smaller on desktop (84% of original: 2.4em * 0.84 = 2.016em, 1.4vw * 0.84 = 1.176vw) */
    line-height: 1;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 0 15px currentColor;
    backdrop-filter: blur(4px) saturate(1.3);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth organic fade-in */
    max-width: 86vw;
    white-space: pre-line;
    overflow: visible;
    text-overflow: unset;
    isolation: isolate;
    --modal-frame-rgb: 0 255 170;
    --modal-corner-frame-opacity: 0.62;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 15px 25px;
    box-shadow:
        0 0 50px rgba(0, 0, 0, 0.8),
        0 0 80px currentColor,
        0 4px 15px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Panel-edge - | bracket DNA (same as modal shells; skip classes that own ::after) */
#gameMessage:not(.boss-deploy-message):not(.tower-unlock-message)::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 0;
    background: var(--modal-corner-top-right-layers), var(--modal-corner-frame-layers);
    opacity: var(--modal-corner-frame-opacity);
}


/* Wave start exit animation - techy/neon glitch effect */
#gameMessage.wave-start-exit {
    animation: waveStartExitGlitch 0.4s ease-out forwards;
    /* Shortened from 0.6s to 0.4s */
}

@keyframes waveStartExitGlitch {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
        filter: brightness(1) contrast(1) saturate(1);
    }

    20% {
        filter: brightness(1.3) contrast(1.2) saturate(1.3) drop-shadow(0 0 15px currentColor);
        transform: translate(calc(-50% + 5px), -50%) scale(1.02);
    }

    40% {
        filter: brightness(1.5) contrast(1.4) saturate(1.5) drop-shadow(0 0 20px currentColor);
        transform: translate(calc(-50% + 20px), -50%) scale(1.05);
    }

    60% {
        filter: brightness(1.2) contrast(1.3) saturate(1.4) drop-shadow(0 0 18px currentColor);
        transform: translate(calc(-50% + 50px), -50%) scale(1.03);
    }

    80% {
        filter: brightness(0.9) contrast(1.1) saturate(1.2) drop-shadow(0 0 12px currentColor);
        transform: translate(calc(-50% + 100px), -50%) scale(1.01);
        opacity: 0.5;
    }

    100% {
        transform: translate(calc(-50% + 150vw), -50%) scale(0.95);
        opacity: 0;
        filter: brightness(0.7) contrast(1) saturate(1) drop-shadow(0 0 8px currentColor);
    }
}

.message-word {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.25em;
}

.message-number {
    color: #ffff00;
    text-shadow:
        0 0 8px rgba(255, 255, 0, 0.7),
        0 0 12px rgba(255, 255, 0, 0.5),
        0 0 20px rgba(255, 255, 0, 0.3),
        2px 2px 4px rgba(0, 0, 0, 0.8),
        1px 1px 2px rgba(0, 0, 0, 0.9);
    display: inline-block;
    transform: skewX(-8deg) scale(1.15);
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0.05em;
    animation: numberPulse 0.6s ease-in-out;
    position: relative;

    /* Glassy background effect */
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

#gameMessage.perfect-wave-message .message-number {
    color: #ffff66;
    text-shadow:
        0 0 8px rgba(255, 255, 0, 0.9),
        0 0 15px rgba(255, 255, 102, 0.6),
        0 0 22px rgba(255, 215, 0, 0.4),
        1px 1px 3px rgba(0, 0, 0, 0.4);
    animation: numberSparkle 0.8s ease-in-out;
    background: linear-gradient(45deg, rgba(255, 221, 68, 0.15), rgba(255, 200, 0, 0.1));
    border: 2px solid rgba(255, 221, 68, 0.5);
    box-shadow:
        inset 0 0 12px rgba(255, 221, 68, 0.3),
        0 0 20px rgba(255, 221, 68, 0.6),
        0 0 30px rgba(255, 200, 0, 0.4);
}

#gameMessage.wave-reward-message {
    max-width: min(92vw, 760px) !important;
    padding: 12px 20px !important;
    border-color: rgba(0, 255, 200, 0.4);
    background:
        linear-gradient(90deg, rgba(0, 255, 170, 0.08), rgba(255, 230, 0, 0.07), rgba(0, 230, 255, 0.08)),
        rgba(0, 0, 0, 0.84);
}

#gameMessage.wave-reward-message .message-container {
    width: 100%;
}

.wave-reward-toast {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(6px, 1vw, 14px);
    width: 100%;
    font-size: clamp(24px, 3.05vw, 42px);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.wave-reward-toast__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.18em;
    min-width: 0;
    padding: 0.08em 0.2em;
    border: 1px solid rgba(0, 255, 220, 0.22);
    border-radius: 6px;
    background: rgba(0, 20, 18, 0.38);
    box-shadow:
        inset 0 0 12px rgba(0, 255, 160, 0.14),
        0 0 16px rgba(0, 255, 160, 0.18);
}

.wave-reward-toast__item--energy {
    border-color: rgba(0, 230, 255, 0.36);
    box-shadow:
        inset 0 0 12px rgba(0, 230, 255, 0.16),
        0 0 16px rgba(0, 230, 255, 0.2);
}

.wave-reward-toast__item--energy .wave-reward-toast__icon {
    filter:
        drop-shadow(0 0 5px rgba(0, 255, 255, 0.95))
        drop-shadow(0 0 12px rgba(120, 255, 255, 0.65))
        drop-shadow(0 0 18px rgba(255, 255, 120, 0.35));
}

.wave-reward-toast__icon {
    width: 1.32em;
    height: 1.32em;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px currentColor);
    /* Staggered pop-in: each reward item enters a beat after the last (matches the game's reveal vibe). */
    transform-origin: center;
    animation: waveRewardIconPop 0.46s cubic-bezier(0.18, 0.9, 0.32, 1.4) both;
    animation-delay: calc(0.06s + var(--reveal-order, 0) * 0.14s);
}

@keyframes waveRewardIconPop {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-14deg);
    }
    62% {
        opacity: 1;
        transform: scale(1.18) rotate(4deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.wave-reward-toast__amount {
    color: #ffff66;
    font-weight: 900;
    text-shadow:
        0 0 8px rgba(255, 255, 0, 0.85),
        0 0 18px rgba(255, 221, 0, 0.42),
        1px 1px 3px rgba(0, 0, 0, 0.85);
}

.wave-reward-toast__item--energy .wave-reward-toast__amount {
    color: #82f7ff;
    text-shadow:
        0 0 8px rgba(0, 235, 255, 0.85),
        0 0 18px rgba(0, 180, 255, 0.42),
        1px 1px 3px rgba(0, 0, 0, 0.85);
}

.wave-reward-toast__label,
.wave-reward-toast__prefix,
.wave-reward-toast__divider,
.wave-reward-toast__verb {
    color: #dffff7;
    font-size: 0.46em;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow:
        0 0 8px rgba(0, 255, 220, 0.7),
        1px 1px 3px rgba(0, 0, 0, 0.85);
}

.wave-reward-toast__prefix {
    color: #ffff99;
}

.wave-reward-toast__divider {
    color: #8ffff7;
    opacity: 0.8;
}

.wave-reward-toast__verb {
    color: #a8ffda;
}

@media (max-width: 640px) {
    #gameMessage.wave-reward-message {
        max-width: 94vw !important;
        padding: 10px 12px !important;
    }

    .wave-reward-toast {
        flex-wrap: wrap;
        gap: 6px 8px;
        font-size: clamp(20px, 5vw, 30px);
        white-space: normal;
    }

    .wave-reward-toast__prefix,
    .wave-reward-toast__verb {
        flex-basis: 100%;
        text-align: center;
        font-size: 0.5em;
    }

    .wave-reward-toast__divider {
        display: none;
    }
}

@media (max-width: 420px) {
    .wave-reward-toast {
        gap: 5px 6px;
        font-size: clamp(18px, 5.4vw, 26px);
    }

    .wave-reward-toast__item {
        padding: 0.06em 0.16em;
        gap: 0.14em;
    }

    .wave-reward-toast__label {
        font-size: 0.42em;
    }
}

.message-char[data-char="+"] {
    color: #66ff66;
    text-shadow:
        0 0 6px rgba(102, 255, 102, 0.8),
        0 0 12px rgba(102, 255, 102, 0.4);
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 0.1em;
}

.message-char[data-char="&"] {
    color: #00ffcc;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
    font-size: 0.9em;
    opacity: 0.9;
    margin: 0 0.2em;
}

.damage-number {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    z-index: 50;
    text-shadow:
        1px 1px 3px rgba(0, 0, 0, 0.7),
        0 0 6px rgba(0, 0, 0, 0.4),
        1px 1px 2px rgba(0, 0, 0, 0.9);
    animation: damageFloat 1s ease-out forwards;
}

/* Mobile damage number adjustments */

.damage-number.burn-damage {
    color: #ff8c00;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 1px 1px 8px rgba(20, 10, 0, 0.6);
    pointer-events: none;
}

/* Zenith aura DPS — icy magnetic pop (distinct from generic white/yellow hit numbers) */
.damage-number.zenith-aura-dmg {
    color: #e8ffff;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.85),
        0 0 10px rgba(0, 255, 255, 0.55),
        0 0 18px rgba(180, 220, 255, 0.45),
        0 0 26px rgba(255, 255, 255, 0.25);
    animation: zenithAuraDmgFloat 1.05s ease-out forwards;
}

@keyframes zenithAuraDmgFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 22px)) scale(0.92);
    }
}

@keyframes lashCritGlow {
    0% {
        filter: brightness(1.4);
        text-shadow:
            1px 1px 3px rgba(0, 0, 0, 0.85),
            0 0 14px rgba(255, 102, 0, 0.7),
            0 0 24px rgba(255, 102, 0, 0.45);
    }

    100% {
        filter: brightness(1);
        text-shadow:
            1px 1px 3px rgba(0, 0, 0, 0.85),
            0 0 10px rgba(255, 102, 0, 0.55),
            0 0 20px rgba(255, 102, 0, 0.35);
    }
}

@keyframes decodedFloat {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.8);
    }

    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    80% {
        opacity: 1;
        transform: translateY(var(--float-y-decoded-80, -30px)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(var(--float-y-decoded-100, -40px)) scale(0.9);
    }
}

/* Decoded text - RED with down-left slide animation (Antivirus/Debugger instant-kill) */
.damage-number.decoded-text {
    color: #ff3333 !important;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 51, 51, 0.8), 0 0 15px rgba(255, 0, 0, 0.5);
    animation: decodedSlideDownLeft 2.2s ease-out forwards;
}

@keyframes decodedSlideDownLeft {
    0% {
        opacity: 0.9;
        transform: translate(0, 0) scale(1.1);
    }

    15% {
        opacity: 1;
        transform: translate(-3px, 5px) scale(1);
    }

    /* Hold "Decoded" visible longer so player can read it */
    55% {
        opacity: 1;
        transform: translate(-8px, 12px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-25px, 35px) scale(0.8);
    }
}

.resource-text {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    z-index: 50;
    color: #00ff88;
    text-shadow: 0 0 4px #000, 0 0 6px #00ff88;
    animation: resourceFloat 1.85s ease-out forwards;
}

.spark-letter {
    display: inline-block;
    animation: text-sparkle 0.46s ease-in-out;
}

/* ==============================================
   ANIMATIONS & KEYFRAMES
   ============================================== */

/* Existing animations */
@keyframes contentSlideUpIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes modalFadeInGrow {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

@keyframes modalFadeOutShrink {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes warningPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes criticalPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes energyPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    }
}

@keyframes gameCanvaspulse {
    0% {
        filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.46));
    }

    50% {
        filter: drop-shadow(0 0 24px rgba(0, 255, 255, 0.26));
    }

    56% {
        filter: drop-shadow(0 0 24px rgba(113, 226, 8, 0.26));
    }

    66% {
        filter: drop-shadow(0 0 24px rgba(0, 255, 255, 0.36));
    }

    100% {
        filter: drop-shadow(0 0 12px rgba(0, 255, 0, .56));
    }
}

@keyframes coreBlink {

    0%,
    100% {
        border-color: var(--primary-color);
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    }

    50% {
        border-color: var(--secondary-color);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    }
}

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

    50% {
        transform: scale(1.2);
        color: var(--secondary-color);
    }

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

@keyframes waveButtonPulse {
    0% {
        box-shadow: 0 0 20px var(--primary-color);
    }

    50% {
        box-shadow: 0 0 35px var(--primary-color), inset 0 0 10px #afa;
    }

    100% {
        box-shadow: 0 0 20px var(--primary-color);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* @keyframes pauseGlow removed — pause overlay was redesigned; no element uses this animation */

@keyframes gameOverGlow {

    0%,
    100% {
        text-shadow: 0 0 15px var(--danger-color);
    }

    50% {
        text-shadow: 0 0 25px var(--danger-color), 0 0 35px #ff6600;
    }
}

@keyframes scan {
    from {
        top: -4px;
    }

    to {
        top: 100vh;
    }
}

@keyframes coreShake {

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

    10%,
    20%,
    30%,
    40% {
        transform: translate(2px, -2px) rotate(1deg);
    }

    50%,
    70%,
    90% {
        transform: translate(-2px, 2px) rotate(-1deg);
    }

    60%,
    80% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }
}

@keyframes heavyShake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        filter: blur(0px);
    }

    10% {
        transform: translate(-8px, 8px) rotate(-2deg);
        filter: blur(1px);
    }

    20% {
        transform: translate(8px, -6px) rotate(2deg);
        filter: blur(0.5px);
    }

    30% {
        transform: translate(-6px, 8px) rotate(-1.5deg);
        filter: blur(1px);
    }

    40% {
        transform: translate(10px, -8px) rotate(2deg);
        filter: blur(0.8px);
    }

    50% {
        transform: translate(-8px, 10px) rotate(-2deg);
        filter: blur(1.2px);
    }

    60% {
        transform: translate(6px, -6px) rotate(1.5deg);
        filter: blur(0.6px);
    }

    70% {
        transform: translate(-10px, 8px) rotate(-2deg);
        filter: blur(1px);
    }

    80% {
        transform: translate(8px, -10px) rotate(2deg);
        filter: blur(0.9px);
    }

    90% {
        transform: translate(-6px, 6px) rotate(-1deg);
        filter: blur(0.7px);
    }
}

@keyframes damageFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, var(--float-y-damage, -30px));
    }
}

@keyframes resourceFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    55% {
        opacity: 0.94;
        transform: translate(-50%, var(--float-y-resource-mid, -15px)) translateX(14px) scale(1.14);
    }

    80% {
        opacity: 0.52;
        transform: translate(-50%, var(--float-y-resource-end, -27px)) translateX(32px) scale(1.28);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, var(--float-y-resource-end, -30px)) translateX(40px) scale(1.4);
    }
}

@keyframes gear-spin-in {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(-180deg);
    }

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

@keyframes gear-spin-in-locked {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(-180deg);
    }

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

@keyframes gear-spin-out {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    /* FIX: Changed rotation from 180deg to -180deg to reverse the open animation */
    to {
        opacity: 0;
        transform: scale(0.2) rotate(-180deg);
    }
}

@keyframes tag-pulse {

    0%,
    100% {
        box-shadow: 0 0 5px #ffff00;
    }

    50% {
        box-shadow: 0 0 15px #ffff00;
    }
}

/* Tether Animations */
@keyframes tethersShootOut {
    0% {
        opacity: 0;
        transform: scale(0);
        transform-origin: center;
    }

    50% {
        opacity: 0.7;
        transform: scale(0.5);
    }

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

@keyframes tethersRetract {
    0% {
        opacity: 1;
        transform: scale(1);
        transform-origin: center;
    }

    70% {
        opacity: 0.3;
        transform: scale(0.3);
    }

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

/* NEW: Tether-specific animations */

@keyframes closeButtonPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(255, 70, 120, 0.66);
        transform: scale(.1);
    }

    25% {
        opacity: 0.6;
        box-shadow: 0 0 20px rgba(255, 70, 120, 1);
        transform: scale(1.1);
    }

    50% {
        opacity: 0.9;
        box-shadow: 0 0 25px rgba(255, 70, 120, 0.26);
        transform: scale(1.05);
    }

    75% {
        opacity: 0.6;
        box-shadow: 0 0 20px rgba(255, 70, 120, 1);
        transform: scale(1.1);
    }
}

@keyframes numberPulse {
    0% {
        transform: skewX(-8deg) scale(0.8);
        opacity: 0;
    }

    50% {
        transform: skewX(-8deg) scale(1.3);
        opacity: 1;
        filter: brightness(1.5);
    }

    100% {
        transform: skewX(-8deg) scale(1.15);
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes numberSparkle {
    0% {
        transform: skewX(-8deg) scale(0.8);
        opacity: 0;
        filter: brightness(1);
    }

    25% {
        transform: skewX(-8deg) scale(1.4);
        opacity: 1;
        filter: brightness(1.8) contrast(1.2);
    }

    50% {
        transform: skewX(-8deg) scale(1.2);
        filter: brightness(2) contrast(1.3) saturate(1.5);
    }

    75% {
        transform: skewX(-8deg) scale(1.25);
        filter: brightness(1.6) contrast(1.1);
    }

    100% {
        transform: skewX(-8deg) scale(1.15);
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes text-sparkle {
    0% {
        color: inherit;
        text-shadow: inherit;
        transform: scale(1);
    }

    50% {
        color: #ffff8d;
        text-shadow: 0 0 15px #ffff00, 0 0 5px #ffffff;
        transform: scale(1.6);
    }

    100% {
        color: inherit;
        text-shadow: inherit;
        transform: scale(1);
    }
}

@keyframes neonDisco {
    0% {
        background: radial-gradient(ellipse at center, rgba(72, 0, 72, 0.41) 0%, rgba(72, 0, 72, 0.41) 77%);
    }

    6% {
        background: radial-gradient(ellipse at center, rgba(140, 1, 140, 0.41) 0%, rgba(0, 0, 0, 0) 37%);
    }

    25% {
        background: radial-gradient(ellipse at center, rgba(0, 56, 72, 0.41) 0%, rgba(19, 19, 19, 0.96) 76%);
    }

    50% {
        background: radial-gradient(ellipse at center, rgba(72, 43, 0, 0.41) 0%, rgba(0, 0, 0, 0.27) 47%);
    }

    75% {
        background: radial-gradient(ellipse at center, rgba(26, 128, 1, 0.41) 0%, rgba(0, 0, 0, .49) 76%);
    }

    96% {
        background: radial-gradient(ellipse at center, rgba(44, 0, 44, 0.46) 37%, rgba(41, 1, 41, 0.47) 0%);
        /* backdrop-filter removed here to avoid heavy compositing during animation */
    }

    100% {
        background: radial-gradient(ellipse at center, rgba(72, 0, 72, 0.41) 0%, rgba(0, 0, 0, 0) 16%);
    }
}

@keyframes systemRestored {
    0% {
        background: radial-gradient(ellipse at center, rgba(63, 0, 0, 0.36) 0%, transparent 80%);
    }

    10%,
    30% {
        background:
            radial-gradient(circle at center, rgba(192, 0, 0, 0.84) 0%, transparent 40%),
            repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.76) 0px, rgba(0, 0, 0, 0.56) 1px, transparent 1px, transparent 3px);
    }

    20%,
    40% {
        background: radial-gradient(circle at center, rgba(126, 0, 0, 0.45) 0%, transparent 50%);
    }

    50% {
        background: radial-gradient(circle at center, rgba(255, 0, 0, 0.92) 0%, transparent 35%);
    }

    66% {
        background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0.76) 0%, transparent 65%);
    }

    76% {
        background: radial-gradient(ellipse at center, rgba(205, 134, 134, 0.76) 0%, transparent 65%);
    }

    80% {
        background: radial-gradient(ellipse at center, rgba(190, 141, 141, 0.86) 0%, transparent 76%);
    }

    83% {
        background: radial-gradient(ellipse at center, rgba(33, 23, 23, 0.86) 0%, transparent 76%);
    }

    86%,
    100% {
        background:
            radial-gradient(circle at center, rgba(0, 0, 0, 1) 0%, transparent 60%),
            repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.36) 0px, rgba(0, 0, 0, 0.36) 2px, transparent 2px, transparent 6px);
    }
}

.energy-low {
    animation: energyPulse 0.5s infinite;
}

.shake {
    animation: coreShake 0.5s ease-in-out;
}

.heavy-shake {
    animation: heavyShake 0.6s ease-in-out;
}

/* Boss death glitch effect */
.boss-death-glitch {
    animation: bossDeathGlitch 0.5s ease-in-out;
    filter: brightness(1.2) contrast(1.1) hue-rotate(5deg);
    position: relative;
}

.boss-death-glitch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(255, 0, 0, 0.1) 2px,
            rgba(255, 0, 0, 0.1) 4px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 2px,
            rgba(255, 0, 0, 0.1) 2px,
            rgba(255, 0, 0, 0.1) 4px);
    pointer-events: none;
    z-index: 1000;
    animation: bossDeathGridGlitch 0.5s ease-in-out;
    opacity: 0;
}

@keyframes bossDeathGlitch {

    0%,
    100% {
        filter: brightness(1) contrast(1) hue-rotate(0deg);
        transform: translate(0, 0);
    }

    10% {
        filter: brightness(1.4) contrast(1.3) hue-rotate(15deg);
        transform: translate(-3px, 2px);
    }

    20% {
        filter: brightness(0.7) contrast(1.4) hue-rotate(-15deg);
        transform: translate(3px, -2px);
    }

    30% {
        filter: brightness(1.3) contrast(1.2) hue-rotate(8deg);
        transform: translate(-2px, 3px);
    }

    40% {
        filter: brightness(0.8) contrast(1.3) hue-rotate(-8deg);
        transform: translate(2px, -3px);
    }

    50% {
        filter: brightness(1.15) contrast(1.2) hue-rotate(5deg);
        transform: translate(0, 0);
    }
}

@keyframes bossDeathGridGlitch {

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

    15% {
        opacity: 0.6;
        transform: scale(1.02) translate(-1px, 1px);
    }

    30% {
        opacity: 0.8;
        transform: scale(0.98) translate(1px, -1px);
    }

    45% {
        opacity: 0.7;
        transform: scale(1.01) translate(-1px, -1px);
    }

    60% {
        opacity: 0.5;
        transform: scale(0.99) translate(1px, 1px);
    }

    75% {
        opacity: 0.3;
        transform: scale(1) translate(0, 0);
    }

    60% {
        filter: brightness(1.05) contrast(1.1) hue-rotate(-3deg);
        transform: translate(-1px, 1px);
    }

    70% {
        filter: brightness(1) contrast(1) hue-rotate(0deg);
        transform: translate(0, 0);
    }
}

/* Elite death: shorter, amber/gold glitch (matches elite indicator) */
.elite-death-glitch {
    animation: eliteDeathGlitch 0.35s ease-in-out;
    position: relative;
}

.elite-death-glitch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 180, 0, 0.08) 2px, rgba(255, 180, 0, 0.08) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 200, 50, 0.08) 2px, rgba(255, 200, 50, 0.08) 4px);
    pointer-events: none;
    z-index: 1000;
    animation: eliteDeathGridGlitch 0.35s ease-in-out;
    opacity: 0;
}

@keyframes eliteDeathGlitch {

    0%,
    100% {
        filter: brightness(1) contrast(1) hue-rotate(0deg);
        transform: translate(0, 0);
    }

    15% {
        filter: brightness(1.25) contrast(1.15) hue-rotate(8deg);
        transform: translate(-2px, 1px);
    }

    35% {
        filter: brightness(0.85) contrast(1.2) hue-rotate(-6deg);
        transform: translate(2px, -1px);
    }

    55% {
        filter: brightness(1.1) contrast(1.05) hue-rotate(3deg);
        transform: translate(0, 0);
    }
}

@keyframes eliteDeathGridGlitch {

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

    25% {
        opacity: 0.5;
        transform: scale(1.01) translate(-1px, 0);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.99) translate(1px, 0);
    }

    75% {
        opacity: 0.2;
        transform: scale(1) translate(0, 0);
    }
}

/* Regen mob death: elite-style green/teal glitch (punchy, like elite) */
.regen-death-glitch {
    animation: regenDeathGlitch 0.35s ease-in-out;
    position: relative;
}

.regen-death-glitch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 180, 0.08) 2px, rgba(0, 255, 180, 0.08) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 230, 200, 0.08) 2px, rgba(0, 230, 200, 0.08) 4px);
    pointer-events: none;
    z-index: 1000;
    animation: regenDeathGridGlitch 0.35s ease-in-out;
    opacity: 0;
}

@keyframes regenDeathGlitch {

    0%,
    100% {
        filter: brightness(1) contrast(1) hue-rotate(0deg);
        transform: translate(0, 0);
    }

    15% {
        filter: brightness(1.22) contrast(1.12) hue-rotate(6deg);
        transform: translate(-2px, 1px);
    }

    35% {
        filter: brightness(0.88) contrast(1.18) hue-rotate(-5deg);
        transform: translate(2px, -1px);
    }

    55% {
        filter: brightness(1.08) contrast(1.05) hue-rotate(2deg);
        transform: translate(0, 0);
    }
}

@keyframes regenDeathGridGlitch {

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

    25% {
        opacity: 0.5;
        transform: scale(1.01) translate(-1px, 0);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.99) translate(1px, 0);
    }

    75% {
        opacity: 0.2;
        transform: scale(1) translate(0, 0);
    }
}

#gameMessage.perfect-wave-message {
    animation: neonDisco 0.42s linear infinite;
    /* Slower = fewer repaints, same look */
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* NOTE: tower-unlock-message and tower-unlock-secondary styles moved to line ~5667 */
/* Removed duplicate definition that had problematic bottom positioning */

/* Tower deploy message style - slide up from bottom with neon effect */
#gameMessage.tower-deploy-message {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px) saturate(1.3);
    box-shadow:
        0 0 50px rgba(0, 0, 0, 0.8),
        0 0 80px #00ffff,
        0 0 120px rgba(0, 255, 255, 0.4),
        inset 0 0 20px rgba(0, 255, 255, 0.2);
    border: 2px solid #00ffff;
    border-radius: 8px;
    animation: towerDeploySlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        towerDeployPulse 1.5s ease-in-out 0.6s infinite alternate;
    font-size: calc(2.1em + 1.2vw);
    text-shadow:
        0 0 12px #00ffff,
        0 0 20px #00ffff,
        0 0 30px rgba(0, 255, 255, 0.6),
        1px 1px 3px rgba(0, 0, 0, 0.7);
    padding: 18px 28px;
    position: relative;
    overflow: hidden;
    pointer-events: none;
    /* Ensure it doesn't block gameplay */
    top: auto;
    /* Override center positioning */
    bottom: 15%;
    /* Position from bottom */
    transform: translateX(-50%) translateY(100px);
    /* Start below viewport */
}

@keyframes towerDeploySlideUp {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(100px) scale(0.9);
    }

    60% {
        transform: translateX(-50%) translateY(-10px) scale(1.02);
    }

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

@keyframes towerDeployPulse {
    0% {
        box-shadow:
            0 0 50px rgba(0, 0, 0, 0.8),
            0 0 80px #00ffff,
            0 0 120px rgba(0, 255, 255, 0.4),
            inset 0 0 20px rgba(0, 255, 255, 0.2);
        border-color: #00ffff;
    }

    100% {
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            0 0 100px #00ffff,
            0 0 150px rgba(0, 255, 255, 0.7),
            inset 0 0 30px rgba(0, 255, 255, 0.4);
        border-color: #00ccff;
    }
}

/* Slide-up animation for tower unlock messages */
@keyframes towerUnlockSlideUp {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(80px) scale(0.9);
    }

    60% {
        transform: translateX(-50%) translateY(-8px) scale(1.02);
    }

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

@keyframes towerUnlockSecondarySlideUp {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(80px) scale(0.9);
    }

    60% {
        transform: translateX(-50%) translateY(-8px) scale(1.02);
    }

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

/* 3D "zoom past camera" effect for unlock message when deploy appears */
@keyframes unlockSlideAway {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) perspective(800px) translateZ(0px);
        filter: blur(0px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) perspective(800px) translateZ(200px);
        filter: blur(6px);
    }
}

/* Stacked message container for unlock + deploy */
#gameMessage .message-container {
    position: relative;
    z-index: 1;
}

/* Deploy message appears below unlock with smooth entrance */
#gameMessage:has(.message-container + .message-container) .message-container:last-child {
    animation: deploySlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes deploySlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

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

#gameMessage.show {
    opacity: 1;
}

#gameMessage.system-detection {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 255, 0, 0.3);
    animation: systemDetectionPulse 1.0s ease-in-out infinite alternate;
    font-size: calc(2.2em + 1.4vw);
    text-shadow:
        0 0 10px currentColor,
        0 0 16px currentColor,
        0 0 24px currentColor,
        1px 1px 3px rgba(0, 0, 0, 0.7);
}

#gameMessage.system-recovery-message {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 102, 0, 0.5);
    animation: systemRecoveryGlitch 1.18s ease-in-out infinite;
    font-size: calc(2.2em + 1.4vw);
    /* Sharper text with darker outline for better readability */
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.9),
        1px -1px 0 rgba(0, 0, 0, 0.9),
        -1px 1px 0 rgba(0, 0, 0, 0.9),
        1px 1px 0 rgba(0, 0, 0, 0.9),
        0 0 3px rgba(0, 0, 0, 1),
        0 0 8px currentColor,
        0 0 12px currentColor;
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(255, 102, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Glitch/blur animation for system recovery message - visible "wait" effect */
/* Keep translate(-50%, -50%) in every keyframe so message stays centered */
@keyframes systemRecoveryGlitch {

    0%,
    100% {
        filter: blur(0);
        transform: translate(-50%, -50%) translateX(0) skewX(0);
        opacity: 1;
        text-shadow:
            -1px -1px 0 rgba(0, 0, 0, 0.9),
            1px -1px 0 rgba(0, 0, 0, 0.9),
            -1px 1px 0 rgba(0, 0, 0, 0.9),
            1px 1px 0 rgba(0, 0, 0, 0.9),
            0 0 8px currentColor,
            0 0 12px currentColor;
    }

    8% {
        filter: blur(2px);
        transform: translate(-50%, -50%) translateX(-5px) skewX(-2deg);
        opacity: 0.9;
        text-shadow:
            -4px 0 0 rgba(255, 0, 0, 0.7),
            4px 0 0 rgba(0, 255, 255, 0.7),
            0 0 10px currentColor;
    }

    16% {
        filter: blur(0);
        transform: translate(-50%, -50%) translateX(4px) skewX(1.5deg);
        opacity: 1;
        text-shadow:
            3px 0 0 rgba(255, 0, 0, 0.4),
            -3px 0 0 rgba(0, 255, 255, 0.4),
            0 0 8px currentColor;
    }

    24% {
        filter: blur(1px);
        transform: translate(-50%, -50%) translateX(-3px) skewX(-1deg);
        opacity: 0.95;
        text-shadow:
            -2px 0 0 rgba(255, 0, 0, 0.5),
            2px 0 0 rgba(0, 255, 255, 0.5),
            0 0 8px currentColor;
    }

    32% {
        filter: blur(0);
        transform: translate(-50%, -50%) translateX(0);
        opacity: 1;
    }

    50% {
        filter: blur(0);
        transform: translate(-50%, -50%) translateX(0) skewX(0);
        opacity: 1;
    }

    58% {
        filter: blur(1.5px);
        transform: translate(-50%, -50%) translateX(4px) skewX(1.2deg);
        opacity: 0.92;
        text-shadow:
            3px 0 0 rgba(255, 0, 0, 0.5),
            -3px 0 0 rgba(0, 255, 255, 0.5),
            0 0 10px currentColor;
    }

    66% {
        filter: blur(0);
        transform: translate(-50%, -50%) translateX(-3px) skewX(-0.8deg);
        opacity: 1;
        text-shadow:
            -2px 0 0 rgba(255, 0, 0, 0.4),
            2px 0 0 rgba(0, 255, 255, 0.4),
            0 0 8px currentColor;
    }

    74% {
        filter: blur(0);
        transform: translate(-50%, -50%) translateX(0);
        opacity: 1;
    }
}

/* BOSS DEPLOY MESSAGE - Serious, dangerous styling with glitchy system infection effect */
#gameMessage.boss-deploy-message {
    --modal-frame-rgb: 255 68 68;
    --modal-corner-frame-opacity: 0.72;
    background-color: rgba(0, 0, 0, 0.95);
    background-image: var(--modal-corner-top-right-layers), var(--modal-corner-frame-layers);
    backdrop-filter: blur(3px) saturate(1.05);
    box-shadow:
        0 0 8px rgba(255, 0, 0, 0.3),
        0 0 12px rgba(255, 0, 0, 0.15),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 0, 0, 0.6);
    border-radius: 4px;
    font-size: calc(2em + 1.166vw);
    /* Same size as regular deploy waves */
    text-shadow:
        0 0 4px currentColor,
        0 0 6px rgba(255, 0, 0, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.9);
    padding: 18px 26px;
    position: relative;
    opacity: 1;
    overflow: hidden;
    /* Glitchy system infection animation - subtle, corrupting effect */
    animation: bossMessageGlitch 3s ease-in-out infinite;
}

/* Hazard tape stripe - TOP */
#gameMessage.boss-deploy-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: repeating-linear-gradient(-45deg,
            rgba(255, 0, 0, 0.7),
            rgba(255, 0, 0, 0.7) 8px,
            transparent 8px,
            transparent 16px);
    background-size: 22.6px 22.6px;
    /* sqrt(16^2 + 16^2) for seamless diagonal */
    animation: hazardSlide 1.5s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Hazard tape stripe - BOTTOM */
#gameMessage.boss-deploy-message::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: repeating-linear-gradient(-45deg,
            rgba(255, 0, 0, 0.7),
            rgba(255, 0, 0, 0.7) 8px,
            transparent 8px,
            transparent 16px);
    background-size: 22.6px 22.6px;
    animation: hazardSlide 1.5s linear infinite reverse;
    pointer-events: none;
    z-index: 1;
}

@keyframes hazardSlide {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 22.6px 0;
    }
}

@keyframes bossDeployGridPulse {
    0% {
        opacity: 0.12;
        background-size: 20px 20px;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0.20;
        background-size: 18px 18px;
        transform: translate(0.5px, 0.5px);
    }
}

/* Glitchy system infection animation - rotation/shake at half intensity to stay in vibe */
@keyframes bossMessageGlitch {

    0%,
    100% {
        filter: hue-rotate(0deg) brightness(1) contrast(1) saturate(1);
        clip-path: inset(0 0 0 0);
    }

    2% {
        filter: hue-rotate(1deg) brightness(1.025) contrast(1.05) saturate(1.05);
        clip-path: inset(0.25% 0 0.25% 0);
    }

    4% {
        filter: hue-rotate(-1deg) brightness(0.99) contrast(1.025) saturate(0.975);
        clip-path: inset(0 0.25% 0 0.25%);
    }

    6% {
        filter: hue-rotate(0deg) brightness(1) contrast(1) saturate(1);
        clip-path: inset(0 0 0 0);
    }

    15% {
        filter: hue-rotate(0.5deg) brightness(1.01) contrast(1.04) saturate(1.025);
        clip-path: inset(0.15% 0 0 0);
    }

    17% {
        filter: hue-rotate(-0.5deg) brightness(0.995) contrast(1.01) saturate(0.99);
        clip-path: inset(0 0 0.15% 0);
    }

    19% {
        filter: hue-rotate(0deg) brightness(1) contrast(1) saturate(1);
        clip-path: inset(0 0 0 0);
    }

    50% {
        filter: hue-rotate(0deg) brightness(1) contrast(1) saturate(1);
        clip-path: inset(0 0 0 0);
    }

    85% {
        filter: hue-rotate(0.25deg) brightness(1.005) contrast(1.025) saturate(1.01);
        clip-path: inset(0.1% 0.1% 0 0);
    }

    87% {
        filter: hue-rotate(-0.25deg) brightness(0.995) contrast(1.01) saturate(0.995);
        clip-path: inset(0 0 0.1% 0.1%);
    }

    89% {
        filter: hue-rotate(0deg) brightness(1) contrast(1) saturate(1);
        clip-path: inset(0 0 0 0);
    }
}

/* Boss deploy message uses .message-number class (same as regular deploy) */
/* Enhanced boss vibe styling for encased numbers in boss messages */
#gameMessage.boss-deploy-message .message-number {
    color: #ffdd00;
    /* Gold/yellow for contrast against red */
    text-shadow:
        0 0 10px rgba(255, 221, 0, 0.9),
        0 0 15px rgba(255, 221, 0, 0.7),
        0 0 25px rgba(255, 170, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.8),
        1px 1px 2px rgba(0, 0, 0, 0.9);
    animation: bossNumberPulse 1.5s ease-in-out infinite;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.15) 100%);
    backdrop-filter: blur(2px);
    border: 2px solid rgba(255, 221, 0, 0.5);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 221, 0, 0.6),
        0 0 25px rgba(255, 170, 0, 0.4);
}

@keyframes bossNumberPulse {

    0%,
    100% {
        transform: skewX(-8deg) scale(1.15);
        opacity: 1;
    }

    50% {
        transform: skewX(-8deg) scale(1.2);
        opacity: 0.95;
    }
}

@keyframes bossWaveNumberPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        text-shadow:
            0 0 3px #ffdd00,
            0 0 6px rgba(255, 170, 0, 0.4),
            1px 1px 2px rgba(0, 0, 0, 0.8);
    }

    50% {
        opacity: 0.98;
        transform: scale(1.02);
        /* Subtle scale (reduced from 1.05 for less aggression) */
        text-shadow:
            0 0 4px #ffdd00,
            0 0 8px rgba(255, 170, 0, 0.5),
            1px 1px 2px rgba(0, 0, 0, 0.8);
    }
}

#gameMessage.tower-install-message {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3.5px) saturate(1.3);
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.7),
        0 0 60px currentColor,
        inset 0 0 16px rgba(255, 255, 255, 0.15);
    border: 1px solid currentColor;
    border-radius: 8px;
    animation: towerInstallPulse 1.2s ease-in-out infinite alternate;
    font-size: calc(2.02em + 1.18vw);
    /* 16% smaller on desktop */
    text-shadow:
        0 0 10px currentColor,
        0 0 16px currentColor,
        0 0 24px currentColor,
        1px 1px 3px rgba(0, 0, 0, 0.7);
    padding: 17px 25px;
    /* 16% smaller padding on desktop */
    position: relative;
    overflow: hidden;
}

/* Enhanced second tower installation message - subtle glitch version */
#gameMessage.tower-install-secondary {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px) saturate(1.4);
    box-shadow:
        0 0 35px rgba(0, 0, 0, 0.8),
        0 0 55px currentColor,
        0 0 75px rgba(255, 255, 255, 0.12),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    border: 1px solid currentColor;
    border-radius: 10px;
    animation: towerInstallSecondary 2.0s ease-in-out infinite alternate;
    font-size: clamp(24px, calc(1.15rem + 1.55vw), 44px);
    /* Slightly smaller than primary */
    text-shadow:
        0 0 8px currentColor,
        0 0 14px currentColor,
        0 0 22px currentColor,
        0 0 32px rgba(255, 255, 255, 0.25),
        1px 1px 2px rgba(0, 0, 0, 0.8);
    padding: 15px 22px;
    /* Slightly smaller padding */
    position: relative;
    overflow: hidden;
    transform: translateY(-5px) scale(0.97);
    /* Offset for layering */
    opacity: 0.92;
}

/* TOWER UNLOCK MESSAGE - Unique "system detection" style (different from install) */
/* Lighter glass/plastic ground so text is clearer; keeps blur and glow */
#gameMessage.tower-unlock-message {
    background-color: rgba(20, 28, 36, 0.48);
    background-image: var(--modal-corner-top-right-layers), var(--modal-corner-frame-layers);
    backdrop-filter: blur(4px) saturate(1.4);
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.45),
        0 0 80px currentColor,
        0 0 120px rgba(255, 255, 255, 0.2),
        inset 0 0 28px rgba(255, 255, 255, 0.18);
    border: 2px solid currentColor;
    border-radius: 10px;
    animation: towerUnlockReveal 1.5s ease-in-out 0.8s infinite alternate, towerUnlockEntrance 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    font-size: clamp(26px, calc(1.2rem + 1.7vw), 48px);
    /* Slightly different size */
    text-shadow:
        0 0 12px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor,
        0 0 45px rgba(255, 255, 255, 0.25),
        1px 1px 3px rgba(0, 0, 0, 0.8);
    padding: 18px 26px;
    /* Slightly different padding */
    position: relative;
    overflow: hidden;
    transform-origin: center center;
    isolation: isolate;
    /* Ensure scaling happens from center */
}

#gameMessage.tower-unlock-secondary {
    background: rgba(14, 20, 28, 0.5);
    backdrop-filter: blur(3.5px) saturate(1.35);
    box-shadow:
        0 0 28px rgba(0, 0, 0, 0.5),
        0 0 55px color-mix(in srgb, var(--grid-color, currentColor) 70%, transparent),
        inset 0 0 22px rgba(255, 255, 255, 0.12);
    border: 1px solid color-mix(in srgb, var(--grid-color, currentColor) 65%, transparent);
    border-radius: 10px;
    animation: towerUnlockSecondaryReveal 1.5s ease-in-out 0.55s infinite alternate;
    font-size: clamp(22px, calc(1.05rem + 1.35vw), 40px);
    text-shadow:
        0 0 8px var(--grid-color, currentColor),
        0 0 16px color-mix(in srgb, var(--grid-color, currentColor) 80%, transparent),
        1px 1px 2px rgba(0, 0, 0, 0.85);
    padding: 14px 22px;
    position: relative;
    overflow: hidden;
    transform-origin: center center;
    isolation: isolate;
    opacity: 0.94;
}

/* Dramatic unlock entrance animation - TRUE 3D "flying toward camera" effect */
/* Uses perspective() + translateZ() for authentic depth approach, not flat scale */
@keyframes towerUnlockEntrance {
    0% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(-500px);
        opacity: 0;
        filter: blur(8px) brightness(1.5);
    }

    50% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(25px);
        opacity: 1;
        filter: blur(0px) brightness(1.2);
    }

    75% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(-10px);
        opacity: 1;
        filter: blur(0px) brightness(1.1);
    }

    100% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(0px);
        opacity: 1;
        filter: blur(0px) brightness(1);
    }
}

/* Tower unlock glow animation - 3D depth breathing with glow */
@keyframes towerUnlockGlow {
    0% {
        box-shadow:
            0 0 40px rgba(0, 0, 0, 0.45),
            0 0 80px currentColor,
            0 0 120px rgba(255, 255, 255, 0.22),
            inset 0 0 28px rgba(255, 255, 255, 0.18);
        border-color: currentColor;
        transform: translate(-50%, -50%) perspective(800px) translateZ(0px);
    }

    50% {
        box-shadow:
            0 0 50px rgba(0, 0, 0, 0.55),
            0 0 100px currentColor,
            0 0 150px rgba(255, 255, 255, 0.35),
            inset 0 0 32px rgba(255, 255, 255, 0.22);
        border-color: currentColor;
        transform: translate(-50%, -50%) perspective(800px) translateZ(4px);
    }

    100% {
        box-shadow:
            0 0 55px rgba(0, 0, 0, 0.5),
            0 0 120px currentColor,
            0 0 180px rgba(255, 255, 255, 0.38),
            inset 0 0 36px rgba(255, 255, 255, 0.24);
        border-color: currentColor;
        transform: translate(-50%, -50%) perspective(800px) translateZ(6px);
    }
}

/* Tower unlock reveal animation - 3D "breathing" depth effect */
@keyframes towerUnlockReveal {
    0% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(-4px);
        box-shadow:
            0 0 40px rgba(0, 0, 0, 0.45),
            0 0 80px currentColor,
            0 0 120px rgba(255, 255, 255, 0.2),
            inset 0 0 28px rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(3.5px) saturate(1.4);
        opacity: 0.95;
    }

    50% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(4px);
        box-shadow:
            0 0 48px rgba(0, 0, 0, 0.5),
            0 0 100px currentColor,
            0 0 150px rgba(255, 255, 255, 0.28),
            inset 0 0 32px rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(4px) saturate(1.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(6px);
        box-shadow:
            0 0 55px rgba(0, 0, 0, 0.5),
            0 0 120px currentColor,
            0 0 180px rgba(255, 255, 255, 0.35),
            inset 0 0 36px rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(3.5px) saturate(1.4);
        opacity: 1;
    }
}

/* Tower unlock secondary reveal animation - 3D depth breathing (no lateral movement) */
@keyframes towerUnlockSecondaryReveal {
    0% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(-3px);
        filter: brightness(1.05) contrast(1.1);
        opacity: 0.9;
    }

    50% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(3px);
        filter: brightness(1.15) contrast(1.2);
        opacity: 0.95;
    }

    100% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(-3px);
        filter: brightness(1.05) contrast(1.1);
        opacity: 0.9;
    }
}

/* Digital grid effect for tower unlock messages */
#gameMessage.tower-unlock-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--grid-color, currentColor) 35%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--grid-color, currentColor) 35%, rgba(255, 255, 255, 0.05)) 1px, transparent 1px, transparent 10px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--grid-color, currentColor) 35%, rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--grid-color, currentColor) 35%, rgba(255, 255, 255, 0.05)) 1px, transparent 1px, transparent 10px);
    background-size: 18px 18px;
    animation: towerUnlockGridPulse 2.0s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
    opacity: 0.72;
}

#gameMessage.tower-unlock-message::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 14px;
    pointer-events: none;
    z-index: -2;
    opacity: 0.42;
    background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--grid-color, currentColor) 40%, transparent), transparent 62%);
    animation: towerUnlockGridPulse 2.4s ease-in-out infinite alternate;
}

#gameMessage.tower-unlock-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--grid-color, currentColor) 22%, rgba(255, 255, 255, 0.03)), color-mix(in srgb, var(--grid-color, currentColor) 22%, rgba(255, 255, 255, 0.03)) 1px, transparent 1px, transparent 12px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--grid-color, currentColor) 22%, rgba(255, 255, 255, 0.03)), color-mix(in srgb, var(--grid-color, currentColor) 22%, rgba(255, 255, 255, 0.03)) 1px, transparent 1px, transparent 12px);
    background-size: 20px 20px;
    animation: towerUnlockGridPulse 2.2s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
    opacity: 0.55;
}

/* Lock animation is now handled by SVG in createUnlockLockAnimation() */

@keyframes towerUnlockGridPulse {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Mobile-specific sizing - 36% smaller */

/* Digital grid effect for tower installation messages - felt not seen */
#gameMessage.tower-install-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg, var(--grid-color, rgba(255, 255, 255, 0.008)), var(--grid-color, rgba(255, 255, 255, 0.008)) 1px, transparent 1px, transparent 12px),
        repeating-linear-gradient(90deg, var(--grid-color, rgba(255, 255, 255, 0.008)), var(--grid-color, rgba(255, 255, 255, 0.008)) 1px, transparent 1px, transparent 12px);
    background-size: 20px 20px;
    animation: digitalGridPulse 1.2s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

/* Glitch scanline effect for secondary tower installation message */
#gameMessage.tower-install-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, transparent 1px, transparent 2px, rgba(0, 0, 0, 0.15) 3px),
        repeating-linear-gradient(0deg, var(--grid-color, rgba(255, 255, 255, 0.008)), var(--grid-color, rgba(255, 255, 255, 0.008)) 1px, transparent 1px, transparent 12px),
        repeating-linear-gradient(90deg, var(--grid-color, rgba(255, 255, 255, 0.008)), var(--grid-color, rgba(255, 255, 255, 0.008)) 1px, transparent 1px, transparent 12px);
    background-size: 100% 3px, 20px 20px, 20px 20px;
    animation: glitchScanlines 0.08s steps(1, end) infinite;
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
}

/* Very subtle digital grid animation */
@keyframes digitalGridPulse {
    0% {
        opacity: 0.08;
        background-size: 20px 20px;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0.15;
        background-size: 18px 18px;
        transform: translate(0.5px, 0.5px);
    }
}

@keyframes towerUnlockPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            0 0 100px rgba(255, 255, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow:
            0 0 80px rgba(0, 0, 0, 0.9),
            0 0 120px rgba(255, 255, 255, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

@keyframes systemDetectionPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 40px rgba(0, 0, 0, 0.9),
            0 0 80px rgba(0, 255, 0, 0.4),
            inset 0 1px 0 rgba(0, 255, 0, 0.3);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            0 0 100px rgba(0, 255, 0, 0.6),
            inset 0 1px 0 rgba(0, 255, 0, 0.5);
    }
}

@keyframes systemRecoveryPulse {

    0%,
    100% {
        text-shadow:
            -1px -1px 0 rgba(0, 0, 0, 0.9),
            1px -1px 0 rgba(0, 0, 0, 0.9),
            -1px 1px 0 rgba(0, 0, 0, 0.9),
            1px 1px 0 rgba(0, 0, 0, 0.9),
            0 0 3px rgba(0, 0, 0, 1),
            0 0 5px currentColor,
            0 0 8px currentColor;
        box-shadow:
            0 0 30px rgba(0, 0, 0, 0.8),
            0 0 25px rgba(255, 102, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    50% {
        text-shadow:
            -1px -1px 0 rgba(0, 0, 0, 0.9),
            1px -1px 0 rgba(0, 0, 0, 0.9),
            -1px 1px 0 rgba(0, 0, 0, 0.9),
            1px 1px 0 rgba(0, 0, 0, 0.9),
            0 0 3px rgba(0, 0, 0, 1),
            0 0 12px currentColor,
            0 0 18px currentColor;
        box-shadow:
            0 0 30px rgba(0, 0, 0, 0.8),
            0 0 50px rgba(255, 102, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

@keyframes systemRecoveryFlicker {
    0% {
        transform: translate(-50%, -50%) scale(1);
        text-shadow:
            0 0 6px currentColor,
            0 0 12px currentColor,
            0 0 18px currentColor,
            1px 1px 2px rgba(0, 0, 0, 0.7);
        box-shadow:
            0 0 25px rgba(0, 0, 0, 0.8),
            0 0 40px currentColor,
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        opacity: 0.85;
    }

    25% {
        transform: translate(-50%, -50%) scale(1.01);
        text-shadow:
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 30px currentColor,
            1px 1px 3px rgba(0, 0, 0, 0.7);
        box-shadow:
            0 0 35px rgba(0, 0, 0, 0.8),
            0 0 55px currentColor,
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
        opacity: 0.95;
    }

    50% {
        transform: translate(-50%, -50%) scale(0.99);
        text-shadow:
            0 0 4px currentColor,
            0 0 8px currentColor,
            0 0 12px currentColor,
            1px 1px 2px rgba(0, 0, 0, 0.7);
        box-shadow:
            0 0 20px rgba(0, 0, 0, 0.8),
            0 0 30px currentColor,
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        opacity: 0.75;
    }

    75% {
        transform: translate(-50%, -50%) scale(1.005);
        text-shadow:
            0 0 8px currentColor,
            0 0 16px currentColor,
            0 0 24px currentColor,
            1px 1px 3px rgba(0, 0, 0, 0.7);
        box-shadow:
            0 0 30px rgba(0, 0, 0, 0.8),
            0 0 45px currentColor,
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        text-shadow:
            0 0 6px currentColor,
            0 0 12px currentColor,
            0 0 18px currentColor,
            1px 1px 2px rgba(0, 0, 0, 0.7);
        box-shadow:
            0 0 25px rgba(0, 0, 0, 0.8),
            0 0 40px currentColor,
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        opacity: 0.85;
    }
}

@keyframes towerInstallPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 50px rgba(0, 0, 0, 0.8),
            0 0 80px currentColor,
            inset 0 0 20px rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(3.5px) saturate(1.3);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.03);
        box-shadow:
            0 0 60px rgba(0, 0, 0, 0.9),
            0 0 100px currentColor,
            inset 0 0 25px rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(3px) saturate(1.4);
    }
}

/* Enhanced secondary tower installation animation */
@keyframes towerInstallSecondary {
    0% {
        transform: translate(-50%, -50%) translateY(-3px) translateX(0px);
        filter: brightness(1.1) contrast(1.15);
    }

    25% {
        transform: translate(-50%, -50%) translateY(-3px) translateX(-1px);
        filter: brightness(1.15) contrast(1.2);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-3px) translateX(1px);
        filter: brightness(1.05) contrast(1.1);
    }

    75% {
        transform: translate(-50%, -50%) translateY(-3px) translateX(-0.5px);
        filter: brightness(1.2) contrast(1.25);
    }

    100% {
        transform: translate(-50%, -50%) translateY(-3px) translateX(0.5px);
        filter: brightness(1.1) contrast(1.15);
    }
}

/* Glitch scanline animation */
@keyframes glitchScanlines {
    0% {
        transform: translateY(0px);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-1px);
        opacity: 0.7;
    }

    50% {
        transform: translateY(1px);
        opacity: 0.5;
    }

    75% {
        transform: translateY(-0.5px);
        opacity: 0.65;
    }

    100% {
        transform: translateY(0.5px);
        opacity: 0.6;
    }
}

/* Enhanced secondary tower unlock animation - 3D depth pulse (no lateral movement) */
@keyframes towerUnlockSecondary {
    0% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(-2px);
        filter: brightness(1.1) contrast(1.15);
    }

    50% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(3px);
        filter: brightness(1.05) contrast(1.1);
    }

    100% {
        transform: translate(-50%, -50%) perspective(800px) translateZ(-2px);
        filter: brightness(1.1) contrast(1.15);
    }
}

/* ==============================================
   TUTORIAL SYSTEM STYLES
   ============================================== */

/* Tutorial Modal - Updated to match other modals */
#tutorialModal {
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(3px) saturate(1.6) contrast(1.3);
    z-index: 5000;
    justify-content: center;
    align-items: center;
}

/* When panel is shown, use flex display */
#coreStatusUI[style*="display: block"],
#breachStatusUI[style*="display: block"],
#coreStatusUI[style*="display: flex"],
#breachStatusUI[style*="display: flex"],
#tutorialModal.show {
    display: flex !important;
}

/* How To Play uses purple to match button */
.tutorial-content {
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 4px solid #cc44ff;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(204, 68, 255, 0.5), 0 0 15px rgba(204, 68, 255, 0.3) inset;
    /* Desktop: Nice balanced card with good spacing */
    max-height: calc(66vh + 6vw);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin: auto;
    z-index: 66;
}

.tutorial-main {
    flex: 1;
    padding: 3px;
    overflow-y: auto;
    font-size: 12px;
}

.tutorial-section p {
    color: var(--text-color-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Base tutorial section styling */
.tutorial-step,
.tutorial-tip {
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
    transition: all 0.3s ease;
}

/* Info sections - green-ish background */
.tutorial-step {
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(0, 255, 0, 0.2);
}

/* Info sections hover - green-ish */
.tutorial-step:hover {
    background: rgba(0, 255, 0, 0.08);
    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
    transform: translateY(-2px);
}

/* Pro Tip special styling */
.tutorial-tip {
    background: rgba(255, 204, 0, 0.07) !important;
    border: 1px solid rgba(255, 204, 0, 0.66);
}

.tutorial-tip:hover {
    background: rgba(255, 204, 0, 0.08) !important;
    border-color: rgba(255, 204, 0, 0.5);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

.tutorial-section h3 {
    position: relative;
    padding-left: 0;
    color: var(--primary-color);
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
}

/* Upgrade Grid Styling (Uses tutorial grid layout) */
.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
    margin: 12px 0;
    width: 100%;
    box-sizing: border-box;
}

#upgradeModal .hub-upgrade-section-heading {
    grid-column: 1 / -1;
    font-size: clamp(10px, 1.9vw, 12px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 221, 255, 0.82);
    margin: 18px 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 221, 255, 0.22);
    text-shadow: 0 0 10px rgba(0, 221, 255, 0.25);
}

#upgradeModal .hub-upgrade-section-heading:first-child {
    margin-top: 0;
}

/* ==============================================
   UNIFIED CARD STYLING SYSTEM
   Enhanced 5-state visual system for all cards
   ============================================== */

/* Milestone Chip Base */
.milestone-chip {
    position: relative;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 221, 255, 0.05) 19px, rgba(0, 221, 255, 0.05) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 221, 255, 0.05) 19px, rgba(0, 221, 255, 0.05) 20px),
        radial-gradient(ellipse at center, rgba(0, 221, 255, 0.12) 0%, rgba(0, 30, 40, 0.6) 50%, rgba(0, 20, 30, 0.85) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid rgba(0, 221, 255, 0.5);
    border-image: repeating-linear-gradient(45deg, rgba(0, 221, 255, 0.5), rgba(0, 221, 255, 0.3) 10px, rgba(0, 221, 255, 0.5) 20px) 1;
    box-shadow:
        0 0 18px rgba(0, 221, 255, 0.4),
        0 0 30px rgba(0, 221, 255, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 0 25px rgba(0, 221, 255, 0.08),
        inset 0 0 40px rgba(0, 221, 255, 0.03);
    /* Smooth transitions for claim animation - balloon pop and slide-up */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s ease-out,
        height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    transform-origin: center center;
}

/* ===== STATE 1: LOCKED (Can't Afford) — tower-tinted border ===== */
.milestone-chip.locked {
    opacity: 0.82 !important;
    filter: grayscale(0.35) brightness(0.8) !important;
    position: relative;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 255, 136, 0.05) 19px, rgba(0, 255, 136, 0.05) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 255, 136, 0.05) 19px, rgba(0, 255, 136, 0.05) 20px),
        linear-gradient(135deg, rgba(8, 4, 6, 0.96) 0%, rgba(12, 6, 8, 0.92) 100%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pulse-color, #cc4444) 22%, transparent) 0%, transparent 70%) !important;
    border: 2px solid transparent !important;
    border-image: repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--pulse-color, #ff4444) 52%, transparent),
            color-mix(in srgb, var(--pulse-color, #ff4444) 28%, transparent) 10px,
            color-mix(in srgb, var(--pulse-color, #ff4444) 52%, transparent) 20px) 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 0 6px color-mix(in srgb, var(--pulse-color, #cc4444) 28%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.4) !important;
    cursor: not-allowed;
}

/* Scanline effect for locked items (tinted by tower --pulse-color) */
.milestone-chip.locked::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 0%,
            color-mix(in srgb, var(--pulse-color, #cc4444) 18%, transparent) 47%,
            color-mix(in srgb, var(--pulse-color, #cc4444) 38%, transparent) 50%,
            color-mix(in srgb, var(--pulse-color, #cc4444) 18%, transparent) 53%,
            transparent 100%);
    animation: milestoneLockedScanLine 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 20px color-mix(in srgb, var(--pulse-color, #cc4444) 25%, transparent);
}

@keyframes milestoneLockedScanLine {
    0% {
        top: -100%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}

/* ===== STATE 2: LOCKED BUT CAN AFFORD (Ready to Purchase) - Cyan Theme ===== */
.milestone-chip.claimable {
    opacity: 1 !important;
    filter: none !important;
    border: #00ddff solid 2px !important;
    border-radius: 2px !important;
    border-image: repeating-linear-gradient(45deg, #00ddff, rgba(0, 221, 255, 0.7) 10px, #00ddff 20px) 1 !important;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 221, 255, 0.08) 19px, rgba(0, 221, 255, 0.08) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 221, 255, 0.08) 19px, rgba(0, 221, 255, 0.08) 20px),
        radial-gradient(ellipse at center, rgba(0, 221, 255, 0.2) 0%, rgba(0, 40, 50, 0.7) 50%, rgba(0, 30, 40, 0.9) 100%) !important;
    cursor: pointer;
    box-shadow:
        0 0 4px rgba(0, 221, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.milestone-chip.wave-pass-themed {
    --wave-pass-accent: #00ddff;
    --wave-pass-rgb: 0, 221, 255;
    border-color: rgba(var(--wave-pass-rgb), 0.62) !important;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(var(--wave-pass-rgb), 0.06) 19px, rgba(var(--wave-pass-rgb), 0.06) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(var(--wave-pass-rgb), 0.045) 19px, rgba(var(--wave-pass-rgb), 0.045) 20px),
        linear-gradient(135deg, rgba(var(--wave-pass-rgb), 0.06), rgba(0, 0, 0, 0.72)),
        radial-gradient(ellipse at center, rgba(var(--wave-pass-rgb), 0.14) 0%, rgba(0, 30, 40, 0.58) 50%, rgba(0, 20, 30, 0.88) 100%) !important;
    box-shadow:
        0 0 8px rgba(var(--wave-pass-rgb), 0.24),
        0 2px 8px rgba(0, 0, 0, 0.34),
        inset 0 0 18px rgba(var(--wave-pass-rgb), 0.06) !important;
}

.milestone-chip.claimable.wave-pass-themed {
    border-color: var(--wave-pass-accent) !important;
    border-image: repeating-linear-gradient(45deg, var(--wave-pass-accent), rgba(var(--wave-pass-rgb), 0.68) 10px, var(--wave-pass-accent) 20px) 1 !important;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(var(--wave-pass-rgb), 0.08) 19px, rgba(var(--wave-pass-rgb), 0.08) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(var(--wave-pass-rgb), 0.07) 19px, rgba(var(--wave-pass-rgb), 0.07) 20px),
        radial-gradient(ellipse at center, rgba(var(--wave-pass-rgb), 0.2) 0%, rgba(0, 35, 40, 0.72) 50%, rgba(0, 24, 28, 0.92) 100%) !important;
    box-shadow:
        0 0 8px rgba(var(--wave-pass-rgb), 0.32),
        0 0 16px rgba(var(--wave-pass-rgb), 0.18),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 0 16px rgba(var(--wave-pass-rgb), 0.08) !important;
}

/* ===== STATE 3: BUILDING (Timer Active) - Yellow Theme ===== */
.milestone-chip.building {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255, 200, 0, 0.06) 19px, rgba(255, 200, 0, 0.06) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255, 170, 0, 0.08) 19px, rgba(255, 170, 0, 0.08) 20px),
        radial-gradient(ellipse at center, rgba(255, 200, 0, 0.12) 0%, rgba(80, 60, 0, 0.4) 50%, rgba(60, 45, 0, 0.65) 100%) !important;
    border-color: rgba(255, 200, 0, 0.5) !important;
    border-image: repeating-linear-gradient(45deg, rgba(255, 200, 0, 0.5), rgba(255, 170, 0, 0.3) 10px, rgba(255, 200, 0, 0.5) 20px) 1 !important;
    box-shadow:
        0 0 4px rgba(255, 200, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ===== CHIP BADGE STYLES ===== */
.chip-badge {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 204, 204, 0.5);
    border-radius: 10px;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: all 0.3s ease;
}

.chip-badge.locked-badge {
    background: rgba(20, 10, 10, 0.7);
    border-color: rgba(255, 68, 68, 0.6);
    color: rgba(255, 150, 150, 0.9);
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}

.chip-badge.ready-badge {
    background: rgba(0, 40, 50, 0.7);
    border-color: rgba(0, 221, 255, 0.7);
    color: #00ddff;
    text-shadow: 0 0 8px rgba(0, 221, 255, 0.8);
}

.chip-wave {
    font-size: 11px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #00ddff;
    text-shadow: 0 0 10px rgba(0, 221, 255, 0.8);
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 221, 255, 0.45);
    background: linear-gradient(135deg, rgba(0, 221, 255, 0.12), rgba(3, 10, 16, 0.78));
    box-shadow:
        0 0 8px rgba(0, 221, 255, 0.25),
        inset 0 0 7px rgba(0, 221, 255, 0.08);
}

.chip-label {
    font-size: 11px;
    font-weight: 600;
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    margin: 2px 0;
    line-height: 1.3;
}

/* Upgrade Card Styling (Enhanced Base) */
.upgrade-card.tutorial-tower {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 12px;
    margin: 0;
    border-radius: 8px;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 255, 136, 0.05) 19px, rgba(0, 255, 136, 0.05) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 255, 136, 0.05) 19px, rgba(0, 255, 136, 0.05) 20px),
        radial-gradient(ellipse at center, rgba(0, 255, 136, 0.12) 0%, rgba(0, 40, 30, 0.5) 50%, rgba(0, 25, 20, 0.75) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid color-mix(in srgb, var(--pulse-color, #00ff88) 42%, rgba(0, 255, 136, 0.35));
    border-image: none;
    box-shadow:
        0 0 4px color-mix(in srgb, var(--pulse-color, #00ff88) 18%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.upgrade-progress-container {
    margin: 6px 0;
    flex-grow: 1;
}

.upgrade-card.tutorial-tower h4 {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: bold;
    color: #0f0;
    text-align: center;
    line-height: 1.2;
}

.upgrade-card.tutorial-tower p {
    margin: 0 0 6px 0;
    font-size: 10px;
    line-height: 1.25;
    color: #ccc;
    text-align: center;
    flex-grow: 1;
}

.upgrade-progress-bar {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    position: relative;
    margin-top: 3px;
    display: block;
    width: 100%;
}

.upgrade-progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 0 8px var(--primary-color);
}

/* Color-coded evolution progress bars - Red/Green/Blue */
#dmg-evolution-fill {
    background: linear-gradient(90deg, #440000, #ff0000, #ff4444);
    box-shadow: 0 0 8px #ff0000;
    transition: width 0.3s ease-out, box-shadow 0.4s ease-out, filter 0.4s ease-out;
}

#rng-evolution-fill {
    background: linear-gradient(90deg, #004400, #00ff00, #44ff44);
    box-shadow: 0 0 8px #00ff00;
    transition: width 0.3s ease-out, box-shadow 0.4s ease-out, filter 0.4s ease-out;
}

#spd-evolution-fill {
    background: linear-gradient(90deg, #000044, #0000ff, #4444ff);
    box-shadow: 0 0 8px #0000ff;
    transition: width 0.3s ease-out, box-shadow 0.4s ease-out, filter 0.4s ease-out;
}

/* Pulse animations for recent upgrades - color-specific */
/* Evolution pulse animations moved to modal.css as shared utilities */
/* Using: dmgEvolutionPulse, rngEvolutionPulse, spdEvolutionPulse from modal.css */

#dmg-evolution-fill.recently-upgraded {
    animation: dmgEvolutionPulse 0.6s ease-in-out;
}

#rng-evolution-fill.recently-upgraded {
    animation: rngEvolutionPulse 0.6s ease-in-out;
}

#spd-evolution-fill.recently-upgraded {
    animation: spdEvolutionPulse 0.6s ease-in-out;
}

.upgrade-progress-text {
    font-size: 9px;
    color: #ffaa00;
    opacity: 0.9;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2px;
}

/* Wave Pass horizontal card styling - left/right layout */
#wavePassDisplay .milestone-chip,
#idleRewardWavePassDisplay .milestone-chip {
    flex-direction: row !important;
    align-items: center !important;
    padding: 6px 10px !important;
    min-height: auto !important;
}

#wavePassDisplay .milestone-chip .chip-wave,
#idleRewardWavePassDisplay .milestone-chip .chip-wave {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    color: var(--wave-pass-accent, #00ddff) !important;
    border-color: rgba(var(--wave-pass-rgb, 0, 221, 255), 0.48) !important;
    text-shadow: 0 0 10px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.8) !important;
    box-shadow:
        0 0 8px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.24),
        inset 0 0 7px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.08) !important;
}

#wavePassDisplay .milestone-chip .chip-label,
#idleRewardWavePassDisplay .milestone-chip .chip-label {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#wavePassDisplay .milestone-chip .chip-badge,
#idleRewardWavePassDisplay .milestone-chip .chip-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    min-width: 50px !important;
    /* Fixed width to prevent shifting */
    text-align: center !important;
    /* Center text in badge */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#wavePassDisplay .wave-pass-flag,
#idleRewardWavePassDisplay .wave-pass-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 128px;
    padding: 1px 7px;
    border: 1px solid rgba(var(--wave-pass-rgb, 0, 221, 255), 0.48);
    border-radius: 999px;
    color: var(--wave-pass-accent, #00ddff);
    background: linear-gradient(135deg, rgba(var(--wave-pass-rgb, 0, 221, 255), 0.16), rgba(0, 0, 0, 0.56));
    box-shadow:
        0 0 8px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.18),
        inset 0 0 8px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.08);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
    line-height: 1.3;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#wavePassDisplay .milestone-status-flag,
#idleRewardWavePassDisplay .milestone-status-flag {
    color: rgba(var(--wave-pass-rgb, 0, 221, 255), 0.95);
    text-shadow: 0 0 8px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.38);
}

/* Wave Pass Claim Button - Styled to match game aesthetic (now also used as badge) */
#wavePassDisplay .chip-claim-btn,
#idleRewardWavePassDisplay .chip-claim-btn {
    padding: 2px 6px !important;
    font-size: 8px !important;
    white-space: nowrap !important;
    min-width: 50px !important;
    /* Fixed width to match badge and prevent shifting */
    text-align: center !important;
    /* Center text */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(var(--wave-pass-rgb, 0, 221, 255), 0.25), rgba(var(--wave-pass-rgb, 0, 221, 255), 0.35)) !important;
    border: 2px solid var(--wave-pass-accent, #00ddff) !important;
    color: var(--wave-pass-accent, #00ddff) !important;
    font-weight: 600 !important;
    text-shadow:
        0 0 8px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.8),
        0 0 12px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.6),
        0 1px 2px rgba(0, 0, 0, 0.9) !important;
    box-shadow:
        0 0 12px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.5),
        0 0 20px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.3),
        inset 0 0 8px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.2),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border-radius: 6px !important;
}

#wavePassDisplay .chip-claim-btn:hover,
#idleRewardWavePassDisplay .chip-claim-btn:hover {
    background: linear-gradient(135deg, rgba(var(--wave-pass-rgb, 0, 221, 255), 0.4), rgba(var(--wave-pass-rgb, 0, 221, 255), 0.5)) !important;
    border-color: #00ffff !important;
    color: #00ffff !important;
    box-shadow:
        0 0 18px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.7),
        0 0 30px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.5),
        inset 0 0 12px rgba(var(--wave-pass-rgb, 0, 221, 255), 0.3),
        0 3px 6px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-1px) !important;
}

#wavePassDisplay .chip-claim-btn:active,
#idleRewardWavePassDisplay .chip-claim-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow:
        0 0 10px rgba(0, 221, 255, 0.4),
        0 0 15px rgba(0, 221, 255, 0.3),
        inset 0 0 6px rgba(0, 221, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Wave Pass Scrollable Container */
#wavePassDisplay,
#idleRewardWavePassDisplay {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

/* Pulse animation for claimable wave pass items - Joyful bouncy glow effect */
#wavePassDisplay .milestone-chip.claimable,
#idleRewardWavePassDisplay .milestone-chip.claimable {
    animation: claimablePulseJoyful 1.8s ease-in-out infinite, claimableGlow 1.8s ease-in-out infinite;
    position: relative;
    cursor: pointer;
}

#wavePassDisplay.wave-pass-reflowing .milestone-chip.claimable,
#idleRewardWavePassDisplay.wave-pass-reflowing .milestone-chip.claimable,
#wavePassDisplay .milestone-chip.claiming,
#idleRewardWavePassDisplay .milestone-chip.claiming {
    animation: none !important;
    will-change: transform;
}

#wavePassDisplay.wave-pass-reflowing .milestone-chip.claimable::before,
#idleRewardWavePassDisplay.wave-pass-reflowing .milestone-chip.claimable::before,
#wavePassDisplay .milestone-chip.claiming::before,
#idleRewardWavePassDisplay .milestone-chip.claiming::before {
    animation: none !important;
}

#wavePassDisplay .milestone-chip.claiming,
#idleRewardWavePassDisplay .milestone-chip.claiming {
    pointer-events: none;
}

/* Joyful glow overlay for claimable cards */
#wavePassDisplay .milestone-chip.claimable::before,
#idleRewardWavePassDisplay .milestone-chip.claimable::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(0, 221, 255, 0.1), rgba(255, 215, 0, 0.15));
    opacity: 0;
    animation: claimableGlowOverlay 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes claimablePulseJoyful {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 6px rgba(0, 221, 255, 0.25),
            0 0 10px rgba(255, 215, 0, 0.12),
            0 2px 4px rgba(0, 0, 0, 0.3);
    }

    25% {
        transform: scale(1.003);
    }

    50% {
        transform: scale(1.008);
        box-shadow:
            0 0 10px rgba(0, 221, 255, 0.35),
            0 0 14px rgba(255, 215, 0, 0.2),
            0 0 18px rgba(0, 221, 255, 0.12),
            0 2px 4px rgba(0, 0, 0, 0.3);
    }

    75% {
        transform: scale(1.003);
    }
}

/* Glow intensity animation for claimable cards */
@keyframes claimableGlow {

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

    50% {
        filter: brightness(1.05);
    }
}

/* Glow overlay animation */
@keyframes claimableGlowOverlay {

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

    50% {
        opacity: 0.25;
        transform: scale(1.005);
    }
}

/* Hover effect for claimable cards - very subtle pop on hover */
#wavePassDisplay .milestone-chip.claimable:hover,
#idleRewardWavePassDisplay .milestone-chip.claimable:hover {
    animation: none;
    transform: scale(1.01);
    box-shadow:
        0 0 10px rgba(0, 221, 255, 0.4),
        0 0 14px rgba(255, 215, 0, 0.25),
        0 0 18px rgba(0, 221, 255, 0.15),
        0 2px 5px rgba(0, 0, 0, 0.32);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: brightness(1.04);
}

/* Scrollbar styling for wave pass */
#wavePassDisplay::-webkit-scrollbar,
#idleRewardWavePassDisplay::-webkit-scrollbar {
    width: 6px;
}

#wavePassDisplay::-webkit-scrollbar-track,
#idleRewardWavePassDisplay::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#wavePassDisplay::-webkit-scrollbar-thumb,
#idleRewardWavePassDisplay::-webkit-scrollbar-thumb {
    background: rgba(0, 221, 255, 0.4);
    border-radius: 4px;
}

#wavePassDisplay::-webkit-scrollbar-thumb:hover,
#idleRewardWavePassDisplay::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 221, 255, 0.6);
}

/* Milestone Card Content Structure */
.milestone-card-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    position: relative;
    /* For absolute positioning of badge */
}

/* Line 1: Wave + Label + Badge (desktop) */
.milestone-line-1 {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.milestone-line-1 .chip-wave {
    font-size: 10px;
    flex-shrink: 0;
    font-weight: 600;
}

.milestone-line-1 .chip-label {
    margin: 0;
    line-height: 1.2;
    font-size: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Line 2: Rewards + Claim Button (mobile) */
.milestone-line-2 {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.milestone-reward {
    font-size: 10px;
    white-space: nowrap;
}

.milestone-reward.units-reward {
    color: #ffdd00;
    font-weight: bold;
}

.milestone-reward.energy-reward {
    color: #00ddff;
    font-weight: 600;
}

.milestone-reward .reward-icon {
    font-size: 12px;
}

/* Cloned in-game icons (energy/units) — image-based, 16% larger to match stats */
.milestone-reward .reward-icon .stat-icon {
    display: inline-block;
    vertical-align: middle;
}

.milestone-reward .reward-icon .icon-svg,
.milestone-reward .reward-icon .icon-img {
    width: 1.23em;
    height: 1.23em;
    vertical-align: middle;
    object-fit: contain;
}

/* Line 3 removed - no longer needed */

/* Pipe separators */
.milestone-separator {
    color: #888;
    font-size: 10px;
    flex-shrink: 0;
}

/* Badge Responsive Behavior - Single badge element in line 2, moved to line 1 on desktop via CSS */
.milestone-badge {
    flex-shrink: 0;
    margin-left: auto;
}

/* Mobile: badge stays on line 2 (default position) */
@media (max-width: 640px) {
    .milestone-line-2 .milestone-badge {
        position: static;
        margin-left: auto;
    }
}

/* Milestones & Rewards styles moved to css/milestone-reward.css */
/* Shared Units Display styles moved to css/simple-modals.css */

/* ==============================================
   REUSABLE LOCKED ELEMENT STYLING
   For CoreUI locked fieldsets and Tower Wheel locked towers
   ============================================== */

/* ==============================================
   UNLOCK SYSTEM STYLING
   ============================================== */

/* Enhanced Locked Item Styling - More Visible but Still Disabled */
.locked-item {
    opacity: 0.85 !important;
    /* Reduced from 0.9 for more locked feel */
    filter: grayscale(0.3) brightness(0.8) !important;
    /* More grayscale for locked appearance */
    position: relative;
    padding: 4px !important;
    background:
        linear-gradient(135deg, rgba(8, 4, 6, 0.95) 0%, rgba(12, 6, 8, 0.9) 100%),
        /* Slightly lighter background */
        radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.2) 0%, transparent 70%) !important;
    /* Increased red tint */
    border: 1px dashed rgba(255, 68, 68, 0.6) !important;
    /* Game-themed dashed border */
    border-image: linear-gradient(45deg, rgba(255, 68, 68, 0.4), rgba(255, 68, 68, 0.8), rgba(255, 68, 68, 0.4)) 1;
    backdrop-filter: blur(2px) saturate(0.8) !important;
    box-shadow:
        0 0 6px rgba(255, 68, 68, 0.25),
        0 0 10px rgba(255, 68, 68, 0.15),
        inset 0 0 4px rgba(255, 68, 68, 0.1),
        inset 0 0 8px rgba(0, 0, 0, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 68, 68, 0.2) !important;
    animation: lockedFieldsetPulse 3s ease-in-out infinite, lockedBorderPulse 2s ease-in-out infinite;
    cursor: not-allowed;
}

/* Maximum vibrant locked styling - even more color, minimal lock */
.locked-item.drone-section {
    border: 1px dashed rgba(0, 255, 255, 0.9) !important;
    /* Increased opacity */
    border-bottom: 1px dashed rgba(0, 255, 255, 0.9) !important;
    background: rgba(0, 255, 255, 0.25) !important;
    /* Increased background opacity */
}

.locked-item.boss-critter-section {
    border: 1px dashed rgba(190, 5, 39, 0.9) !important;
    /* Increased opacity */
    border-bottom: 1px dashed rgba(190, 5, 39, 0.9) !important;
    background: rgba(190, 5, 39, 0.25) !important;
    /* Increased background opacity */
}

.locked-item.critter-section {
    border: 1px dashed rgba(255, 255, 0, 0.9) !important;
    /* Increased opacity */
    border-bottom: 1px dashed rgba(255, 255, 0, 0.9) !important;
    background: rgba(255, 255, 0, 0.25) !important;
    /* Increased background opacity */
}

.locked-item.overclock-section {
    border: 1px dashed rgba(255, 165, 0, 0.8) !important;
    border-bottom: 1px dashed rgba(255, 165, 0, 0.8) !important;
    background: rgba(255, 165, 0, 0.18) !important;
}

.locked-item.emp-section {
    border: 1px dashed rgba(238, 238, 238, 0.9) !important;
    /* Increased opacity */
    border-bottom: 1px dashed rgba(238, 238, 238, 0.9) !important;
    background: rgba(238, 238, 238, 0.25) !important;
    /* Increased background opacity */
}

.locked-item.ram-trap-section {
    border: 1px dashed rgba(255, 80, 200, 0.85) !important;
    border-bottom: 1px dashed rgba(255, 80, 200, 0.85) !important;
    background: rgba(255, 80, 200, 0.18) !important;
}

.locked-item.drone-section.drone-evolution-scout,
.locked-item.drone-section.drone-evolution-recon,
.locked-item.drone-section.drone-evolution-hunter,
.locked-item.drone-section.drone-evolution-wraith,
.locked-item.drone-section.drone-evolution-stalker,
.locked-item.drone-section.drone-evolution-sentinel,
.locked-item.drone-section.drone-evolution-apex {
    border: 1px dashed rgba(0, 255, 255, 0.8) !important;
    border-bottom: 1px dashed rgba(0, 255, 255, 0.8) !important;
    background: rgba(0, 255, 255, 0.18) !important;
}

.locked-item.boss-critter-section .boss-critter-section-header {
    color: rgba(190, 5, 39, 0.95) !important;
    text-shadow: 0 0 3px rgba(190, 5, 39, 0.5) !important;
    border: 1px dashed rgba(190, 5, 39, 0.7) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

.locked-item.critter-section .critter-section-header {
    color: rgba(255, 255, 0, 0.85) !important;
    text-shadow: 0 0 3px rgba(255, 255, 0, 0.4) !important;
    border: 1px dashed rgba(255, 255, 0, 0.7) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

.locked-item.overclock-section .overclock-section-header {
    color: rgba(255, 165, 0, 0.85) !important;
    text-shadow: 0 0 3px rgba(255, 165, 0, 0.4) !important;
    border: 1px dashed rgba(255, 165, 0, 0.7) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

.locked-item.emp-section .emp-section-header {
    color: rgba(238, 238, 238, 0.85) !important;
    text-shadow: 0 0 3px rgba(238, 238, 238, 0.4) !important;
    border: 1px dashed rgba(238, 238, 238, 0.7) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

.locked-item.ram-trap-section .ram-trap-section-header {
    color: rgba(255, 160, 220, 0.9) !important;
    text-shadow: 0 0 3px rgba(255, 80, 200, 0.45) !important;
    border: 1px dashed rgba(255, 80, 200, 0.65) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Maximum vibrant locked headers - even more color, minimal dimming */
.locked-item.drone-section .drone-section-header {
    color: rgba(0, 255, 255, 0.85) !important;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.4) !important;
    border: 1px dashed rgba(0, 255, 255, 0.7) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Hide cooldown bars for locked panels */
.locked-item .cooldown-bar {
    display: none !important;
}

/* Extra specificity for breach panel cooldown bars when locked */
#breachStatusUI .locked-item .cooldown-bar,
#coreStatusUI .locked-item .cooldown-bar,
fieldset.locked-item .cooldown-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.locked-item::before {
    content: 'LOCK';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    color: rgba(255, 68, 68, 0.3);
    text-shadow: 0 0 2px rgba(255, 68, 68, 0.2);
    z-index: 10;
    animation: lockedIconPulse 2s ease-in-out infinite;
}

/* Animated scan line effect for locked fieldsets - more subtle game-themed */
/* Uses transform instead of left to stay on GPU compositor and prevent layout reflows */
.locked-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 68, 68, 0.15) 20%,
            rgba(255, 68, 68, 0.25) 50%,
            rgba(255, 68, 68, 0.15) 80%,
            transparent 100%);
    animation: lockedScanLine 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

/* Enhanced legend styling for locked items - reduced glow */
.locked-item legend {
    color: rgba(255, 200, 200, 0.95) !important;
    font-weight: bold !important;
    text-shadow: 0 0 3px rgba(255, 100, 100, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    border-bottom: 2px solid rgba(255, 68, 68, 0.5) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 68, 68, 0.3) !important;
}

/* Enhanced stats styling for locked items */
.locked-item .stats-container .status-line {
    color: rgba(220, 220, 220, 0.9) !important;
    text-shadow: 0 0 4px rgba(255, 100, 100, 0.3) !important;
}

.locked-item .stats-container .label {
    color: rgba(255, 180, 180, 0.95) !important;
    text-shadow: 0 0 6px rgba(255, 100, 100, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-weight: 600 !important;
}

.locked-item .stats-container .value {
    color: rgba(255, 200, 200, 0.9) !important;
    text-shadow: 0 0 4px rgba(255, 100, 100, 0.4), 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    font-weight: 500 !important;
}

/* Animations for locked fieldsets */
@keyframes lockedFieldsetPulse {

    0%,
    100% {
        box-shadow:
            0 0 12px rgba(255, 68, 68, 0.4),
            0 0 20px rgba(255, 68, 68, 0.2),
            inset 0 0 8px rgba(255, 68, 68, 0.15),
            inset 0 0 15px rgba(0, 0, 0, 0.6),
            0 4px 15px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 68, 68, 0.3);
    }

    50% {
        box-shadow:
            0 0 18px rgba(255, 68, 68, 0.6),
            0 0 30px rgba(255, 68, 68, 0.4),
            inset 0 0 12px rgba(255, 68, 68, 0.25),
            inset 0 0 20px rgba(0, 0, 0, 0.7),
            0 6px 20px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 68, 68, 0.5);
    }
}

@keyframes lockedIconPulse {

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

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes lockedScanLine {

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

    50% {
        transform: translateX(100%);
        opacity: 1;
    }
}

/* Sci-fi border pulse animation for locked items */
@keyframes lockedBorderPulse {

    0%,
    100% {
        border-color: rgba(255, 68, 68, 0.5);
        filter: brightness(1);
    }

    50% {
        border-color: rgba(255, 68, 68, 0.8);
        filter: brightness(1.15);
    }
}

/* Locked abilities: same grid + similar typography as unlocked; dimmed + non-interactive */
#coreStatusUI .locked-item .actions-container.compact-buttons,
#breachStatusUI .locked-item .actions-container.compact-buttons,
.locked-item .actions-container.compact-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 6px;
    align-items: stretch;
}

#coreStatusUI .locked-item .actions-container:not(.compact-buttons)>.upgrade-btn,
#breachStatusUI .locked-item .actions-container:not(.compact-buttons)>.upgrade-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Locked abilities: buttons inherit their section's unlocked styling;
   the .locked-item wrapper already dims/grays the whole fieldset,
   so we only need pointer + cursor overrides here. */
.locked-item .upgrade-btn,
.locked-item button.upgrade-btn {
    cursor: not-allowed !important;
    pointer-events: none !important;
    font-size: clamp(9px, 1.05vw, 11px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Placeholder tabs: show a dim cooldown track so layout matches EMP/Ram */
/* Allow fieldset clicking for collapsible behavior */
.locked-item {
    pointer-events: auto !important;
    contain: layout style;
}

.locked-item legend {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Enhanced Unlock progress container */
.unlock-progress-container {
    position: relative;
    margin-top: 8px;
    padding: 6px;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(20, 10, 0, 0.7)),
        radial-gradient(circle at 50% 50%, rgba(255, 170, 0, 0.1) 0%, transparent 70%);
    border-radius: 4px;
    border: 1px dashed rgba(255, 170, 0, 0.5);
    box-shadow:
        0 0 6px rgba(255, 170, 0, 0.2),
        inset 0 0 4px rgba(255, 170, 0, 0.05);
    animation: unlockProgressPulse 2s ease-in-out infinite;
    /* Smooth transitions to prevent flickering when visibility toggles */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, height 0.3s ease-out, margin 0.3s ease-out, padding 0.3s ease-out;
}

.unlock-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.unlock-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8800 0%, #ffaa00 50%, #ffcc00 100%);
    border-radius: 4px;
    transition: width 0.4s ease-out;
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
    will-change: width;
}

.unlock-progress-text {
    font-size: 10px;
    color: #ffaa00;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 170, 0, 0.6);
    line-height: 1.2;
}

/* Animations for unlock progress */
@keyframes unlockProgressPulse {

    0%,
    100% {
        box-shadow:
            0 0 8px rgba(255, 170, 0, 0.3),
            inset 0 0 6px rgba(255, 170, 0, 0.1);
    }

    50% {
        box-shadow:
            0 0 12px rgba(255, 170, 0, 0.5),
            inset 0 0 8px rgba(255, 170, 0, 0.2);
    }
}

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

    100% {
        left: 100%;
    }
}

/* Unlocked item styling */
.unlocked-item {
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

.unlocked-item::before {
    content: 'OK';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    color: rgba(0, 255, 0, 0.8);
    z-index: 10;
}

/* Mobile-specific unlock styling - consolidated into main media query section below */

/* Button Styling for Upgrade Cards - Compact Chip Style */
.upgrade-card.tutorial-tower .game-btn {
    width: 100%;
    font-size: 10px;
    padding: 1px;
    margin-top: 4px;
    line-height: 1.2;
}

/* Button State Styling for HUB Modal */
.upgrade-card.tutorial-tower .game-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #333;
    color: #f00;
}

.upgrade-card.tutorial-tower .game-btn.disabled:hover {
    background: rgba(128, 128, 128, 0.3);
    color: #666;
    border-color: #444;
    box-shadow: none;
    transform: none;
}

/* Border styling for affordable upgrade cards - cheaper than glow animation */
/* Note: Specific rules for locked.can-afford and unlocked.can-afford are in the UNIFIED CARD STYLING SYSTEM section */
.upgrade-card.can-afford {
    border-width: 4px;
    border-color: var(--pulse-color, #00ff88);
    border-image: repeating-linear-gradient(45deg, var(--pulse-color, #00ff88), rgba(0, 255, 136, 0.6) 10px, var(--pulse-color, #00ff88) 20px) 1;
}

/* General maxed rule - more specific tutorial-tower.maxed rule in unified system section */
.upgrade-card.disabled {
    opacity: 0.4;
    border-color: #ff6666;
    background: rgba(255, 102, 102, 0.1);
}

.upgrade-card.disabled h4 {
    color: #ff6666;
}

.upgrade-card.disabled p {
    color: #ffaaaa;
}

/* HUB Button States */
#upgradesBtn.disabled {
    opacity: 0.66;
    font-size: 66%;
    cursor: not-allowed;
    background: rgba(255, 0, 0, 0.2);
    color: #ff6666;
    border: 2px dashed #ff9900;
    padding: 1% 5%;
}

/* Allow pulsing animation even when disabled if upgrades are available */
#upgradesBtn.disabled.upgrade-available-pop {
    opacity: 0.7 !important;
    animation: upgradePop 2s infinite !important;
}

#upgradesBtn.upgrade-available-pop {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1));
    color: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

/* Upgrade Pop Animation */
@keyframes upgradePop {
    0% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
}

/* New Record Notification Styles */
#new-record-notification {
    z-index: 1001;
}

/* Mobile adjustments for notifications - consolidated into main media query section below */

/* New Record Notification Animation - positioned over wave (preserves translate) */
@keyframes newRecordPulse {
    0% {
        box-shadow: 0 0 13px rgba(0, 255, 153, 0.6), 0 0 25px rgba(0, 255, 153, 0.3);
        transform: translate(-50%, -50%) scale(0.84);
    }

    50% {
        box-shadow: 0 0 21px rgba(0, 255, 153, 0.9), 0 0 38px rgba(0, 255, 153, 0.5), 0 0 50px rgba(0, 204, 204, 0.3);
        transform: translate(-50%, -50%) scale(0.907);
    }

    100% {
        box-shadow: 0 0 13px rgba(0, 255, 153, 0.6), 0 0 25px rgba(0, 255, 153, 0.3);
        transform: translate(-50%, -50%) scale(0.84);
    }
}

/* New Record Notification Animation - fallback positioning */
@keyframes newRecordPulseFallback {
    0% {
        box-shadow: 0 0 13px rgba(0, 255, 153, 0.6), 0 0 25px rgba(0, 255, 153, 0.3);
        transform: translateY(0) scale(0.84);
    }

    50% {
        box-shadow: 0 0 21px rgba(0, 255, 153, 0.9), 0 0 38px rgba(0, 255, 153, 0.5), 0 0 50px rgba(0, 204, 204, 0.3);
        transform: translateY(0) scale(0.907);
    }

    100% {
        box-shadow: 0 0 13px rgba(0, 255, 153, 0.6), 0 0 25px rgba(0, 255, 153, 0.3);
        transform: translateY(0) scale(0.84);
    }
}

/* New Record Title Glow Animation */
@keyframes newRecordGlow {

    0%,
    100% {
        color: #00ff99;
        text-shadow: 0 0 15px #00ff99, 0 0 30px #00ff99, 0 0 45px #00cccc;
    }

    50% {
        color: #00ffff;
        text-shadow: 0 0 25px #00ff99, 0 0 45px #00ff99, 0 0 60px #00cccc, 0 0 75px rgba(0, 204, 204, 0.5);
    }
}

/* ===== Highest Wave Pop Animations ===== */

/* In-game single pop when highest wave updates (one-shot) */
@keyframes highestWaveUpdatePop {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    25% {
        transform: scale(1.4);
        filter: brightness(1.6);
    }

    50% {
        transform: scale(0.95);
        filter: brightness(1.1);
    }

    75% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }

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

/* Game over rhythmic pop - heartbeat-style double-pop pattern */
@keyframes highestWaveRhythmicPop {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
    }

    /* First pop - strong */
    5% {
        transform: scale(1.28);
        text-shadow: 0 0 18px rgba(255, 170, 0, 1), 0 0 35px rgba(255, 100, 0, 0.6);
    }

    10% {
        transform: scale(0.97);
        text-shadow: 0 0 10px rgba(255, 170, 0, 0.7);
    }

    /* Second pop - softer echo */
    15% {
        transform: scale(1.14);
        text-shadow: 0 0 14px rgba(255, 170, 0, 0.9), 0 0 25px rgba(255, 100, 0, 0.4);
    }

    20% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
    }

    /* Rest period - calm breathing */
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 10px rgba(255, 170, 0, 0.7);
    }
}

/* Game over rhythmic pop for NEW RECORD - more intense with color shift */
@keyframes highestWaveRecordPop {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(0, 255, 153, 0.6);
        color: #ffaa00;
    }

    /* First pop - strong */
    5% {
        transform: scale(1.35);
        text-shadow: 0 0 22px rgba(0, 255, 153, 1), 0 0 40px rgba(0, 204, 204, 0.7);
        color: #00ff99;
    }

    10% {
        transform: scale(0.96);
        text-shadow: 0 0 10px rgba(0, 255, 153, 0.7);
        color: #ffcc44;
    }

    /* Second pop - echo */
    15% {
        transform: scale(1.18);
        text-shadow: 0 0 16px rgba(0, 255, 153, 0.9), 0 0 30px rgba(0, 204, 204, 0.5);
        color: #44ffaa;
    }

    20% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(0, 255, 153, 0.6);
        color: #ffaa00;
    }

    /* Rest - subtle breathing */
    50% {
        transform: scale(1.03);
        text-shadow: 0 0 12px rgba(0, 255, 153, 0.7);
        color: #ffbb22;
    }
}

/* Applied class for in-game pop — anchor at badge/trophy so pop reads as “from” the number */
.highest-wave-pop {
    transform-origin: center center;
    animation: highestWaveUpdatePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, filter;
}

/* Wave trophy indicator — hollow stroke SVG, appears when player reaches/passes highest wave; tight to number */
.wave-trophy {
    margin-bottom: 5%;
    display: inline-block;
    font-size: 0.86em;
    margin-left: 2px;
    vertical-align: middle;
    color: #ffd700;
    filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.8));
    animation: trophyAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
}

.wave-trophy .trophy-svg,
.wave-trophy .trophy-img {
    display: block;
    width: 1.15em;
    height: 1.15em;
    object-fit: contain;
    border-radius: 50%;
}

.wave-trophy.trophy-pulse {
    animation: trophyPulse 2.4s ease-in-out infinite;
    will-change: transform, filter;
}

/* Fade in after path transition / alert (trophy stays visible once earned) */
.wave-trophy.trophy-fade-in {
    animation: trophyFadeIn 0.5s ease-out forwards;
}

/* Highest Wave row — same trophy glyph as #waveTrophy; always visible, pairs with Units chip icon */
.wave-stat-item-highest {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2px;
}

.wave-highest-trophy {
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    margin-bottom: 4%;
    vertical-align: middle;
    color: #e8c040;
    filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.65));
    opacity: 0.94;
    animation: waveHighestTrophyGlow 4.5s ease-in-out infinite;
}

.wave-highest-trophy .trophy-svg,
.wave-highest-trophy .trophy-img {
    display: block;
    width: 1.06em;
    height: 1.06em;
    object-fit: contain;
    border-radius: 50%;
}

@keyframes waveHighestTrophyGlow {

    0%,
    100% {
        opacity: 0.88;
        filter: drop-shadow(0 0 3px rgba(255, 200, 80, 0.5));
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(255, 215, 100, 0.85));
    }
}

@keyframes trophyFadeIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

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

/* Energy & Units stat icons - lean, game-themed (match trophy vibe) */
.energy-row,
.units-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Resource labels — tint matches row icon (cyan energy / orange units) */
#stats .resource-field-label {
    color: #00ddff;
    font-weight: 600;
    font-size: 0.88em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 221, 255, 0.35);
}

#unitsDisplay .resource-field-label {
    color: #ffaa00;
    font-weight: 600;
    font-size: 0.88em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.35);
}

#stats .resource-field-label::after,
#unitsDisplay .resource-field-label::after {
    content: ':';
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.stat-icon .icon-svg {
    display: block;
    color: inherit;
}

.stat-icon .icon-img {
    display: block;
    width: clamp(18px, 2.2vw, 22px);
    height: clamp(18px, 2.2vw, 22px);
    object-fit: contain;
    border-radius: 50%;
}

/* Energy icon: filter stack set in JS (--energy-icon-filter) from same RGB as #energy tally */
#stats .energy-icon .icon-img {
    filter: var(--energy-icon-filter, drop-shadow(0 0 4px var(--energy-number-glow, rgba(0, 221, 255, 0.75))));
}

#unitsDisplay .units-icon .icon-img {
    filter: drop-shadow(0 0 5px rgba(255, 170, 0, 0.6));
}

.hud-hub-purchase-flag {
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-left: 8px;
    padding: 5px 10px;
    min-width: 94px;
    overflow: hidden;
    border: 1px solid #0ff;
    border-radius: 6px;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0, 221, 255, 0.08) 8px, rgba(0, 221, 255, 0.08) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0, 221, 255, 0.08) 8px, rgba(0, 221, 255, 0.08) 9px),
        radial-gradient(ellipse at center, rgba(0, 221, 255, 0.18) 0%, rgba(0, 20, 30, 0.78) 54%, #000 100%);
    color: #00ddff;
    font-size: clamp(0.46em, 0.82vw, 0.56em);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        0 0 8px rgba(0, 221, 255, 0.32),
        inset 0 0 8px rgba(0, 221, 255, 0.14);
    transform-origin: center;
    animation: hubHudReadyPulse 2.6s ease-in-out infinite;
}

.hud-hub-purchase-flag::before {
    content: '';
    display: none;
}

.hud-hub-purchase-flag::after {
    content: '';
    position: absolute;
    inset: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    opacity: 0.14;
    transform: translateX(-120%);
    animation: hubHudReadyScan 3.8s ease-in-out infinite;
}

.hud-hub-purchase-flag__label {
    position: relative;
    z-index: 1;
    color: #9ff8ff;
    white-space: nowrap;
    text-shadow: 0 0 5px rgba(0, 221, 255, 0.5);
}

.hud-hub-purchase-flag__cost {
    position: relative;
    z-index: 1;
    color: #ffcc00;
    font-size: 0.95em;
    text-shadow: 0 0 6px rgba(255, 204, 0, 0.7);
}

@keyframes hubHudReadyPulse {
    0%,
    100% {
        opacity: 0.86;
        transform: translateY(0) scale(0.995);
        box-shadow:
            0 0 7px rgba(0, 221, 255, 0.28),
            inset 0 0 8px rgba(0, 221, 255, 0.12);
    }
    50% {
        opacity: 1;
        transform: translateY(-0.5px) scale(1.01);
        box-shadow:
            0 0 11px rgba(0, 221, 255, 0.46),
            0 0 16px rgba(0, 255, 136, 0.12),
            inset 0 0 10px rgba(0, 221, 255, 0.18);
    }
}

@keyframes hubHudReadyScan {
    0%,
    42% {
        transform: translateX(-120%);
    }
    64% {
        transform: translateX(120%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* Force red tally + icon when critically low or core damaged (--energy-number-* still set but overridden) */
#stats.energy-low .energy-number,
#stats.critical .energy-number,
#stats.core-damaged .energy-number {
    color: #ff3333 !important;
    text-shadow: 0 0 8px rgba(255, 51, 51, 0.9);
}

#stats.energy-low .energy-icon,
#stats.critical .energy-icon,
#stats.core-damaged .energy-icon {
    filter: hue-rotate(160deg) saturate(2) drop-shadow(0 0 6px rgba(255, 51, 51, 0.85)) !important;
}

/* Avoid stacking img + span filters in danger states (parent handles tint) */
#stats.energy-low .energy-icon .icon-img,
#stats.critical .energy-icon .icon-img,
#stats.core-damaged .energy-icon .icon-img {
    filter: none !important;
}

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

    60% {
        opacity: 1;
        transform: scale(1.3) rotate(8deg);
    }

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

@keyframes trophyPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 200, 0, 0.8));
    }

    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px rgba(255, 200, 0, 1)) drop-shadow(0 0 14px rgba(255, 170, 0, 0.5));
    }
}

/* Applied class for game over rhythmic pop */
.highest-wave-rhythmic {
    animation: highestWaveRhythmicPop 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
    display: inline-block;
    /* Required for transform on inline elements */
}

/* Applied class for game over NEW RECORD rhythmic pop */
.highest-wave-record-rhythmic {
    animation: highestWaveRecordPop 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
    display: inline-block;
}

.upgrade-card.maxed .game-btn {
    background: #333;
    color: #fff;
    border: 1px dashed #555;
    cursor: default;
    opacity: 0.7;
}

.upgrade-card.maxed .game-btn:hover {
    transform: none;
    box-shadow: none;
}

/* Card State: Can't Afford (Red Button) */
.upgrade-card:not(.can-afford):not(.maxed) .game-btn {
    color: #ff4444;
    border-color: #ff4444;
}

.upgrade-card:not(.can-afford):not(.maxed) .game-btn:hover {
    background: rgba(255, 0, 0, 0.2);
    color: #ff6666;
    border-color: rgba(255, 0, 0, 0.4);
    cursor: not-allowed;
}

.tutorial-section h3::before {
    content: "";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 0.8em;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Tutorial Cards */
.tutorial-tower {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    padding: 15px;
    text-align: center;
}

#coreStatusUI .upgrade-btn:hover:not(:disabled)::before,
#breachStatusUI .upgrade-btn:hover:not(:disabled)::before {
    left: 100%;
}

.tutorial-tower h4 {
    color: var(--primary-color);
    margin: 0 0 8px 0;
    font-size: 14px;
}

.tutorial-tower p {
    color: var(--text-color-light);
    font-size: 12px;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.tutorial-step h4,
.tutorial-tip h4 {
    color: var(--accent-color);
    margin: 0 0 10px 0;
    font-size: 14px;
}

/* ==============================================
   CONSOLIDATED MOBILE MEDIA QUERIES
   ============================================== */

/* ==============================================
   MOBILE-FIRST OPTIMIZATION COMPLETE
   ==============================================

   ⚠️  NOTE: CSS CLEANUP STATUS:
   ✅ Simplified structure for mobile app deployment
   ✅ Default styles above optimized for mobile devices

   📱 REMAINING ACTIVE BREAKPOINTS:
   • Default styles (mobile-optimized base)
   🎯 This CSS is now optimized for mobile app conversion
   ============================================== */

/* === PRIMARY MOBILE TARGET - 480px AND BELOW === */

/* ==============================================
   CONSOLIDATED MEDIA QUERIES (Mobile-First)
   ============================================== */

/* Mobile-first stacked layout - all screens use same layout */

/* ==============================================
   MUSIC PLAYER STYLING
   ============================================== */

/* Music status label (PLAYING:, PAUSED:, etc.) */
.music-status-label {
    color: #00cccc !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(0, 204, 204, 0.6) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pause text styling - larger and more prominent */
.styled-pause-indicator {
    color: #00cccc;
    font-size: clamp(11px, 2.5vw, 14px) !important;
    /* 16% larger */
    background: rgba(0, 204, 204, 0.15);
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid rgba(0, 204, 204, 0.5);
    box-shadow: 0 0 8px rgba(0, 204, 204, 0.3);
    text-shadow: 0 0 4px rgba(0, 204, 204, 0.8);
    text-align: center;
    margin: 5px 0 0 0;
    letter-spacing: 0.5px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Blood pulse animation for non-perfect wave pause indicator */
@keyframes bloodPulse {

    0%,
    100% {
        color: #ff3333;
        /* Deep red */
        border-color: rgba(255, 51, 51, 0.6);
        box-shadow: 0 0 10px rgba(255, 51, 51, 0.4), 0 0 15px rgba(255, 51, 51, 0.2);
        text-shadow: 0 0 6px rgba(255, 51, 51, 0.9);
        background: rgba(255, 51, 51, 0.2);
    }

    50% {
        color: #ff6600;
        /* Orange */
        border-color: rgba(255, 102, 0, 0.6);
        box-shadow: 0 0 12px rgba(255, 102, 0, 0.5), 0 0 18px rgba(255, 102, 0, 0.3);
        text-shadow: 0 0 8px rgba(255, 102, 0, 1);
        background: rgba(255, 102, 0, 0.25);
    }
}

/* Apply blood pulse animation when wave is in progress */
.styled-pause-indicator.wave-in-progress {
    animation: bloodPulse 1.2s ease-in-out infinite;
}

/* ==============================================
   MUSIC TRACK INFO RESPONSIVE LAYOUT
   ============================================== */

/* Desktop: Track title and counter inline */
.track-info-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

#currentTrackDisplay {
    min-width: unset !important;
    width: 100%;
}

/* ==============================================
   TOWER WHEEL ANIMATIONS
   ============================================== */

/* Subtle pulsing for tower wheel cards */
@keyframes towerWheelPulse {

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

    50% {
        opacity: 0.92;
        transform: translateZ(0) scale(1.01);
    }
}

/* Hover animation for tower wheel cards */
@keyframes towerWheelHover {

    0%,
    100% {
        border: 2px dashed var(--tower-color);
        filter: brightness(1.1);
    }

    50% {
        border: 1px dashed var(--tower-color);
        filter: brightness(1.3);
    }
}

/* 2-step hover animation for tower wheel cards */
@keyframes towerWheelHoverStep1 {
    0% {
        transform: scale(1) rotateZ(0deg);
        box-shadow: 0 0 10px var(--tower-color);
        border-width: 2px;
        z-index: 2000;
    }

    100% {
        transform: scale(1.15) rotateZ(3deg);
        box-shadow:
            0 0 20px var(--tower-color),
            inset 0 0 15px rgba(255, 255, 255, 0.15);
        border-width: 2.5px;
        z-index: 2005;
    }
}

@keyframes towerWheelHoverStep2 {
    0% {
        transform: scale(1.15) rotateZ(3deg);
        box-shadow:
            0 0 20px var(--tower-color),
            inset 0 0 15px rgba(255, 255, 255, 0.15);
        border-width: 2.5px;
        z-index: 2005;
    }

    100% {
        transform: scale(1.25) rotateZ(5deg);
        box-shadow:
            0 0 30px var(--tower-color),
            inset 0 0 20px rgba(255, 255, 255, 0.2),
            0 8px 25px rgba(0, 0, 0, 0.6);
        border-width: 4px;
        z-index: 2010;
    }
}

/* Error state animation for unaffordable towers */
@keyframes towerWheelError {

    0%,
    100% {
        border-color: #aa4444;
        box-shadow:
            0 0 8px rgba(170, 68, 68, 0.4),
            inset 0 0 12px rgba(170, 68, 68, 0.1),
            0 4px 12px rgba(0, 0, 0, 0.4);
    }

    50% {
        border-color: #cc6666;
        box-shadow:
            0 0 12px rgba(204, 102, 102, 0.6),
            inset 0 0 15px rgba(170, 68, 68, 0.2),
            0 4px 15px rgba(0, 0, 0, 0.5);
    }
}

/* Locked tower subtle animation */
@keyframes lockedTowerPulse {

    0%,
    100% {
        opacity: 0.55;
        filter: grayscale(0.7) contrast(0.8);
        box-shadow:
            0 0 8px rgba(102, 102, 102, 0.3),
            inset 0 0 12px rgba(102, 102, 102, 0.1),
            0 4px 12px rgba(0, 0, 0, 0.5);
    }

    50% {
        opacity: 0.65;
        filter: grayscale(0.6) contrast(0.9);
        box-shadow:
            0 0 12px rgba(136, 136, 136, 0.4),
            inset 0 0 15px rgba(102, 102, 102, 0.15),
            0 4px 15px rgba(0, 0, 0, 0.6);
    }
}

/* Wheel dimmer: pulse opacity only — animating backdrop-filter here overrides
   .modal-overlay / --modal-overlay-backdrop (wheel looked “stuck” on old blur vs pause/modals). */
@keyframes backdropPulse {

    0%,
    100% {
        opacity: 0.93;
    }

    50% {
        opacity: 1;
    }
}

/* Simplified modal animations - removed to match other working modals */

/* Welcome screen scanline animation */
@keyframes welcomeScanlinePulse {

    0%,
    100% {
        opacity: 0.3;
        background:
            repeating-linear-gradient(0deg,
                transparent,
                transparent 2px,
                rgba(0, 255, 0, 0.03) 2px,
                rgba(0, 255, 0, 0.03) 4px);
    }

    50% {
        opacity: 0.6;
        background:
            repeating-linear-gradient(0deg,
                transparent,
                transparent 1px,
                rgba(0, 255, 0, 0.06) 1px,
                rgba(0, 255, 0, 0.06) 3px);
    }
}

/* Wheel entrance animation */
@keyframes wheelEntrance {
    0% {
        transform: scale(0.3) rotate(-45deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.1) rotate(5deg);
        opacity: 0.9;
    }

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

/* Wheel exit animation */
@keyframes wheelExit {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(0.2) rotate(45deg);
        opacity: 0;
    }
}

/* ==============================================
   DESKTOP ENHANCEMENTS - 481px and larger
   ============================================== */

@keyframes towerNodePulse {

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

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes resourceGainPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }

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

/* DoT damage popup - non-clickable to prevent closing modals */
.dot-damage-popup {
    pointer-events: none;
    user-select: none;
    z-index: 50;
}

/* DoT trailing effect animation */
@keyframes dotTrailEffect {
    0% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
        filter: blur(0px);
    }

    30% {
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 0.9;
        filter: blur(0px);
    }

    70% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
        filter: blur(1px);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0;
        filter: blur(2px);
    }
}

/* Tower unlock pulse effect */
.tower-unlock-pulse {
    animation: towerUnlockPulse 2s ease-in-out infinite;
}

@keyframes towerUnlockPulse {
    0% {
        box-shadow:
            0 0 15px var(--pulse-color, #ffffff),
            0 0 30px var(--pulse-color, #ffffff),
            0 0 45px var(--pulse-color, #ffffff),
            inset 0 0 20px var(--pulse-color, #ffffff);
        transform: scale(1);
        opacity: 1;
    }

    50% {
        box-shadow:
            0 0 35px var(--pulse-color, #ffffff),
            0 0 70px var(--pulse-color, #ffffff),
            0 0 105px var(--pulse-color, #ffffff),
            inset 0 0 40px var(--pulse-color, #ffffff);
        transform: scale(1.25);
        opacity: 0.8;
    }

    100% {
        box-shadow:
            0 0 15px var(--pulse-color, #ffffff),
            0 0 30px var(--pulse-color, #ffffff),
            0 0 45px var(--pulse-color, #ffffff),
            inset 0 0 20px var(--pulse-color, #ffffff);
        transform: scale(1);
        opacity: 1;
    }
}

/* Shared glow animation for HOW TO and AUTO WAVE buttons - matches fingerprint tower nodes timing */
.button-glow-pulse {
    animation: buttonGlowPulse 1.6s ease-in-out infinite alternate;
}

@keyframes buttonGlowPulse {

    0%,
    100% {
        box-shadow:
            0 0 8px rgba(0, 255, 0, 0.3),
            0 0 16px rgba(0, 255, 0, 0.1);
    }

    50% {
        box-shadow:
            0 0 16px rgba(0, 255, 255, 0.5),
            0 0 24px rgba(0, 255, 255, 0.2);
    }
}

/* Record pulse animation for new high wave */
@keyframes recordPulse {

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

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

/* Game over stats layout - 2x2 grid on mobile */
/* Game over stats - 2 rows to match welcome screen layout */
.game-over-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.game-over-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.game-over-stats-row .stat-item {
    font-size: clamp(10px, 1.8vw, 13px);
}

.game-over-stats-row .stat-value {
    font-size: clamp(11px, 2vw, 14px);
}

/* Standardized in-game action buttons - smaller fonts for mobile */
.units-main-actions button,
.units-actions button {
    font-size: clamp(8px, 1.8vw, 10px);
    line-height: 1.15;
    padding: 3px 2px;
    min-height: 25px;
    white-space: normal;
    word-break: break-word;
}

/* ========================================
   CONSOLIDATED MEDIA QUERIES
   ======================================== */

/* Desktop - Tutorial grid uses 4 columns by default */
/* ========================================
   Mobile (max-width: 640px) - Phone and smaller devices
   ======================================== */
@media (max-width: 640px) {

    /* ===== Status Tabs & Content ===== */
    #coreStatusUI .status-tabs,
    #breachStatusUI .status-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 0;
        padding-right: 14px;
    }

    #coreStatusUI .status-tab-btn,
    #breachStatusUI .status-tab-btn {
        flex: 0 0 calc(50% - 2px);
        max-width: calc(50% - 2px);
        min-width: calc(50% - 2px);
        padding: 6px 4px;
        font-size: 8px;
        white-space: normal;
        line-height: 1.15;
        border-radius: 0 0 4px 4px;
        border-top: 4px solid transparent;
        border-bottom: none;
    }

    /* Tab content adjustments for mobile - reduce spacing */
    #coreStatusUI .status-tab-content fieldset,
    #breachStatusUI .status-tab-content fieldset {
        padding: 2px 6px;
        margin: 1px 0;
    }

    #coreStatusUI .status-tab-content .fieldset-content,
    #breachStatusUI .status-tab-content .fieldset-content {
        padding: 1px;
    }

    /* Locked items: match the same 2-col layout on mobile */
    #coreStatusUI .locked-item .actions-container.compact-buttons,
    #breachStatusUI .locked-item .actions-container.compact-buttons,
    .locked-item .actions-container.compact-buttons {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 3px;
    }

    #coreStatusUI .stats-row,
    #breachStatusUI .stats-row {
        gap: 4px;
    }

    /* Mobile button sizing */
    #coreStatusUI .upgrade-btn,
    #breachStatusUI .upgrade-btn {
        padding: 3px 6px;
        font-size: 9px;
        min-height: 24px;
        line-height: 1.15;
    }

    /* Ensure content is scrollable */
    #coreStatusUI,
    #breachStatusUI {
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile close — aligned with modal.css touch size */
    #coreStatusUI .modal-close-btn,
    #breachStatusUI .modal-close-btn {
        width: 26px;
        height: 26px;
        font-size: 16px;
        top: 8px;
        right: 10px;
    }

    #coreStatusUI .status-tab-btn.active,
    #breachStatusUI .status-tab-btn.active {
        border-top-color: var(--dynamic-color);
    }

    #coreStatusUI .status-tab-content,
    #breachStatusUI .status-tab-content {
        max-height: calc(60vh - 140px);
        /* Reduced height for mobile */
        overflow-y: auto;
        margin-bottom: 4px;
    }

    /* ===== Core Status UI Fieldset Collapsed ===== */
    #coreStatusUI fieldset.collapsed {
        background: linear-gradient(135deg, rgba(0, 255, 0, 0.15), rgba(0, 255, 0, 0.22));
        border-width: 2px;
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.4), inset 0 0 6px rgba(0, 255, 0, 0.15);
        padding: 12px 16px;
    }

    #coreStatusUI fieldset.collapsed:hover {
        background: linear-gradient(135deg, rgba(0, 255, 0, 0.22), rgba(0, 255, 0, 0.3));
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), inset 0 0 8px rgba(0, 255, 0, 0.2);
    }

    #coreStatusUI fieldset.collapsed:active {
        transform: translateY(1px);
        box-shadow: 0 0 8px rgba(0, 255, 0, 0.3), inset 0 0 4px rgba(0, 255, 0, 0.1);
    }

    #coreStatusUI fieldset legend::after {
        font-size: 14px;
        right: 10px;
    }

    #coreStatusUI fieldset.collapsed legend {
        font-size: 13px;
        padding-right: 30px;
        text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
    }

    #coreStatusUI fieldset.collapsed legend::after {
        display: none;
        /* Removed collapse indicator */
    }

    /* ===== Locked Items ===== */
    .locked-item {
        opacity: 0.9 !important;
        filter: grayscale(0.3) brightness(0.8) !important;
        border-width: 4px !important;
        box-shadow:
            0 0 15px rgba(255, 68, 68, 0.5),
            0 0 25px rgba(255, 68, 68, 0.3),
            inset 0 0 10px rgba(255, 68, 68, 0.2),
            inset 0 0 18px rgba(0, 0, 0, 0.7),
            0 6px 18px rgba(0, 0, 0, 0.6),
            0 0 0 2px rgba(255, 68, 68, 0.4) !important;
    }

    .locked-item::before {
        font-size: 22px;
        top: 12px;
        right: 12px;
        text-shadow: 0 0 10px rgba(255, 68, 68, 1.0);
    }

    .locked-item legend {
        font-size: 16px !important;
        text-shadow: 0 0 8px rgba(255, 102, 102, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
    }

    .locked-item .stats-container .label {
        font-size: 13px !important;
        text-shadow: 0 0 6px rgba(255, 150, 150, 0.6) !important;
    }

    /* Locked item values - use smaller standardized size for offline text */
    .locked-item .stats-container .value,
    .locked-item .status-line .value,
    .locked-item .drone-stat-value {
        font-size: calc(5px + 0.3vw) !important;
        text-shadow: 0 0 4px rgba(255, 200, 200, 0.5) !important;
    }

    /* Make locked section headers smaller on mobile */
    .locked-item.drone-section .drone-section-header,
    .locked-item.critter-section .critter-section-header,
    .locked-item.emp-section .emp-section-header,
    .locked-item.ram-trap-section .ram-trap-section-header,
    .locked-item.boss-critter-section .boss-critter-section-header {
        font-size: calc(9px + 0.5vw) !important;
    }

    .unlocked-item::before {
        font-size: 16px;
        top: 10px;
        right: 10px;
    }

    .unlock-progress-container {
        margin-top: 12px;
        padding: 10px;
        border-width: 4px;
        box-shadow:
            0 0 12px rgba(255, 170, 0, 0.4),
            inset 0 0 8px rgba(255, 170, 0, 0.15);
    }

    .unlock-progress-bar {
        height: 8px;
        box-shadow:
            0 0 8px rgba(255, 170, 0, 0.8),
            inset 0 2px 0 rgba(255, 255, 255, 0.4);
    }

    .unlock-progress-text {
        font-size: 13px;
        text-shadow: 0 0 6px rgba(255, 170, 0, 0.8);
    }

    /* ===== New Record Notification ===== */
    #new-record-notification {
        font-size: 8px;
        padding: 4px 8px;
    }

    /* ===== Game Canvas & General Layout ===== */
    #gameCanvas {
        margin: 16vw 0 0 0;
    }

    #breachStatusUI {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 98vw;
        top: auto;
        max-height: 26vh;
        background: rgba(20, 8, 0, 0.9);
        box-shadow: inset 0 0 10px rgba(255, 136, 0, 0.8);
    }

    /* Mobile-specific Breach collapsible fieldset styling */
    #breachStatusUI fieldset.collapsed {
        background: linear-gradient(135deg, rgba(255, 136, 0, 0.15), rgba(255, 136, 0, 0.22));
        border-width: 2px;
        box-shadow: 0 0 10px rgba(255, 136, 0, 0.4), inset 0 0 6px rgba(255, 136, 0, 0.15);
        padding: 12px 16px;
    }

    #breachStatusUI fieldset.collapsed:active {
        transform: translateY(1px);
        box-shadow: 0 0 8px rgba(255, 136, 0, 0.3), inset 0 0 4px rgba(255, 136, 0, 0.1);
    }

    #breachStatusUI fieldset legend::after,
    #breachStatusUI fieldset.collapsed legend::after {
        display: none;
        /* Removed collapse indicator */
    }

    #breachStatusUI fieldset.collapsed legend {
        font-size: 13px;
        padding-right: 30px;
        text-shadow: 0 0 6px rgba(255, 136, 0, 0.4);
    }

    #confirmationContent.save-reset-content {
        background: rgba(0, 0, 0, 0.66);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.3);
    }

    /* Mobile: Keep enhanced button styles but reduce glow intensity slightly */
    #confirmationContent.save-reset-content #cancelActionBtn {
        box-shadow:
            0 0 12px rgba(255, 170, 0, 0.4),
            0 0 6px rgba(255, 170, 0, 0.25) inset,
            0 0 25px rgba(255, 170, 0, 0.15);
    }

    #confirmationContent.save-reset-content #cancelActionBtn:hover {
        box-shadow:
            0 0 25px rgba(255, 170, 0, 0.8),
            0 0 12px rgba(255, 187, 51, 0.4) inset,
            0 0 40px rgba(255, 170, 0, 0.3);
        transform: scale(1.05) translateY(-1px);
    }

    #confirmationContent.save-reset-content #confirmActionBtn {
        box-shadow:
            0 0 12px rgba(255, 0, 0, 0.4),
            0 0 6px rgba(255, 0, 0, 0.25) inset,
            0 0 25px rgba(255, 0, 0, 0.15);
    }

    #confirmationContent.save-reset-content #confirmActionBtn:hover {
        box-shadow:
            0 0 25px rgba(255, 0, 0, 0.8),
            0 0 12px rgba(255, 51, 51, 0.4) inset,
            0 0 40px rgba(255, 0, 0, 0.3);
        transform: scale(1.05) translateY(-1px);
    }

    #confirmationContent.save-reset-content .highlight-cost {
        text-shadow: 0 0 6px rgba(255, 102, 0, 0.6);
    }

    #confirmationContent.save-reset-content .pause-indicator {
        text-shadow: 0 0 4px rgba(255, 200, 200, 0.4) !important;
        animation: none;
    }

    #confirmationContent.save-reset-content h2 {
        text-shadow: 0 0 8px rgba(255, 69, 0, 0.6);
        animation: none;
    }

    #confirmationContent.save-reset-content h2 span {
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    }

    #confirmationContent.save-reset-content p {
        text-shadow: 0 0 4px rgba(255, 200, 200, 0.4);
    }

    /* Core and Breach Status UI - Mobile with tabs - shared positioning and height */
    #coreStatusUI,
    #breachStatusUI {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 98vw;
        top: auto;
        height: 26vh;
        /* Fixed compact height, content scrolls - shared for consistency */
        padding: 6px 10px;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 2001;
        /* Above tether (1999) to prevent overlap */
    }

    /* Core UI mobile background */
    #coreStatusUI {
        background: rgba(0, 20, 0, 0.9);
        box-shadow: inset 0 0 10px rgba(0, 255, 150, 0.8);
    }

    /* Breach UI mobile background */
    #breachStatusUI {
        background: rgba(20, 8, 0, 0.9);
        box-shadow: inset 0 0 10px rgba(255, 136, 0, 0.8);
    }

    #coreStatusUI.core-view-mobile h3,
    #breachStatusUI.breach-view-mobile h3 {
        width: 100%;
        font-size: 14px;
        margin-bottom: 4px;
        padding-bottom: 4px;
    }

    #coreStatusUI.core-view-mobile .status-tab-content,
    #breachStatusUI.breach-view-mobile .status-tab-content {
        order: 1;
        margin-bottom: 4px;
    }

    /* Sticky tabs at bottom for mobile - works well for phones */
    #coreStatusUI.core-view-mobile .status-tabs,
    #breachStatusUI.breach-view-mobile .status-tabs {
        order: 999;
        margin-top: auto;
        margin-bottom: 0;
        position: sticky;
        bottom: 0;
        background: inherit;
        z-index: 10;
    }

    /* Very small screens (360px and below) - Stack tabs 1 per row */
    #coreStatusUI .status-tabs,
    #breachStatusUI .status-tabs {
        flex-wrap: wrap;
    }

    #coreStatusUI .status-tab-btn,
    #breachStatusUI .status-tab-btn {
        font-size: 9px;
        padding: 8px;
    }

    /* CRITICAL: Mobile transforms must combine translateX(-50%) with scale */
    /* Base closed state - centered + scaled down */
    #coreStatusUI,
    #breachStatusUI {
        transform: translateX(-50%) scale(0.94);
    }

    /* Opening state - centered + full scale */
    #coreStatusUI.is-opening,
    #breachStatusUI.is-opening {
        transform: translateX(-50%) scale(1);
    }

    /* Closing state - centered + scaled down */
    #coreStatusUI.is-closing,
    #breachStatusUI.is-closing {
        transform: translateX(-50%) scale(0.94);
    }

    #energyBar,
    #progressBar {
        width: 100%;
    }

    #gameMessage {
        font-size: 6.5vw;
        line-height: 1.1;
        padding: 8px 15px;
        width: 100vw !important;
        white-space: normal;
        overflow: visible;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        height: auto !important;
        z-index: 10000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #gameMessage.system-detection {
        font-size: calc(1.54em + 0.90vw);
        /* Consistent sizing for all special messages */
    }

    #gameMessage.system-recovery-message {
        font-size: calc(1.54em + 0.90vw);
        /* Consistent sizing for all special messages */
    }

    #gameMessage.tower-install-message {
        font-size: calc(1.54em + 0.90vw);
        /* 36% reduction from original 2.4em + 1.4vw */
        padding: 13px 19px;
        /* Proportionally smaller padding */
    }

    #gameMessage.tower-install-secondary {
        font-size: calc(1.38em + 0.81vw);
        /* Slightly smaller than primary for mobile */
        padding: 12px 17px;
        /* Proportionally smaller padding */
    }

    #gameMessage.tower-unlock-message {
        font-size: calc(1.54em + 0.90vw);
        /* Same as tower-install-message for consistent sizing */
        padding: 13px 19px;
        /* Match tower-install-message mobile padding */
    }

    #gameMessage.tower-unlock-secondary {
        font-size: calc(1.38em + 0.81vw);
        /* Slightly smaller than primary for mobile */
        padding: 12px 17px;
        /* Proportionally smaller padding */
    }

    #gameOverButtons {
        flex-direction: column;
    }

    #towerInfo.hidden-by-confirmation {
        display: none !important;
        visibility: hidden !important;
    }

    #towerInfo.mobile-fixed {
        display: block !important;
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
        text-align: center;
        animation: contentSlideUpIn 0.3s ease-out;
    }

    #towerStatus {
        --tower-action-pct: 44%;
        position: fixed !important;
        bottom: 10px !important;
        left: 1vw !important;
        width: 98vw !important;
        max-width: 100% !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        max-height: min(30vh, 320px) !important;
        background: rgba(0, 20, 0, 0.9) !important;
        box-shadow: inset 0 0 10px rgba(0, 255, 150, 0.8) !important;
        padding: 5px 6px !important;
        gap: 3px !important;
    }

    #towerStatus .tower-upgrade-row {
        grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 42%) !important;
        column-gap: 5px !important;
    }

    #towerStatus .tower-panel-extras {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    #towerStatus .tower-upgrade-row__action>.upgrade-btn,
    #towerStatus .tower-upgrade-stack>.upgrade-btn {
        min-height: 26px !important;
        padding: 4px 5px !important;
        font-size: 8px !important;
    }

    #towerStatus .tower-stat-col .status-line {
        min-height: 26px;
    }

    #towerStatus .lash-split {
        min-height: 30px;
        padding: 3px 6px;
        gap: 6px;
    }

    #towerStatus .lash-split-icon-img {
        width: 18px;
        height: 18px;
    }

    #towerStatus .level-breakdown {
        flex: 1;
        width: auto;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 2px;
        max-width: 48%;
    }

    #towerStatus .level-breakdown .cooldown-bar {
        height: 5px;
    }

    #towerStatus .level-breakdown .stat-label {
        font-size: 9px;
    }

    #towerStatus .level-label {
        font-size: 13px;
        width: 57%;
    }

    #towerStatus .status-line {
        grid-template-columns: 1fr;
        gap: 4px;
        text-align: left;
    }

    #towerStatus .status-line .value {
        font-size: 12px !important;
        word-break: break-word;
        hyphens: auto;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        max-width: none !important;
    }

    #towerStatus .tower-level-info {
        flex-direction: row;
        gap: 4px;
        padding: 3px 4px 2px !important;
        align-items: center;
    }

    #towerStatus.core-view-mobile {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
    }

    #towerStatus.core-view-mobile fieldset {
        flex-grow: 1;
        min-width: 100%;
    }

    #towerStatus.core-view-mobile h3 {
        width: 100%;
    }

    #towerStatus.tower-view-mobile {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 5px;
    }

    #towerWheel {
        max-width: 95vw;
        max-height: 95vh;
        overflow: visible;
    }

    #upgradeModal h2 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Exclude #upgradesBtn - welcome screen only */
    #rebootBtn,
    #resetBtn {
        font-size: clamp(7px, 2vw, 9px);
        padding: 3px 2px;
        min-height: 26px;
    }

    #waveProgress {
        grid-area: progress;
        min-width: unset;
    }

    .damage-number {
        font-size: 16px !important;
        /* Balanced size between original 30px and reduced 18px */
        text-shadow:
            2px 2px 4px rgba(0, 0, 0, 0.8),
            0 0 6px rgba(0, 0, 0, 0.6),
            1px 1px 2px rgba(0, 0, 0, 0.9);
        /* Enhanced shadow for mobile */
    }

    .resource-gain-popup {
        font-size: 18px;
    }

    .resource-gain-popup .scaling-factor {
        font-size: 0.44em;
        /* Keep 56% smaller on mobile too */
    }

    .resource-text {
        font-size: 13px !important;
        /* Balanced resource text size */
        text-shadow: 0 0 3px #000, 0 0 4px #00ff88;
        /* Reduced shadow */
    }

    .tower-icon-canvas,
    .tower-wheel-icon-image {
        width: var(--icon-size, 40px);
        height: var(--icon-size, 40px);
        padding: 1%;
        border-radius: 26%;
    }

    .tower-option-wheel {
        font-size: var(--card-font-size, 13px);
        padding: var(--card-padding, 8px);
        will-change: transform, opacity;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        /* Reduce backdrop-filter for better mobile performance */
        backdrop-filter: blur(2px) saturate(1.4) brightness(1.05);
    }

    .tower-option-wheel .tower-cost {
        font-weight: bold;
        margin: 0;
        text-shadow: 1px 1px 0 #000, 0 0 4px #ff0;
    }

    .tower-option-wheel .tower-name {
        line-height: 1.0;
        margin: 0;
        font-weight: 800;
        text-shadow: 1px 1px 0 #000, 0 0 6px var(--tower-color);
    }

    .tutorial-content {
        min-height: 66vh;
        margin: 2.5vh auto;
    }

    .upgrade-btn {
        font-size: clamp(9px, 2.5vw, 12px);
        padding: 6px 2px;
        line-height: 1.0;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .upgrade-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }


    /* Additional mobile styles for smaller screens (480px and below) */

    /* Tab adjustments for smaller screens - 3 per row */
    #coreStatusUI .status-tab-btn,
    #breachStatusUI .status-tab-btn {
        flex: 1 1 calc(33.33% - 3px);
        min-width: calc(33.33% - 3px);
        font-size: 8px;
        padding: 6px 4px;
    }

    #coreStatusUI .status-line .label {
        font-size: 3.0vw !important;
        /* Increased for mobile visibility */
    }

    #gameMessage {
        font-size: 6.5vw;
        line-height: 1.1;
        padding: 8px 15px;
        width: 100vw;
        white-space: normal;
        overflow: visible;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Fix modal widths on small screens */
    #rebootModalContent,
    #confirmationContent {
        min-width: 86%;
        padding: 5vw;
        z-index: 67;
    }

    #confirmationModal.tower-confirmation-modal {
        backdrop-filter: var(--modal-overlay-backdrop);
        -webkit-backdrop-filter: var(--modal-overlay-backdrop);
        background:
            radial-gradient(ellipse 72% 68% at 50% 48%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 56%, rgba(0, 0, 0, 0.72) 100%);
    }

    /* ===== Phone HUD — full-width stats, command row below (execute | auto | pause | settings) ===== */
    #ui {
        --phone-hud-pad: 4px;
        --phone-hud-gap: 3px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: var(--phone-hud-gap);
        padding: var(--phone-hud-pad);
        box-sizing: border-box;
        pointer-events: none;
    }

    #stats,
    #unitsDisplay {
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 5px 6px;
        font-size: clamp(10px, 2.65vw, 12px);
        border-radius: 3px;
        backdrop-filter: blur(8px);
        background: rgba(0, 0, 0, 0.66);
        min-width: 0;
        min-height: 0;
        gap: 3px;
        pointer-events: auto;
        box-sizing: border-box;
    }

    #unitsDisplay {
        display: flex;
        flex-direction: column;
        gap: 3px;
        grid-area: unset;
    }

    #stats > .stat-label,
    #unitsDisplay > .stat-label {
        margin-bottom: 2px;
        padding-bottom: 3px;
        font-size: clamp(9px, 2.35vw, 10px) !important;
        letter-spacing: 0.12em;
    }

    #stats .resource-field-label,
    #unitsDisplay .resource-field-label {
        font-size: clamp(10px, 2.75vw, 12px) !important;
    }

    #stats .energy-number,
    #unitsDisplay .units-number {
        font-size: clamp(12px, 3.2vw, 14px) !important;
    }

    #stats .energy-row,
    #unitsDisplay .units-row {
        font-size: 1em !important;
    }

    #energyBar {
        height: 12px;
        min-height: 12px;
        margin: 3px 0 0;
    }

    #unitsDisplay .units-bits-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 6px;
        margin-top: 2px;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
        box-shadow: none;
    }

    #unitsDisplay #bitsBucketBar {
        height: 7px !important;
        min-height: 7px;
        grid-column: 1;
    }

    #unitsDisplay .units-bits-caption {
        grid-column: 2;
        margin-top: 0;
        font-size: clamp(8px, 2vw, 9px);
        line-height: 1;
        white-space: nowrap;
    }

    #unitsDisplay .units-bits-caption__label {
        margin-left: 3px;
    }

    .energy-row,
    .units-row {
        gap: 5px;
    }

    #stats .stat-icon .icon-img,
    #unitsDisplay .stat-icon .icon-img {
        width: 17px;
        height: 17px;
    }

    #waveProgress.wave-status-active {
        margin-top: 2px;
        padding-top: 4px;
    }

    #waveProgress,
    #waveProgress .wave-status-line {
        font-size: clamp(8px, 2vw, 10px);
    }

    /* Wave + spawn stats on one row to shrink Core Status height */
    #waveStatusSlot .wave-status-content.wave-active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        column-gap: 0.4em;
        row-gap: 2px;
        gap: 2px 0.4em;
    }

    #waveStatusSlot .wave-info-line {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        flex-wrap: nowrap;
    }

    #waveStatusSlot .wave-mob-line {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        flex-wrap: nowrap;
        gap: 0;
    }

    #waveStatusSlot .wave-progress-divider,
    #waveStatusSlot #progressBar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #waveStatusSlot .wave-log-stack {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    #waveStatusSlot .wave-info-line > .wave-stat-item + .wave-stat-item,
    #waveStatusSlot .wave-info-line .wave-ready-message > .wave-stat-item + .wave-stat-item {
        margin-left: 0.45em;
    }

    #upgradeModal h2 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .game-over-stats-row {
        width: 100%;
    }

    .game-over-stats-row .stat-item {
        font-size: clamp(9px, 2.2vw, 11px);
    }

    .game-over-stats-row .stat-value {
        font-size: clamp(10px, 2.5vw, 12px);
    }

    .stat-label {
        font-size: clamp(8px, 2.1vw, 9px) !important;
    }

    .hud-hub-purchase-flag {
        gap: 3px;
        margin-left: 4px;
        padding: 3px 6px 4px;
        min-width: 80px;
        max-width: 31vw;
        font-size: clamp(7px, 1.75vw, 8.5px);
        letter-spacing: 0.035em;
        border-radius: 5px;
    }

    #stats .wave-number-badge {
        padding: 1px 5px;
        font-size: 0.78em;
    }

    #stats .wave-stat-numbers {
        font-size: 0.96em;
    }

    #waveStatusSlot .wave-mob-line {
        flex-wrap: nowrap;
        gap: 0;
    }

    #waveStatusSlot .wave-mob-line .spawned-label,
    #waveStatusSlot .wave-mob-line .eliminated-label {
        font-size: 0.6em;
        letter-spacing: 0.045em;
    }

    #waveStatusSlot .wave-stat-numbers {
        font-size: 0.86em;
    }

    #waveStatusSlot .wave-mob-line>.wave-stat-item+.wave-stat-item {
        margin-left: 0.42em;
    }

    #unitsDisplay .units-main-actions {
        position: static;
        width: 100%;
        margin-top: 4px;
        padding-top: 5px;
        border-top: 1px solid rgba(0, 255, 136, 0.22);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        pointer-events: auto;
    }

    #unitsDisplay .units-main-actions button {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-row: 1 !important;
        min-height: clamp(30px, 7.5vw, 36px);
        width: 100% !important;
        padding: 4px 2px !important;
        white-space: normal;
        line-height: 1.1;
        font-size: clamp(8px, 2.25vw, 9.5px) !important;
        flex-direction: row;
        gap: 2px;
        -webkit-font-smoothing: antialiased;
        text-shadow: none !important;
        animation: none !important;
        transform: none;
        filter: none;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    #unitsDisplay .units-main-actions button:active {
        transform: scale(0.98);
        filter: brightness(0.92);
    }

    #waveButton {
        grid-column: 1 !important;
        font-size: clamp(8px, 2.3vw, 9.5px) !important;
    }

    #autoWaveBtn {
        grid-column: 2 !important;
    }

    #pauseBtn {
        grid-column: 3 !important;
    }

    #settingsBtn {
        grid-column: 4 !important;
        flex-direction: row !important;
    }

    #settingsBtn .btn-icon {
        display: none !important;
    }

    #settingsBtn .btn-label {
        display: block !important;
        font-size: inherit;
        line-height: 1;
        white-space: nowrap;
    }

    /* Mother / command panel — crisp text on small screens */
    #motherUI #coreStatusUI .upgrade-btn,
    #motherUI #breachStatusUI .upgrade-btn,
    #motherUI #coreStatusUI button:not(.modal-close-btn),
    #motherUI #breachStatusUI button:not(.modal-close-btn),
    #motherUI #coreStatusUI .status-tab-btn,
    #motherUI #breachStatusUI .status-tab-btn,
    #motherUI .mother-tab-btn {
        -webkit-font-smoothing: antialiased;
        text-shadow: none !important;
        transform: none;
    }

    #motherUI #coreStatusUI .status-tab-btn,
    #motherUI #breachStatusUI .status-tab-btn {
        box-shadow:
            0 0 5px rgb(var(--tab-accent) / 0.12),
            0 1px 5px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgb(var(--tab-accent) / 0.12) !important;
    }

    .tower-option-wheel {
        /* Width and height are set dynamically by JavaScript based on wheelSize */
        /* JavaScript calculates optionSize = wheelSize * 0.37 for mobile */
        /* Don't override with fixed width - let JavaScript handle it */
        padding: var(--card-padding, 8px) !important;
    }

    .tower-option-wheel .tower-cost {
        font-size: calc(var(--cost-font-size, 10px) * 0.75) !important;
    }

    .tower-option-wheel.locked .tower-cost {
        font-size: calc(var(--cost-font-size, 10px) * 0.70) !important;
    }

    .tower-option-wheel .tower-icon-canvas,
    .tower-option-wheel .tower-wheel-icon-image {
        width: calc(var(--icon-size, 40px) * 0.95) !important;
        height: calc(var(--icon-size, 40px) * 0.95) !important;
        margin-top: 4px !important;
        margin-bottom: -1px !important;
    }

    .tower-option-wheel .tower-info {
        font-size: calc(var(--damage-font-size, 8px) * 0.75) !important;
    }

    /* Tower name: JS fixes --name-font-size at 12px; no mobile reduction — 7.56px was unreadable */
    .tower-option-wheel .tower-name {
        font-size: var(--name-font-size, 12px) !important;
    }

    .tutorial-content {
        margin: 1vh auto;
        overflow-x: hidden;
        max-height: 85vh;
    }

    .tutorial-main {
        padding: 10px 15px 15px;
    }

    .tutorial-tower h3 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .tutorial-tower {
        padding: 16px;
        margin-bottom: 8px;
    }

    .upgrade-card.maxed .game-btn {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1));
        color: #ffd700;
        border-color: #ffd700;
    }

    .upgrade-card.tutorial-tower {
        padding: 10px 12px;
        margin-bottom: 6px;
        min-height: auto;
    }

    .upgrade-card.tutorial-tower .game-btn {
        width: 100%;
        min-width: unset;
        font-size: 9px;
        padding: 4px 6px;
    }

    .upgrade-card.maxed .game-btn {
        padding: 4px 6px;
        font-size: 9px;
    }

    /* Mobile adjustments for specific button states */
    /* Ensure styles propagate to mobile */
    .upgrade-card.tutorial-tower .game-btn {
        padding: 6px 8px;
        min-height: 24px;
    }

    .upgrade-card.tutorial-tower .game-btn.disabled {
        opacity: 0.6;
    }

    /* Fix red button on mobile */
    .upgrade-card:not(.can-afford):not(.maxed) .game-btn {
        color: #ff4444;
        border-color: #ff4444;
    }

    .upgrade-card:not(.can-afford):not(.maxed) .game-btn {
        background: rgba(255, 0, 0, 0.2);
        color: #ff6666;
        border-color: rgba(255, 0, 0, 0.4);
    }

    .upgrade-card.tutorial-tower h4 {
        font-size: 11px;
    }

    .upgrade-card.tutorial-tower p {
        font-size: 9px;
    }

    .chip-label {
        font-size: 10px;
    }

    .chip-wave {
        font-size: 10px;
    }

    .upgrade-progress-bar {
        height: 6px;
    }

    .upgrade-progress-text {
        font-size: 9px;
    }

    /* ===== Wave Pass / Milestone Cards Mobile ===== */
    .milestone-chip {
        padding: 4px 6px;
        margin-bottom: 3px;
        font-size: 9px;
    }

    /* Wave Pass cards even more compact on mobile */
    #wavePassDisplay .milestone-chip {
        padding: 4px 6px !important;
        margin-bottom: 2px !important;
    }

    .chip-wave {
        font-size: 8px !important;
        padding: 2px 4px;
    }

    .chip-label {
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .chip-badge,
    .chip-claim-btn {
        font-size: 7px !important;
        padding: 2px 4px !important;
        min-width: 45px !important;
        /* Fixed width to prevent shifting on mobile */
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    
    /* Make wave pass cards more compact - remove gaps for better alignment */
    #wavePassDisplay .milestone-chip>div {
        gap: 4px !important;
    }

    #wavePassDisplay .milestone-chip div[style*="gap: 16px"] {
        gap: 4px !important;
        flex-wrap: wrap;
    }

    /* Remove gap from all flex containers in milestone chips */
    #wavePassDisplay .milestone-chip div[style*="display: flex"] {
        gap: 4px !important;
    }

    /* Reduce emoji sizes on mobile */
    #wavePassDisplay .milestone-chip span[style*="font-size: 12px"] {
        font-size: 10px !important;
    }

    /* Units and Energy text smaller */
    #wavePassDisplay .milestone-chip div[style*="color: #ffdd00"],
    #wavePassDisplay .milestone-chip div[style*="color: #00ddff"] {
        font-size: 9px !important;
    }

}

@keyframes gameScanlinePulse {

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

    50% {
        opacity: 0.15;
        transform: translateY(1px);
        /* Micro-shift */
    }

}

/* Core tab colors defined in core-breach-ui.css per-tab (overclock=orange, emp=white, drones=cyan, critters=yellow, boss-critter=red) */

/* ==============================================
   MODAL EVOLUTION LOCK
   ============================================== */
.modal-evolution-lock {
    filter: blur(5px) grayscale(0.8);
    pointer-events: none;
    transition: filter 0.5s ease;
    opacity: 0.7;
}