/* MoBoScan Design System */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Orbitron:wght@400;600;700;800;900&display=swap');

:root {
  --bg-dark: #05070d;
  --cyan-neon: #00e5ff;
  --cyan-glow: rgba(0, 229, 255, 0.4);
  --magenta-neon: #ff2d78;
  --magenta-glow: rgba(255, 45, 120, 0.4);
  --glass-bg: rgba(10, 16, 29, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
}

body {
  background-color: var(--bg-dark);
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  overflow-x: hidden;
  position: relative;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Orbitron', sans-serif;
}

/* Background grid & scanlines */
.grid-bg {
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 70%),
    linear-gradient(to right, rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}

.scanline-overlay {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.25)
  );
  background-size: 100% 4px;
  pointer-events: none;
}

/* Glassmorphism components */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.glass-panel-cyan {
  background: rgba(8, 20, 36, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.1);
}

.glass-panel-magenta {
  background: rgba(30, 8, 20, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 45, 120, 0.3);
  box-shadow: 0 0 25px rgba(255, 45, 120, 0.15);
}

/* Radar / Sonar animation */
.radar-container {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.25);
  background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, rgba(5, 7, 13, 0.8) 70%);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.15);
}

@media (min-width: 768px) {
  .radar-container {
    width: 360px;
    height: 360px;
  }
}

.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.15);
}

.radar-ring-1 { width: 30%; height: 30%; }
.radar-ring-2 { width: 60%; height: 60%; }
.radar-ring-3 { width: 85%; height: 85%; }

.radar-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0, 229, 255, 0.4) 0deg, rgba(0, 229, 255, 0.05) 50deg, transparent 50deg);
  animation: spin 3s linear infinite;
}

.sonar-active .radar-sweep {
  animation: spin 1.2s linear infinite;
  background: conic-gradient(from 0deg at 50% 50%, rgba(0, 229, 255, 0.6) 0deg, rgba(0, 229, 255, 0.1) 70deg, transparent 70deg);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulse animation */
.sonar-pulse {
  animation: sonarPulse 1.8s ease-out infinite;
}

@keyframes sonarPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 0.4; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.threat-pulse {
  animation: threatPulse 1.5s infinite;
}

@keyframes threatPulse {
  0%, 100% {
    border-color: rgba(255, 45, 120, 0.9);
    box-shadow: 0 0 20px rgba(255, 45, 120, 0.5);
  }
  50% {
    border-color: rgba(255, 45, 120, 0.4);
    box-shadow: 0 0 40px rgba(255, 45, 120, 0.8);
  }
}

/* Custom scrollbar for console */
.console-scroll::-webkit-scrollbar {
  width: 6px;
}
.console-scroll::-webkit-scrollbar-track {
  background: rgba(5, 7, 13, 0.8);
}
.console-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.3);
  border-radius: 3px;
}
.console-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.6);
}

/* SVG glow filter */
.glow-cyan {
  filter: drop-shadow(0px 0px 8px rgba(0, 229, 255, 0.7));
}
.glow-magenta {
  filter: drop-shadow(0px 0px 8px rgba(255, 45, 120, 0.8));
}

/* Neon buttons */
.btn-cyan {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.8), rgba(0, 180, 216, 0.9));
  color: #05070d;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
  transition: all 0.2s ease-out;
}
.btn-cyan:hover {
  background: linear-gradient(135deg, #00e5ff, rgba(0, 229, 255, 0.9));
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.7);
  transform: translateY(-1px);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: #00e5ff;
  transition: all 0.2s ease-out;
}
.btn-glass:hover {
  background: rgba(0, 229, 255, 0.12);
  border-color: #00e5ff;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

/* Touch targets min height */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}