/* Application base theme (shared shell, Game Night, defaults). Race Night–specific rules live in race_night.css under .race-night. */

:root {
  /* Color Palette - Dark Theme */
  --bg-primary: #0b1020;
  --bg-secondary: #1a1a2e;
  --bg-panel: rgba(255, 255, 255, 0.08);
  
  /* Text Colors */
  --text-primary: #f2f5ff;
  --text-secondary: #ccc;
  --text-muted: #999;
  
  /* Accent Colors */
  --accent-gold: #ffd54a;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #ffb84a, #ff8a3d);
  --gradient-success: linear-gradient(135deg, #4be48a, #20d07a);
  --gradient-error: linear-gradient(135deg, #ff8787, #ff6b6b);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  
  /* Border Radius */
  --radius-md: 12px;
  --radius-lg: 16px;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
}

/* Base Styles */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  min-height: 100vh;
}

/* Override Tailwind's default light theme */
.bg-gray-50 {
  background: var(--bg-primary) !important;
}

.bg-white {
  background: var(--bg-secondary) !important;
}

.text-gray-900 {
  color: var(--text-primary) !important;
}

.text-gray-700 {
  color: var(--text-secondary) !important;
}

.text-gray-600 {
  color: var(--text-muted) !important;
}

/* Navigation */

/* Navigation hover - only on devices that support hover */

/* Cards */

/* Card hover - only on devices that support hover */

/* Buttons */
.btn-dark {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

/* Only apply hover styles on devices that support hover (not touch devices) */
@media (hover: hover) and (pointer: fine) {
.btn-dark:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

.btn-primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

}

.btn-dark:active {
  transform: translateY(0);
}

/* Prevent persistent :active and :hover states on mobile devices, especially iOS Safari */
.btn-dark,
.btn-dark.btn-primary {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Force normal state class to break persistent hover on iOS */
.btn-primary {
  background: var(--gradient-primary);
  color: #1b1203;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-sm);
}

/* Button primary hover - only on devices that support hover */
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

}

.btn-success {
  background: var(--gradient-success);
  color: #02170b;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-error {
  background: var(--gradient-error);
  color: #160202;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-warning {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1b1203;
  border-color: rgba(0, 0, 0, 0.2);
}

/* Panels */
.panel-dark {
  background: var(--bg-panel);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
}

/* Status Indicators */

/* Form Elements */
/* Allow Tailwind rounded classes to override form-input-dark border-radius */
/* Animations */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); }
}

/* Responsive Design */
@media (max-width: 768px) {

  
  /* Mobile form inputs - ensure flex works properly */
  
  /* Ensure flex containers don't overflow */
  .flex {
    min-width: 0;
  }

  
  /* Reduce button horizontal padding on mobile to give more room for inputs */
  .btn-dark {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

}

/* QR Code Styles — always black modules on an opaque white plate for scanning on dark UIs */

/* QR code container hover - only on devices that support hover */

/* Game code display hover - only on devices that support hover */

/* Utility Classes */
.text-glow {
  text-shadow: 0 0 10px currentColor;
}