body{
margin:0;
font-family:Arial;
background:#0b0220;
color:white;
text-align:center;
}

header{
padding:40px 20px;
}

header h1{
font-size:40px;
color:#ffd700;
}

.btn-tarot{
background:#e7c35a;
color:#000;
padding:15px 30px;
border-radius:30px;
font-weight:bold;
cursor:pointer;
font-size:18px;
}

textarea{
width:90%;
max-width:350px;
height:80px;
}

/* MODAL */

.tarot-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:999;
}

.tarot-modal-content{
width:95%;
max-width:500px;
background:#150033;
padding:20px;
border-radius:12px;
}

/* CARROSSEL */

#cardCarousel{

display:flex;
overflow-x:auto;
gap:12px;
padding:20px;
scroll-snap-type:x mandatory;

}

.card{

flex:0 0 auto;
width:110px;
cursor:pointer;
scroll-snap-align:center;
transition:transform .3s;

}

.card img{
width:100%;
border-radius:8px;
}

.card:hover{
transform:scale(1.1);
}

/* CARTA SUBINDO */

.card.selected{
transform:translateY(-40px) scale(1.1);
}

/* CARTA REVELADA */

#cardReveal img{
width:180px;
margin-top:30px;
border-radius:10px;
}

/* SIGNIFICADO */

#meaningText{
max-width:420px;
margin:20px auto;
background:#140a2c;
padding:20px;
border-radius:12px;
}

/* TEXTO EMBARALHAR */

#shuffleText{
margin-bottom:15px;
font-style:italic;
opacity:0.8;
}

/* MOBILE */

@media(max-width:700px){

.card{
width:90px;
}

#cardReveal img{
width:150px;
}

}