/* ==============================================================================
   VESUVIAN FLEET - VOLCANIC DESIGN SYSTEM
   Deep Charcoal Bedrock, Ash-Grey Borders, and Glowing Crimson Magma Accents
   ============================================================================== */

:root {
  --volcano-bg: #090b0e;
  --volcano-bedrock: #0e1218;
  --volcano-card: #131822;
  --volcano-card-hover: #19202e;
  --ash-border: #232b3a;
  --ash-border-light: #323d50;
  --ash-muted: #94a3b8;
  --crimson-core: #dc2626;
  --crimson-bright: #ef4444;
  --crimson-glow: rgba(220, 38, 38, 0.4);
  --magma-orange: #f97316;
  --magma-glow: rgba(249, 115, 22, 0.35);
  --verified-emerald: #10b981;
  --verified-glow: rgba(16, 185, 129, 0.35);
}

body {
  background-color: var(--volcano-bg);
  color: #f1f5f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-image: 
    radial-gradient(circle at 15% 10%, rgba(220, 38, 38, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(249, 115, 22, 0.05) 0%, transparent 45%);
  background-attachment: fixed;
}

/* Magma Glow Utilities */
.glow-crimson {
  box-shadow: 0 0 20px -3px var(--crimson-glow);
}

.glow-crimson-subtle {
  box-shadow: 0 0 12px -2px rgba(220, 38, 38, 0.25);
}

.glow-orange {
  box-shadow: 0 0 20px -3px var(--magma-glow);
}

.glow-emerald {
  box-shadow: 0 0 20px -2px var(--verified-glow);
}

.border-crimson-glow {
  border-color: var(--crimson-core);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
}

/* Tactical Volcanic Glass Panels */
.volcanic-card {
  background: linear-gradient(135deg, rgba(19, 24, 34, 0.85) 0%, rgba(14, 18, 24, 0.95) 100%);
  border: 1px solid var(--ash-border);
  backdrop-filter: blur(12px);
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
}

.volcanic-card:hover {
  border-color: var(--ash-border-light);
}

.volcanic-card-accent {
  background: linear-gradient(135deg, rgba(28, 20, 24, 0.85) 0%, rgba(14, 18, 24, 0.95) 100%);
  border: 1px solid rgba(220, 38, 38, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 0.75rem;
}

/* Magma Action Button */
.btn-magma {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid #ef4444;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-magma:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.55);
  transform: translateY(-1px);
}

.btn-ash {
  background: #1e2633;
  color: #e2e8f0;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 1px solid var(--ash-border);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-ash:hover {
  background: #283344;
  border-color: #475569;
  color: #ffffff;
}

/* Volcanic Pulse Indicator */
@keyframes volcanicPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.pulse-cyno {
  animation: volcanicPulse 2s infinite;
}

/* Custom Tactical Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #090b0e;
}
::-webkit-scrollbar-thumb {
  background: #232b3a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #dc2626;
}