body { background-color: #111827; color: white; overflow: hidden; touch-action: manipulation; }
        .shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
        .anim-draw { animation: drawFly 0.6s ease-out forwards; }
        
        @keyframes shake {
            10%, 90% { transform: translate3d(-2px, 0, 0); }
            20%, 80% { transform: translate3d(3px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }
        @keyframes drawFly {
            0% { transform: translate(-150px, -150px) rotate(180deg) scale(0.5); opacity: 0; }
            100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
        }
        
        /* --- NEW SAFE ANIMATIONS --- */
        @keyframes jumpAttackCenter {
            0% { transform: translateY(0) scale(1); z-index: 100; }
            50% { transform: translateY(-30px) scale(1.2); z-index: 100; }
            100% { transform: translateY(0) scale(1); z-index: 1; }
        }
        .attack-center { animation: jumpAttackCenter 0.4s ease-in-out; }

        @keyframes cardDestroyed {
            0% { filter: brightness(1) drop-shadow(0 0 0 red); transform: scale(1); opacity: 1; }
            50% { filter: brightness(2) drop-shadow(0 0 10px red); transform: scale(1.1) rotate(-5deg); opacity: 0.8; }
            100% { filter: brightness(0); transform: scale(0) rotate(15deg); opacity: 0; }
        }
        .card-destroyed { animation: cardDestroyed 0.6s ease-in forwards; pointer-events: none; }

        .slash-effect {
            position: absolute; inset: -20px; z-index: 60; pointer-events: none;
            background: linear-gradient(transparent 45%, white 48%, white 52%, transparent 55%);
            transform: rotate(-45deg) scaleX(0); opacity: 0;
            animation: slashAnim 0.3s ease-out forwards;
        }
        @keyframes slashAnim {
            0% { transform: rotate(-45deg) scaleX(0); opacity: 1; filter: drop-shadow(0 0 5px cyan); }
            50% { transform: rotate(-45deg) scaleX(1); opacity: 1; filter: drop-shadow(0 0 10px cyan); }
            100% { transform: rotate(-45deg) scaleX(1.5); opacity: 0; filter: drop-shadow(0 0 15px cyan); }
        }
        
        @keyframes suitReveal {
            0% { transform: scale(0.2); opacity: 0; }
            60% { transform: scale(1.6); }
            100% { transform: scale(1); opacity: 1; }
        }
        .suit-reveal { animation: suitReveal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; display: inline-block; }

        .hand-card-wrapper { transform-origin: bottom center; transition: all 0.2s; }
        .hand-card-wrapper:hover { z-index: 50 !important; }
        .hand-card { transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: 100%; height: 100%; }
        .hand-card-wrapper:hover .hand-card { transform: translateY(-20px) scale(1.15); cursor: pointer; }
        
        /* Modifikasi untuk P2 (Atas) agar hover mengarah ke bawah layar dari perspektif aslinya, 
           tapi karena di-rotate-180, translate Y positif akan membuatnya "naik" bagi P2 */
        .hand-card-wrapper.is-p2:hover .hand-card { transform: translateY(20px) scale(1.15); cursor: pointer; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #1f2937; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #6b7280; }