body {
    margin: 0;
    font-family: 'VT323', monospace;
    background: #0d0d0d;
    color: #e6e6e6;
    text-align: center;
   /* position: relative; 
    z-index: 1; */
    overflow-x: hidden;
    }




#content {
    filter: opacity(0%);
    transition: filter 0.40s ease;
}

body.crt-ready #content {
    filter: opacity(100%);
}




:root {
    --text-color: #e6e6e6;     /* grigio  */
    --accent-color: #ff007f;   /* magenta */
    --link-color: #00eaff;     /* ciano  */
    --popup-z: 999999;
}



/* BIOS BOOT SCREEN */
#bios-boot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #00eaff;
    font-family: 'VT323', monospace;
    font-size: 40px;
    padding: 40px;
    z-index: 99999;
    display: none;        /* Nasconde il boot all'avvio */
    opacity: 0;           /* Parte trasparente */
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none; /* Non disturba i click finché è spento */
    transition: opacity 0.5s ease; /* Effetto accensione/spegnimento */
}

#bios-boot.active {
    display: flex;        /* Si attiva al click */
    opacity: 1;
    pointer-events: all;  /* Prende il controllo dello schermo */
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
}



.bios-text p {
    margin: 0;
    font-size: 50px;
    text-align: left;
}

.bios-line {
    margin: 0;
    white-space: pre;
    opacity: 1;
}

/* cursore SOLO quando la riga sta scrivendo */
.bios-line.typing::after {
    content: "█";
    margin-left: 5px;
    animation: cursor-blink 0.8s infinite;
}

@keyframes cursor-blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* Effetto CRT shutdown */
.crt-off {
    animation: crt-shutdown 0.6s forwards;
}

@keyframes crt-shutdown {
    0% {
        transform: scale(1,1);
        opacity: 1;
    }
    40% {
        transform: scale(1,0.05); /* collassa in linea */
        opacity: 1;
    }
    60% {
        transform: scale(0.05,0.05); /* punto centrale */
        opacity: 1;
    }
    100% {
        transform: scale(0,0);
        opacity: 0;
    }
}








/* NAVBAR RETRÒ */
.navbar {
    width: 100%;
    box-sizing: border-box; /* così padding e border non la fanno sbordare */
    height: 64px;          /* altezza fissa */
    line-height: 64px;     /* testo centrato */
    padding: 0 20px;       /* niente padding verticale */
    background: #000000e6;
    border-bottom: 2px solid #b300ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(4px);
    overflow: visible;
}


/* TAPPO INVISIBILE CHE BLOCCA IL CONTENUTO */
.navbar::before {
    content: "";
    position: absolute;
    top: -10vh;      /* enorme, così copre tutto lo scroll */
    left: 0;
    width: 100%;
    height: 10vh;    /* idem */
    background: #000000cc;
    backdrop-filter: blur(4px);
    z-index: -1;      /* resta dietro la navbar */
} 



.nav-logo a {
    font-size: 32px;
    color: #00eaff;
    text-decoration: none;
    text-shadow: 0 0 8px #00eaff;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 50px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    font-size: 24px;
    color: #e6e6e6;
    text-decoration: none;
    transition: 0.2s;
}

.nav-links a:hover {
    color: #ff007f;
    text-shadow: 0 0 10px #ff007f;
    
}
.menu-toggle {
    display: none;
}



/* BREADCRUMB STYLE */
.breadcrumb-nav {
    width: 100%;
    box-sizing: border-box; /* così padding e border non la fanno sbordare */
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid var(--accent-color);
    line-height: 50px; /* controlli l’altezza reale */
    text-align: left;
    font-family: 'VT323', monospace;
    position: sticky;
    top: 64px;
    z-index: 9;
    transition: transform 0.25s ease;
    backdrop-filter: blur(4px); 
    
}

.breadcrumb-nav.hide {
    transform: translateY(-100%);
}

.breadcrumb-content {
    max-width: 1200px;
    margin-left: 20px;   /* <-- attaccato a sinistra */
    margin-right: auto;
    font-size: 20px;
}


.breadcrumb-nav .prompt {
    color: var(--accent-color);
    margin-right: 8px;
}

.breadcrumb-nav a {
    color: var(--link-color);
    text-decoration: none;
    transition: 0.2s;
}

.breadcrumb-nav a:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px var(--link-color);
}

