/* map-variants.css – Comedy Club + Cinema (Phase E, Product Sprint 2026-09-25): 2 weitere statische Maps neben dem
   bestehenden "Rooftop After Dark" (css/map.css). Reine Deko wie map.css: alles pointer-events:none, in --z-scenery
   (Ebenen-Hierarchie: SSSS Phase A, css/style.css :root), ausser .fg-artige Ecken (--z-foreground) und die
   Screen-Vorhaenge (dicht unter --z-media, siehe dortiger Kommentar). KEINE Geometrie-/Funktionsaenderung –
   Screen/Pult/Warteliste/Votes bleiben exakt wie in css/scene.css (dieselbe Datei fuer alle drei Maps). Reine
   CSS-Farben/-Gradienten, keine externen Bilder/Fonts, kein Copyright-Material (siehe Auftrag Phase E).

   Umschaltung: #scene[data-map] (js/app.js renderRoom(), Wert kommt vom Server: rooms.map, siehe 018_maps.sql).
   default 'rooftop' -> diese Datei aendert dann nichts (map.css/map-art.css bleiben unveraendert bestehen). */

/* ---------- Rooftop-eigene Deko ausblenden, wenn eine andere Map aktiv ist ----------
   map.css selbst kennt kein data-map (bewusst unveraendert gelassen); das Ausblenden geschieht hier zentral, per ID
   spezifischer als die bare-class-Regeln in map.css/map-art.css, deshalb kein !important noetig. */
#scene:not([data-map="rooftop"]) #stars,
#scene:not([data-map="rooftop"]) .moon,
#scene:not([data-map="rooftop"]) .glow,
#scene:not([data-map="rooftop"]) .skyline,
#scene:not([data-map="rooftop"]) .rail,
#scene:not([data-map="rooftop"]) .ground,
#scene:not([data-map="rooftop"]) .deckline,
#scene:not([data-map="rooftop"]) .gar,
#scene:not([data-map="rooftop"]) .frame,
#scene:not([data-map="rooftop"]) .tower,
#scene:not([data-map="rooftop"]) .neon,
#scene:not([data-map="rooftop"]) .spk,
#scene:not([data-map="rooftop"]) .palm,
#scene:not([data-map="rooftop"]) .bush,
#scene:not([data-map="rooftop"]) .riser,
#scene:not([data-map="rooftop"]) .fg {
  display: none;
}

/* ---------- Neue Deko-Elemente: standardmaessig aus, nur bei der eigenen Map sichtbar ---------- */
.mapv { display: none; pointer-events: none; }
#scene[data-map="comedy"] .comedy-spot,
#scene[data-map="comedy"] .comedy-curtain,
#scene[data-map="comedy"] .comedy-mic { display: block; }
#scene[data-map="cinema"] .cinema-vignette,
#scene[data-map="cinema"] .cinema-curtain,
#scene[data-map="cinema"] .cinema-audience { display: block; }
#scene[data-map="lounge"] .lounge-glow,
#scene[data-map="lounge"] .lounge-table { display: block; }
#scene[data-map="arcade"] .arcade-grid,
#scene[data-map="arcade"] .arcade-cab { display: block; }

/* ============================================================================
   COMEDY CLUB: warmes Buehnenlicht, Samtvorhaenge an den Aussenkanten, Holz-/Gold-Buehne statt DJ-Neon.
   ========================================================================== */
