/* Core styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0d1117;
    font-family: 'Fira Sans', sans-serif;
}

#map {
    width: 100%;
    height: 100%;
    z-index: 0;
}

#glass-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.leaflet-marker-icon:hover {
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.8));
    transform: scale(1.2);
    transition: transform 0.2s, filter 0.2s;
}

.leaflet-control-attribution {
    display: none;
}

/* Marker animation */
.pulse-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: pulse-ring 2s infinite;
    position: relative;
    transform: translate(-50%, -50%);
}

@keyframes pulse-ring {
    0% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
    }
    70% {
    box-shadow: 0 0 0 10px transparent;
    opacity: 0.6;
    }
    100% {
    box-shadow: 0 0 0 0 transparent;
    opacity: 1;
    }
}

/* HUD visual effects */
.hud-scanlines::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 255, 0.03),
    rgba(0, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 3px
    );
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    transform: scale(1.01) skewY(-0.3deg);
}

.hud-flicker {
    animation: flicker 2s infinite steps(2, start);
}

@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 22%, 24%, 55% { opacity: 0.5; }
}

.hud-glitch {
    position: relative;
}

.hud-glitch::before,
.hud-glitch::after {
    content: attr(data-glitch);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hud-glitch::before {
    transform: translate(1px, 0);
    color: #f0f;
    animation: glitchShift 1s infinite linear alternate;
    z-index: -1;
}

.hud-glitch::after {
    transform: translate(-1px, 0);
    color: #0ff;
    animation: glitchShift 1.2s infinite linear alternate-reverse;
    z-index: -1;
}

@keyframes glitchShift {
    0% { clip-path: inset(0% 0 98% 0); }
    10% { clip-path: inset(10% 0 80% 0); }
    20% { clip-path: inset(20% 0 60% 0); }
    30% { clip-path: inset(5% 0 85% 0); }
    40% { clip-path: inset(15% 0 70% 0); }
    50% { clip-path: inset(25% 0 50% 0); }
    60% { clip-path: inset(0% 0 100% 0); }
    70% { clip-path: inset(20% 0 70% 0); }
    80% { clip-path: inset(5% 0 90% 0); }
    90% { clip-path: inset(10% 0 80% 0); }
    100% { clip-path: inset(0% 0 100% 0); }
}

.hud-crt {
    transform: perspective(800px) translateZ(0) scale(1.01);
    border-radius: 12px;
    box-shadow:
    inset 0 0 40px rgba(0, 255, 255, 0.1),
    inset 0 0 120px rgba(0, 255, 255, 0.05),
    0 0 12px rgba(0, 255, 255, 0.2);
    backdrop-filter: blur(8px) contrast(1.2);
}