body{
    margin:0;
    background:#000;
    color:#d4af37;
    font-family:Georgia, serif;
    text-align:center;
}

.container{
    padding:40px 20px;
}

h1{
    font-size:30px;
}

.sub{
    color:#ccc;
    margin-bottom:30px;
}

.cards{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.card{
    width:130px;
    height:200px;
    perspective:1000px;
    cursor:pointer;
}

.inner{
    width:100%;
    height:100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    position:relative;
}

.card.flipped .inner{
    transform: rotateY(180deg);
}

.face{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:10px;
    backface-visibility:hidden;
    background-size:cover;
    background-position:center;
}

.front{
    background-image:url('/images/cartas/reverso-abm.webp');
}

.back{
    transform:rotateY(180deg);
}

.resultado{
    display:none;
    margin-top:30px;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

button{
    margin-top:20px;
    padding:15px 25px;
    background:#d4af37;
    border:none;
    cursor:pointer;
    font-weight:bold;
}

.warning{
    color:#ff4444;
}