/* ============================================================
   INVADERS.REVIZZ.FR — Thème immersif "Night Mission"
   Arcade dark + néon vert phosphore + scanlines CRT
   Chargé APRÈS css/styles.css → surcharge propre, sans toucher
   au JS d'origine.
   ============================================================ */

:root {
    --mi-bg: #05070d;
    --mi-panel: rgba(10, 14, 24, 0.88);
    --mi-panel-solid: #0a0e18;
    --mi-neon: #39ff6e;
    --mi-neon-dim: #1d8f42;
    --mi-neon-glow: rgba(57, 255, 110, 0.55);
    --mi-cyan: #27e0ff;
    --mi-text: #d6ffe4;
    --mi-muted: #6f8f7d;
    --mi-border: rgba(57, 255, 110, 0.28);
}

html, body {
    background: var(--mi-bg);
}

/* ---------- Fond de page + vignette + scanlines ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4990;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
    mix-blend-mode: multiply;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4991;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.025) 0px,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.7;
}

/* ---------- Titre / header arcade ---------- */
#map-title {
    background: linear-gradient(180deg, #04060a 0%, #0a1018 100%);
    border-bottom: 2px solid var(--mi-border);
    box-shadow:
        0 2px 18px rgba(57, 255, 110, 0.25),
        inset 0 -18px 30px -18px rgba(57, 255, 110, 0.15);
    color: var(--mi-neon);
    text-shadow:
        0 0 6px var(--mi-neon-glow),
        0 0 18px rgba(57, 255, 110, 0.35),
        0 0 40px rgba(57, 255, 110, 0.2);
    letter-spacing: 0.08em;
    animation: mi-title-flicker 6s infinite;
}

@keyframes mi-title-flicker {
    0%, 92%, 96%, 100% { opacity: 1; }
    93% { opacity: 0.82; }
    94% { opacity: 0.95; }
    95% { opacity: 0.75; }
}

/* ---------- Boutons latéraux : capsules sombres néon ---------- */
#side-buttons-container button,
#side-buttons-container #draggable-button-container {
    background-color: #c9d8ce !important;
    border: 1px solid var(--mi-border) !important;
    box-shadow:
        0 0 10px rgba(57, 255, 110, 0.25),
        0 4px 14px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

#side-buttons-container button:hover,
#side-buttons-container #draggable-button-container:hover {
    transform: scale(1.08);
    background-color: #e6f2ea !important;
    border-color: var(--mi-neon) !important;
    box-shadow:
        0 0 18px var(--mi-neon-glow),
        0 4px 18px rgba(0, 0, 0, 0.7) !important;
}

/* ---------- Panneaux / popups : verre sombre ---------- */
.leaflet-popup-content-wrapper,
#public-comments-content,
#friends-content,
#cities-info-content,
#account-info-content,
#achievements-content,
#shop-content,
#search-popup,
#date-picker,
.flatpickr-calendar,
.popup-content,
#invader-info-popup,
.panel-box {
    background: var(--mi-panel) !important;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--mi-border) !important;
    box-shadow:
        0 0 24px rgba(57, 255, 110, 0.12),
        0 12px 40px rgba(0, 0, 0, 0.65) !important;
    color: var(--mi-text) !important;
}

.leaflet-popup-content-wrapper .leaflet-popup-tip {
    background: var(--mi-panel-solid) !important;
    border: 1px solid var(--mi-border);
}

.leaflet-popup-content,
#public-comments-content,
#friends-content,
#cities-info-content,
#achievements-content,
#shop-content,
.popup-content {
    color: var(--mi-text) !important;
}

.leaflet-popup-content h2,
.leaflet-popup-content h3,
.leaflet-popup-content b,
.popup-content h2,
.popup-content h3 {
    color: var(--mi-neon) !important;
    text-shadow: 0 0 8px rgba(57, 255, 110, 0.4);
}

.leaflet-popup-close-button,
.popup-close {
    color: var(--mi-neon) !important;
    text-shadow: 0 0 8px var(--mi-neon-glow);
}

/* Textes secondaires */
.leaflet-popup-content small,
.popup-content small,
.muted,
#public-comments-content small {
    color: var(--mi-muted) !important;
}

/* ---------- Boutons dans les popups ---------- */
.popup-content button,
#public-comments-content button,
#friends-content button,
.leaflet-popup-content button,
.flatpickr-day {
    color: var(--mi-text);
}

.popup-content button,
#public-comments-content button,
#friends-content button,
.leaflet-popup-content button {
    background: rgba(57, 255, 110, 0.1);
    border: 1px solid var(--mi-border);
    border-radius: 8px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.popup-content button:hover,
#public-comments-content button:hover,
#friends-content button:hover,
.leaflet-popup-content button:hover {
    background: rgba(57, 255, 110, 0.22);
    box-shadow: 0 0 10px rgba(57, 255, 110, 0.35);
}

/* Inputs */
.popup-content input,
.popup-content textarea,
#public-comments-content input,
#public-comments-content textarea,
#friends-content input,
#friends-name-input,
#friends-add-input,
.flatpickr-input {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid var(--mi-border) !important;
    color: var(--mi-neon) !important;
    border-radius: 6px;
}

.flatpickr-calendar {
    font-family: 'VT323', monospace;
}

.flatpickr-day.selected {
    background: var(--mi-neon-dim) !important;
    border-color: var(--mi-neon) !important;
}

/* ---------- Barre du bas (date / navigation temporelle) ---------- */
#button-container,
#nav-buttons,
#date-picker {
    background: var(--mi-panel) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mi-border) !important;
    border-radius: 12px;
    color: var(--mi-neon) !important;
    box-shadow: 0 0 14px rgba(57, 255, 110, 0.15), 0 6px 20px rgba(0, 0, 0, 0.55);
}

/* ---------- Leaflet : habillage sombre ---------- */
.leaflet-container {
    background: #05070d !important;
}

.leaflet-control-zoom a,
.leaflet-control-attribution,
.leaflet-control-geocoder {
    background: var(--mi-panel-solid) !important;
    color: var(--mi-neon) !important;
    border-color: var(--mi-border) !important;
}

.leaflet-control-attribution {
    opacity: 0.55;
}

/* Cluster pins : néon au lieu du gris ui d'origine */
.marker-cluster div {
    background: rgba(57, 255, 110, 0.14) !important;
    color: var(--mi-neon) !important;
    text-shadow: 0 0 6px rgba(57, 255, 110, 0.5);
}

.marker-cluster {
    background: rgba(57, 255, 110, 0.08) !important;
    box-shadow: 0 0 12px rgba(57, 255, 110, 0.25);
}

/* ---------- Indicateur de sync ---------- */
#background-sync-indicator {
    filter: hue-rotate(80deg) drop-shadow(0 0 6px var(--mi-neon-glow));
}

/* ---------- Scrollbars discrètes ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--mi-neon-dim);
    border-radius: 4px;
}

/* ---------- Sélection ---------- */
::selection {
    background: rgba(57, 255, 110, 0.35);
    color: #fff;
}

/* ---------- Mobile : densité réduite des effets ---------- */
@media (max-width: 640px) {
    body::after { opacity: 0.45; }
    #map-title { font-size: 2.2em; }
}


/* ---------- Marqueurs individuels : teintes néon sur fond nuit ---------- */
.icon-color-grey {
    filter: invert(72%) sepia(18%) saturate(420%) hue-rotate(170deg) brightness(92%) contrast(88%) !important;
}

.icon-color-green {
    filter: invert(78%) sepia(90%) saturate(1200%) hue-rotate(85deg) brightness(105%) contrast(95%) !important;
}

.icon-color-red {
    filter: invert(30%) sepia(95%) saturate(5000%) hue-rotate(335deg) brightness(105%) contrast(100%) !important;
}

.icon-color-purple {
    filter: invert(45%) sepia(95%) saturate(4000%) hue-rotate(265deg) brightness(100%) contrast(95%) !important;
}

/* Halo sous les marqueurs pour l'effet "signature dans la nuit" */
.leaflet-marker-icon {
    filter: drop-shadow(0 0 3px rgba(57, 255, 110, 0.25));
}


/* ---------- Boot overlay ---------- */
#mi-boot {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at center, #07130a 0%, #05070d 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

#mi-boot.mi-boot-out {
    opacity: 0;
}

.mi-boot-inner {
    text-align: center;
    font-family: 'VT323', monospace;
}

.mi-boot-title {
    font-size: 4em;
    color: var(--mi-neon);
    text-shadow:
        0 0 8px var(--mi-neon-glow),
        0 0 30px rgba(57, 255, 110, 0.4);
    letter-spacing: 0.1em;
    animation: mi-title-flicker 3s infinite;
}

.mi-boot-sub {
    font-size: 1.6em;
    color: var(--mi-cyan);
    text-shadow: 0 0 10px rgba(39, 224, 255, 0.6);
    letter-spacing: 0.45em;
    margin-top: 6px;
}

.mi-boot-blink {
    margin-top: 34px;
    font-size: 1.3em;
    color: var(--mi-text);
    animation: mi-blink 1.1s steps(2, start) infinite;
}

@keyframes mi-blink {
    to { visibility: hidden; }
}


/* ---------- Onglet toggles (gauche) + éléments blancs restants ---------- */
#map-toggles {
    color: var(--mi-text) !important;
}

#map-toggles-body {
    background: var(--mi-panel) !important;
    border: 1px solid var(--mi-border);
    box-shadow: 0 0 14px rgba(57, 255, 110, 0.12), 2px 2px 12px rgba(0, 0, 0, 0.5) !important;
    color: var(--mi-text) !important;
}

#map-toggles-tab {
    background: var(--mi-panel-solid) !important;
    border: 1px solid var(--mi-border) !important;
    border-left: none !important;
    color: var(--mi-neon) !important;
    text-shadow: 0 0 8px var(--mi-neon-glow);
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
}

#map-toggles-body label,
#map-toggles-body span {
    color: var(--mi-text) !important;
}

/* checkbox accent */
#map-toggles-body input[type="checkbox"] {
    accent-color: var(--mi-neon);
}

/* Popups génériques texte sombre par défaut → forcer lisibilité */
.leaflet-popup-content p,
.leaflet-popup-content span,
.leaflet-popup-content label,
.leaflet-popup-content div {
    color: var(--mi-text);
}

/* Boutons ronds blancs d'origine dans popups (ex: actions flash) → sombre néon */
.leaflet-popup-content button[data-role],
.leaflet-popup-content .action-button,
.popup-actions button {
    background: var(--mi-panel-solid) !important;
    border: 1px solid var(--mi-border) !important;
    color: var(--mi-text) !important;
}

.leaflet-popup-content textarea,
.leaflet-popup-content input[type="text"] {
    background: rgba(0, 0, 0, 0.5) !important;
    color: var(--mi-neon) !important;
    border: 1px solid var(--mi-border) !important;
}