/* ============================================ */
/* BASE.CSS - Reset, Body, Core Styles         */
/* ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow: hidden; }

/* ============================================ */
/* BUILDING CONSTRUCTION ANIMATION             */
/* ============================================ */
.building-construction-wrapper {
    position: relative;
    overflow: visible;
    /* Default size, can be overridden by inline styles */
}
.building-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    overflow: visible;
}
.building-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}
.construction-point {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px #ffffff, 0 0 15px #ffff00, 0 0 25px #ff8800;
    pointer-events: none;
    z-index: 10;
    display: none;
}
.construction-point.active {
    display: block;
    animation: welderGlow 0.1s ease-in-out infinite alternate;
}
@keyframes welderGlow {
    0% {
        box-shadow: 0 0 8px #ffffff, 0 0 15px #ffff00, 0 0 25px #ff8800;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        box-shadow: 0 0 12px #ffffff, 0 0 20px #ffff00, 0 0 35px #ff8800;
        transform: translate(-50%, -50%) scale(1.2);
    }
}
.spark-container {
    position: absolute;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}
.construction-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ffdd44;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffaa00, 0 0 8px #ff6600;
    opacity: 0;
    pointer-events: none;
}
@keyframes sparkFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.3);
    }
}

/* Z-Index Hierarchy (direct game-container children) */
/* Enemies: 4, Buildings: 5, Hack: 8, Shield: 900, CC-Laser: 910, AA-Beam: 915, Clouds: 950, Menus: 10000+ */
.building-menu-container,
.research-menu-container {
    z-index: 10000 !important;
    position: relative !important;
}
.enemy-robot,
.enemy-blue,
.enemy-laser {
    z-index: 4 !important; /* Below clouds (depth 50) */
}
.rocket-projectile,
.enemy-laser-projectile {
    z-index: 4 !important; /* Below clouds (depth 50) */
}
.cc-laser {
    z-index: 8 !important;
}
body {
    background: #050508;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

/* ============================================ */
/* DIGITAL RAIN BACKGROUND                     */
/* ============================================ */
#digital-rain-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 720px;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #050508 0%, #080810 50%, #050508 100%);
    pointer-events: none;
}

#digital-rain-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(68, 170, 255, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.rain-column {
    position: absolute;
    top: -100%;
    width: 18px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.2;
    color: #44aaff;
    text-shadow: 0 0 8px rgba(68, 170, 255, 0.8), 0 0 15px rgba(68, 170, 255, 0.4);
    animation: digitalRain linear infinite;
    opacity: 0.5;
    text-align: center;
    user-select: none;
    pointer-events: none;
}

.rain-column.purple {
    color: #aa44ff;
    text-shadow: 0 0 8px rgba(170, 68, 255, 0.8), 0 0 15px rgba(170, 68, 255, 0.4);
}

.rain-column.dim {
    opacity: 0.25;
    font-size: 12px;
}

@keyframes digitalRain {
    0% { transform: translateY(0); opacity: 0; }
    3% { opacity: 0.5; }
    100% { transform: translateY(1200px); opacity: 0.3; }
}

/* ============================================ */
/* GAME TITLE - Plasma Burn + Binary           */
/* ============================================ */
.game-title-wrapper {
    position: relative;
    text-align: center;
    pointer-events: none;
}

.game-title {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(180deg, #66ccff 0%, #44aaff 30%, #aa44ff 70%, #ff44aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(68, 170, 255, 0.6));
    animation: titlePlasmaBurn 2s ease-in-out infinite;
}

.game-title-binary {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #aa44ff;
    text-shadow: 0 0 8px rgba(170, 68, 255, 0.8);
    margin-top: 5px;
    letter-spacing: 2px;
}

@keyframes titlePlasmaBurn {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(68, 170, 255, 0.6)); }
    50% { filter: drop-shadow(0 0 30px rgba(170, 68, 255, 0.8)); }
}

/* ============================================ */
/* VERSION TEXT - Gradient Neon Red            */
/* ============================================ */
.version-text-left,
.version-text-right {
    position: absolute;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(90deg, #ff4444, #ff8844, #ff4444);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(255, 68, 68, 0.6));
    animation: versionGradient 3s linear infinite;
    pointer-events: none;
    white-space: nowrap;
}

.version-text-left {
    top: 340px;
    left: -620px;
}

.version-text-right {
    top: 340px;
    right: -620px;
}

@keyframes versionGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Phaser DOM Container - allow clicks through to canvas */
#game-container {
    position: relative;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    /* Improve transform scaling quality */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Canvas rendering - auto for smooth text/gradients */
#game-container canvas {
    image-rendering: auto;
}
#game-container div:not(canvas) {
    pointer-events: none !important;
}
/* Re-enable pointer events for interactive elements */
#game-container button,
#game-container input,
#game-container select,
#game-container [data-interactive="true"],
#game-container .menu-btn,
#game-container .menu-overlay,
#game-container .menu-overlay *,
#game-container .dom-menu,
#game-container .dom-menu *,
#game-container .build-item,
#game-container .research-item,
#game-container .research-items,
#game-container .research-column,
#game-container .research-columns,
#game-container .building-grid,
#game-container .dom-close-btn,
#game-container .intro-overlay,
#game-container .intro-overlay *,
#game-container .intro-dialog,
#game-container .intro-dialog *,
#game-container .intro-understood-btn,
#game-container .topbar-end-wave,
#game-container .end-line,
#game-container .save-overlay,
#game-container .save-overlay *,
#game-container .save-slot,
#game-container .save-slot-delete,
#game-container .save-overlay-back,
#game-container .language-flags,
#game-container .flag-btn,
#game-container .options-overlay,
#game-container .options-overlay *,
#game-container .option-slider,
#game-container .option-slider-thumb,
#game-container .options-test-btn,
#game-container .options-back-btn,
#game-container .donate-overlay,
#game-container .donate-overlay *,
#game-container .donate-terminal-link,
#game-container .donate-back-btn,
#game-container .building-radial-menu,
#game-container .building-radial-menu *,
#game-container .radial-btn,
#game-container .coffee-link,
#game-container .coffee-link *,
#game-container .instagram-link,
#game-container .instagram-link *,
#game-container .fullscreen-btn,
#game-container .fullscreen-btn *,
#game-container .topbar,
#game-container .topbar *,
#game-container .bottombar,
#game-container .bottombar *,
#game-container .bottombar-tooltip {
    pointer-events: auto !important;
}

/* ============================================ */
/* MOBILE SUPPORT                              */
/* ============================================ */
html, body {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
}

body {
    position: fixed;
    width: 100%;
    height: 100%;
}

#game-container {
    touch-action: none;
}

/* Fullscreen Button */
.fullscreen-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    background: rgba(8, 8, 16, 0.8);
    border: 2px solid rgba(68, 170, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 100;
}

.fullscreen-btn:hover {
    background: rgba(68, 170, 255, 0.2);
    border-color: #44aaff;
}

.fullscreen-btn svg {
    width: 24px;
    height: 24px;
    fill: #44aaff;
}

/* Mobile: größere Touch Targets */
@media (max-width: 1024px), (pointer: coarse) {
    .menu-btn {
        min-height: 50px !important;
        font-size: 18px !important;
    }

    .build-item,
    .research-item {
        min-height: 48px !important;
    }

    .radial-btn {
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .flag-btn {
        width: 36px !important;
        height: 24px !important;
    }
}