/* =====================================================
   VERSIONE MOBILE
   ===================================================== */

@media screen and (max-width:480px){

body{
    margin:0;
    overflow-x:hidden;
}

.contenutoTarot{
    width:100%;
    max-width:100%;
    padding:8px;
    box-sizing:border-box;
}


.nebbia-cosmica-sx{
    display:none;
}


.nebbia-cosmica-dx{
    display:none;
}
/* -----------------------
   Header
----------------------- */

.zona-superiore{
    width:100%;
    gap:8px;
    align-items:flex-start;
}

.card-stelle{
    width:85px;
    padding:8px 5px;
    margin-right:0;
}

.icona-stella{
    font-size:24px;
}

.numero-stelle{
    font-size:22px;
}

.titolo-stelle{
    font-size:12px;
}

.dettagli-stelle{
    font-size:12px;
    padding:6px 10px;
}

.titolo{
    font-size:38px;
    letter-spacing:1px;
}

.sottotitolo{
    font-size:10px;
    letter-spacing:1px;
}

.menu-btn{
    width:42px;
    height:42px;
    font-size:26px;
    transform:none;
    margin-top:0;
}

/* -----------------------
   Bentornato + Luna
----------------------- */

.gruppo-card{
    width:100%;
    display:flex;
    gap:6px;
    align-items:stretch;
}

.info{
    flex:1;
    min-width:0;
    padding:10px;
}

.card-luna{
    width:130px;
    flex-shrink:0;
    padding:10px;
    box-sizing:border-box;
}

.infoCiao{
    font-size:16px;
}

.felice,
.triste,
.neutro{
    margin:0 6px;
    font-size:26px !important;
}

.icona-luna{
    font-size:22px;
}

.lunaDecorativa{
    font-size:14px;
    flex-shrink:0;
}

.titoloBenvenuto{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}

/* -----------------------
   Energia Generale
----------------------- */
.energia-generale{
    width:100%;
    gap:15px;
    padding:15px;
    box-sizing:border-box;
}

.nome-segno {
    width: 100% !important;
    display:flex !important;
    color: #e2b84b;
    font-size: 28px;
    margin:auto;
    font-weight:bold;
    justify-content:center;
}

.segno-immagine{
    width:35%;
}

#immagineSegno{
    width:95px;
    height:95px;
}

.testo-energia{
    width:100%  !important;
}

.testo-energia h3{
    font-size:18px;
}

.testo-energia p{
    font-size:13px;
    line-height:1.45;
}
.segno-simbolo {
    display:none;
}

/* -----------------------
   Mini Card
----------------------- */

.mini-card-container{
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.mini-card{
    width:90px;
    height:120px;
    padding:5px;
}

.icona-card{
    font-size:22px;
}

.mini-card h3{
    font-size:12px;
}

.mini-card p{
    font-size:8px;
    line-height:1.15;
}

.mini-card button{
    width:55px;
    font-size:9px;
}

/* -----------------------
   Popup
----------------------- */

.popup-box{
    width:92%;
    max-width:360px;
    padding:18px;
}

/* -----------------------
   Menu
----------------------- */

.menu-laterale{
    width:220px;
}

.menuLat{
    font-size:13px;
}

/* -----------------------
   Immagini
----------------------- */

img{
    max-width:100%;
    height:auto;
}

}

@media (max-width:400px){
    
    .featured-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
}

.featured-image{
    width:100%;
    display:flex;
    justify-content:center;
}

.featured-content{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}


.featured-carousel{
    width:95%;
    gap:6px;
}

.featured-carousel .featured-card .featured-image img{
    width:180px !important;
    height:110px !important;
}


    .featured-content h3{
        font-size:15px;
        line-height:1.3;
        margin:0 0 6px;
    }

    .featured-content p{
        font-size:12px;
        line-height:1.4;
        margin:0;
    }

    .featured-button{
        margin-top:8px;
        padding:6px 12px;
        font-size:12px;
        align-self:flex-start;
        align-self:center;
    }

    .carousel-arrow{
        font-size:20px;
    }

}