/* ══════════════════════════════════════════════
   STAB YO // VOICES v3.1 — GOLDEN STREAM
   Restored Cinematic Aesthetic
   ══════════════════════════════════════════════ */

:root {
    --bg-dark: #000000;
    --bg-panel: rgba(5, 5, 5, 0.95);
    --accent: #ff3366;
    --accent-dim: rgba(255, 51, 102, 0.1);
    --text-primary: #f0f0ff;
    --text-dim: #666688;
    --border: rgba(255, 51, 102, 0.2);
}

body {
    background: var(--bg-deep);
    margin: 0; overflow: hidden;
    color: #fff; font-family: 'Inter', sans-serif;
}

.mesh-overlay {
    position: fixed; inset: 0;
    background-image: radial-gradient(circle at 50% 50%, transparent 0%, #000 95%),
                      repeating-linear-gradient(rgba(255, 204, 0, 0.02) 0px, transparent 1px),
                      repeating-linear-gradient(90deg, rgba(255, 204, 0, 0.02) 0px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    z-index: 1;
}

.glitch-scanline {
    position: fixed; top: 0; left: 0; width: 100%; height: 2px;
    background: rgba(255, 204, 0, 0.1);
    animation: scanline 10s linear infinite;
    z-index: 2;
}

@keyframes scanline { 0% { top: -5%; } 100% { top: 105%; } }

.stream-layout {
    position: relative; z-index: 10;
    display: flex; flex-direction: column;
    height: 100vh; width: 100vw;
    align-items: center; justify-content: center;
    overflow: hidden;
}

.stream-core {
    position: relative; width: 100%; height: 70vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-sphere {
    position: absolute; width: 500px; height: 500px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    filter: blur(80px); opacity: 0.4;
    animation: pumpPulse 0.5s infinite alternate;
    will-change: transform;
    transform: translateZ(0);
}

.track-info-v3 {
    z-index: 10; text-align: center;
}

.track-info-v3 h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 4.5rem; color: #fff;
    text-shadow: 0 0 40px var(--glow);
    margin: 10px 0; letter-spacing: 10px;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(25px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
}

.pump-btn {
    background: var(--accent); color: #000;
    border: none; padding: 25px 80px;
    font-family: 'Orbitron', sans-serif; font-weight: 900;
    font-size: 1.4rem; cursor: pointer;
    border-radius: 50px; box-shadow: 0 0 40px var(--glow);
    transition: all 0.2s;
    margin-top: 40px;
}

.pump-btn:hover { transform: scale(1.05); box-shadow: 0 0 60px var(--glow); }

.terminal-overlay {
    position: absolute; bottom: 40px; right: 40px;
    width: 350px; height: 180px;
    font-family: 'Space Mono', monospace; font-size: 0.8rem;
    color: var(--accent); opacity: 0.7;
}

@keyframes pumpPulse {
    from { transform: scale(1); opacity: 0.3; }
    to { transform: scale(1.1); opacity: 0.6; }
}

.pumping { animation: screenShake 0.2s infinite; }

@keyframes screenShake {
    0% { transform: translate(0,0); }
    25% { transform: translate(3px, 3px); }
    50% { transform: translate(-3px, -3px); }
    75% { transform: translate(-3px, 3px); }
    100% { transform: translate(0,0); }
}