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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f7fa;
  color: #0f172a;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#root { width: 100%; height: 100vh; }

button { font-family: inherit; }
input, textarea { font-family: inherit; }

/* slim, modern scrollbars */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
*::-webkit-scrollbar-track { background: transparent; }

/* shared animations */
@keyframes pop { 0% { opacity: 0; transform: scale(.9) } 100% { opacity: 1; transform: scale(1) } }
@keyframes popBig { 0% { opacity: 0; transform: scale(.4) } 60% { transform: scale(1.12) } 100% { opacity: 1; transform: scale(1) } }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.8); }
  15%  { opacity: 1; transform: translate(-50%, -2px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(1); }
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
@keyframes bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(-10vh) rotate(0deg); }
  100% { opacity: 0; transform: translateY(90vh) rotate(720deg); }
}
@keyframes badgeSpin {
  0% { transform: rotate(-12deg) scale(.4); opacity: 0; }
  55% { transform: rotate(6deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

.dm-fade-in { animation: fadeIn .3s ease both; }
.dm-slide-up { animation: slideUp .35s ease both; }