/* Custom submarine control panel styles */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400@700&display=swap');

body {
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Submarine console glow effects */
.border-green-600 {
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.border-red-600 {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Button hover effects */
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

button:active {
    transform: translateY(0);
}

/* Range slider styling */
input[type="range"] {
    background: linear-gradient(to right, #10b981 0%, #10b981 50%, #374151 50%, #374151 100%);
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fbbf24;
    border: 2px solid #10b981;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fbbf24;
    border: 2px solid #10b981;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

/* Periscope image styling */
img {
    filter: sepia(20%) hue-rotate(90deg) brightness(0.8);
}

/* Emergency alert animation */
@keyframes criticalAlert {
    0%, 100% { 
        background-color: #7f1d1d; 
        border-color: #dc2626; 
    }
    50% { 
        background-color: #991b1b; 
        border-color: #ef4444; 
    }
}

.animate-pulse.bg-red-800 {
    animation: criticalAlert 1s infinite;
}

/* Sonar sweep animation */
@keyframes sonarSweep {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* Control panel grid responsive adjustments */
@media (max-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .max-w-7xl {
        max-width: 100%;
        padding: 0 1rem;
    }
}

/* Digital display effects */
.font-mono {
    text-shadow: 0 0 5px currentColor;
}

/* Emergency mode red tint */
.bg-red-900 {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 50%, #450a0a 100%);
}

/* Gauge improvements */
svg circle {
    filter: drop-shadow(0 0 3px currentColor);
}

svg line {
    filter: drop-shadow(0 0 2px #fbbf24);
}