@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    user-select: none;
}

.draggable-item { 
    cursor: grab; 
    transition: background-color 0.2s, transform 0.1s;
    touch-action: none;      
    user-select: none;        
    -webkit-user-select: none;
}
.draggable-item:active { 
    cursor: grabbing; 
    background-color: #e5e7eb; 
    transform: scale(0.98);
}
.sortable-ghost {
    opacity: 0.5;
    background-color: #f3f4f6;
}

.hidden { display: none !important; }

html.dark .icon-moon { display: none !important; }
html.dark .icon-sun { display: block !important; }
.icon-sun { display: none; }

* { transition-property: color, background-color, border-color, transform, opacity, box-shadow; transition-duration: 200ms; }

/* Leaderboard Tiers */
.rank-gold { background: #fefce8; border-color: #fde047; color: #854d0e; }
.rank-silver { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
.rank-bronze { background: #fff7ed; border-color: #fdba74; color: #9a3412; }

@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.heart-pulse { animation: heartbeat 1.2s infinite ease-in-out; }

@keyframes partyPop {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.1); }
    50% { transform: rotate(10deg) scale(1.1); }
    75% { transform: rotate(-5deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}
.party-pop { animation: partyPop 0.8s infinite ease-in-out; }

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
.animate-popIn { animation: popIn 0.4s ease-out forwards; }

@keyframes popUp {
    0% { transform: scale(0) translateY(10px); opacity: 0; }
    80% { transform: scale(1.1) translateY(-5px); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}
.animate-popup { animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

#btn-1v1:hover #icon-heart {
    animation: heartbeat 0.8s ease-in-out infinite;
}

#btn-party:hover #icon-party {
    animation: partyPop 0.6s ease-in-out infinite;
}

.preview-eye:hover + #preview-tooltip {
    display: block;
}