:root{
            --neon-pink: #ff007a;
            --neon-cyan: #00f5ff;
            --neon-purple: #9b5cff;
            --neon-green: #00ffb3;
            --bg-dark: #06060a;
            --card: rgba(20,18,28,0.65);
            --glass-border: rgba(255,255,255,0.04);
            --glass-strong: rgba(255,255,255,0.06);
        }

        *{box-sizing:border-box;margin:0;padding:0}
        html,body{height:100%}
        body{
            font-family:'Rajdhani',sans-serif;
            background: linear-gradient(180deg,#04040a 0%, #0b0520 60%);
            color:#e6e6ff;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            overflow-x:hidden;
        }

        /* canvas bg */
        #bg-canvas{
            position:fixed;
            inset:0;
            z-index:-3;
            display:block;
            width:100%;
            height:100%;
        }

        /* subtle vignette and noise */
        .bg-overlay{
            position:fixed; inset:0; z-index:-2;
            background:
                radial-gradient(60% 40% at 10% 10%, rgba(0,245,255,0.03), transparent 10%),
                radial-gradient(40% 30% at 90% 80%, rgba(131,56,236,0.03), transparent 8%),
                linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.5));
            pointer-events:none;
        }

        /* grid + scanline */
        .grid-overlay{
            position:fixed; inset:0; z-index:-1;
            background-image:
                linear-gradient(rgba(0,245,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,0,122,0.02) 1px, transparent 1px);
            background-size: 60px 60px, 60px 60px;
            mix-blend-mode:overlay;
            filter:blur(0.5px) saturate(120%);
            opacity:0.85;
            transform:translateZ(0);
            pointer-events:none;
            animation: gridShift 35s linear infinite;
        }
        @keyframes gridShift{0%{transform:translateY(0)}100%{transform:translateY(80px)}}

        /* NAVBAR */
        .navbar{
            position:fixed; top:16px; left:50%; transform:translateX(-50%);
            width:92%; max-width:1400px;
            z-index:1200;
            display:flex; align-items:center; justify-content:space-between;
            padding:12px 18px;
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
            border-radius:14px;
            border:1px solid var(--glass-border);
            box-shadow: 0 6px 30px rgba(2,4,10,0.7);
            backdrop-filter: blur(8px) saturate(140%);
        }

        .logo{
            display:flex; gap:14px; align-items:center;
            color:var(--neon-cyan);
            font-family:'Orbitron',sans-serif;
            font-weight:900; letter-spacing:1px;
            font-size:1.05rem;
            text-transform:uppercase;
            cursor:default;
            user-select:none;
        }

        /* logo glitch */
        .logo .brand{
            position:relative;
            filter: drop-shadow(0 0 12px rgba(0,245,255,0.18));
        }
        .glitch{
            position:relative;
            display:inline-block;
        }
        .glitch::before, .glitch::after{
            content:attr(data-text);
            position:absolute; left:0; top:0;
            width:100%;
            clip-path:polygon(0 0,100% 0,100% 0,0 0);
            opacity:0.8;
            transform:translateZ(0);
        }
        .glitch::before{color:var(--neon-pink); z-index:-1; animation:glitchTop 2.8s infinite linear;}
        .glitch::after{color:var(--neon-purple); z-index:-2; animation:glitchBot 3.2s infinite linear;}
        @keyframes glitchTop{
            0%{clip-path:polygon(0 0,100% 0,100% 0,0 0); transform:translateX(0) skewX(0)}
            10%{clip-path:polygon(0 2%,100% 0,100% 10%,0 8%); transform:translateX(-2px)}
            20%{clip-path:polygon(0 15%,100% 12%,100% 20%,0 20%); transform:translateX(2px)}
            100%{clip-path:polygon(0 0,100% 0,100% 0,0 0)}
        }
        @keyframes glitchBot{
            5%{clip-path:polygon(0 70%,100% 72%,100% 78%,0 80%); transform:translateX(1px)}
            30%{clip-path:polygon(0 48%,100% 54%,100% 64%,0 62%); transform:translateX(-1px)}
            100%{clip-path:polygon(0 0,100% 0,100% 0,0 0)}
        }

        .nav-links{
            display:flex; gap:18px; align-items:center;
            list-style:none;
        }
        .nav-links a{
            color:#eef6ff; text-decoration:none; font-weight:700;
            padding:8px 12px; border-radius:8px; font-size:0.95rem;
            transition:all .22s ease;
            position:relative;
        }
        .nav-links a::after{
            content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
            width:0; height:3px; border-radius:3px;
            background: linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
            transition:width .22s;
        }
        .nav-links a:hover{ color:var(--neon-cyan) }
        .nav-links a:hover::after{ width:70% }

        .store-btn{
            display:inline-flex; align-items:center; gap:10px;
            background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));
            padding:10px 18px; color:white; border-radius:999px; font-weight:800;
            box-shadow:0 8px 36px rgba(155,92,255,0.12);
            text-decoration:none; transition:transform .18s;
        }
        .store-btn:hover{ transform:translateY(-4px) }

        /* hamburger for mobile */
        .hamburger{ display:none; width:44px; height:38px; align-items:center; justify-content:center; cursor:pointer; border-radius:10px }
        .hamburger span{ display:block; width:22px; height:2px; background:#cfeefb; border-radius:2px; position:relative; transition: all .2s }
        .hamburger.open span{ background:transparent }
        .hamburger.open span::before{ transform:translateY(0) rotate(45deg); }
        .hamburger.open span::after{ transform:translateY(0) rotate(-45deg); }
        .hamburger span::before, .hamburger span::after{ content:''; position:absolute; left:0; width:22px; height:2px; background:#cfeefb; border-radius:2px; transition:all .2s; }
        .hamburger span::before{ transform:translateY(-7px) }
        .hamburger span::after{ transform:translateY(7px) }

        /* HERO */
        .hero{
            min-height:100vh; display:flex; align-items:center; justify-content:center;
            padding:140px 5% 80px; position:relative; overflow:visible;
        }
        .hero-inner{
            max-width:1400px; width:100%;
            display:grid; grid-template-columns: 1fr 480px; gap:48px; align-items:center;
        }
        @media (max-width:980px){
            .hero-inner{ grid-template-columns:1fr; text-align:center }
            .hamburger{ display:flex }
            .nav-links{ display:none }
        }

        .hero-copy h1{
            font-family:'Orbitron',sans-serif; font-size:3.8rem; line-height:1; letter-spacing:1px;
            margin-bottom:12px;
            background: linear-gradient(90deg,var(--neon-cyan),var(--neon-purple),var(--neon-pink));
            -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
            text-shadow:0 0 18px rgba(0,245,255,0.12);
            animation:headlineFloat 6s ease-in-out infinite;
        }
        @keyframes headlineFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

        .subtitle{ color:#bfc9ff; font-size:1.12rem; margin-bottom:20px; max-width:58ch }

        .cta-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px }
        .cta-primary{
            display:inline-flex; align-items:center; gap:10px;
            padding:14px 22px; border-radius:14px; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple));
            color:#031018; font-weight:900; text-decoration:none; box-shadow:0 12px 40px rgba(0,245,255,0.12);
        }
        .cta-secondary{
            padding:12px 18px; border-radius:12px; border:1px solid rgba(0,245,255,0.14);
            color:var(--neon-cyan); background:transparent; text-decoration:none; font-weight:700;
        }

        /* hero card */
        .hero-card{
            position:relative; margin:auto;
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
            border-radius:20px; padding:22px; border:1px solid var(--glass-border);
            box-shadow:0 10px 40px rgba(2,6,20,0.6); backdrop-filter: blur(10px);
        }
        .hero-card img{ width:100%; border-radius:12px; display:block; filter:drop-shadow(0 0 30px rgba(0,245,255,0.16)) }
        .status-strip{
            display:flex; justify-content:space-between; gap:12px; margin-top:12px; align-items:center;
        }
        .status-chip{
            background:linear-gradient(90deg, rgba(0,245,255,0.06), rgba(155,92,255,0.04));
            padding:8px 12px; border-radius:12px; font-weight:700; font-size:0.95rem; color:#dff9ff;
            border:1px solid rgba(255,255,255,0.03);
        }

        /* features */
        .section{
            padding:80px 5%;
        }
        .section-title{
            font-family:'Orbitron',sans-serif; font-size:2.4rem; text-align:center;
            margin-bottom:28px; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink)); background-clip:text; color:transparent;
        }

        .features-grid{
            display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1200px; margin:0 auto;
        }
        @media (max-width:980px){ .features-grid{ grid-template-columns:repeat(2,1fr) } }
        @media (max-width:600px){ .features-grid{ grid-template-columns:1fr } }

        .feature-card{
            background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
            padding:20px; border-radius:16px; border:1px solid var(--glass-border);
            display:flex; gap:14px; align-items:flex-start; transition:transform .28s ease, box-shadow .28s ease;
            backdrop-filter:blur(6px);
        }
        .feature-card:hover{ transform:translateY(-8px); box-shadow:0 30px 80px rgba(0,0,0,0.6) }
        .feature-icon{
            width:64px; height:64px; border-radius:12px;
            display:flex; align-items:center; justify-content:center; font-size:1.6rem;
            background:linear-gradient(135deg,var(--neon-cyan), var(--neon-purple));
            box-shadow:0 10px 36px rgba(0,245,255,0.07);
            flex-shrink:0;
        }
        .feature-body h3{ font-family:'Orbitron',sans-serif; margin-bottom:6px; color:var(--neon-cyan); font-size:1.05rem }
        .feature-body p{ color:#b8b8d1; font-size:0.96rem; line-height:1.5 }

        /* wave divider */
        .wave-divider{ width:100%; height:120px; display:block; margin-top:-20px; transform:rotate(180deg) }

        /* steps */
        .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1200px; margin:40px auto 0 }
        @media (max-width:980px){ .steps{ grid-template-columns:repeat(1,1fr) } }
        .step{
            background:var(--card); padding:22px; border-radius:14px; border:1px solid var(--glass-strong); text-align:center;
            transition:transform .25s ease, box-shadow .25s ease;
        }
        .step-num{ width:68px; height:68px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.3rem;
            background:linear-gradient(90deg,var(--neon-pink),var(--neon-purple)); box-shadow:0 10px 36px rgba(255,0,122,0.08) }
        .step h3{ font-family:'Orbitron',sans-serif; color:var(--neon-cyan); margin-bottom:8px }

        /* FAQ */
        .faq-grid{ max-width:900px; margin:0 auto; display:grid; gap:12px }
        .faq-item{ background:var(--card); padding:14px; border-radius:12px; border:1px solid var(--glass-border); overflow:hidden }
        .faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:800; color:#e9f7ff }
        .faq-a{ margin-top:10px; color:#c9cfe8; line-height:1.6; max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s }
        .faq-item.open .faq-a{ max-height:400px; padding-top:10px }

        /* FOOTER */
        footer{ padding:38px 5%; margin-top:60px; border-top:1px solid rgba(255,255,255,0.02) }
        .footer-inner{ max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
        .social a{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:10px; margin-left:8px; background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple)); color:#021018; font-weight:900; text-decoration:none }
        .copyright{ color:#9fb8ff; font-weight:600 }

        /* subtle utility */
        .hidden{ display:none }

        /* reveal animation */
        .reveal{ opacity:0; transform:translateY(30px); transition:all .6s cubic-bezier(.2,.9,.2,1) }
        .reveal.show{ opacity:1; transform:translateY(0) }

        #player-list {
        list-style: none;       /* rimuove i bullet di default */
        padding: 0;             /* rimuove il padding */
        margin: 0 auto;         /* centra la lista */
        text-align: center;     /* centra il testo dei singoli li */
        }
        #player-list li::before {
            content: "- ";          /* aggiunge il trattino prima di ogni giocatore */
        }

        #mobileMenu {
        width: 75%;
        max-width: 460px;
        }

        .status-chip,
