:root {
    --dynamic-color: #00f2ff;
    --ui-glass: rgba(255, 255, 255, 0.03);
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Syncopate', sans-serif;
    transition: color 0.5s ease, border-color 0.5s ease;
}

body { background: #000; color: #fff; height: 100vh; overflow: hidden; }

#lounge-canvas { position: fixed; inset: 0; z-index: 1; }

/* --- THE VIDEO PORTAL --- */
#video-portal {
    position: fixed;
    inset: 0;
    z-index: 50; /* Above particles (1), below HUD (100) */
    display: none; /* Hidden until video is injected */
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.monolith-frame {
    width: 70vw;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid var(--dynamic-color);
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,1);
}

#video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.monolith-glow {
    position: absolute;
    inset: -20px;
    border: 1px solid var(--dynamic-color);
    opacity: 0.3;
    filter: blur(10px);
    z-index: -1;
}

/* --- HUD & OTHER STYLES --- */
#hud { position: relative; z-index: 100; height: 100%; padding: 4vw; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.top-row, .bottom-row { display: flex; justify-content: space-between; align-items: flex-start; pointer-events: auto; }
.bottom-row { align-items: flex-end; }
.status-unit { display: flex; align-items: center; gap: 20px; }
.dna-spinner { width: 2px; height: 30px; background: var(--dynamic-color); box-shadow: 0 0 15px var(--dynamic-color); animation: rotateDNA 1.5s linear infinite; }
.labels h1 { font-size: 1.2rem; letter-spacing: 10px; font-weight: 900; }
.labels p { font-size: 0.5rem; letter-spacing: 2px; color: var(--dynamic-color); }
#clock { font-size: 1.2rem; letter-spacing: 4px; color: var(--dynamic-color); }
#track-name { font-size: 2.5rem; letter-spacing: -2px; font-weight: 900; }
.evolution-btn { background: var(--ui-glass); border: 1px solid var(--dynamic-color); color: #fff; padding: 20px 40px; font-weight: 900; letter-spacing: 5px; cursor: pointer; backdrop-filter: blur(15px); }
.evolution-btn:hover { background: var(--dynamic-color); color: #000; box-shadow: 0 0 50px var(--dynamic-color); }
#chroma-leak { position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, var(--dynamic-color), transparent 70%); opacity: 0.15; filter: blur(100px); z-index: 2; pointer-events: none; }
.vignette { position: fixed; inset: 0; background: radial-gradient(circle, transparent 20%, #000 120%); z-index: 150; pointer-events: none; }
@keyframes rotateDNA { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.2); } }