:root {
  --neon-blue: #00f3ff;
  --neon-pink: #ff00ff;
  --neon-purple: #bc13fe;
  --neon-yellow: #faff00;
  --neon-green: #0aff00;
  --bg-dark: #050510;
  --panel-dark: #101025;
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
}

/* STRICT VIEWPORT LOCKING FOR MOBILE GAME FEEL */
html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling completely */
  position: fixed; /* Lock body in place for iOS/Android WebView */
  top: 0;
  left: 0;
  background-color: var(--bg-dark);
  color: white;
  font-family: 'Rajdhani', sans-serif;
  
  /* CRITICAL: Disable browser gestures */
  touch-action: none; 
  user-select: none;
  -webkit-user-select: none; /* Safari/Chrome */
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-tap-highlight-color: transparent; /* Remove blue box on click */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none; /* Disable "bounce" effect at edges */
  
  /* FORCE HARDWARE ACCELERATION */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Disable context menu on everything (images, links, etc) */
img, a {
  -webkit-user-drag: none;
  pointer-events: none; /* Make images explicitly non-interactive unless handled by JS */
}

/* Allow pointer events only on interactive elements */
button, .cursor-grab {
  pointer-events: auto;
}

* {
  box-sizing: border-box;
  -webkit-touch-callout: none;
  outline: none; /* Remove focus outlines */
}

/* --- GPU ACCELERATION UTILITIES --- */
.gpu-layer {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity; /* Hint to browser */
}

.will-change-transform {
  will-change: transform;
}

/* Custom Utilities */
.text-transparent { color: transparent; }

/* Custom Scrollbar - Hidden for cleaner game look unless interaction needed */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent; 
}
::-webkit-scrollbar-thumb {
  background: #333350; 
  border-radius: 4px;
}

/* Helper for gradients */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Button Hover Effect - Reduced for mobile (touch doesn't hover well) */
.btn-hover:active { 
  transform: scale(0.95);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Custom Color Utilities */
.bg-white-5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white-10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white-20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white-30 { background-color: rgba(255, 255, 255, 0.3); }
.bg-white-50 { background-color: rgba(255, 255, 255, 0.5); }
.bg-black-20 { background-color: rgba(0, 0, 0, 0.2); }
.bg-black-80 { background-color: rgba(0, 0, 0, 0.8); }
.bg-black-90 { background-color: rgba(0, 0, 0, 0.9); }
.bg-red-500-20 { background-color: rgba(239, 68, 68, 0.2); }

.border-white-5 { border-color: rgba(255, 255, 255, 0.05); }
.border-white-10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white-20 { border-color: rgba(255, 255, 255, 0.2); }
.border-white-30 { border-color: rgba(255, 255, 255, 0.3); }

.text-white-10 { color: rgba(255, 255, 255, 0.1); }
.text-white-20 { color: rgba(255, 255, 255, 0.2); }
.text-white-30 { color: rgba(255, 255, 255, 0.3); }
.text-white-40 { color: rgba(255, 255, 255, 0.4); }
.text-white-50 { color: rgba(255, 255, 255, 0.5); }
.text-white-70 { color: rgba(255, 255, 255, 0.7); }
.text-white-80 { color: rgba(255, 255, 255, 0.8); }

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #333350 transparent;
}