@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

body, html { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: 'Archivo Black', sans-serif; color: #00ffff; }

#hud {
    position: absolute; top: 20px; width: 100%; text-align: center;
    font-size: 0.9rem; letter-spacing: 2px; z-index: 5; opacity: 0.8;
}

#main-ui {
    position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 15; width: 100%;
}

#vessel-title { 
    font-size: 3rem; letter-spacing: 15px; margin-top: 20px; 
    transition: opacity 2s ease-in-out; 
}

#branding-container { transition: all 3s ease-in-out; }
.presented-by { font-size: 0.8rem; letter-spacing: 5px; margin-bottom: 5px; }
.artist-name { font-size: 2.2rem; letter-spacing: 8px; }

/* Flicker & Active States */
.boot-flicker { animation: flicker 0.4s step-end 3; }
@keyframes flicker { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

.is-active #branding-container {
    position: fixed; top: auto; left: auto; bottom: 30px; right: 30px;
    transform: scale(0.5); opacity: 0.3; color: #888;
}

.is-active #vessel-title { opacity: 0; pointer-events: none; }

#overlay, #finalState {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.8); z-index: 20;
}

button { background: #000; color: #00ffff; border: 2px solid #00ffff; padding: 20px 40px; cursor: pointer; font-family: inherit; letter-spacing: 2px; }
#resetButton { width: 280px; height: 280px; border: 4px solid #fff; color: #fff; box-shadow: 0 0 30px #fff; }