.breadcrumb-nav .sep {
    color: var(--text-color);
    margin: 0 5px;
    opacity: 0.5;
}

.breadcrumb-nav .current {
    color: var(--text-color);
    opacity: 0.9;
}

.breadcrumb-dropdown {
    display: inline-block;
    position: relative;
}

/* 🔥 RENDIAMO IL TRIGGER CLICCABILE SU IPHONE */
.current-drop {
    color: #00ffaa;
    text-shadow: 0 0 8px #00ffaa;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: -15px;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* MENU NASCOSTO DI DEFAULT */
.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 63%;
    background: #000;
    border: 2px solid var(--accent-color);
    list-style: none;
    padding: 10px;
    min-width: 200px;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* 🔥 MENU VISIBILE QUANDO HA LA CLASSE .open */
.dropdown-content.open {
    display: block;
}

.dropdown-content li a {
    display: block;
    padding: 5px 0;
    font-size: 18px;
    color: var(--link-color) !important;
}

.dropdown-content li a:hover {
    background: var(--accent-color);
    color: #000 !important;
}

.dropdown-content hr {
    border: 0;
    border-top: 1px solid #33004d;
    margin: 5px 0;
}

/* MOBILE FIX COMPLETO */
@media (max-width: 700px) {
    
    .breadcrumb-nav {
        height: 50px;            /* altezza fissa */
        line-height: 50px;
        padding: 0 0;            /* niente padding verticale */
    }

    .breadcrumb-nav.hide {
        transform: translateY(-100%);
        height: 50px !important;   /* NON deve diventare 0 */
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }


    /* --- BREADCRUMB --- */
    .breadcrumb-content {
        font-size: 18px;
        padding-left: 10px !important;   /* margine interno a sinistra */
        padding-right: 10px !important;  /* opzionale, per simmetria */
    }

    /* --- NAVBAR MOBILE FIX --- */
    .navbar {
        padding: 0 20px;
        height: 64px;
        line-height: 40px;
        background: #000000e6;
        flex-wrap: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .navbar::before {
        top: -20vh;        /* copre molto più scroll */
        height: 20vh;      /* proporzionale allo schermo */
        background: #000000e6;
        backdrop-filter: blur(4px);
    }

    .breadcrumb-nav .prompt {
        font-size: 0 !important; /* nasconde il testo originale */
    }

    .breadcrumb-nav .prompt::before {
        content: "ZarVille:~$";        /* testo abbreviato */
        font-size: 16px;         /* dimensione visibile */
        opacity: 0.8;
    }

    .nav-logo a {
        line-height: 50px;
    }

    .menu-toggle {
        display: block;
        font-size: 32px;
        color: #ff007f;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        line-height: 1;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
        background: #000000dd;
        padding: 15px;
        border: 2px solid #b300ff;
        position: absolute;
        right: 20px;
        top: 50px; /* sotto la navbar */
        display: none;
    }
    

    .dropdown-content {
        min-width: unset !important;     /* annulla il 200px */
        width: auto !important;
        width: 120px !important;     /* larghezza sicura */
        left: 32% !important;
        transform: translateX(-50%) !important;
        white-space: normal !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }


    .nav-links.open {
        display: flex;
    }
}






/* HERO */
.hero {
    padding: 80px 20px;
    background: linear-gradient(180deg, #000000, #1a0033);
    border-bottom: 2px solid #b300ff;
}

.title {
    font-size: 64px;
    color: #00eaff;
    text-shadow: 0 0 10px #00eaff;
}

.subtitle {
    font-size: 24px;
    color: #ff007f;
    margin-bottom: 30px;
}

.hero-buttons .btn {
    display: inline-block;
    margin: 10px;
    padding: 12px 25px;
    background: #b300ff;
    color: white;
    text-decoration: none;
    font-size: 22px;
    border-radius: 4px;
    box-shadow: 0 0 10px #b300ff;
    transition: 0.2s;
}

.hero-buttons .btn:hover {
    background: #ff007f;
    box-shadow: 0 0 15px #ff007f;
}








.social-bar {
    margin: 40px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.social-icon {
    width: 120px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    position: relative;
    transition: 0.2s;
    letter-spacing: 1px;
}


/* Effetto hover */
.social-icon:hover {
    transform: scale(1.12);
}

/* Bordi neon personalizzati */
.social-icon.instagram::before,
.social-icon.tiktok::before,
.social-icon.discord::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 4px solid;
    box-shadow: 0 0 10px;
    pointer-events: none;
}

/* Colori neon */
.social-icon.instagram::before {
    border-color: #ff007f;
    box-shadow: 0 0 10px #ff007f;
}

.social-icon.tiktok::before {
    border-color: #00eaff;
    box-shadow: 0 0 10px #00eaff;
}

.social-icon.discord::before {
    border-color: #b300ff;
    box-shadow: 0 0 10px #b300ff;
}






/* SEZIONI */
.section {
    padding: 50px 20px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 40px;
    color: #00eaff;
    text-shadow: 0 0 8px #00eaff;
}

.section-text {
    max-width: 600px;
    margin: 0 auto 30px;
    font-size: 22px;
}

.section-intro {
    max-width: 900px;
    margin: 0 auto 30px;
    font-size: 22px;
    text-align: left;
}


/* Pag STREAM */

.small-hero {
    padding: 50px 20px;
    background: linear-gradient(180deg, #000000, #33004d);
    border-bottom: 2px solid #ff007f;
}

.date {
    margin-top: 10px;
    font-size: 20px;
    color: #00eaff;
    text-shadow: 0 0 5px #00eaff;
}










/* Lista giochi testati */

.table-container {
    overflow-x: auto;
    margin-top: 20px;
}

.retro-table {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 20px;
    background: #1a1a1a;
    border: 2px solid #b300ff;
    box-shadow: 0 0 10px #b300ff;
}

.retro-table th, .retro-table td {
    padding: 12px;
    border: 1px solid #33004d;
}

.retro-table th {
    background: #33004d;
    color: #00eaff;
    text-shadow: 0 0 5px #00eaff;
}

.ok {
    color: #00ff88;
    text-shadow: 0 0 5px #00ff88;
}

.fix {
    color: #ffcc00;
    text-shadow: 0 0 5px #ffcc00;
}

.no {
    color: #ff0033;
    text-shadow: 0 0 5px #ff0033;
}



/* ============================================
   RETROZAR – FORMATTAZIONE LISTE / INDICE (TOC)
   Tutte le opzioni sono modulari.
   Decommenta ciò che vuoi attivare.
   ============================================ */

/* --- CONTENITORE TOC --- */
nav.toc {
    /* text-align: center; */      /* Centra tutto l’indice */
    /* text-align: left; */        /* Allinea tutto a sinistra */
    margin-bottom: 2rem;
}

/* --- LISTA ORDINATA (OL) --- */
nav.toc ol {
    /* list-style-type: decimal; */        /* Mostra i numeri */
    list-style-type: none !important;      /* Rimuove i numeri */
    
    padding-left: 0 !important;            /* Rimuove indentazione */
    margin: 0 auto !important;

    /* display: block; */                  /* Larghezza piena */
    display: inline-block;                 /* Larghezza minima (utile per centrato) */

    /* text-align: left; */                /* Allinea link a sinistra */
    /* text-align: center; */              /* Allinea link al centro */
}

/* --- SPAZIATURA TRA LE VOCI --- */
nav.toc ol li {
    margin-bottom: 0.8rem;                 /* Spazio verticale tra voci */
    /* margin-bottom: 1.2rem; */           /* Spazio maggiore */
}

/* --- LINK DELL’INDICE --- */
nav.toc ol li a {
    display: inline-block;
    padding: 0.4rem 0.2rem;                /* Aumenta area cliccabile (touch friendly) */

    color: var(--link-color) !important;   /* Ciano RetroZar */
    text-decoration: none;
    font-weight: 500;

    /* font-size: 20px; */                 /* Dimensione personalizzata */
    /* letter-spacing: 1px; */             /* Spaziatura stile retro */
}

/* --- HOVER NEON --- */
nav.toc ol li a:hover {
    text-decoration: underline;
    color: var(--accent-color) !important; /* Rosa neon RetroZar */
    /* text-shadow: 0 0 8px var(--accent-color); */ /* Glow neon */
}

/* --- STATO ATTIVO (clic) --- */
nav.toc ol li a:active {
     color: #b300ff !important;        /* Viola neon */
}

/* --- STILE PER SEZIONE ATTIVA (scrollspy manuale) --- */
/*
nav.toc ol li a.active {
    color: var(--accent-color) !important;
    text-shadow: 0 0 8px var(--accent-color);
    font-weight: 700;
}
*/



















/* WRAPPER CARD */
.cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* CARD BASE */
.card {
    background: #1a1a1a;
    width: 250px;
    height: 260px;
    padding: 20px;
    border: 2px solid #b300ff;
    box-shadow: 0 0 10px #b300ff;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;

    display: grid;
    grid-template-rows: 78px 156px 26px; /* 3 aree proporzionali */
}

/* Ogni area è un contenitore centrato */
.card-title,
.card-desc,
.card-pie {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* TITLE */
.card-title {
    display: flex;
    justify-content: center;
    align-items: center;          /*flex-start; /* allinea in alto */
    text-align: center;

    margin-top: -2px; /* sposta verso l’alto */
    padding-left: 5px;
    padding-right: 5px;

    color: #ff007f;
    font-size: 24px;
    line-height: 1.2;
}



/* DESC (testo autodimensionabile) */
.card-desc {
    color: #e6e6e6;
    font-size: 18px;
    line-height: 1.2;
    padding: 0 10px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* max 4 righe */
    -webkit-box-orient: vertical;
}

.card-pie {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* allinea in alto */
    text-align: center;

    margin-top: -2px; /* micro spostamento verso l’alto */

    color: #00eaff;
    text-shadow: 0 0 5px #00eaff;
    font-size: 18px;
}
.card-pie a {
    color: inherit;
    text-decoration: none;
}

.card-pie a:hover {
    text-decoration: underline; /* opzionale */
}








/* CARD WIP: effetto TV senza segnale */
.card.wip1 {
    position: relative;
    overflow: hidden;
}

/* NEVE TV */
.card.wip1::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.25) 0px,
            rgba(255,255,255,0.25) 1px,
            rgba(0,0,0,0.25) 2px,
            rgba(0,0,0,0.25) 3px
        );
    mix-blend-mode: screen;
    opacity: 0.45; /* molto più visibile */
    animation: snowTV 0.08s steps(6) infinite;
    pointer-events: none;
}

/* Movimento caotico */
@keyframes snowTV {
    0% { transform: translate(0,0); }
    25% { transform: translate(-10px, 5px); }
    50% { transform: translate(5px, -10px); }
    75% { transform: translate(-5px, -5px); }
    100% { transform: translate(0,0); }
}


.card.wip11 {
    position: relative;
    overflow: hidden;
}

/* NEVE TV A PALLINI VERI */
.card.wip11::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, white 0%, white 50%, black 51%, black 100%);
    background-size: 5px 5px; /* pallini piccoli e fitti */
    opacity: 0.9; /* quasi piena visibilità */
    animation: snowPixels 0.03s steps(2) infinite;
    pointer-events: none;
}

/* Movimento caotico */
@keyframes snowPixels {
    0% { transform: translate(0,0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(2px, -3px); }
    75% { transform: translate(-2px, -1px); }
    100% { transform: translate(0,0); }
}



/* Scanlines CRT (righe orizzontali) */
.card.wip2 {
    position: relative;
    overflow: hidden;
}

/* SCANLINES CRT POTENZIATE */
.card.wip2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.18) 0px,
        rgba(255,255,255,0.18) 2px,
        rgba(0,0,0,0.25) 3px,
        rgba(0,0,0,0.25) 6px
    );
    opacity: 0.45; /* molto più visibile */
    mix-blend-mode: overlay;
    animation: crtFlicker 0.12s infinite;
    pointer-events: none;
}

/* FLICKER CRT */
@keyframes crtFlicker {
    0% { opacity: 0.40; filter: brightness(1); }
    50% { opacity: 0.55; filter: brightness(0.9); }
    100% { opacity: 0.40; filter: brightness(1); }
}







/* Disturbo forte stile “NO SIGNAL” */
.card.wip3 {
    position: relative;
    overflow: hidden;
    animation: wipFlicker 0.15s infinite;
}

.card.wip3::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.08) 0px,
        rgba(255,255,255,0.08) 2px,
        rgba(0,0,0,0.1) 3px,
        rgba(0,0,0,0.1) 4px
    );
    opacity: 0.2;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes wipFlicker {
    0% { filter: brightness(1); }
    50% { filter: brightness(0.8); }
    100% { filter: brightness(1); }
}






/* Disturbo diagonale stile VHS */
.card.wip4 {
    position: relative;
    overflow: hidden;
}

.card.wip4::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.18) 0px,
        rgba(255,255,255,0.18) 2px,
        rgba(0,0,0,0.2) 3px,
        rgba(0,0,0,0.2) 6px
    );
    opacity: 0.25;
    mix-blend-mode: screen;
    pointer-events: none;
}



/* Disturbo diagonale stile VHS */
.card.wip5 {
    position: relative;
    overflow: hidden;
}

.card.wip5::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,0,255,0.15) 0px,
        rgba(255,0,255,0.15) 2px,
        transparent 3px,
        transparent 6px
    );
    animation: glitchMove 0.3s infinite;
    mix-blend-mode: lighten;
    pointer-events: none;
}

@keyframes glitchMove {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}



.card.wip12 {
    position: relative;
    overflow: hidden;
}

/* LAYER 1 – neve fine */
.card.wip12::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, white 0%, white 50%, black 51%, black 100%);
    background-size: 2px 2px;
    opacity: 0.55;
    animation: snowLayer1 0.04s steps(2) infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* LAYER 2 – neve media */
.card.wip12::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, white 0%, white 50%, black 51%, black 100%);
    background-size: 3px 3px;
    opacity: 0.35;
    animation: snowLayer2 0.06s steps(3) infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* LAYER 3 – neve grossa (aggiunto via pseudo-elemento extra) */
