client/src/app/globals.css

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

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 0, 0, 0;
  --background-end-rgb: 0, 0, 0;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
  font-family: 'Inter', sans-serif;
  overflow: hidden; /* Prevent body scroll */
  
  /* NATIVE APP FEEL & PERFORMANCE OPTIMIZATIONS */
  user-select: none; /* Disable text selection */
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; /* Remove blue highlight on tap */
  touch-action: manipulation; /* Improve touch response, disable double-tap zoom */
  overscroll-behavior: none; /* Disable pull-to-refresh/bounce */
  -webkit-font-smoothing: antialiased;
}

/* GPU Acceleration for smoother animations on low-end devices */
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* transform: translateZ(0);  <-- Careful: Global promote might consume too much RAM, stick to backface-visibility for now */
}

/* Anti-Translate Utilities */
.notranslate {
  translate: no;
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.font-display {
  font-family: 'Montserrat', sans-serif;
}

.custom-scrollbar {
    /* Legacy fallback class kept for compatibility but effectively does nothing now due to global rule */
    overflow-y: auto;
}

/* Animation Utilities */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 10s linear infinite;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}