@tailwind base;
@tailwind components;
@tailwind utilities;

/* Safe area insets for mobile webviews */
.safe-pt { padding-top: max(0.75rem, env(safe-area-inset-top)); }
.safe-pb { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
.safe-px {
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}

body {
  font-family: 'Nunito', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background-color: #020617; /* slate-950 */
}

.font-fredoka { font-family: 'Fredoka', cursive, sans-serif; }

/* Custom Scrollbars */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, 0.4); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(236, 72, 153, 0.8); }

/* Ensure modal overlays above everything */
#modal-levels, #modal-customizer, #modal-victory { z-index: 100; }

/* Bouncy Buttons */
.bouncy-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) {
  .bouncy-btn:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 24px -6px rgba(0,0,0,0.3);
  }
}
.bouncy-btn:active {
  transform: translateY(2px) scale(0.95);
  transition: transform 0.1s ease;
}