/* ========================================================================== */
/* style.css - Styling utama, animasi, dan kosmetik premium                   */
/* ========================================================================== */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { overscroll-behavior-y: none; } 
::-webkit-scrollbar { width: 0px; background: transparent; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; will-change: transform, opacity; }

@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
.animate-float { animation: float 4s ease-in-out infinite; will-change: transform; }

.glass-premium {
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}
.dark .glass-premium {
    background: rgba(15, 23, 42, 0.75); 
    border-top: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5); border-right: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

@keyframes slideInRight { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
.toast-enter { animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.toast-exit { animation: slideOutRight 0.4s ease-in forwards; }

@keyframes unlockEpic { 0% { transform: scale(1); filter: grayscale(100%); } 50% { transform: scale(1.05); filter: grayscale(50%) drop-shadow(0 0 25px rgba(168,85,247,0.8)); } 100% { transform: scale(1); filter: grayscale(0%); } }
.epic-unlocked { animation: unlockEpic 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; border-color: #a855f7 !important; }

@keyframes mysteryGlow { 0%, 100% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); transform: translateY(0); } 50% { box-shadow: 0 0 35px rgba(168, 85, 247, 0.8); transform: translateY(-4px); } }
.mystery-box { animation: mysteryGlow 2.5s ease-in-out infinite; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } }
.animate-shake { animation: shake 0.4s ease-in-out infinite; }

@keyframes floatUpFade { 0% { transform: translate(-50%, 0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1.5); opacity: 0; } }
.floating-tap {
    position: absolute; top: 15%; left: 50%; color: inherit; font-weight: 900; font-size: 1.8rem;
    pointer-events: none; z-index: 50; animation: floatUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; text-shadow: 0 2px 15px currentColor;
}
@keyframes ripple { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.4); opacity: 0; } }
.ripple-effect {
    position: absolute; inset: -4px; border-radius: 50%; border: 4px solid currentColor;
    animation: ripple 0.5s ease-out forwards; pointer-events: none; z-index: 0;
}
@keyframes popCombo { 0% { transform: scale(0.5) translateY(20px) rotate(15deg); opacity: 0; } 50% { transform: scale(1.3) translateY(0) rotate(-5deg); opacity: 1; } 100% { transform: scale(1) translateY(0) rotate(12deg); opacity: 1; } }
.combo-active { animation: popCombo 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; will-change: transform; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; }

.card_dark { background: radial-gradient(circle at top right, #3b0764, #0f172a); border: 1px solid #7e22ce; box-shadow: inset 0 0 40px rgba(0,0,0,0.8); }
.card_green { background: linear-gradient(135deg, #064e3b, #047857, #10b981); border: 1px solid #34d399; box-shadow: inset 0 0 20px rgba(0,0,0,0.3); }
.card_holo { background: linear-gradient(135deg, #2563eb, #06b6d4, #c026d3, #2563eb); background-size: 300% 300%; animation: gradientMove 6s ease infinite; box-shadow: 0 0 30px rgba(59,130,246,0.4); border: 1px solid #93c5fd; }
.card_crown { background: linear-gradient(to bottom right, #78350f, #b45309, #fcd34d); border: 2px solid #fef3c7; box-shadow: 0 0 40px rgba(245,158,11,0.4); }

@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.skin-tasbih-default { color: #10b981; border-color: rgba(16,185,129,0.2); }
.skin-tasbih-glow { color: #3b82f6; border-color: rgba(59,130,246,0.4); box-shadow: 0 0 25px rgba(59,130,246,0.5), inset 0 0 25px rgba(59,130,246,0.2) !important; text-shadow: 0 0 10px rgba(59,130,246,0.5); }
.skin-tasbih-gold { color: #f59e0b; border-color: rgba(245,158,11,0.5); box-shadow: 0 0 35px rgba(245,158,11,0.6), inset 0 0 35px rgba(245,158,11,0.3) !important; animation: goldPulse 3s infinite; text-shadow: 0 0 15px rgba(245,158,11,0.6); }

@keyframes goldPulse { 0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.4), inset 0 0 20px rgba(245,158,11,0.2); } 50% { box-shadow: 0 0 50px rgba(245,158,11,0.7), inset 0 0 50px rgba(245,158,11,0.4); } }

.radar-polygon { transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }