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

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0b0c10;
  font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
}

#canvas-container canvas {
  width: 100% !important;
  height: 100% !important;
  outline: none;
  display: block;
}

.hud-btn {
  transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.hud-btn:active {
  transform: scale(0.94);
}

.touch-btn {
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Custom Scrollbar for Garage */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 68, 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(239, 68, 68, 0.8);
}

/* Glow effects */
@keyframes neon-pulse {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 10px rgba(255, 42, 42, 0.6)); }
  50% { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 42, 42, 0.9)); }
}

.neon-glow {
  animation: neon-pulse 2s infinite ease-in-out;
}