:root { --accent: #00f2ff; --bg: #050505; --red: #e50914; }
        
        body { 
            background: var(--bg); color: white; 
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            display: none; /* Fondamentale: resta nascosto finché la pass non è OK */
            align-items: center; justify-content: center; 
            height: 100vh; margin: 0; overflow: hidden;
            
        }


.bg-overlay-dark {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000000;
opacity: 0.80;
z-index: 9;
pointer-events: none;
}

/* 1. Alza tutto il blocco del modulo */
.container {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 85%;
    max-width: 320px;
    /* CAMBIA DA -40px A -140px PER ALZARE TUTTO IL BLOCCO */
    margin: -100px auto 0 auto; 
}


        
        select { 
            width: 100%; padding: 18px; background: #111; 
            color: white; border: 1px solid #333; border-radius: 15px;
            font-size: 16px; appearance: none; text-align: center; margin-bottom: 25px;
            outline: none; cursor: pointer;
        }
        
     .label { 
    font-size: 10px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: white; /* Ora bianco come richiesto */
    margin-bottom: 10px; 
}

button { 
    width: 100%; 
    padding: 18px; 
    background: var(--red); /* Rosso del logo */
    color: white; /* Testo bianco */
    border: none; 
    border-radius: 15px;
    font-weight: 900; 
    letter-spacing: 1px; 
    cursor: pointer;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.4); /* Ombra rossa coerente */
    z-index: 99999999;
}

/* SFONDO GIF: Effetto Slot Machine Corretto */
.bg-video-container {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-image: url('owlyandely.gif');
    /* USA 'CONTAIN' PER NON DEFORMARE O UN VALORE FISSO (es. 400px) */
    background-size: contain; 
    background-position: center 0;
    background-repeat: repeat !important; /* Ripete sia X che Y per riempire senza stirare */
    background-color: #050505;
    animation: slot-machine 8s steps(1) infinite;
}
.bg-pattern {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    /* RADIAL-GRADIENT USATO COME TIMBRO NETTO */
    background-image: 
        radial-gradient(var(--bg) 1.2px, transparent 0), 
        linear-gradient(rgba(5, 5, 5, 0.6), rgba(5, 5, 5, 0.1)) !important;
    background-size: 3px 3px, cover !important; 
    pointer-events: none;
}



/* --- INIEZIONE EFFETTO FRUSCIO E SLOT MACHINE --- */

/* NUOVO LIVELLO PER IL RUMORE */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Sta tra lo sfondo e i tuoi bottoni */
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 100%),
        url('white-noise-colourful.gif');
    background-size: 100% 4px, 180px 180px;
    background-repeat: repeat, repeat;
    animation: 
        scorrimento-linee 3s linear infinite, 
        chaos-totale 4.3s steps(1) infinite;
}

/* KEYFRAMES NECESSARIE PER L'EFFETTO */
@keyframes scorrimento-linee {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 0 -100%, 0 0; }
}

@keyframes slot-machine {
    0%, 60% { background-position: center 0; }
    61% { background-position: center -300px; }
    62% { background-position: center -600px; }
    63% { background-position: center -900px; }
    64% { background-position: center -1200px; }
    66%, 85% { background-position: center 0; }
    86% { background-position: center -450px; }
    88% { background-position: center -1500px; }
    100% { background-position: center 0; }
}

@keyframes chaos-totale {
    0%, 20% { opacity: 0.3; mix-blend-mode: screen; background-color: transparent; }
    22% { opacity: 1; mix-blend-mode: normal; background: #fff; transform: scaleY(0.02) scaleX(2); }
    25%, 45% { 
        opacity: 1; mix-blend-mode: normal; background-color: #000;
        background-image: url('white-noise-colourful.gif');
        background-size: 100px 100px;
        transform: scale(1.1);
    }
    47% { opacity: 1; mix-blend-mode: difference; background: #fff; }
    50%, 70% { 
        opacity: 1; mix-blend-mode: normal; background-color: #000;
        background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #111 2px, #111 4px), url('white-noise-colourful.gif');
        background-size: 100% 4px, 150px 150px;
    }
    75%, 95% { opacity: 1; background-image: url('white-noise-colourful.gif'); background-size: 80px 80px; }
    100% { opacity: 0.3; mix-blend-mode: screen; }
}