body { 
    background-color: #121212; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    margin: 0; 
    font-family: monospace; 
    overflow: hidden; 
}

.scene { 
    width: 220px; 
    height: 310px; 
    perspective: 800px; 
}

.card { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    transition: transform 0.6s; 
    transform-style: preserve-3d; 
    cursor: pointer; 
}

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

.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.6); 
    overflow: hidden; 
}

/* --- THE BACK (Design) --- */
.card-back {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotateY(0deg);
    border: none;
    background-color: #0b3658; 
}

/* --- THE FRONT (Value) --- */
.card-front { 
    background-color: #f0f0f0; 
    transform: rotateY(180deg); 
    border: 1px solid #ccc; 
}

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

.red { color: #d63031; } 
.black { color: #2d3436; }

.big-suit { 
    font-size: 110px; 
    line-height: 110px; 
}

.corner-top { 
    position: absolute; 
    top: 10px; 
    left: 15px; 
    font-size: 28px; 
    font-weight: bold; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    line-height: 24px; 
}

.corner-bottom { 
    position: absolute; 
    bottom: 10px; 
    right: 15px; 
    font-size: 28px; 
    font-weight: bold; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    line-height: 24px; 
    transform: rotate(180deg); 
}

.corner-suit { 
    font-size: 18px; 
}