/* ═══════════════════════════════════════════
   Эшелон-Z — Main Styles
   Aesthetic: Military C2 / Dark CRT
   ═══════════════════════════════════════════ */

:root {
    /* ── Base ── */
    --bg-dark: #0a0e14;
    --bg-panel: rgba(10, 14, 20, 0.92);
    --bg-card: rgba(20, 28, 40, 0.8);
    --border: rgba(0, 229, 255, 0.15);
    --border-accent: rgba(0, 229, 255, 0.35);

    /* ── Text ── */
    --text-primary: #d0e8f0;
    --text-secondary: #6b8a99;
    --text-dim: #3a5060;

    /* ── Accent colors ── */
    --cyan: #00E5FF;
    --cyan-dim: rgba(0, 229, 255, 0.3);
    --red: #FF1744;
    --red-dim: rgba(255, 23, 68, 0.3);
    --orange: #FF9100;
    --purple: #AA00FF;
    --green: #00E676;
    --blue: #42A5F5;
    --white: #FFFFFF;

    /* ── Echelon colors ── */
    --echelon-long: #1565C0;
    --echelon-medium: #F9A825;
    --echelon-short: #C62828;
    --echelon-ew: #7B1FA2;

    /* ── Zone type colors ── */
    --zone-ew-jam: #42A5F5;
    --zone-laser: #F44336;

    /* ── Threat type colors (charts/legend) ── */
    --threat-recon: #00E5FF;
    --threat-strike: #FF1744;
    --threat-ew: #AA00FF;
    --threat-kamikaze: #FF9100;

    /* ── Chart/canvas palette ── */
    --chart-grid: rgba(255, 255, 255, 0.04);
    --chart-axis: rgba(255, 255, 255, 0.12);
    --chart-label: rgba(255, 255, 255, 0.35);
    --chart-destroyed: #FF1744;
    --chart-complete: #00E676;
    --chart-distance: #00E5FF;

    /* ── FPV OSD ── */
    --fpv-osd: #FFFFFF;
    --fpv-osd-shadow: rgba(0, 0, 0, 0.8);
    --fpv-osd-warning: #FF4444;
    --fpv-osd-caution: #FFAA00;
    --fpv-health-good: #00E676;
    --fpv-health-mid: #FF9100;
    --fpv-health-low: #FF1744;

    /* ── Map layers ── */
    --map-target: #FF1744;
    --map-defense: #00E5FF;
    --map-grid: #3a5060;
    --map-halo: rgba(10, 14, 20, 0.8);

    /* ── Drone renderer ── */
    --drone-destroyed: #FF1744;
    --drone-alt-lo: #6b8a99;
    --drone-alt-mid: #8ab0c2;
    --drone-alt-hi: #b0dff0;

    /* ── Typography ── */
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;
    --font-display: 'Oswald', sans-serif;

    /* ── Effects ── */
    --glow-cyan: 0 0 10px rgba(0, 229, 255, 0.3);
    --glow-red: 0 0 10px rgba(255, 23, 68, 0.3);
    --panel-radius: 2px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-mono);
    background: var(--bg-dark);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height — fixes iOS address bar */
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 1;
}

/* Mapbox overrides — dark theme */
.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-logo {
    opacity: 0.3 !important;
}

/* ═══ Keyboard focus ═══ */
:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

.mapboxgl-popup-content {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
    border-radius: var(--panel-radius) !important;
}

.mapboxgl-popup-tip {
    border-top-color: var(--border) !important;
}

/* ═══ Scanline overlay ═══ */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 9999;
}