/* Updated State A: Card Back */

:root {
            --card-width: 240px;
            /* 3:5 Aspect Ratio Calculation: (240 / 3) * 5 = 400 */
            --card-height: 400px; 
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #1a1a1a;
            color: white;
            font-family: 'Segoe UI', sans-serif;
            margin: 0;
        }

        /* The Card Container */
        .card-container {
            width: var(--card-width);
            height: var(--card-height);
            perspective: 1000px;
            cursor: pointer;
        }

        /* The Flipper Logic */
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
        }

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

        /* Front and Back Styling */
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 12px;
            border: 4px solid #d4af37;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }

        /* State A: Card Back */
      .card-back {
       background-image: url('https://majestic-gateway.neocities.org/Gateway/tarot/card-back.png');
       background-size: cover;
       background-position: center;
       border: 4px solid #d4af37; /* Matches the Khokhloma Gold */
       }

        /* State B: Card Front */
        .card-front {
            background-color: #fdfcf0;
            color: #2c3e50;
            transform: rotateY(180deg);
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* Reversal Logic (Rotation on the Z-axis) */
        .reversed {
            transform: rotateY(180deg) rotateZ(180deg);
        }

        .info { margin-top: 20px; color: