:root {
    --project-accent:      #0ff;
    --project-accent-glow: rgba(0, 255, 255, 0.3);
}

/* Extra spacing between overlay elements */
#overlay { gap: 18px; }

#overlay h1 {
    color: #fff;
    font: 700 2.2rem/1.2 monospace;
    letter-spacing: 4px;
    text-shadow: 0 0 24px #f0f, 0 0 60px #0ff;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { text-shadow: 0 0  24px #f0f, 0 0  60px #0ff; }
    50%       { text-shadow: 0 0  60px #f0f, 0 0 120px #0ff, 0 0 200px #fff; }
}

#overlay p {
    color: rgba(255, 255, 255, 0.45);
    font: 13px monospace;
    letter-spacing: 1px;
}

#startBtn {
    padding: 14px 44px;
    border: 2px solid #0ff;
    background: transparent;
    color: #0ff;
    font: 700 1.1rem monospace;
    letter-spacing: 3px;
    cursor: pointer;
    border-radius: 4px;
    text-shadow: 0 0 12px #0ff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.25);
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
#startBtn:hover { background: rgba(0, 255, 255, 0.12); }

/* Equaliser bar visualiser in bottom HUD */
#hud {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    align-items: flex-end;
    pointer-events: none;
}
.bar {
    width: 7px;
    border-radius: 3px 3px 0 0;
    min-height: 3px;
}