:root { --bg: #0f172a; --card-bg: #1e293b; --accent: #38bdf8; }
        
        body { 
            background: var(--bg); 
            color: white; 
            font-family: sans-serif; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            min-height: 100vh;
            margin: 0; padding: 20px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(4, 100px);
            grid-gap: 10px;
            margin-top: 20px;
        }

        .card {
            width: 100px;
            height: 100px;
            background: var(--card-bg);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            user-select: none;
            transition: transform 0.3s, background 0.3s;
            transform-style: preserve-3d;
        }

        /* State Classes */
        .card.flipped { transform: rotateY(180deg); background: var(--accent); }
        .card.matched { background: #22c55e; cursor: default; }
        
        /* Hide emoji until flipped */
        .card span { visibility: hidden; }
        .card.flipped span, .card.matched span { visibility: visible; }

        #msg { margin-top: 20px; font-weight: bold; color: #4cd137; }