.card.wip12 .snow3 {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, white 0%, white 50%, black 51%, black 100%);
    background-size: 4px 4px;
    opacity: 0.25;
    animation: snowLayer3 0.08s steps(4) infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Animazioni morbide e indipendenti */
@keyframes snowLayer1 {
    0% { transform: translate(0,0); }
    100% { transform: translate(-2px, 1px); }
}

@keyframes snowLayer2 {
    0% { transform: translate(0,0); }
    100% { transform: translate(3px, -2px); }
}

@keyframes snowLayer3 {
    0% { transform: translate(0,0); }
    100% { transform: translate(-4px, 3px); }
}



/* CARD WIP13 – CRT sopra, video sotto */
.card.wip13 {
    position: relative;
    overflow: hidden;
     z-index: 1; /* sotto la navbar */
}

/* VIDEO NOISE – sotto al CRT */
.card.wip13 .noise-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 998; /* sotto il CRT */
}

.card.wip13 .noise-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1; /* pieno */
}

/* CRT – sopra al video */
.card.wip13::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center,
            rgba(255,255,255,0.10) 0%,
            rgba(0,0,0,0.25) 70%,
            rgba(0,0,0,0.55) 100%
        );

    opacity: 0.35;
    mix-blend-mode: normal;

    transform: perspective(800px) scale(1.03);
    transform-origin: center;

    box-shadow:
        inset 0 0 25px rgba(255,255,255,0.15),
        inset 0 0 60px rgba(0,0,0,0.6);

    pointer-events: none;

    z-index: 999; /* CRT SOPRA TUTTO */
}

/* CONTENUTO INVISIBILE */
.card.wip13 > *:not(.noise-video):not(.crt-glass) {
    position: relative;
    z-index: 1;
    opacity: 0;
}





.card.wip14 {
    position: relative;
    overflow: hidden;
}

/* Effetto CRT sopra al contenuto */
.card.wip14::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center,
            rgba(255,255,255,0.10) 0%,
            rgba(0,0,0,0.25) 70%,
            rgba(0,0,0,0.55) 100%
        ),
        url("../img/noise-tv2.gif") center/cover no-repeat;

    opacity: 0.85;
    mix-blend-mode: normal;

    /* Curvatura CRT */
    transform: perspective(800px) scale(1.03);
    transform-origin: center;

    /* Glow del bordo */
    box-shadow:
        inset 0 0 25px rgba(255,255,255,0.15),
        inset 0 0 60px rgba(0,0,0,0.6);

    pointer-events: none;

    z-index: 3; /* SOPRA al contenuto */
}

/* Il contenuto va sotto il vetro */
.card.wip14 > * {
    position: relative;
    z-index: 1;
    opacity: 0; /* se vuoi che sparisca del tutto */
}




.card.wip15 {
    position: relative;
    overflow: hidden;
}

