html, body {
            position: fixed;
            overflow: hidden;
            overscroll-behavior: none;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #0c0404;
            font-family: 'Roboto', sans-serif;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        #root {
            position: relative;
            width: 100%;
            height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0c0404;
            overflow: hidden;
        }
        
        .cinzel { font-family: 'Cinzel', serif; }
        
        .harlequin-pattern {
            background-color: #7a1b1b;
            background-image: 
                linear-gradient(45deg, #a32219 25%, transparent 25%, transparent 75%, #a32219 75%, #a32219), 
                linear-gradient(45deg, #a32219 25%, transparent 25%, transparent 75%, #a32219 75%, #a32219);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
        }

        @keyframes coin-fall {
            0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0.5; }
        }
        .coin {
            position: absolute;
            width: 22px;
            height: 22px;
            background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
            border-radius: 50%;
            border: 2px solid #d4af37;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.8);
            z-index: 100;
            pointer-events: none;
            will-change: transform;
        }

        .gpu-accelerated {
            will-change: transform, opacity;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        .perspective-container {
            perspective: 1500px;
        }

        .backface-hidden {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* card flip container - updated for smoother animation */
        .card-flip-inner {
            transition: transform 0.4s ease-in-out;
            transform-style: preserve-3d;
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        .card-flip-inner.revealed {
            transform: rotateY(180deg);
        }
        
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 1rem;
            overflow: hidden;
        }
        
        .card-front {
            transform: rotateY(180deg);
        }

        /* modal transitions */
        .modal-container {
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .modal-hidden {
            opacity: 0 !important;
            transform: scale(0.8) translateY(20px) !important;
            pointer-events: none;
        }
        .modal-backdrop-hidden {
            opacity: 0 !important;
            pointer-events: none;
        }

        .splash-exit {
            opacity: 0;
            transform: scale(1.1);
            transition: opacity 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53), transform 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

        /* win banner animation */
        .win-banner {
            transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .win-banner-hidden {
            opacity: 0;
            transform: scale(0.5) translateY(50px);
            pointer-events: none;
        }

        /* game container base size */
        #game-container {
            width: 400px;
            height: 800px;
            flex-shrink: 0;
            transform-origin: center center;
            will-change: transform;
        }

        /* ensure content stays within bounds */
        .game-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }