:root {
    --theme-color: #00ffcc;
    --theme-glow: rgba(0, 255, 204, 0.4);
    --theme-bg: rgba(0, 255, 204, 0.12);
    --font-head: 'Orbitron', -apple-system, sans-serif;
    --font-ui: 'Space Grotesk', -apple-system, sans-serif;
    --font-digits: 'Rajdhani', monospace;
}

body.hider-mode {
    --theme-color: #ffaa00;
    --theme-glow: rgba(255, 170, 0, 0.4);
    --theme-bg: rgba(255, 170, 0, 0.12);
}

body, html { 
    margin: 0; padding: 0; height: 100%; width: 100%; 
    background-color: #0d0e12; 
    font-family: var(--font-ui); 
    color: #ffffff; 
    overflow: hidden; 
    user-select: none;
}

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

.map-dark-mode .leaflet-tile-pane { filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(120%) grayscale(20%) !important; -webkit-filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(120%) grayscale(20%) !important; }
.map-light-mode .leaflet-tile-pane { filter: none !important; -webkit-filter: none !important; }
.hud-scanlines { display: none; }
.fog-of-war-mask { fill: #000000 !important; fill-opacity: 0.75 !important; stroke: transparent !important; stroke-width: 0 !important; }
.glowing-boundary-active { filter: drop-shadow(0 0 6px var(--theme-color)) drop-shadow(0 0 15px var(--theme-glow)); transition: opacity 0.4s ease, filter 0.4s ease; }
.leaflet-interactive { transition: stroke-dashoffset 0.4s ease, opacity 0.4s ease; }
.radar-sweep-cone { pointer-events: none; }

.map-emoji-pin { 
    background: rgba(15, 15, 20, 0.95); border: 2px solid var(--theme-color); border-radius: 50%; 
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 17px; 
    line-height: 1; box-sizing: border-box; box-shadow: 0 0 10px var(--theme-glow); transform: none; transition: 0.2s box-shadow;
}
.map-emoji-pin.is-locked-glow { border-color: #ffaa00; box-shadow: 0 0 18px #ffaa00; }
.gps-user-marker { background: #007aff; border: 3px solid #ffffff; border-radius: 50%; width: 18px; height: 18px; box-shadow: 0 0 15px #007aff; transform: translate(-9px, -9px); animation: pulse-gps 2s infinite; }

/* Visuelle Upgrades: Cyber Dark Pro */
@keyframes neonBreath {
    0% { filter: drop-shadow(0 0 4px var(--theme-color)) drop-shadow(0 0 10px var(--theme-glow)); stroke-opacity: 0.85; }
    100% { filter: drop-shadow(0 0 10px var(--theme-color)) drop-shadow(0 0 24px var(--theme-glow)); stroke-opacity: 1; }
}

.glowing-boundary-active { animation: neonBreath 2.6s ease-in-out infinite alternate !important; }

#map::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 400;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.75), inset 0 0 25px rgba(0, 0, 0, 0.9);
}

.q-card, .hud-box, .mini-fab-btn, .role-badge, .size-switch {
    position: relative;
    border: 1px solid rgba(0, 255, 204, 0.22) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(13, 14, 18, 0.75) 100%) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}

.q-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.q-card:active { transform: scale(0.99); border-color: var(--theme-color) !important; box-shadow: 0 0 20px rgba(0, 255, 204, 0.25); }

.map-emoji-pin { position: relative !important; }
.map-emoji-pin::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin-top: -17px; margin-left: -17px;
    border-radius: 50%; border: 2px solid var(--theme-color); box-shadow: 0 0 12px var(--theme-color); pointer-events: none;
    animation: pinSonarPulse 2s cubic-bezier(0.1, 0.5, 0.3, 1) infinite;
}
@keyframes pinSonarPulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

.stats-banner { background: linear-gradient(90deg, rgba(0, 255, 204, 0.08) 0%, rgba(0, 255, 204, 0.18) 50%, rgba(0, 255, 204, 0.08) 100%) !important; border: 1px solid var(--theme-color) !important; box-shadow: inset 0 0 15px rgba(0, 255, 204, 0.15), 0 4px 20px rgba(0, 0, 0, 0.5) !important; }
#stat-area-val { text-shadow: 0 0 12px var(--theme-color); }

/* ========================================================
   Feste Top-Nav: 3 Spalten, sauber zentriert & Ausklapp-Menü
   ======================================================== */
.top-nav {
    position: absolute !important; top: 12px !important; left: 12px !important; right: 12px !important; z-index: 1000 !important;
    display: flex !important; gap: 8px !important; align-items: flex-start !important; justify-content: space-between !important;
    pointer-events: none !important; box-sizing: border-box !important; width: calc(100% - 24px) !important;
}
.top-nav > * { pointer-events: auto !important; }

.role-badge, .size-switch { flex-shrink: 0 !important; }

.role-badge {
    background: rgba(16, 17, 23, 0.85) !important; backdrop-filter: blur(20px) !important;
    border: 1.5px solid var(--theme-color) !important; border-radius: 12px !important;
    padding: 7px 12px !important; display: flex !important; align-items: center !important; gap: 6px !important;
    color: var(--theme-color) !important; font-family: var(--font-head) !important; font-weight: 700 !important; font-size: 11px !important; cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; transition: 0.2s !important; letter-spacing: 0.5px !important;
}
.role-badge.hider { border-color: #ffaa00 !important; color: #ffaa00 !important; }

.size-switch { 
    background: rgba(16, 17, 23, 0.85) !important; border: 1px solid rgba(255,255,255,0.15) !important; 
    border-radius: 10px !important; display: flex !important; overflow: hidden !important; backdrop-filter: blur(20px) !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}
.size-btn { background: transparent !important; border: none !important; color: #666 !important; padding: 7px 10px !important; font-size: 11px !important; font-weight: 800 !important; cursor: pointer !important; font-family: var(--font-head) !important; }
.size-btn.active#size-s { background: #ffcc00 !important; color: #000 !important; }
.size-btn.active#size-m { background: #ff7700 !important; color: #fff !important; }
.size-btn.active#size-l { background: #ff3333 !important; color: #fff !important; }

/* Timer: siehe Abschnitt TIMER-ISLAND in style.css (nutzt eigene island-* Klassen) */