/* Effetto CRT sopra al contenuto */
.card.wip15::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at center,
            rgba(255,255,255,0.10) 0%,
            rgba(0,0,0,0.25) 70%,
            rgba(0,0,0,0.55) 100%
        ),
        url("../img/noise-tv3.gif") center/cover no-repeat;

    opacity: 0.85;
    mix-blend-mode: normal;

    /* Curvatura CRT */
    transform: perspective(800px) scale(1.03);
    transform-origin: center;

    /* Glow del bordo */
    box-shadow:
        inset 0 0 25px rgba(255,255,255,0.15),
        inset 0 0 60px rgba(0,0,0,0.6);

    pointer-events: none;

    z-index: 3; /* SOPRA al contenuto */
}

/* Il contenuto va sotto il vetro */
.card.wip15 > * {
    position: relative;
    z-index: 1;
    opacity: 0; /* se vuoi che sparisca del tutto */
}









/* Effetto CRT globale */
.crt {
    position: relative;
}
/* CRT globale – parte SPENTO (niente CLS) */
.crt::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.9) 80%);
    mix-blend-mode: overlay;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Scanlines – parte SPENTO */
.scanlines::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 2px,
        transparent 2px,
        transparent 4px
    );
    z-index: 998;
    opacity: 0;
    transition: opacity 0.35s ease;
}




/* Flicker leggero */
@keyframes flicker {
    0% { opacity: 0.97; }
    5% { opacity: 0.95; }
    10% { opacity: 0.98; }
    15% { opacity: 0.96; }
    20% { opacity: 0.99; }
    100% { opacity: 0.97; }
}

.flicker {
    animation: flicker 0.15s infinite;
}










/* Glitch ZarVille */
.glitch {
    position: relative;
    display: inline-block;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff007f;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #b300ff;
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(0 0 80% 0); }
    20% { clip-path: inset(10% 0 60% 0); }
    40% { clip-path: inset(20% 0 40% 0); }
    60% { clip-path: inset(30% 0 20% 0); }
    80% { clip-path: inset(40% 0 10% 0); }
    100% { clip-path: inset(50% 0 0 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(50% 0 0 0); }
    20% { clip-path: inset(40% 0 10% 0); }
    40% { clip-path: inset(30% 0 20% 0); }
    60% { clip-path: inset(20% 0 40% 0); }
    80% { clip-path: inset(10% 0 60% 0); }
    100% { clip-path: inset(0 0 80% 0); }
}







/* Noise – parte SPENTO */
.noise::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noise)'/></svg>");
    opacity: 0;
    z-index: 997;
    transition: opacity 0.35s ease;
}



@media (max-width: 700px) {
    #bios-boot {
        font-size: 20px !important;
        padding: 15px !important;
    }

    .bios-text p {
        font-size: 26px !important;
    }
}

@media (max-width: 500px) {
    #bios-boot {
        font-size: 16px !important;
        padding: 10px !important;
    }

    .bios-text p {
        font-size: 20px !important;
    }
}










/* BOX CODICE RETROZAR */
.code-box {
    background: #0d0d0d;
    border: 2px solid #ff007f;
    box-shadow: 0 0 10px #ff007f;
    padding: 15px;
    margin: 25px auto 70px;
    max-width: 800px;
    text-align: left;
    position: relative;
    border-radius: 6px;
}

.code-box pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    font-family: monospace;
    font-size: 18px;
    color: #e6e6e6;
    white-space: pre-wrap;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff007f;
    color: #000;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'VT323', monospace;
    transition: 0.2s;
}

.copy-btn:hover {
    background: #ff007f;
    color: #fff;
    box-shadow: 0 0 10px #ff007f;
}

/* BOX OUTPUT TERMINALE RETROZAR (NEON CIANO) */
.output-box {
    background: #0d0d0d;
    border: 2px solid #00eaff;
    box-shadow: 0 0 10px #00eaff;
    padding: 15px;
    margin: 25px auto;
    max-width: 800px;
    text-align: left;
    position: relative;
    border-radius: 6px;
}

.output-box pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    font-family: monospace;
    font-size: 18px;
    color: #e6e6e6;
    white-space: pre-wrap;
}

figure figcaption {
    color: var(--accent-color);
    font-size: 0.9rem;
    margin-bottom: 6px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.5px;
}






/* LINK GLOBALI – stile ZarVille */
a {
    color: #00eaff;
    text-decoration: none;
    font-size: 25px; /* o 18px, o 22px… scegli tu */
}

a:visited {
    color: #00eaff; /* niente viola */
}

a:hover {
    color: #ff007f; /* neon rosa come hover del sito */
    text-shadow: 0 0 8px #ff007f;
}

a:active {
    color: #b300ff; /* viola neon coerente col tema */
}







