:root {
    --epic-cyan: #00f2ff;
    --epic-magenta: #ff00ff;
    --epic-dark: #020202;
    --glow: 0 0 20px rgba(0, 242, 255, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; cursor: crosshair; }

body {
    background: var(--epic-dark);
    color: var(--epic-cyan);
    font-family: 'JetBrains Mono', monospace;
    height: 100vh;
    overflow: hidden;
    text-transform: uppercase;
}

/* --- LAYER HIERARCHY (The Fix) --- */
#neural-canvas { position: fixed; inset: 0; z-index: 1; }

.crt-lines {
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 4px;
    z-index: 2000; 
    pointer-events: none; /* ALLOWS CLICKS TO PASS THROUGH */
    opacity: 0.2;
}

#ui-container {
    position: relative;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 30px;
}

/* --- INTERACTIVE BUTTON --- */
.main-inject-btn {
    width: 100%;
    padding: 30px;
    background: rgba(0, 242, 255, 0.05);
    border: 2px solid var(--epic-cyan);
    color: var(--epic-cyan);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 5px;
    cursor: pointer; /* Force pointer to show it's clickable */
    transition: 0.3s;
    pointer-events: auto; /* ENSURE BUTTON IS CLICKABLE */
}

.main-inject-btn:hover {
    background: var(--epic-cyan);
    color: #000;
    box-shadow: var(--glow);
}

/* --- BOOT OVERLAY --- */
#boot-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* --- PORTAL --- */
.hidden-portal {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 5000;
    display: none;
    justify-content: center;
    align-items: center;
}

.portal-controls { position: absolute; top: 20px; right: 20px; z-index: 5001; display: flex; gap: 10px; }
.portal-btn { background: #000; border: 1px solid var(--epic-cyan); color: var(--epic-cyan); padding: 10px; cursor: pointer; }

/* --- VISUALIZER --- */
.audio-visual-container { display: flex; align-items: flex-end; gap: 4px; height: 100px; }
.visual-bar { flex: 1; background: var(--epic-magenta); min-height: 5px; }