:root {
    /* Color Tokens from DESIGN.md */
    --primary: #c1fffe;
    --primary-dim: #00e6e6;
    --primary-container: #00ffff;
    --on-primary: #006767;
    --secondary: #ff51fa;
    --secondary-container: #a900a9;
    --on-secondary: #400040;
    --tertiary: #ac89ff;
    --surface: #060e20;
    --surface-variant: rgba(25, 37, 64, 0.4);
    --on-surface: #dee5ff;
    --outline: #6d758c;
    --outline-variant: rgba(64, 72, 93, 0.15);
    --background: #060e20;
}

body {
    background-color: var(--background);
    color: var(--on-surface);
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow: hidden;
    letter-spacing: -0.01em;
}

.font-headline {
    font-family: 'Space Grotesk', sans-serif;
}

.font-label {
    font-family: 'Space Grotesk', sans-serif;
}

/* Glassmorphism Rule from DESIGN.md */
.glass-panel {
    background: var(--surface-variant);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden;
}

/* Simulated Density / Ambient Shadows from DESIGN.md */
.glass-panel {
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
}

/* Ghost Border Fallback - High contrast separation */
.glass-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 0.5px solid rgba(193, 255, 254, 0.15);
    border-left: 0.5px solid rgba(193, 255, 254, 0.15);
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
}

/* Neon Glow Accents */
.text-glow-primary {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.text-glow-secondary {
    text-shadow: 0 0 10px rgba(255, 81, 250, 0.4);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: var(--surface);
}
::-webkit-scrollbar-thumb {
    background: #192540;
    border-radius: 2px;
}

/* Button Styling */
#deploy-btn:not(:disabled) {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

#deploy-btn:not(:disabled):hover {
    box-shadow: 0 0 35px rgba(0, 255, 255, 0.4);
    transform: scale(1.02);
}

#deploy-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Animations */
@keyframes neon-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.animate-pulse-fast {
    animation: neon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Particle Simulator Styles */
#battle-canvas {
    filter: blur(0.5px) contrast(1.2);
}

/* Layout Overrides */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* HUD elements */
.hud-label {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.625rem; /* 10px */
}