/* --- SEO COVER IMAGE (RetroZar) --- */

.seo-cover-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    z-index: 1;
  
}

.seo-cover {
    width: 100%;
    max-width: 250px;
    border-radius: 10px;
    margin-top: 40px; /* abbassa l’immagine */
}




@font-face {
    font-family: 'VT323';
    src: url('/fonts/VT323.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: optional;
}




#popup-layer {
    position: fixed;
    inset: 0;
    z-index: 999999999;
    pointer-events: none;
}




/* FOOTER */
.footer {
    padding: 20px;
    background: #000;
    border-top: 2px solid #b300ff;
    font-size: 20px;
    position: relative; /* necessario per il posizionamento assoluto interno */
}


/* Quando la pagina è pronta, accendi gli overlay */
body.crt-ready.crt::before {
    opacity: 1;
}

body.crt-ready.scanlines::after {
    opacity: 1;
}

body.crt-ready.noise::before {
    opacity: 0.05; /* il valore che avevi prima */
}



/* COIN */
.footer-support {
  position: absolute;
  bottom: 20px;   /* allineato al padding del footer */
  left: 20px;     /* coerente con il layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}

.coin-gif {
  width: 48px;
  height: auto;
  image-rendering: pixelated;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.coin-gif:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px #00ffaa);
}

.support-text {
  margin: 0;
  font-size: 0.75rem;
  color: #00ffaa;
  text-shadow: 0 0 4px #003322;
}

@media (max-width: 600px) {
    .footer-support {
        position: static;
        margin: 20px auto 0 auto; /* centrata */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-inner {
        text-align: center; /* opzionale, migliora l’estetica mobile */
    }
}







/* MODALE LEGAL – stile HERO ZarVille */
.legal-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 999999;
    padding: 40px 20px;

    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 200px;
    /* ANIMAZIONE */
    transform: translateY(20px);
    opacity: 0;
    transition: 0.35s ease;

    /* 👇 NON BLOCCA I CLICK SOTTO */
    pointer-events: none;
}

.legal-modal.active {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

html.modal-open,
body.modal-open {
    height: 100%;
    touch-action: none;
}



.legal-box {
    pointer-events: auto;
    background: #000;
    border: 2px solid #b300ff;
    box-shadow: 0 0 15px #b300ff;
    max-width: 800px;
    margin: 0 auto;
    padding: 25px;
    border-radius: 6px;
    text-align: left;
    font-size: 22px;
    color: #e6e6e6;
    font-family: 'VT323', monospace;

    /* NUOVE PROPRIETÀ */
    max-height: 55vh;   /* altezza massima: metà schermo */
    overflow-y: auto;   /* scroll verticale interno */
}


/* SCROLLBAR NEON ZARVILLE */


.legal-box::-webkit-scrollbar {
    width: 12px;
}

.legal-box::-webkit-scrollbar-track {
    background: #000;
    border-left: 2px solid #33004d;
}

.legal-box::-webkit-scrollbar-thumb {
    background: #b300ff;
    border: 2px solid #000;
    border-radius: 6px;
    box-shadow: 0 0 10px #b300ff, 0 0 4px #ff007f inset;
}

.legal-box::-webkit-scrollbar-thumb:hover {
    background: #ff007f;
    box-shadow: 0 0 12px #ff007f, 0 0 6px #b300ff inset;
}


.legal-box h2 {
    color: #00eaff;
    text-shadow: 0 0 10px #00eaff;
    margin-top: 0;
    font-size: 36px;
}

.legal-content {
    margin-top: 20px;
    line-height: 1.4;
}

.legal-close {
    float: right;
    font-size: 32px;
    cursor: pointer;
    color: #ff007f;
    text-shadow: 0 0 10px #ff007f;
}

.legal-close:hover {
    color: #fff;
}

/* Spegne CRT sotto la modale */
body.modal-open.crt::before,
body.modal-open.scanlines::after,
body.modal-open.noise::before {
    opacity: 0 !important;
}

.legal-btn {
    background: none;
    border: none;
    color: #00eaff;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
}

.legal-btn:hover {
    color: #ff007f;
    text-shadow: 0 0 8px #ff007f;
}






/* Personalizza l'evidenziatore di Google */
::target-text {
    background-color: var(--accent-color); /* Usa il tuo magenta invece del giallo */
    color: #fff; /* Testo bianco per contrasto */
}