/* --- STILI GENERALI --- */
body { 
    background: linear-gradient(180deg, #b20000 0%, #4a0000 100%); 
    color: white; 
    font-family: 'Cinzel', serif; 
    margin: 0; 
    text-align: center; 
    overflow-x: hidden; 
    position: relative; 
    min-height: 100vh; 
}

.elegant-title { 
    font-family: 'Great Vibes', cursive; 
    font-size: 3.5em; 
    color: #f1c40f; 
    margin: 10px; 
}

/* --- MENU --- */
.snow-nav { 
    background: rgba(0,0,0,0.7); 
    padding: 20px; 
    border-bottom: 2px solid gold; 
    border-top: 2px solid gold;
    position: relative;
    z-index: 1000;
}
.snow-nav ul { list-style: none; padding: 0; margin: 0; display: inline-block; vertical-align: middle; }
.snow-nav li { display: inline; margin: 0 10px; }
.snow-nav a { color: #f1c40f; text-decoration: none; font-weight: bold; font-size: 1.1em; }
.active { color: white !important; text-shadow: 0 0 10px gold; }

.by-jack {
    color: white;
    font-size: 0.9em;
    font-weight: normal;
    text-shadow: none;
    margin-left: 20px !important;
    vertical-align: middle;
}

/* --- ELEMENTI PAGINE --- */
.main-gif { width: 320px; border: 4px solid gold; border-radius: 10px; margin-top: 20px; }
.info-center { 
    background: rgba(0,0,0,0.4); 
    max-width: 700px; 
    margin: 20px auto; 
    padding: 20px; 
    border-radius: 10px; 
    border: 1px solid gold; 
    position: relative; 
    z-index: 10; 
}
.join-btn { 
    background: #27ae60; 
    color: white; 
    padding: 12px 25px; 
    text-decoration: none; 
    display: inline-block; 
    margin-top: 20px; 
    font-weight: bold; 
    border-radius: 5px; 
    position: relative; 
    z-index: 10; 
}

/* --- GALLERY WANTED (In Gallery.html) --- */
.wanted-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); 
    gap: 10px; 
    padding: 20px; 
    position: relative; 
    z-index: 10; 
}
.santa-card img { width: 100%; border: 1px solid gold; }

/* --- GALLERIA GIOCO (In Game.html) --- */
.game-gallery {
    display: flex;          
    flex-wrap: wrap;       
    justify-content: center; 
    gap: 15px;             
    margin: 20px 0;
}

.game-img-small {
    width: 150px;          
    height: auto;
    border: 2px solid gold;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.game-img-small:hover {
    transform: scale(1.1);
}

/* --- LIGHTBOX (Ingrandimento Foto) --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
}
.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border: 3px solid gold;
}
.close-lightbox {
    position: absolute;
    top: 15px; right: 35px;
    color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer;
}

/* --- EFFETTO TEMPESTA DI NEVE --- */
.snow-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.snow-container::after {
    content: "";
    position: absolute;
    top: -100%; left: 0; width: 100%; height: 200%;
    background-image: 
        radial-gradient(2px 2px at 15px 15px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 30px 60px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 50px 20px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 70px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 100px 90px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 10px, #fff, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 170px 70px, #fff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 150px 150px;
    animation: snowStorm 3s linear infinite;
    opacity: 0.8;
}

@keyframes snowStorm {
    from { transform: translateY(0); }
    to { transform: translateY(150px); }
}