.step,
.feature-card,
.cta-primary,
.cta-secondary {
    position: relative;
    border: 1px solid rgba(0,245,255,0.2); /* bordo neon base più soft */
    box-shadow: 0 0 8px rgba(0,245,255,0.15), 0 0 16px rgba(155,92,255,0.1); /* glow leggero */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.status-chip:hover,
.step:hover,
.feature-card:hover,
.cta-primary:hover,
.cta-secondary:hover {
    border-color: rgba(0,245,255,0.4); /* bordo neon più visibile on hover */
    box-shadow: 0 0 12px rgba(0,245,255,0.25), 0 0 24px rgba(155,92,255,0.15); /* glow aumentato on hover */
}

/* --- NUOVI STILI PER LA GUIDA DOWNLOAD.HTML --- */

.tutorial-grid {
    display: flex;
    flex-direction: column; /* Impila verticalmente per i passaggi sequenziali */
    gap: 35px;
    max-width: 1000px;
    margin: 0 auto;
}

.tutorial-step {
    /* Stile base che imita le card esistenti */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(6px);
    
    /* Layout per testo e immagine */
    display: grid;
    grid-template-columns: 1fr 300px; /* Testo a sinistra (1fr), Immagine a destra (300px) */
    gap: 30px;
    align-items: center;
    position: relative;

    /* Per replicare l'hover-glow e il bordo neon */
    border: 1px solid rgba(0,245,255,0.2);
    box-shadow: 0 0 8px rgba(0,245,255,0.15), 0 0 16px rgba(155,92,255,0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.tutorial-step:hover {
    border-color: rgba(0,245,255,0.4);
    box-shadow: 0 0 12px rgba(0,245,255,0.25), 0 0 24px rgba(155,92,255,0.15);
}

.step-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(0,245,255,0.1);
    padding-bottom: 10px;
}

/* Riusa lo stile di .step-num per coerenza */
.tutorial-step .step-num {
    width: 50px; 
    height: 50px; 
    font-size: 1.5rem;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
    box-shadow: 0 5px 20px rgba(255, 0, 122, 0.15);
}

.step-header h2 {
    font-family: 'Orbitron', sans-serif; 
    color: var(--neon-cyan); 
    font-size: 1.8rem;
    line-height: 1.2;
}

.step-content p {
    color: #b8b8d1; 
    font-size: 1.05rem; 
    line-height: 1.6;
    margin-top: 8px;
}

.step-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    opacity: 0.9;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Media Query per mobile */
@media (max-width: 768px) {
    .tutorial-step {
        grid-template-columns: 1fr; /* Stack testo sopra immagine */
        gap: 20px;
        padding: 20px;
    }
    .step-image {
        order: 1; /* Sposta l'immagine sopra il contenuto del passo */
    }
    .step-content-container {
        order: 2;
    }
}

/* --- NUOVI STILI PER LA GUIDA DOWNLOAD.HTML (MODIFICATO PER IMMAGINE SOTTO) --- */

.tutorial-grid {
    display: flex;
    flex-direction: column; /* Impila verticalmente per i passaggi sequenziali */
    gap: 35px;
    max-width: 1000px;
    margin: 0 auto;
}

.tutorial-step {
    /* Stile base che imita le card esistenti */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    padding: 30px;
    border-radius: 16px;
    
    /* MODIFICA: Rimuove la griglia affiancata. Usa Flex o Block normale. */
    display: flex; 
    flex-direction: column; /* Stack verticale */
    gap: 25px; /* Spazio tra testo e immagine */
    
    align-items: flex-start;
    position: relative;

    /* Per replicare l'hover-glow e il bordo neon */
    border: 1px solid rgba(0,245,255,0.2);
    box-shadow: 0 0 8px rgba(0,245,255,0.15), 0 0 16px rgba(155,92,255,0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.tutorial-step:hover {
    border-color: rgba(0,245,255,0.4);
    box-shadow: 0 0 12px rgba(0,245,255,0.25), 0 0 24px rgba(155,92,255,0.15);
}

.step-content-container {
    /* Il contenitore del testo occuperà il 100% della larghezza */
    width: 100%;
    /* Aggiungo un padding orizzontale per centrare bene il contenuto testuale
       ma solo se il contenitore è molto largo, altrimenti meglio toglierlo.
       Per 1000px max-width, lo lascio pieno.
    */
}

.step-header {
    /* Manteniamo Flexbox per affiancare numero e titolo */
    display: flex;
    /* ALLINEAMENTO CHIAVE: Allinea gli elementi al centro verticalmente */
    align-items: center; 
    
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(0,245,255,0.1);
    padding-bottom: 10px;
}

/* Riusa lo stile di .step-num per coerenza */
.tutorial-step .step-num {
    /* ... (tutte le regole precedenti) ... */
    
    /* Aggiungo o assicuro che ci sia flexbox per un centro perfetto */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-header h2 {
    font-family: 'Orbitron', sans-serif; 
    color: var(--neon-cyan); 
    font-size: 1.8rem;
    line-height: 1.2;
    /* CORREZIONE ALLINEAMENTO OTTICO */
    /* Sposta il testo verso l'alto per allinearlo visivamente al centro del numero */
    transform: translateY(-4px); 
    /* Rimuoviamo qualsiasi margin-top negativo precedente per evitare sovrapposizioni */
    margin-top: 0; 
}

.step-content p {
    color: #b8b8d1; 
    font-size: 1.05rem; 
    line-height: 1.6;
    margin-top: 8px;
}

.step-image {
    /* L'immagine occupa ora il 100% della larghezza all'interno del padding della card */
    width: 100%; 
    height: auto;
    border-radius: 8px; /* Bordo leggermente ridotto per l'immagine grande */
    opacity: 0.9;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Media Query su Mobile */
@media (max-width: 768px) {
    .step-header h2 {
        font-size: 1.5rem; 
        margin-top: 0; /* Rimuovi la correzione su mobile */
    }
    .tutorial-step .step-num {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}