#scene[data-map="comedy"] .backdrop {
  background: linear-gradient(to top, #1a0508 0, #2b0a12 22em, #4a1220 40em, #200810 70em, #12060c 130em);
}
.comedy-spot {
  position: absolute; left: 25em; top: 0; width: 50em; height: 42em;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, #ffdca060, transparent 72%);
  animation: mvspot 6s ease-in-out infinite alternate;
}
.comedy-curtain {
  bottom: 0; width: 11em; height: 56.25em; z-index: var(--z-scenery);
  background: repeating-linear-gradient(90deg, #4a0f1c 0 .9em, #6b1626 .9em 1.8em), linear-gradient(#5c1420, #240810);
  box-shadow: 0 0 3em #6b16264d inset;
}
.comedy-curtain.l { left: -2em; border-radius: 0 0 40% 0; }
.comedy-curtain.r { right: -2em; border-radius: 0 0 0 40%; transform: scaleX(-1); }

/* Mikrofonstaender (SSSS Phase 9): der Audit-Befund "wirkt wie ein umlackiertes DJ-Pult, kein Comedy-Auftrittsort"
   braucht ein eigenes, unverwechselbares Requisit -- ein klassischer Staender + Kapsel neben der Buehne (ausserhalb
   der Bedien-Sicherheitszonen x 21-39/62-80 bei niedriger Hoehe, siehe Kommentar am Dateikopf von map.css). */
.comedy-mic { left: 84em; bottom: 0; width: 3.2em; height: 11em; z-index: var(--z-scenery); }
.comedy-mic::before { content: ""; position: absolute; left: 50%; bottom: 0; width: .22em; height: 9.4em; transform: translateX(-50%);
  background: linear-gradient(#8a8a9a, #35354a); border-radius: .1em; box-shadow: 0 0 .4em #0007; }
.comedy-mic::after { content: ""; position: absolute; left: 50%; bottom: 8.6em; width: 1.7em; height: 2.5em; transform: translateX(-50%);
  background: radial-gradient(60% 60% at 50% 35%, #e8e2d0, #8a8474 75%); border-radius: .5em .5em .7em .7em;
  box-shadow: 0 0 .6em #ffdca066, inset 0 -.3em .4em #0004; }
.comedy-mic { background: radial-gradient(50% 30% at 50% 100%, #ffdca03a, transparent 75%); }   /* dezenter Standfuss-Schein statt drittem Pseudo-Element */

#scene[data-map="comedy"] .screen { border-color: #f2b84a; box-shadow: 0 0 0 .18em #1a0f06, 0 0 2.4em .3em #f2b84a40; }
#scene[data-map="comedy"] .booth {
  background: linear-gradient(#3a2415, #1c120a); border: .15em solid #8a5a2c; border-bottom-color: #f2b84a;
  box-shadow: 0 0 2em #f2b84a55, inset 0 .3em .6em #ffffff10;
}
#scene[data-map="comedy"] .booth::before, #scene[data-map="comedy"] .booth::after {
  background: radial-gradient(#241207 0 .3em, #f2b84a .35em .5em, #4a2f12 .55em 1.4em, #6b4520 1.45em);
}
#scene[data-map="comedy"] .queue, #scene[data-map="comedy"] .votes { border-color: #f2b84a77; box-shadow: 0 0 1.4em #f2b84a2e; }
#scene[data-map="comedy"] .queue { background: linear-gradient(#2a180fee, #170d08ee); }
#scene[data-map="comedy"] .queue span { background: #3a2415; }

/* ============================================================================
   CINEMA: dunkler Kinosaal, kuehles Screen-Glimmen, angedeutete Sitzreihen an den Aussenkanten (wie .fg).
   ========================================================================== */
#scene[data-map="cinema"] .backdrop {
  background: linear-gradient(to top, #04050a 0, #070911 30em, #0a0d16 60em, #05060c 130em);
}
.cinema-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 45%, #000000aa 100%);
  animation: mvflicker 8s ease-in-out infinite alternate;
}
/* echte Sitzreihen (klickbar): js/map-objects.js cinema_row_l/cinema_row_r, Kunst css/hotspots.css .mapobj.cinemarow */

/* Core Recovery (2026-10-01), CORE-12: rein dekorative ZUSAETZLICHE Sitzreihen + Mittelgang, damit der Saal wie
   ein voller Kinosaal wirkt, nicht wie zwei schmale Streifen am Rand (die echten/klickbaren Objekte bleiben
   unveraendert). Mehrere nach oben dunkler werdende Reihen (repeating-linear-gradient senkrecht) UND die bestehende
   Sitz-Silhouette (waagerecht) ueberlagert; ein mask-image spart in der Mitte den Gang frei -- kein zweites Element
   noetig. pointer-events:none: reine Kulisse, die echten Sitzplaetze bleiben die einzige Klickflaeche. */
.cinema-audience {
  position: absolute; left: 0; bottom: 0; width: 100em; height: 13em; pointer-events: none; z-index: var(--z-scenery);
  background:
    /* Kopfstuetzen-Silhouette: runde "Kuppen" pro Sitz, Reihe fuer Reihe leicht versetzt wie echte Kinobestuhlung. */
    radial-gradient(circle at 10% 60%, #4a5468 0 .5em, transparent .52em) 0 0 / 1.9em 2.4em repeat-x,
    radial-gradient(circle at 10% 60%, #3a4256 0 .5em, transparent .52em) .95em 2.4em / 1.9em 2.4em repeat-x,
    radial-gradient(circle at 10% 60%, #2e3546 0 .5em, transparent .52em) 0 4.8em / 1.9em 2.4em repeat-x,
    radial-gradient(circle at 10% 60%, #262c3c 0 .5em, transparent .52em) .95em 7.2em / 1.9em 2.4em repeat-x,
    /* Reihenbaender darunter, nach hinten (oben) dunkler -- gibt den Kuppen eine Sitzreihe zum Sitzen. */
    repeating-linear-gradient(180deg, #171c28 0 2.1em, #0d1018 2.1em 2.4em);
  -webkit-mask-image: linear-gradient(90deg, #000 0 36%, transparent 36% 64%, #000 64% 100%);
          mask-image: linear-gradient(90deg, #000 0 36%, transparent 36% 64%, #000 64% 100%);
}
.cinema-audience::after {                                /* Gang-Beleuchtung am Fuss, wie bei den echten .mapobj.cinemarow-Sitzen */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .3em;
  background: repeating-linear-gradient(90deg, #ffd98a77 0 .6em, transparent .6em 1.9em);
  filter: drop-shadow(0 0 .3em #ffd98a55);
}

#scene[data-map="cinema"] .screen { border-color: #7a8bb0; box-shadow: 0 0 0 .18em #05060a, 0 0 3em .5em #7a8bb055; }

/* Vorhang-Rahmen direkt um den Screen (SSSS Phase 9: "frame/curtains" -- anders als Comedys volle Buehnen-Vorhaenge
   an den AEUSSERSTEN Kanten sitzen diese eng am Screen selbst, wie ein Kino-Bildrahmen/Proszenium). */
.cinema-curtain {
  /* bewusst dicht UNTER --z-media (nicht in der Szenerie-Stufe): rahmt den Screen selbst, nicht den Hintergrund. */
  top: 0; width: 8em; height: 24em; z-index: calc(var(--z-media) - 1);
  background: repeating-linear-gradient(90deg, #2a0810 0 .8em, #3c0f1a .8em 1.6em), linear-gradient(#4a121f, #1c060c);
  box-shadow: 0 0 2em #00000080 inset;
}
.cinema-curtain.l { left: 22.5em; border-radius: 0 0 30% 0; }
.cinema-curtain.r { left: 69.5em; border-radius: 0 0 0 30%; transform: scaleX(-1); }

/* DJ-Pult bewusst ZURUECKGENOMMEN statt nur umgefaerbt (SSSS Phase 9 Audit: "Standard-DJ-Booth dominiert einen Raum,
   in dem es nicht sollte") -- deutlich weniger Eigenleuchten/Kontur, wirkt eher wie ein unauffaelliges Vorfuehr-
   pult als ein Buehnen-Mittelpunkt; Screen und Sitzreihen bleiben der eigentliche Blickfang. */
#scene[data-map="cinema"] .booth {
  background: linear-gradient(#20222b, #0e1015); border: .1em solid #333a48; border-bottom-color: #4a5468;
  box-shadow: 0 0 .8em #7a8bb022, inset 0 .2em .4em #ffffff08; opacity: .8;
}
#scene[data-map="cinema"] .booth::before, #scene[data-map="cinema"] .booth::after {
  background: radial-gradient(#05060a 0 .3em, #4a5468 .35em .5em, #1e2230 .55em 1.4em, #2a303c 1.45em);
}
#scene[data-map="cinema"] .queue, #scene[data-map="cinema"] .votes { border-color: #7a8bb077; box-shadow: 0 0 1.4em #7a8bb02e; }
#scene[data-map="cinema"] .queue { background: linear-gradient(#161923ee, #0a0c12ee); }
#scene[data-map="cinema"] .queue span { background: #232838; }

/* ============================================================================
   LOUNGE / BAR: warme Social-Lounge-Atmosphaere. Bartresen/Hocker + Sofa + Garderobe sind seit Living Maps V1
   (2026-09-29) echte interaktive Szenen-Objekte -- js/map-objects.js, Kunst/Klickflaechen css/hotspots.css.
   ========================================================================== */
#scene[data-map="lounge"] .backdrop {
  background: linear-gradient(to top, #1a0f08 0, #2b1a0d 22em, #4a2f16 40em, #24160b 70em, #120a06 130em);
}
.lounge-glow {
  position: absolute; left: 30em; top: 4em; width: 40em; height: 30em;
  background: radial-gradient(ellipse 60% 60% at 50% 30%, #ffb35f4d, transparent 70%);
  animation: mvspot 7s ease-in-out infinite alternate;
}
#scene[data-map="lounge"] .screen { border-color: #d99a52; box-shadow: 0 0 0 .18em #1c1108, 0 0 2.4em .3em #d99a5240; }
#scene[data-map="lounge"] .booth {
  background: linear-gradient(#3a2818, #1c1208); border: .15em solid #8a5a2c; border-bottom-color: #d99a52;
  box-shadow: 0 0 2em #d99a5250, inset 0 .3em .6em #ffffff10;
}
#scene[data-map="lounge"] .booth::before, #scene[data-map="lounge"] .booth::after {
  background: radial-gradient(#241505 0 .3em, #d99a52 .35em .5em, #4a3016 .55em 1.4em, #6b4820 1.45em);
}
#scene[data-map="lounge"] .queue, #scene[data-map="lounge"] .votes { border-color: #d99a5277; box-shadow: 0 0 1.4em #d99a522e; }
#scene[data-map="lounge"] .queue { background: linear-gradient(#2a1c0fee, #170e08ee); }
#scene[data-map="lounge"] .queue span { background: #3a2818; }

/* Niedriger Couchtisch vor dem Sofa (SSSS Phase 9: "low table" fehlte bislang komplett). Reine Deko (kein drittes
   Sitzobjekt/keine neue Klickflaeche) -- js/map-objects.js bleibt unveraendert, sitzt vor lounge_sofa (x 66..100). */
.lounge-table {
  left: 82em; bottom: 2.5em; width: 15em; height: 4.4em; border-radius: 50%; z-index: var(--z-scenery);
  background: radial-gradient(48% 70% at 50% 30%, #6b4426, #3a2515 75%); border: .1em solid #8a5a2c88;
  box-shadow: 0 .4em .8em #0007, inset 0 .25em .4em #ffffff14;
}
.lounge-table::after { content: ""; position: absolute; left: 18%; right: 18%; top: 22%; height: 30%; border-radius: 50%;
  background: radial-gradient(60% 100% at 50% 0%, #ffffff1c, transparent 75%); }

/* ============================================================================
   ARCADE / ANIME / MEME SOCIAL ROOM (Content Expansion Pack, 2026-09-28): verspielter, gridiger Neon-Look, eigener
   Stil (keine Copyright-Figuren/Anime-Assets -- reine Farben/Formen wie alle anderen Maps).
   ========================================================================== */
#scene[data-map="arcade"] .backdrop {
  background: linear-gradient(to top, #0a0620 0, #160a33 26em, #240f4a 46em, #0c0724 80em, #06031a 130em);
}
.arcade-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(#ff2fb033 1px, transparent 1px), linear-gradient(90deg, #2be8ff33 1px, transparent 1px);
  background-size: 4em 4em; opacity: .5;
  animation: mvflicker 5s ease-in-out infinite alternate;
}
/* Automat mit echter Tiefe statt einer flachen Farbflaeche (SSSS Phase 9 Audit: "kein Automat erkennbar, nur eine
   Box") -- Haube/Marquee oben, leuchtender Bildschirm, Bedienfeld mit Joystick+Tasten unten, wie ein klassisches
   Arcade-Cabinet in Silhouette. */
.arcade-cab {
  bottom: 0; width: 9em; height: 15em; z-index: var(--z-scenery); border-radius: .6em .6em .2em .2em;
  background: linear-gradient(#2a1650, #140a2c); border: .15em solid #ff2fb0; box-shadow: 0 0 1.6em #ff2fb066;
}
.arcade-cab.l { left: 1em; } .arcade-cab.r { right: 1em; transform: scaleX(-1); }
.arcade-cab::before {                                            /* Marquee-Haube + Bildschirm */
  content: ""; position: absolute; left: 10%; right: 10%; top: 8%; height: 42%; border-radius: .3em;
  background: radial-gradient(70% 60% at 50% 35%, #2be8ff, #14203a 78%); border: .1em solid #2be8ff99;
  box-shadow: 0 0 1em #2be8ff88, inset 0 0 .6em #001; animation: mvflicker 4s ease-in-out infinite alternate; }
.arcade-cab::after {                                             /* Bedienfeld: Joystick + drei Tasten */
  content: ""; position: absolute; left: 14%; right: 14%; top: 56%; height: 20%; border-radius: .2em;
  background: linear-gradient(#1c1030, #0e0820);
  box-shadow: inset 0 .15em .3em #0009,
    -1.4em 1.6em 0 -1.2em #ff2fb0, -.2em 1.9em 0 -1.4em #ffd54a, 1em 1.9em 0 -1.4em #2be8ff; }
#scene[data-map="arcade"] .screen { border-color: #2be8ff; box-shadow: 0 0 0 .18em #06031a, 0 0 3em .5em #2be8ff55; }
#scene[data-map="arcade"] .booth {
  background: linear-gradient(#241a3a, #10091f); border: .15em solid #ff2fb0; border-bottom-color: #2be8ff;
  box-shadow: 0 0 2em #ff2fb040, inset 0 .3em .6em #ffffff10;
}
#scene[data-map="arcade"] .booth::before, #scene[data-map="arcade"] .booth::after {
  background: radial-gradient(#06031a 0 .3em, #2be8ff .35em .5em, #1e1230 .55em 1.4em, #3a2456 1.45em);
}
#scene[data-map="arcade"] .queue, #scene[data-map="arcade"] .votes { border-color: #2be8ff77; box-shadow: 0 0 1.4em #2be8ff2e; }
#scene[data-map="arcade"] .queue { background: linear-gradient(#160f2aee, #0a0718ee); }
#scene[data-map="arcade"] .queue span { background: #241a3a; }

/* ---------- Room/Map-Zubehoer (Content Expansion Pack, 2026-09-28; SSSS Phase 8, 2026-09-30: von rohem Emoji auf
   echte SVG-Kunst umgestellt, siehe js/room-decor.js). 3 feste Steckplaetze, pointer-events:none wie alle anderen
   Ebenen. Inhalt/Sichtbarkeit steuert js/app.js (renderRoom() aus room.decor).
   WICHTIG (Phase-8-Korrektur, bei der Live-Verifikation dieser Session selbst gefunden): frueher hatte `.decor`
   eine EIGENE `font-size: 2.6em`, die JEDEN em-Wert von left/right/top/bottom auf DIESEM Element um den Faktor 2.6
   multipliziert (CSS: em bei anderen Eigenschaften als font-size bezieht sich auf die eigene Schriftgroesse). Das
   machte die Karten-aware-Positionen weiter unten (in derselben em-Konvention wie js/map-objects.js: 1em = 1% der
   100em breiten .world-Buehne) faktisch falsch -- live im Browser erst als "Deko landet mitten auf dem Screen"
   sichtbar geworden, nicht am Reissbrett vermutet. Jetzt ohne eigene font-size: `.decor` erbt direkt von `.world`,
   dieselbe Basis wie #mapObjects. Die drei Rooftop-Standardwerte (vormals 2em/4em/4em bei 2.6-fachem Font-Size)
   sind deshalb hier mit dem Faktor 2.6 vormultipliziert, damit Rooftop optisch exakt gleich bleibt. */
.decor { position: absolute; z-index: var(--z-scenery); width: 3.9em; height: 3.9em; pointer-events: none; filter: drop-shadow(0 .1em .2em #00000066); }
.decor svg { width: 100%; height: 100%; display: block; }   /* CSS statt der SVG-eigenen width/height="100%"-Attribute: verlaesslicher nach dem DOMParser+importNode-Import (js/app.js svgNode()), siehe dortiger Kommentar */
#decorPlant { left: 5.2em; bottom: 5.2em; }
#decorPoster { left: 10.4em; top: 5.2em; }
#decorLight { right: 10.4em; top: 5.2em; }

/* Map-eigene Platzierung (SSSS Phase 8): die drei Steckplaetze sassen bislang auf EINER universellen Bildschirm-
   position fuer alle 5 Maps -- unabhaengig davon, ob dort laengst ein Vorhang, ein Automat oder eine Sitzreihe steht
   (js/map-objects.js). Gleiche x/bottom-Einheit wie dort (em = % Buehnenbreite), pro Map an eine tatsaechlich freie
   Stelle verschoben statt die Rooftop-Werte zu erben. Bottom/top-Werte bewusst klein gehalten (Bodennaehe wie beim
   Rooftop-Original), Kollisionspruefung gegen js/map-objects.js MAP_OBJECTS und den Screen (x ca. 32..68, siehe
   css/scene.css .screen) fuer jede Map einzeln, per Live-Messung dieser Session verifiziert. */
#scene[data-map="comedy"] #decorPlant { left: 23.5em; bottom: 11em; }     /* zwischen Vorhang (x -2..9) und Tisch (x 4..19) hindurch, davor auf freier Flaeche */
#scene[data-map="comedy"] #decorPoster { left: 12em; top: 3em; }
#scene[data-map="comedy"] #decorLight { right: 24em; top: 3em; }        /* zwischen Vorhang (x 91..102) und Tisch (x 81..96) hindurch */

#scene[data-map="cinema"] #decorPlant { left: 23.5em; bottom: 24.5em; }     /* rechts neben der linken Sitzreihe (x 0..15), mit echtem Abstand */
#scene[data-map="cinema"] #decorPoster { left: 17em; top: 2em; }
#scene[data-map="cinema"] #decorLight { right: 2em; top: 2em; }

#scene[data-map="lounge"] #decorPlant { left: 20.5em; bottom: 13em; }     /* zwischen Bar (x 2..24) und Sofa (x 66..100) */
#scene[data-map="lounge"] #decorPoster { left: 20em; top: 2em; }        /* links vom Screen (x ca. 32..68), rechts von der Garderobe (x 3..12) */
#scene[data-map="lounge"] #decorLight { right: 20em; top: 2em; }        /* rechts vom Screen, links vom Sofa-Oberkoerperbereich */

#scene[data-map="arcade"] #decorPlant { left: 25.8em; bottom: 9em; }     /* zwischen Hocker (x 8..16) und Bank (x 84..98) */
#scene[data-map="arcade"] #decorPoster { left: 22em; top: 2em; }
#scene[data-map="arcade"] #decorLight { right: 22em; top: 2em; }

/* ---------- Ambient (nur opacity, langsam) ---------- */
@keyframes mvspot   { from { opacity: .65; } to { opacity: 1; } }
@keyframes mvflicker { from { opacity: .85; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .comedy-spot, .cinema-vignette, .lounge-glow, .arcade-grid { animation: none !important; } }

/* ---------- Handy/Hochformat: dieselbe Vereinfachung wie beim Rooftop (map.css) -- grosse Buehnendeko entfaellt ---------- */
/* WICHTIG (bei der Phase-11-Verifikation dieser Session gefunden, keine Regression davon): diese Regel wurde von den
   `#scene[data-map="X"] .foo { display: block; }`-Regeln weiter oben IMMER ueberstimmt, weil ein ID-Selektor
   spezifischer ist als die einfachen Klassen hier -- @container aendert daran nichts, Spezifitaet zaehlt trotzdem
   normal. Die grosse Buehnendeko wurde auf schmalen Bildschirmen dadurch NIE tatsaechlich ausgeblendet, seit diese
   Regel existiert. `!important` ist hier bewusst und zielgerichtet (gleiches Muster wie das bestehende
   `html:not([data-motion=full]) .cv * { animation: none !important; }` in characters.css) statt jeden Selektor
   einzeln nachzuruesten. */
@container (max-width: 700px) or (max-aspect-ratio: 1/1) {
  .comedy-curtain, .comedy-spot, .comedy-mic, .cinema-curtain, .lounge-glow, .lounge-table, .arcade-cab, .decor { display: none !important; }
}