/* map.css – BarselVibe Default Map V1: "Rooftop After Dark".
   V1.1 Polish (2026-09-22): Buehne (Media-Turm/DJ-Bereich) leichter/offener, Boden weniger grid-artig + dezente Reflexion/Crowd-Licht,
   warme Lichtinseln um Lounge/Pflanzen, Skyline-Tiefe (Fern-Ebene zurueckgenommen). Reine CSS-Aenderungen, keine neue Geometrie/Funktion/DOM/Keyframes.
   NUR Aussehen. Geometrie und Funktion (Screen, Figuren, Pult-Position, Warteliste, Votes, Player-Regeln) stehen in scene.css und bleiben unveraendert.
   Kunst (Skyline, Pflanzen, Sofa, Lichterkette, Bodenkontur): css/map-art.css (generiert von tools/build_map_art.py).
   Regeln fuer diese Datei:
     - alle Deko-Ebenen haben pointer-events: none und liegen UNTER dem Screen (z-index 40) und – ausser .fg – unter den Figuren (z-index 10-13)
     - nichts liegt vor dem Video-Player; nichts liegt auf den Bedienknoepfen (Warteliste x 21-39, Votes x 62-80, jeweils unten)
     - Animationen nur mit transform/opacity, wenige, langsam; prefers-reduced-motion schaltet alle ab
   Koordinaten: 1em = 1 % der Buehnenbreite, "bottom" = Abstand vom Boden der Buehne (Terrassenrand/Bruestung liegt bei 24em). */

