/* FocalGames - Sci-Fi Terminal Visual Theme */
/* Fonts are now loaded via /css/fonts.css in the HTML template */

:root {
  /* Terminal Color Palette */
  --terminal-bg: #0a0a0a;
  --terminal-surface: #1a1a1a;
  --terminal-card: #0f0f0f;
  --terminal-border: #2a2a2a;
  --terminal-text: #e0e0e0;
  --terminal-text-muted: #888888;
  
  /* Neon Accents */
  --neon-cyan: #00ffff;
  --neon-blue: #0080ff;
  --neon-purple: #8000ff;
  --neon-green: #00ff00;
  --neon-orange: #ff8000;
  --neon-red: #ff0000;
  
  /* Glow Effects */
  --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5);
  --glow-blue: 0 0 20px rgba(0, 128, 255, 0.5);
  --glow-purple: 0 0 20px rgba(128, 0, 255, 0.5);
  --glow-green: 0 0 20px rgba(0, 255, 0, 0.5);
  --glow-orange: 0 0 20px rgba(255, 128, 0, 0.5);
  --glow-red: 0 0 20px rgba(255, 0, 0, 0.5);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
  --gradient-secondary: linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));
  --gradient-accent: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
}

/* Override Tailwind colors with terminal theme */
.bg-dark-bg {
  background-color: var(--terminal-bg) !important;
}

.bg-dark-card {
  background-color: var(--terminal-card) !important;
}

.border-dark-border {
  border-color: var(--terminal-border) !important;
}

.text-gray-100 {
  color: var(--terminal-text) !important;
}

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

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

/* Typography enhancements */
body {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Terminal Background Pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 128, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(128, 0, 255, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Scanline Effect */
.scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: 0.3;
  animation: scanline 8s linear infinite;
  pointer-events: none;
  z-index: 1000;
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Enhanced Navigation */
.nav-brand {
  font-family: 'Orbitron', monospace;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: var(--glow-cyan);
  transition: all 0.3s ease;
}

.nav-brand:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Enhanced Buttons */
.btn-primary {
  background: var(--gradient-primary) !important;
  color: var(--terminal-bg) !important;
  box-shadow: var(--glow-cyan) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8) !important;
  filter: brightness(1.2) !important;
}

.btn-secondary {
  background: var(--terminal-surface) !important;
  color: var(--terminal-text) !important;
  border: 2px solid var(--terminal-border) !important;
  transition: all 0.3s ease !important;
}

.btn-secondary:hover {
  border-color: var(--neon-blue) !important;
  color: var(--neon-blue) !important;
  box-shadow: var(--glow-blue) !important;
  transform: translateY(-2px) !important;
}

/* Enhanced Cards */
.card {
  background: var(--terminal-card) !important;
  border: 2px solid var(--terminal-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), var(--glow-cyan) !important;
  transform: translateY(-4px) !important;
}

.card:hover::before {
  opacity: 1;
}

/* Enhanced Form Elements */
input, textarea, select {
  background: var(--terminal-surface) !important;
  border: 2px solid var(--terminal-border) !important;
  color: var(--terminal-text) !important;
  font-family: 'JetBrains Mono', monospace !important;
  transition: all 0.3s ease !important;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: var(--glow-cyan) !important;
  background: rgba(0, 255, 255, 0.05) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--terminal-text-muted) !important;
}

/* Enhanced Navigation Links */
.nav-link {
  color: var(--terminal-text-muted) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.nav-link:hover {
  color: var(--neon-cyan) !important;
  background: rgba(0, 255, 255, 0.1) !important;
  box-shadow: var(--glow-cyan) !important;
  transform: translateY(-2px) !important;
}

/* Progress Bars */
.progress-terminal {
  background: var(--terminal-surface) !important;
  border-radius: 6px !important;
  height: 8px !important;
  overflow: hidden !important;
  position: relative !important;
}

.progress-bar {
  height: 100% !important;
  background: var(--gradient-primary) !important;
  border-radius: 6px !important;
  transition: width 0.5s ease !important;
  box-shadow: var(--glow-cyan) !important;
}

/* Status Colors */
.text-green-400, .text-green-600 {
  color: var(--neon-green) !important;
  text-shadow: var(--glow-green) !important;
}

.text-red-400, .text-red-600, .text-red-700 {
  color: var(--neon-red) !important;
  text-shadow: var(--glow-red) !important;
}

.text-blue-400, .text-blue-500, .text-blue-600 {
  color: var(--neon-blue) !important;
  text-shadow: var(--glow-blue) !important;
}

.text-purple-600 {
  color: var(--neon-purple) !important;
  text-shadow: var(--glow-purple) !important;
}

.text-yellow-400, .text-yellow-600 {
  color: var(--neon-orange) !important;
  text-shadow: var(--glow-orange) !important;
}

/* Enhanced Admin Button */
.bg-yellow-100 {
  background: var(--neon-red) !important;
}

.text-yellow-800 {
  color: white !important;
}

.hover\:bg-yellow-200:hover {
  background: #ff4000 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--terminal-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--terminal-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
}

/* Selection */
::selection {
  background: var(--neon-cyan);
  color: var(--terminal-bg);
}

/* Footer link hover effects */
footer a {
  position: relative !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

footer a::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent) !important;
  transition: left 0.5s ease !important;
  opacity: 0.3 !important;
}

