/* --- Pengaturan Dasar & Latar Belakang --- */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: radial-gradient(circle at 15% 15%, #FDF2F8 0%, transparent 40%),
                radial-gradient(circle at 85% 20%, #EFF6FF 0%, transparent 45%),
                #F8FAFC;
    overflow-x: hidden;
}

/* --- Penataan SVG Kartu & Arena --- */
.card-hand svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.duel-circle svg {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* --- Animasi Mengambang (Floating Arena) --- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.duel-circle {
    animation: float 4s ease-in-out infinite;
}

/* --- Animasi Bot Berpikir (Thinking Pulse) --- */
@keyframes thinkingPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}
.bot-thinking {
    animation: thinkingPulse 0.5s ease-in-out infinite;
}

/* --- Animasi Pop (Kemunculan Hasil Jurus) --- */
@keyframes popAnim {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.pop-effect {
    animation: popAnim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --- Animasi Guncangan (Shake saat Kalah) --- */
@keyframes shakeEffect {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}
.shake-anim {
    animation: shakeEffect 0.3s ease-in-out;
}

/* --- Animasi Kocokan Tangan (Fist Pump Suwit) --- */
@keyframes fistPump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}
.pumping-anim {
    animation: fistPump 0.35s ease-in-out infinite;
}

/* --- Status Kartu Saat Dipilih (Active State) --- */
.card-selected {
    background-color: #FCE7F3 !important; /* pink-soft */
    border-color: #F4A6BE !important; /* pink-pastel */
    box-shadow: 0 10px 25px -5px rgba(244, 166, 190, 0.4) !important;
}
.card-selected span {
    color: #8A4B60 !important; /* pink-deep */
}

/* --- Animasi Transisi & Muncul Elemen (Fade-in) --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}