/* Halloween-Theme. Eingeschaltet über SEASONAL_THEME = "halloween" in
   web/view.py, aktiv erst nach Klick auf den Kürbis (data-theme am <html>).
   Alles außer den Button-Variablen hängt an :root[data-theme="halloween"], damit das
   normale Design unberührt bleibt, solange niemand klickt. */

:root {
    --theme-icon: "🎃";
    --theme-color: #FF7A1A;
}

/* Invertiert: dunkler Grund, helle Rahmen, Schrift und Schatten. Die
   Wochentagsfarben bleiben, sonst passt die Legende nicht mehr. */
:root[data-theme="halloween"] {
    color-scheme: dark;
    --c: #F4EBDD;
    --bg: #17121F;
    --paper: #1F1829;
    --surface: #241C30;
    --accent: #FF7A1A;
    --title: #FF7A1A;
    --green: #8BE36B;
    --cyan: #B98CFF;
    --subtle: #A79CB8;
    --disabled: #3A3146;
    --warning: #FF7A1A;
    --font-display: 'Creepster', cursive;
    --tile-filter: invert(1) hue-rotate(180deg) brightness(.8) contrast(1.1) saturate(.6);
}

/* Titel: Grusel-Schrift, Kürbisorange mit lila Kontur statt heller 3D-Kante.
   Creepster läuft schmaler als Bungee, daher 1.25em. !important, weil die
   Mobil-Regel in app.css Kontur und Schatten ebenfalls mit !important setzt. */
:root[data-theme="halloween"] .font-3d-bungee {
    font-size: 1.25em;
    -webkit-text-stroke: 2px #4B1D6B !important;
    text-shadow: 0 0 12px rgba(255, 122, 26, .45), 3px 3px 0 #4B1D6B !important;
    letter-spacing: 4px;
}

/* Schrift auf farbigen Flächen dunkel, helle Schrift wäre dort unleserlich. */
:root[data-theme="halloween"] .badge,
:root[data-theme="halloween"] .back-btn,
:root[data-theme="halloween"] .day-btn,
:root[data-theme="halloween"] .nb-m,
:root[data-theme="halloween"] .day-btn[data-tip]:hover::after,
:root[data-theme="halloween"] .legend-reset[data-tip]:hover::after,
:root[data-theme="halloween"] .neo-select option:checked {
    color: var(--bg);
}
:root[data-theme="halloween"] .neo-select option:checked { -webkit-text-fill-color: var(--bg); }

/* Das Select-Dreieck ist eine data-URI und kennt kein var(--c). */
:root[data-theme="halloween"] .neo-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23F4EBDD'/%3E%3C/svg%3E");
}

/* Leaflet bringt eigene helle Grundfarben mit. */
:root[data-theme="halloween"] .leaflet-container { background: var(--bg); }
:root[data-theme="halloween"] .leaflet-popup-content-wrapper,
:root[data-theme="halloween"] .leaflet-popup-close-button { color: var(--c); }
:root[data-theme="halloween"] .leaflet-control-attribution {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    color: var(--subtle);
}
:root[data-theme="halloween"] .leaflet-control-attribution a { color: var(--accent); }

/* Geister statt Kästchen: oben rund, unten gezackter Saum. Der Saum schneidet
   Rahmen und Schatten ab, deshalb trägt der Elternknoten den Schatten. */
:root[data-theme="halloween"] .nb-m,
:root[data-theme="halloween"] .day-btn::before {
    border-radius: 50% 50% 0 0 / 45% 45% 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 83% 86%, 67% 100%, 50% 86%,
                       33% 100%, 17% 86%, 0 100%);
}
:root[data-theme="halloween"] .nb-m { box-shadow: none; }
:root[data-theme="halloween"] .leaflet-marker-icon:has(> .nb-m) {
    filter: drop-shadow(2px 2px 0 var(--c));
}
/* Am Wochentag-Button trägt eine Ebene dahinter die Form, sonst schnitte der
   Saum auch den Tooltip ab, der über dem Button hängt. */
:root[data-theme="halloween"] .day-btn {
    background: transparent; border-color: transparent; box-shadow: none;
    isolation: isolate;
}
:root[data-theme="halloween"] .day-btn::before {
    content: ''; position: absolute; inset: calc(-1 * var(--border)); z-index: -1;
    background: var(--day-color);
    border: var(--border) solid var(--c);
}
:root[data-theme="halloween"] .day-btn[aria-pressed="false"]::before {
    background: color-mix(in srgb, var(--day-color) 27%, transparent);
}

/* Spinnfäden statt schwarzer Linien beim aufgefächerten Stapel. */
:root[data-theme="halloween"] .spider-leg {
    stroke: var(--c);
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

/* Geister schweben. Versetzte Startpunkte, damit nicht alle im Gleichtakt
   wippen. Aus bei "Bewegung reduzieren". */
@keyframes fk-ghost-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
    :root[data-theme="halloween"] .nb-m { animation: fk-ghost-float 2.4s ease-in-out infinite; }
    :root[data-theme="halloween"] .leaflet-marker-pane > :nth-child(3n+1) .nb-m { animation-delay: -.8s; }
    :root[data-theme="halloween"] .leaflet-marker-pane > :nth-child(3n+2) .nb-m { animation-delay: -1.6s; }
}