footer a:hover::before {
  left: 100% !important;
}

footer a:hover {
  color: var(--neon-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
  transform: translateY(-1px) !important;
  letter-spacing: 0.5px !important;
}

/* Ensure footer links always use cyan on hover, overriding any Tailwind classes */
footer a.hover\:text-primary:hover {
  color: var(--neon-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
}

/* Disable scan effect for specific links */
footer a.no-scan-effect::before {
  display: none !important;
}

footer a.no-scan-effect:hover {
  transform: none !important;
  letter-spacing: normal !important;
}

/* Sleek sci-fi tag design */
.tag-sci-fi {
  display: inline-block !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: 1px solid !important;
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(4px) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.tag-sci-fi::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
  transition: left 0.5s ease !important;
}

.tag-sci-fi:hover::before {
  left: 100% !important;
}

.tag-sci-fi:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Tag color variants */
.tag-focus {
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  text-shadow: 0 0 8px #3b82f6 !important;
}

.tag-stage {
  border-color: #10b981 !important;
  color: #34d399 !important;
  text-shadow: 0 0 8px #10b981 !important;
}

.tag-category {
  border-color: #8b5cf6 !important;
  color: #a78bfa !important;
  text-shadow: 0 0 8px #8b5cf6 !important;
}

.tag-difficulty {
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 8px #f59e0b !important;
}

.tag-delivery {
  border-color: #ec4899 !important;
  color: #f472b6 !important;
  text-shadow: 0 0 8px #ec4899 !important;
}

.tag-custom {
  border-color: #06b6d4 !important;
  color: #22d3ee !important;
  text-shadow: 0 0 8px #06b6d4 !important;
}

.tag-gray {
  border-color: #6b7280 !important;
  color: #9ca3af !important;
  text-shadow: 0 0 8px #6b7280 !important;
}

/* Sleek sci-fi achievement design */
.achievement-sci-fi {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid !important;
  border-image: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706) 1 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  min-width: 280px !important;
}

.achievement-sci-fi::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.1), transparent) !important;
  transition: left 0.6s ease !important;
}

.achievement-sci-fi:hover::before {
  left: 100% !important;
}

.achievement-sci-fi:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3) !important;
  border-image: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706, #fbbf24) 1 !important;
}

.achievement-icon {
  font-size: 1.5rem !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 15px #fbbf24 !important;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)) !important;
  transition: all 0.3s ease !important;
}

.achievement-sci-fi:hover .achievement-icon {
  transform: scale(1.1) !important;
  text-shadow: 0 0 20px #fbbf24 !important;
}

.achievement-content {
  flex: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

.achievement-title {
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5) !important;
  letter-spacing: 0.025em !important;
  margin-bottom: 0.25rem !important;
  text-transform: uppercase !important;
}

.achievement-description {
  font-size: 0.75rem !important;
  color: #d1d5db !important;
  opacity: 0.9 !important;
  line-height: 1.3 !important;
}

.achievement-sci-fi:hover .achievement-title {
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.8) !important;
}

