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

#starter-overlay {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.9s ease;
    pointer-events: auto;
    cursor: default;
}

#starter-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

canvas {
    display: block;
}

#subtitle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(180, 140, 255, 0.45);
    opacity: 0;
    transition: opacity 1.4s ease;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

#subtitle.visible { opacity: 1; }


#fade {
    position: fixed;
    inset: 0;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.9s ease;
    z-index: 999;
}

#fade.active {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 480px) {
    #subtitle {
        font-size: 9px;
        letter-spacing: 4px;
        white-space: normal;
        text-align: center;
        width: 80%;
        transform: translateX(-50%) translateY(100px);
    }
}