body { background: #0f0c29; color: #fff; font-family: 'Kanit', sans-serif; text-align: center; }
.container { margin-top: 50px; }
.card-scene { width: 220px; height: 380px; margin: 30px auto; perspective: 1000px; }
.card { width: 100%; height: 100%; position: relative; transition: transform 0.8s; transform-style: preserve-3d; }
.is-flipped { transform: rotateY(180deg); }
.is-reversed { transform: rotateY(180deg) rotateZ(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; box-shadow: 0 0 20px #5e548e; overflow: hidden; }
.card-front { transform: rotateY(180deg); }
.card-face img { width: 100%; height: 100%; object-fit: cover; }
.btn { background: #5e548e; color: white; border: none; padding: 12px 30px; border-radius: 25px; cursor: pointer; font-size: 18px; margin-top: 20px; }
.hidden { display: none; }
#card-meaning { max-width: 400px; margin: 20px auto; line-height: 1.6; color: #e0e1dd; }