/* Achievement rarity variants */
.achievement-common {
  border-image: linear-gradient(45deg, #6b7280, #9ca3af, #d1d5db) 1 !important;
}

.achievement-common .achievement-icon {
  color: #9ca3af !important;
  text-shadow: 0 0 15px #9ca3af !important;
}

.achievement-common .achievement-title {
  color: #9ca3af !important;
  text-shadow: 0 0 8px rgba(156, 163, 175, 0.5) !important;
}

.achievement-rare {
  border-image: linear-gradient(45deg, #3b82f6, #60a5fa, #93c5fd) 1 !important;
}

.achievement-rare .achievement-icon {
  color: #60a5fa !important;
  text-shadow: 0 0 15px #60a5fa !important;
}

.achievement-rare .achievement-title {
  color: #60a5fa !important;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5) !important;
}

.achievement-epic {
  border-image: linear-gradient(45deg, #8b5cf6, #a78bfa, #c4b5fd) 1 !important;
}

.achievement-epic .achievement-icon {
  color: #a78bfa !important;
  text-shadow: 0 0 15px #a78bfa !important;
}

.achievement-epic .achievement-title {
  color: #a78bfa !important;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.5) !important;
}

.achievement-legendary {
  border-image: linear-gradient(45deg, #fbbf24, #f59e0b, #d97706) 1 !important;
}

.achievement-legendary .achievement-icon {
  color: #fbbf24 !important;
  text-shadow: 0 0 15px #fbbf24 !important;
}

.achievement-legendary .achievement-title {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5) !important;
}

/* Custom challenge button styling */
.custom-challenge-btn {
  background: black !important;
  border: 1px solid #6b7280 !important;
  color: white !important;
  width: 3rem !important;
  height: 3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.custom-challenge-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, #06b6d4, transparent) !important;
  transition: left 0.5s ease !important;
  opacity: 0.3 !important;
}

.custom-challenge-btn:hover::before {
  left: 100% !important;
}

.custom-challenge-btn:hover {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* Force dark theme for dropdown options */
select option {
  background-color: #1f2937 !important;
  color: #d1d5db !important;
}

/* Ensure select elements maintain dark theme */
select {
  background-color: #1f2937 !important;
  color: #d1d5db !important;
}

select:focus {
  background-color: #1f2937 !important;
  color: #d1d5db !important;
}

/* Override any browser default styling for dropdowns */
select::-ms-expand {
  display: none !important;
}

/* For Firefox */
select {
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Ensure dropdown arrow is visible in dark theme */
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  background-size: 1em !important;
  padding-right: 2.5rem !important;
}

/* Donate page platform card hover effects */
.donate-page a[href*="patreon"],
.donate-page a[href*="github"],
.donate-page a[href*="ko-fi"],
.donate-page a[href*="buymeacoffee"],
.donate-page a[href*="paypal"],
.donate-page a[href*="liberapay"] {
  position: relative !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.donate-page a[href*="patreon"]::before,
.donate-page a[href*="github"]::before,
.donate-page a[href*="ko-fi"]::before,
.donate-page a[href*="buymeacoffee"]::before,
.donate-page a[href*="paypal"]::before,
.donate-page a[href*="liberapay"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent) !important;
  transition: left 0.5s ease !important;
  opacity: 0.3 !important;
  z-index: 1 !important;
}

.donate-page a[href*="patreon"]:hover::before,
.donate-page a[href*="github"]:hover::before,
.donate-page a[href*="ko-fi"]:hover::before,
.donate-page a[href*="buymeacoffee"]:hover::before,
.donate-page a[href*="paypal"]:hover::before,
.donate-page a[href*="liberapay"]:hover::before {
  left: 100% !important;
}

.donate-page a[href*="patreon"]:hover,
.donate-page a[href*="github"]:hover,
.donate-page a[href*="ko-fi"]:hover,
.donate-page a[href*="buymeacoffee"]:hover,
.donate-page a[href*="paypal"]:hover,
.donate-page a[href*="liberapay"]:hover {
  border-color: var(--neon-cyan) !important;
  box-shadow: var(--glow-cyan) !important;
  transform: translateY(-2px) !important;
}

.donate-page a[href*="patreon"]:hover h3,
.donate-page a[href*="github"]:hover h3,
.donate-page a[href*="ko-fi"]:hover h3,
.donate-page a[href*="buymeacoffee"]:hover h3,
.donate-page a[href*="paypal"]:hover h3,
.donate-page a[href*="liberapay"]:hover h3 {
  color: var(--neon-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  z-index: 2 !important;
}

.donate-page a[href*="patreon"]:hover p,
.donate-page a[href*="github"]:hover p,
.donate-page a[href*="ko-fi"]:hover p,
.donate-page a[href*="buymeacoffee"]:hover p,
.donate-page a[href*="paypal"]:hover p,
.donate-page a[href*="liberapay"]:hover p {
  color: var(--neon-blue) !important;
  text-shadow: var(--glow-blue) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Focus Styles */
*:focus {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* Enhanced primary color overrides for better terminal theme */
.text-primary {
  color: var(--neon-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
}

.hover\:text-primary:hover {
  color: var(--neon-blue) !important;
  text-shadow: var(--glow-blue) !important;
}

.hover\:text-primary-light:hover {
  color: var(--neon-blue) !important;
  text-shadow: var(--glow-blue) !important;
}

.hover\:text-primary-dark:hover {
  color: var(--neon-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
}

/* Form elements with primary color */
.form-checkbox.text-primary,
.form-radio.text-primary {
  color: var(--neon-cyan) !important;
  accent-color: var(--neon-cyan) !important;
}

/* Links with primary color */
a.text-primary {
  color: var(--neon-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
  transition: all 0.3s ease !important;
}

a.text-primary:hover {
  color: var(--neon-blue) !important;
  text-shadow: var(--glow-blue) !important;
}