/* ---------- Himmel, Mond, Sterne, Horizont ---------- */
.backdrop {
  background: linear-gradient(to top, #2a1550 0, #2a1550 22em, #b3457f 25em, #7c3585 31em, #46298a 42em, #241b6a 58em, #120f47 85em, #090730 130em);
}
#stars { pointer-events: none; opacity: .55; animation: mapstars 7s ease-in-out infinite alternate; }
.moon { pointer-events: none; position: absolute; right: 9em; top: 7em; width: 3em; height: 3em; border-radius: 50%; background: #f4f1ff; box-shadow: 0 0 1.6em .4em #b9a8ff77; }
.glow { position: absolute; left: 0; right: 0; bottom: 24em; height: 20em; pointer-events: none;
        background: radial-gradient(65% 100% at 50% 100%, #ff6fa082, transparent 74%), linear-gradient(to top, #6a4ad02e, transparent 85%);
        animation: mapglow 9s ease-in-out infinite alternate; }

/* ---------- Skyline: zwei Tiefenebenen + funkelnde ferne Fenster, volle Breite (Kachel wiederholt sich) ----------
   Tiefe (V1.1): die ferne Ebene ist etwas zurueckgenommen (Opacity), die nahe bleibt voll da -> mehr wahrnehmbarer Abstand,
   ohne CSS-Filter (nur opacity, wie ueberall in dieser Datei). */
.skyline { position: absolute; left: 0; right: 0; bottom: 24em; pointer-events: none; background-repeat: repeat-x; background-position: 0 100%; background-size: auto 100%; }
.skyline.far  { height: 22em; background-image: var(--art-far); opacity: .74; }
.skyline.lit  { height: 22em; background-image: var(--art-far-lit); animation: maptwinkle 5.5s ease-in-out infinite alternate; }
.skyline.near { height: 30em; background-image: var(--art-near); background-position: 37em 100%; }

/* ---------- Terrasse: Glasbruestung + Boden ---------- */
.rail { position: absolute; left: 0; right: 0; bottom: 24em; height: 4.2em; pointer-events: none;
        background: linear-gradient(#ffffff12, #ffffff04), repeating-linear-gradient(90deg, transparent 0 9.86em, #b9a8ff44 9.86em 10em);
        border-top: .14em solid #d5cbff99; box-shadow: 0 -.4em 1.4em #b9a8ff22; }
.rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5em; background: linear-gradient(#251a5c, #130d36); border-top: .12em solid #ff5fb866; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24em; overflow: hidden; pointer-events: none;
          background:
            radial-gradient(34em 9em at 50% 6%, #ff2fa04d, transparent 72%),
            radial-gradient(48em 11em at 50% 46%, #ff5fb821, transparent 76%),
            radial-gradient(15em 9em at 9% 70%, #ffb46a33, transparent),
            radial-gradient(15em 9em at 91% 70%, #ffb46a33, transparent),
            linear-gradient(#33266f 0, #22195a 45%, #150e3a 100%); }
/* Boden (V1.1): weniger "Grid" (weiter auseinander, blasser, erst im vorderen Bereich sichtbar) – wirkt mehr wie Terrassenbelag als CAD-Raster. */
.ground::before { content: ""; position: absolute; left: -60%; right: -60%; top: 0; height: 80em; transform-origin: 50% 0; transform: perspective(64em) rotateX(62deg);
                  background: repeating-linear-gradient(90deg, #a596ff10 0 .12em, transparent .12em 15em), repeating-linear-gradient(0deg, #a596ff16 0 .12em, transparent .12em 7.5em);
                  -webkit-mask-image: linear-gradient(transparent, transparent 42%, #000 58%); mask-image: linear-gradient(transparent, transparent 42%, #000 58%); }
.ground::after { content: ""; position: absolute; inset: 0; animation: mapsheen 10s ease-in-out infinite alternate;
                 background: radial-gradient(38% 60% at 50% 8%, #ff8fd034, transparent 72%), radial-gradient(90% 100% at 50% 50%, transparent 55%, #05031699); }

/* ---------- Welt-Ebene hinter den Figuren (alle klickdurchlaessig) ---------- */
.fx { pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.deckline { left: 0; bottom: 0; width: 100em; height: 24em; background: var(--art-deckline) no-repeat 0 0 / 100% 100%; pointer-events: none; }

.gar { top: 0; width: 34em; height: 5.7em; background-image: var(--art-garland); animation: mapflicker 4.6s ease-in-out infinite alternate; }
.gar.l { left: 0; } .gar.r { right: 0; transform: scaleX(-1); animation-delay: -2s; }

/* Medien-Turm: Rahmen um den Screen (liegt HINTER dem Screen), Sockel, Lichtleisten, Lautsprecher.
   V1.1: Rahmen etwas transparenter/duenner (weniger massiv); der Sockel ist niedriger und faellt nach unten auf Transparenz ab, statt als
   harte Kante zu enden -> zwischen Sockel und Rahmen bleibt sichtbarer Boden/Skyline stehen (raeumliche Trennung statt ein Block). */
.frame { left: 30.3em; bottom: 33.6em; width: 39.4em; height: 23.7em; border-radius: .5em; background: linear-gradient(#1b1446dd, #0c0928cc);
         border: .12em solid #ff5fb877; box-shadow: 0 0 2.6em #ff2fa03a, inset 0 0 1.6em #0009; }
.tower { left: 34em; bottom: 21.5em; width: 24em; height: 8em; border-top: .1em solid #4a3aa0;
         background: linear-gradient(#100b2ed9 0%, #1b1350bb 55%, transparent 100%), radial-gradient(60% 70% at 50% 100%, #ff2fa03d, transparent); }
.tower::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: repeating-linear-gradient(90deg, transparent 0 3.9em, #ffffff08 3.9em 4em); }
.neon { bottom: 26em; width: .34em; height: 29em; border-radius: .2em; background: #ff8ad0; box-shadow: 0 0 .5em #ff5fb8, 0 0 1.6em #ff2fa0cc; }
.neon.l { left: 29.4em; } .neon.r { left: 70.3em; }
body.playing .neon { animation: mappulse calc(var(--beat) * 3) ease-in-out infinite alternate; }
.spk { bottom: 21em; width: 7em; height: 12em; border-radius: .5em; border: .12em solid #2c2064;
       background: radial-gradient(circle at 50% 27%, #0a0620 0 .5em, #ff5fb8 .55em .72em, #251952 .77em 1.9em, transparent 2em),
                   radial-gradient(circle at 50% 70%, #0a0620 0 .7em, #ff5fb8 .75em .95em, #251952 1em 2.6em, transparent 2.7em),
                   linear-gradient(#1a1245, #0b0827); box-shadow: 0 0 1.2em #ff2fa022; }
.spk.l { left: 21.8em; } .spk.r { left: 71.2em; }

/* Pflanzen + Sofas an den Seiten (auf der hinteren Terrasse, ueber der Bruestung; Figuren stehen davor).
   V1.1: dezenter warmer Lichtschein rundherum (box-shadow, reicht ueber die eigene Flaeche hinaus) -> kleine warme Lichtinseln
   im kuehlen Nachtblau, ohne neue Elemente/Keyframes. */
.palm { bottom: 22em; width: 8em; height: 18.7em; background-image: var(--art-palm); transform-origin: 50% 100%; animation: mapsway 7s ease-in-out infinite alternate;
        box-shadow: 0 0 2.4em .4em #ffb46a2c; }
.palm.l { left: -1.5em; } .palm.r { right: -1.5em; transform: scaleX(-1); animation-delay: -3s; }
.bush { bottom: 21.5em; width: 13em; height: 15.6em; background-image: var(--art-bush); transform-origin: 50% 100%; animation: mapsway 8s ease-in-out infinite alternate;
        box-shadow: 0 0 2.8em .5em #ffb46a2c; }
.bush.l { left: 4em; animation-delay: -1.5s; } .bush.r { right: 4em; transform: scaleX(-1); animation-delay: -4.5s; }
.lounge { bottom: 21em; width: 21em; height: 9.5em; background-image: var(--art-lounge); box-shadow: 0 0 3.6em .7em #ffb46a30; }
.lounge.l { left: 3em; } .lounge.r { right: 3em; transform: scaleX(-1); }

/* DJ-Podest: Licht unter dem Pult, Kante in BarselVibe-Magenta (V1.1: etwas kraeftiger, verbindet optisch zum leichteren Turm darueber) */
.riser { left: 30em; bottom: 0; width: 40em; height: 10.5em; background: radial-gradient(ellipse at 50% 100%, #ff2fa06e, transparent 68%); }
.riser::before { content: ""; position: absolute; inset: 0; clip-path: polygon(7% 12%, 93% 12%, 100% 100%, 0 100%); background: linear-gradient(#ff5fb8 0 .2em, #201657 .2em, #0f0b2e); opacity: .9; }
body.playing .riser { animation: mappulse calc(var(--beat) * 2) ease-in-out infinite alternate; }

/* Vordergrund an den aeussersten Kanten (klein, klickdurchlaessig, ausserhalb der Figuren-Zonen x 8-92 und unter dem Screen) */
.fg { bottom: -2em; width: 7em; height: 9em; background-image: var(--art-bush-fg); z-index: 30; }
.fg.l { left: -1.5em; } .fg.r { right: -1.5em; transform: scaleX(-1); }

/* ---------- Screen-Rahmen, Ruhezustand ---------- */
.screen { border-color: #2f2470; box-shadow: 0 0 0 .18em #0a0725, 0 0 2.4em .3em #ff2fa040; }
.splash { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden;
          background: radial-gradient(70% 60% at 50% 100%, #ff5fb855, transparent 70%), linear-gradient(#0b0836, #241466 62%, #6b2d86); }
.splash::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: var(--art-near) repeat-x 20% 100% / auto 100%; opacity: .95; }
.splash > div { position: relative; font: italic 800 3.6em/1 system-ui, sans-serif; color: #fff; letter-spacing: .01em; text-align: center;
                text-shadow: 0 0 .12em #ffc4e8, 0 0 .38em #ff2fa0, 0 0 .9em #7d3bff; }
.splash small { display: block; font-size: .32em; margin-top: .4em; color: #ff8fd0; text-shadow: 0 0 .6em #ff2fa0; }

/* ---------- DJ-Pult (Position/Groesse: scene.css) ---------- */
.booth { background: radial-gradient(3.4em .3em at 50% 84%, #ff8ad0, transparent), linear-gradient(#251a5f, #100b2e); border: .15em solid #4b3390; border-bottom-color: #ff5fb8;
         border-radius: 1em 1em .3em .3em; box-shadow: 0 0 2.8em #ff2fa050, inset 0 .3em .6em #ffffff12; }
.booth::before, .booth::after { content: ""; position: absolute; top: .7em; width: 3.6em; height: 3.6em; border-radius: 50%;
         background: radial-gradient(#0a0620 0 .3em, #ff5fb8 .35em .5em, #1e1348 .55em 1.4em, #45308a 1.45em); }
.booth::before { left: 2em; } .booth::after { right: 2em; }

/* ---------- Warteliste + Votes: Huelle passt zur Terrasse, Funktion/Position unveraendert ---------- */
.queue, .votes { border: .12em solid #ff5fb877; border-radius: .9em; overflow: hidden; box-shadow: 0 0 1.4em #ff2fa02e; }
.queue { background: linear-gradient(#1d1552ee, #0f0b2cee); }
.queue span { background: #2b1e63; }

/* ---------- Ambient (5 langsame Loops, nur opacity/transform) ---------- */
@keyframes mapstars   { from { opacity: .35; } to { opacity: .8; } }
@keyframes mapglow    { from { opacity: .7; } to { opacity: 1; } }
@keyframes maptwinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes mapflicker { 0% { opacity: .8; } 40% { opacity: 1; } 55% { opacity: .86; } 100% { opacity: 1; } }
@keyframes mapsway    { from { rotate: -.9deg; } to { rotate: .9deg; } }
@keyframes mapsheen   { from { opacity: .65; } to { opacity: 1; } }
@keyframes mappulse   { from { opacity: .72; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #stars, .glow, .skyline.lit, .gar, .palm, .bush, .ground::after, .neon, .riser { animation: none !important; }
}

/* ---------- Handy / Hochformat: der Screen sitzt oben in voller Breite -> Turm/Rahmen/Lichterketten/Lautsprecher/Neon entfallen, Pflanzen + Sofas + Skyline bleiben ---------- */
@container (max-width: 700px) or (max-aspect-ratio: 1/1) {
  .gar, .frame, .tower, .neon, .spk { display: none; }
}