/* =========================================================
   SkyTech Community – Glassmorphism Design System
   ========================================================= */

/* Sanfte Seitenübergänge wie bei modernen Apps (Twitter/X-Stil), ganz ohne
   die Plattform zu einer Single-Page-App umbauen zu müssen. Nutzt die
   moderne View-Transitions-API des Browsers: sobald man auf einen Link
   innerhalb der Seite klickt, blendet der Browser selbstständig sanft
   zwischen alter und neuer Seite über, statt hart zu springen.
   Unterstützt in Chrome/Edge/Opera (auch mobil) und zunehmend Safari;
   in Browsern ohne Unterstützung (aktuell z. B. Firefox) läuft einfach
   der normale, sofortige Seitenwechsel wie bisher – kein Nachteil, reine
   Zusatz-Verbesserung dort, wo der Browser es kann. */
@view-transition {
    navigation: auto;
}

/* Acht wählbare Übergangs-Stile (Admin site-weit erzwingbar, Premium-
   Mitglieder können 6 davon selbst in den Einstellungen wählen). Der
   jeweilige Stil wird als data-Attribut auf <html> gesetzt (siehe main.js),
   die Standard-Überblendung des Browsers braucht dafür keine eigene Regel. */
html[data-transition="none"]::view-transition-old(root),
html[data-transition="none"]::view-transition-new(root) {
    animation-duration: 0.001s;
}
html[data-transition="slide"]::view-transition-old(root) {
    animation: transition-slide-out 0.3s ease-in both;
}
html[data-transition="slide"]::view-transition-new(root) {
    animation: transition-slide-in 0.3s ease-out both;
}
@keyframes transition-slide-out { to { transform: translateX(-60px); opacity: 0; } }
@keyframes transition-slide-in { from { transform: translateX(60px); opacity: 0; } }

html[data-transition="zoom"]::view-transition-old(root) {
    animation: transition-zoom-out 0.3s ease-in both;
}
html[data-transition="zoom"]::view-transition-new(root) {
    animation: transition-zoom-in 0.3s ease-out both;
}
@keyframes transition-zoom-out { to { transform: scale(0.94); opacity: 0; } }
@keyframes transition-zoom-in { from { transform: scale(1.06); opacity: 0; } }

html[data-transition="slide-up"]::view-transition-old(root) {
    animation: transition-up-out 0.3s ease-in both;
}
html[data-transition="slide-up"]::view-transition-new(root) {
    animation: transition-up-in 0.3s ease-out both;
}
@keyframes transition-up-out { to { transform: translateY(-40px); opacity: 0; } }
@keyframes transition-up-in { from { transform: translateY(40px); opacity: 0; } }

html[data-transition="flip"]::view-transition-old(root) {
    animation: transition-flip-out 0.35s ease-in both;
}
html[data-transition="flip"]::view-transition-new(root) {
    animation: transition-flip-in 0.35s ease-out both;
}
@keyframes transition-flip-out { to { transform: perspective(800px) rotateY(12deg); opacity: 0; } }
@keyframes transition-flip-in { from { transform: perspective(800px) rotateY(-12deg); opacity: 0; } }

html[data-transition="bounce"]::view-transition-old(root) {
    animation: transition-bounce-out 0.28s ease-in both;
}
html[data-transition="bounce"]::view-transition-new(root) {
    animation: transition-bounce-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes transition-bounce-out { to { transform: scale(0.9); opacity: 0; } }
@keyframes transition-bounce-in {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); }
}

html[data-transition="glitch"]::view-transition-old(root) {
    animation: transition-glitch-out 0.35s steps(6) both;
}
html[data-transition="glitch"]::view-transition-new(root) {
    animation: transition-glitch-in 0.35s steps(6) both;
}
@keyframes transition-glitch-out {
    0% { opacity: 1; filter: none; transform: translate(0,0); }
    20% { opacity: 0.8; filter: hue-rotate(15deg); transform: translate(-4px,1px); }
    40% { opacity: 0.6; filter: hue-rotate(-20deg); transform: translate(3px,-2px); }
    60% { opacity: 0.4; filter: hue-rotate(10deg); transform: translate(-2px,2px); }
    100% { opacity: 0; transform: translate(4px,0); }
}
@keyframes transition-glitch-in {
    0% { opacity: 0; filter: hue-rotate(-15deg); transform: translate(4px,-1px); }
    30% { opacity: 0.5; filter: hue-rotate(20deg); transform: translate(-3px,2px); }
    55% { opacity: 0.75; filter: hue-rotate(-10deg); transform: translate(2px,-2px); }
    80% { opacity: 0.9; filter: none; transform: translate(-1px,1px); }
    100% { opacity: 1; transform: translate(0,0); }
}

/* Live-Ticker bleibt über Seitenwechsel hinweg optisch an Ort und Stelle
   stehen, statt mit dem Rest der Seite kurz auszublenden und wieder
   einzublenden (siehe Bug-Report "verschwindet und taucht wieder auf").
   Ein früherer Versuch das umzusetzen führte zu Ruckeln/Überlappung --
   der Grund war, dass nur die Ein-/Ausblend-Animation abgeschaltet wurde
   (::view-transition-old/new), nicht aber die eigene Positions-/
   Größen-Interpolation des Elements (::view-transition-group). Wenn der
   Ticker zwischen zwei Seiten unterschiedlich hoch/breit ist (z.B. weil
   auf der einen Seite noch keine Nachrichten geladen waren), hat der
   Browser das automatisch "morphed" -- das sah dann wie Ruckeln/
   Reinspringen aus. Jetzt ist BEIDES abgeschaltet: der Ticker bleibt
   während des gesamten Seitenübergangs einfach unverändert stehen,
   während der restliche Seiteninhalt ganz normal im gewählten
   Übergangs-Stil wechselt. */
.admin-ticker { view-transition-name: site-ticker; }
html[data-transition]::view-transition-group(site-ticker) {
    animation: none;
}
html[data-transition]::view-transition-old(site-ticker),
html[data-transition]::view-transition-new(site-ticker) {
    animation: none;
    mix-blend-mode: normal;
}



:root {
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-blur: 16px;
    --text-main: #ffffff;
    --text-muted: rgba(255,255,255,0.7);
    --accent: #7c5cff;
    --accent-2: #ff5ca8;
    --radius: 20px;
    --shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* overflow-x:hidden sitzt bewusst auf <html>, nicht auf <body>: Auf
   Mobile-Browsern (v.a. iOS Safari) bricht overflow-x:hidden direkt auf
   <body> zuverlässig alle position:sticky-Elemente weiter unten im
   Dokument (z.B. den Live-Ticker) -- ein bekannter Mobile-Browser-Quirk.
   Auf <html> verhindert es weiterhin horizontales Scrollen, ohne diesen
   Effekt zu haben. */
html { overflow-x: hidden; overflow-y: scroll; }
/* overflow-y:scroll statt "auto": ein Scrollbalken ist damit IMMER
   reserviert, egal ob die Seite gerade lang genug ist, um zu scrollen,
   oder nicht. Sonst ändert sich die verfügbare Breite je nachdem, ob eine
   Seite Inhalt zum Scrollen hat oder nicht -- das sorgt für ein sichtbares
   Ruckeln/Verschieben des Layouts beim Wechsel zwischen "kurzen" und
   "langen" Seiten (siehe Bug-Report). */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--text-main);
    min-height: 100vh;
    transition: background 1.5s ease;
    animation: page-fade-in 0.25s ease;
}
@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Falls der Browser View-Transitions unterstützt, übernimmt der die
   Übergänge komplett selbst – dann braucht's dieses einfache Fade nicht
   zusätzlich, sonst würden sich beide Effekte überlagern. */
@supports (view-transition-name: none) {
    body { animation: none; }
}

/* ---------- Dynamischer Weltenhintergrund ---------- */
.world-bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    background-size: cover;
    transition: background 2s ease;
}
/* Abdunkelungs-Ebene: sorgt dafür, dass Text auf JEDEM Weltzustand
   (auch beim hellen Tag-Hintergrund) gut lesbar bleibt, ohne die
   lebendige Hintergrund-Idee selbst aufzugeben. */
.world-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(6,6,16,0.62), rgba(6,6,16,0.78));
    pointer-events: none;
}

/* Tageszeiten */
body.time-sunrise .world-bg { background: linear-gradient(135deg, #ff9a76, #ffd97a, #7ec8e3); }
body.time-day .world-bg     { background: linear-gradient(135deg, #56ccf2, #2f80ed); }
body.time-evening .world-bg { background: linear-gradient(135deg, #ff7e5f, #7c5cff, #2a1a5e); }
body.time-night .world-bg   { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); }

/* Jahreszeiten (leichte Überlagerung per Filter/Akzent) */
body.season-spring { --accent: #7ee787; --accent-2: #ffb6e1; }
body.season-summer  { --accent: #ffd93d; --accent-2: #ff5ca8; }
body.season-autumn  { --accent: #ff8c42; --accent-2: #d9534f; }
body.season-winter   { --accent: #7ec8e3; --accent-2: #ffffff; }

/* Events */
body.event-halloween .world-bg { background: linear-gradient(135deg, #ff7518, #1a1a2e, #0d0d0d) !important; }
body.event-christmas .world-bg { background: linear-gradient(135deg, #b71c1c, #1b5e20, #0d1b2a) !important; }
body.event-easter .world-bg    { background: linear-gradient(135deg, #ffd6e8, #d6f5ff, #fff3b0) !important; }

/* Schnee/Regen Partikel-Layer (per JS befüllt) */
#weather-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.particle {
    position: absolute;
    top: -10px;
    border-radius: 50%;
    opacity: 0.8;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform; /* Browser weiß im Voraus: nur Transform ändert sich, kein teures Neu-Layouten nötig */
}
/* Partikel während des Scrollens kurz einfrieren statt animieren – verhindert,
   dass der Browser gleichzeitig scrollen UND bei jedem bewegten Partikel den
   backdrop-filter-Weichzeichner aller Glass-Elemente neu berechnen muss. */
.weather-paused .particle { animation-play-state: paused; }
@keyframes fall {
    to { transform: translateY(110vh); }
}
@keyframes coin-fall {
    to { transform: translateY(110vh) rotate(360deg); }
}

/* Live-Ticker unter dem Banner: Hauptadmin/Inhaber-Nachrichten laufen
   endlos durch (Inhalt wird im PHP verdoppelt, damit der Loop nahtlos ist).
   Läuft unabhängig vom Banner (der ganz normal mit der Seite scrollt) fest
   oben am Bildschirmrand fixiert weiter, während der übrige Seiteninhalt
   darunter durchläuft. */
.admin-ticker {
    /* Undurchsichtiger Hintergrund + Blur ist hier wichtig: der Ticker
       klebt jetzt fest oben (position:sticky), darunter scrollt der
       restliche Seiteninhalt durch. Bei der ursprünglichen, nur 12%
       deckenden Farbe schien der durchscrollende Feed-Text sichtbar durch
       den Ticker durch -- beides überlagerte sich unleserlich (siehe
       Bug-Report). Jetzt blickdicht, mit Blur als zusätzlicher Absicherung
       für Browser, bei denen doch mal 1px durchscheint. */
    background: rgba(20, 17, 38, 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(124,92,255,0.3);
    border-radius: 10px; overflow: hidden; display: flex; align-items: center;
    max-height: 0; opacity: 0; margin-bottom: 0; padding: 0; border-width: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease, padding 0.3s ease;
    position: sticky; top: 0; z-index: 40;
}
.admin-ticker.visible { max-height: 60px; opacity: 1; margin-bottom: 14px; padding: 8px 0; border-width: 1px; }
.admin-ticker-live-label {
    flex-shrink: 0; font-weight: 700; font-size: 0.85rem; padding: 0 14px;
    border-right: 1px solid rgba(255,255,255,0.15); white-space: nowrap;
}
/* Eigenes "Sichtfenster" um den scrollenden Bereich: transform verschiebt nur
   die gerenderten Pixel, nicht die Layout-Box, wodurch der Lauftext sonst
   optisch über das feste LIVE-Label hinwegrutschen konnte, sobald er weit
   genug nach links gewandert ist. overflow:hidden hier schneidet das sauber
   ab, min-width:0 verhindert, dass der Flex-Container sich am sehr breiten
   Inhalt des Tracks (width:max-content) verschluckt. */
.admin-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; }
.admin-ticker-track {
    display: flex; white-space: nowrap; animation: admin-ticker-scroll 30s linear infinite;
    width: max-content;
}
.admin-ticker-item { padding: 0 40px; font-size: 0.9rem; font-weight: 600; }
.admin-ticker-item svg, .admin-ticker-live-label svg {
    vertical-align: -2px;
    margin-right: 2px;
}
/* Kleine Inline-SVG-Icons (siehe UI_ICONS in includes/functions.php),
   z.B. der Stumm/Sichtbar-Button auf friends.php -- sauber an der
   Grundlinie des Textes ausgerichtet statt wie ein Standard-Icon-Font zu
   "schweben". Bewusst nur für Buttons/Fließtext, nicht global für jedes
   svg auf der Seite (z.B. Weltkarte, Avatare haben eigene Größen/Regeln). */
.btn svg, p.muted svg {
    vertical-align: -2px;
    margin-right: 2px;
}
/* Reine Icon-Buttons (Löschen/Schließen ohne Text daneben) -- Icon mittig
   statt an der Textgrundlinie ausgerichtet. */
.post-delete-btn, .post-comment-delete, .story-delete-btn, .post-comment-report, .post-report-btn {
    display: inline-flex; align-items: center; justify-content: center;
}
.post-delete-btn svg, .post-comment-delete svg, .post-comment-report svg, .post-report-btn svg { vertical-align: 0; }
@keyframes admin-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .admin-ticker-track { animation: none; overflow-x: auto; }
}

/* Raum-Gegenstände (Bier, Wein, Chips usw.) – ein Kellner "läuft" mit dem
   Gegenstand in den Chat und serviert ihn mit einer Sprechblase. */
.waiter-serving {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
    animation: waiter-walk-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.waiter-char {
    width: 52px; height: 52px; flex-shrink: 0; object-fit: contain;
    animation: waiter-bob 0.5s ease-in-out infinite alternate;
}
.waiter-bubble {
    position: relative; background: linear-gradient(135deg, rgba(124,92,255,0.28), rgba(255,92,168,0.28));
    border: 1px solid rgba(255,255,255,0.18); border-radius: 16px 16px 16px 4px;
    padding: 8px 14px; font-weight: 600; font-size: 0.88rem;
    animation: room-item-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s backwards;
    display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.room-item-emoji { font-size: 1.4rem; animation: room-item-wiggle 0.6s ease 0.8s 2; display: inline-block; }
.room-item-icon {
    width: 26px; height: 26px; vertical-align: middle; object-fit: contain;
    animation: room-item-wiggle 0.6s ease 0.8s 2; display: inline-block;
}
@keyframes waiter-walk-in {
    from { transform: translateX(-40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes waiter-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}
@keyframes room-item-pop {
    0% { transform: scale(0) translateY(10px); opacity: 0; }
    60% { transform: scale(1.15) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}
@keyframes room-item-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

/* ---------- Glass-Karten ---------- */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

/* ---------- Navigation ---------- */
/* ---------- Sidebar-Layout (eingeloggt) ---------- */
.sidebar {
    position: fixed; top: 16px; left: 16px; bottom: 16px; width: 270px;
    display: flex; flex-direction: column; padding: 20px 16px;
    overflow-y: auto; z-index: 60;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.sidebar .logo {
    font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; line-height: 1.25;
    color: var(--text-main); text-decoration: none; display: block; margin-bottom: 16px;
}
.sidebar .logo-banner img {
    width: 100%; border-radius: 14px; display: block;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.sidebar .user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px; margin-bottom: 14px;
}
.sidebar .xp-bar { width: 100%; }

.level-chip-btn {
    width: 100%; border: none; cursor: pointer; text-align: left;
    font-family: inherit; color: inherit; transition: background 0.2s ease;
}
.level-chip-btn:hover { background: rgba(255,255,255,0.16); }
.chip-coin-hint {
    font-size: 0.72rem; font-weight: 600; color: #ffd93d; margin-top: 3px;
}


.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-group-label {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em;
    color: #ff6b6b; font-weight: 700; margin: 14px 0 4px; padding: 1px 4px;
    display: table; width: 100%; box-sizing: border-box; line-height: 1.3; border-spacing: 0;
}
.side-group-label > * { display: table-cell; vertical-align: top; }
.side-group-label svg, .side-group-label .nav-icon--group { width: 26px; min-width: 26px; }
.side-group-label span { width: auto; padding-left: 4px; }
.side-nav .side-group-label:first-child { margin-top: 0; }
.side-link {
    color: var(--text-main); text-decoration: none; padding: 9px 12px;
    border-radius: 10px; font-size: 0.9rem; transition: background 0.2s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-link:hover { background: rgba(255,255,255,0.1); }
.nav-icon { vertical-align: -5px; margin-right: 2px; }
.nav-icon--group .nav-icon { vertical-align: -5px; margin-right: 3px; }
.page-icon { vertical-align: -6px; margin-right: 8px; color: var(--accent-2); }
/* Greift automatisch überall dort, wo eines unserer UI_ICONS/TICKER_ICONS
   direkt in einer <h1> steht (43 Seiten) -- statt jede einzeln mit der
   .page-icon-Klasse zu umschließen, überschreibt diese eine Regel Größe
   und Farbe für jedes SVG in einer H1 automatisch, egal wie es erzeugt
   wurde. CSS-Werte haben immer Vorrang vor den width/height-Attributen
   am <svg>-Tag selbst, daher funktioniert das zuverlässig nachträglich. */
h1 svg { width: 32px; height: 32px; vertical-align: -7px; margin-right: 8px; color: var(--accent-2); }
.side-link.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    font-weight: 700; color: #1a1a2e; text-shadow: 0 1px 1px rgba(255,255,255,0.25);
}
.unread-badge {
    display: inline-block; background: #e74c3c; color: #fff; font-size: 0.65rem;
    font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 4px;
}
.admin-pending-badge {
    display: inline-block; background: #e74c3c; color: #fff; font-size: 0.7rem;
    font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}

.sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 72;
}
.sidebar-overlay.open { display: block; }

.main-area { margin-left: 302px; padding: 16px 16px 16px 0; }
/* Dezentes Lade-Feedback für die AJAX-Seitennavigation (siehe js/main.js,
   initSoftNav) -- nur der ausgetauschte Inhaltsbereich dimmt kurz ab,
   Banner und Ticker bleiben unbeeinflusst sichtbar. */
#page-content { transition: opacity 0.15s ease; }
body.soft-nav-loading #page-content { opacity: 0.55; }

/* ---------- Bottom-Nav-Bar (nur Mobile) ---------- */
.bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    background: rgba(14,12,26,0.92); backdrop-filter: blur(16px);
    border-top: 1px solid var(--glass-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: stretch;
}
.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; flex: 1; min-width: 0; padding: 6px 2px; border-radius: 12px;
    color: var(--text-muted); text-decoration: none; font-size: 0.65rem;
    background: none; border: none; font-family: inherit; cursor: pointer;
}
.bottom-nav-item .bn-icon { font-size: 1.25rem; line-height: 1; }
.bottom-nav-item .bn-icon .nav-icon { width: 22px; height: 22px; vertical-align: 0; margin-right: 0; }
.bottom-nav-item.active { color: var(--text-main); background: rgba(255,255,255,0.08); }
.bottom-nav-item.active .bn-icon { transform: scale(1.08); }

.xp-bar {
    width: 90px;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
}
.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 0.4s ease;
}
.weather-chip {
    font-size: 0.78rem; text-align: center; padding: 6px 0 10px;
}

/* ---------- Top-Navbar (nur Login/Register für Gäste) ---------- */
.navbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; margin: 16px auto; max-width: 1100px; position: sticky; top: 16px; z-index: 50;
}
.navbar .logo { font-weight: 700; font-size: 1.15rem; color: var(--text-main); text-decoration: none; }
.navbar .logo svg { vertical-align: -2px; margin-right: 2px; }
.navbar nav a {
    color: var(--text-main); text-decoration: none; margin: 0 10px;
    padding: 8px 14px; border-radius: 12px; transition: background 0.2s ease;
    font-size: 0.95rem;
}
.navbar nav a:hover { background: rgba(255,255,255,0.15); }


/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700 !important;
    transition: transform 0.15s ease, background 0.2s ease;
    text-decoration: none;
}
.btn:hover {
    transform: translateY(-2px); background: rgba(0,0,0,0.15); color: var(--text-main);
}
/* Ohne das explizite color: var(--text-main) oben würde die globale
   a:hover-Regel weiter unten (color: var(--accent)) greifen, sobald man
   einen <a class="btn">-Link mit der Maus berührt -- eine :hover-Klasse
   ist immer "stärker" als eine reine Klasse ohne :hover, egal welche
   Reihenfolge im CSS. Das sorgte dafür, dass der Text jedes Buttons beim
   Hover plötzlich seine eigentliche Farbe verlor (siehe Bug-Report,
   betraf z.B. "Profil ansehen" auf der Mitgliederliste). Dasselbe gilt
   unten nochmal separat für .btn-primary mit dessen eigener Textfarbe.
   .btn-primary hat dunklen Text auf hellem Verlauf -- die normale
   Hover-Verdunkelung von .btn (für helle Schrift auf dunklem Grund
   gedacht) würde hier den Hintergrund dunkler machen, während der Text
   dunkel bleibt = irgendwann unlesbar (siehe Bug-Report). Deshalb eigene
   Regel: stattdessen aufhellen, damit der Kontrast zum dunklen Text
   erhalten bleibt. */
.btn-primary:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); filter: brightness(1.15); color: #1a1a2e; }
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none; font-weight: 700; color: #1a1a2e; text-shadow: 0 1px 1px rgba(255,255,255,0.25);
}
.btn-small { padding: 6px 12px; font-size: 0.85rem; border-radius: 10px; }

/* ---------- Formulare ---------- */
input, textarea, select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.08);
    color: var(--text-main);
    font-size: 0.95rem;
    margin-bottom: 12px;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
label { font-size: 0.85rem; color: var(--text-muted); display: block; margin-bottom: 4px; }

/* Zentrales Link-Styling: bisher gar nicht definiert, wodurch Links die
   dunkelblaue Browser-Standardfarbe nutzten – auf dunklem Hintergrund
   schlecht lesbar. Jetzt hell, klar erkennbar, mit Unterstreichung. */
a { color: var(--accent-2); text-decoration: underline; text-decoration-color: rgba(255,92,168,0.5); }
.mention-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
.mention-panel {
    position: fixed; z-index: 250; max-height: 240px; overflow-y: auto;
    background: rgba(18,16,32,0.97); backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    border-radius: 12px; border: 1px solid var(--glass-border);
}
.mention-panel-item { padding: 9px 12px; cursor: pointer; font-size: 0.9rem; }
.mention-panel-item:hover { background: rgba(255,255,255,0.1); }
.mention-panel-item + .mention-panel-item { border-top: 1px solid rgba(255,255,255,0.06); }
/* Links in Popups (Impressum/Datenschutz/AGB, Level-Popup usw.) noch etwas
   kräftiger, da sie oft auf dunklerem Untergrund und in Fließtext-Absätzen
   stehen – sollen nicht im Text untergehen. */
#legal-popup-content a, .gift-picker a {
    color: #ffb0d4; font-weight: 600; text-decoration-color: rgba(255,176,212,0.7);
}
#legal-popup-content a:hover, .gift-picker a:hover { color: #fff; }
a:hover { color: var(--accent); }
.glass.card a { font-weight: 600; }

.password-toggle-wrap { position: relative; margin-bottom: 12px; }
.password-toggle-wrap input[type="password"], .password-toggle-wrap input[type="text"] { padding-right: 44px; margin-bottom: 0; }
.password-toggle-btn {
    position: absolute; right: 6px; top: 6px; bottom: 6px; width: 32px;
    background: none; border: none; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; opacity: 0.75;
}
.password-toggle-btn:hover { opacity: 1; }

/* Aufgeklappte <select>-Optionsliste: Browser rendern das sonst nativ (meist
   weißer Hintergrund), egal was auf <select> selbst steht. color-scheme
   sorgt dafür, dass Chrome/Firefox/Edge auch die Popup-Liste dunkel rendern. */
select { color-scheme: dark; }
select option { background: #171326; color: #f2eefc; }

/* ---------- Karten-Raster ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
/* Karten in einem Raster sind durch CSS Grid schon gleich hoch (Standard-
   Verhalten), aber der "Neue Runde erstellen"-Button (oder was auch immer
   als letztes Element in der Karte steht) rutschte bisher einfach direkt
   hinter den Beschreibungstext -- je nach Textlänge pro Karte auf
   unterschiedlicher Höhe (siehe Bug-Report). Karte wird zur Flex-Spalte,
   das letzte Element bekommt automatischen oberen Abstand und wird damit
   an den unteren Kartenrand gedrückt, bei jeder Karte auf gleicher Höhe. */
.grid > .card {
    display: flex;
    flex-direction: column;
}
.grid > .card > *:last-child {
    margin-top: auto;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }
.tag-badge {
    display: inline-block; font-size: 0.68rem; padding: 2px 9px; border-radius: 999px;
    background: rgba(124,92,255,0.18); color: var(--text-muted); margin-bottom: 6px;
}
.story-delete-btn {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; line-height: 1;
}
.story-delete-btn:hover { background: #c0392b; }

/* ---------- Feed-Layout mit Live-Ticker-Sidebar ---------- */
.feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.feed-main { min-width: 0; }
.feed-ticker {
    position: sticky; top: 16px;
    padding: 16px;
    max-height: calc(100vh - 32px);
}
.feed-ticker-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: 12px;
}
.feed-ticker-viewport { min-height: 60px; display: flex; align-items: center; }
.feed-ticker-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; line-height: 1.4;
    transition: opacity 0.25s ease;
}
.feed-ticker-icon { font-size: 1.3rem; flex-shrink: 0; }

@media (max-width: 980px) {
    .feed-layout { grid-template-columns: 1fr; }
    .feed-ticker { position: static; max-height: none; order: -1; margin-bottom: 16px; }
}
.card {
    padding: 18px;
    animation: floatIn 0.4s ease;
}
@keyframes floatIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.card h3 { margin: 8px 0 4px; }
/* Kompakte Statistik-Kacheln (Raumtyp, XP, Taler, Beiträge usw. auf "Mein
   Profil") – reine "Icon+Label+eine Zahl"-Karten, brauchen nicht den vollen
   Karten-Innenabstand. Auf Mobile (eine Spalte statt mehrere nebeneinander)
   macht sich unnötige Höhe hier besonders lang bemerkbar. */
.stat-tile { padding: 12px 16px; }
.stat-tile h3 { font-size: 0.9rem; margin: 0 0 2px; }
.stat-tile p { margin: 0; font-size: 1.1rem; font-weight: 600; }
@media (max-width: 720px) {
    .stat-tile { padding: 10px 14px; }
    .stat-tile h3 { font-size: 0.82rem; }
    .stat-tile p { font-size: 1rem; }
}
.card .muted { color: var(--text-muted); font-size: 0.85rem; }
.card .icon { font-size: 2rem; }
.card .icon svg { width: 32px; height: 32px; }

/* ---------- Feed ---------- */
.post { padding: 18px; margin-bottom: 16px; }
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-delete-btn {
    color: var(--text-muted); text-decoration: none; font-size: 0.9rem;
    padding: 4px 8px; border-radius: 8px; flex-shrink: 0;
}
.post-delete-btn:hover { color: #ff8080; background: rgba(231,76,60,0.15); }
.avatar-circle {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    flex-shrink: 0;
}
.post-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; color: var(--text-muted); font-size: 0.9rem; }
.post-actions span { cursor: pointer; }
.post-actions span:hover { color: var(--text-main); }
.post-report-btn {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    color: var(--text-muted); display: inline-flex; align-items: center;
}
.post-report-btn:hover { color: #ff8080; }

/* Einheitliche Bild-/Video-Größe in Feed, Serien, Events, Flyer-Fotos usw. –
   verhindert riesige Hochkant-Fotos, die den ganzen Bildschirm füllen. */
.post-media {
    display: block; width: 100%; max-width: 480px; max-height: 480px; margin-left: auto; margin-right: auto;
    object-fit: contain; border-radius: 14px; margin-top: 10px;
    background: rgba(0,0,0,0.2); cursor: zoom-in; transition: filter 0.15s ease;
}
.post-media:hover { filter: brightness(0.85); }
.media-lightbox-content { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 88vh; }
.media-lightbox-content img, .media-lightbox-content video {
    max-width: 92vw; max-height: 88vh; border-radius: 12px; object-fit: contain;
}

/* ---------- Feed-Kommentare ---------- */
.post-comments { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.post-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 260px; overflow-y: auto; }
.post-comment-item { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; }
.post-comment-item .avatar-circle { width: 28px !important; height: 28px !important; font-size: 0.7rem !important; flex-shrink: 0; }
.post-comment-body { flex: 1; background: rgba(255,255,255,0.06); border-radius: 12px; padding: 6px 10px; }
.post-comment-delete { cursor: pointer; color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
.post-comment-delete:hover { color: #ff8080; }
.post-comment-report { cursor: pointer; color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
.post-comment-report:hover { color: #ff8080; }
.post-comment-form input { margin-bottom: 0; }

/* ---------- Chat-Räume ---------- */
.chat-box {
    height: 420px;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(8,7,18,0.35);
    border-radius: 14px;
}
.chat-msg {
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(20,18,35,0.75);
    border: 1px solid rgba(255,255,255,0.08);
    max-width: 78%;
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.4;
}
.chat-msg.own {
    align-self: flex-end;
    background: linear-gradient(135deg, #5a3fd6, #d43e8a); /* etwas gedämpfter als der Standard-Verlauf, für besseren Textkontrast */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    border: none;
}
.chat-msg .author { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 3px; font-weight: 600; }
.chat-msg.own .author { color: rgba(255,255,255,0.85); }
.chat-input-row { display: flex; gap: 10px; padding: 12px; }
.chat-input-row input { margin-bottom: 0; }

/* ---------- Sprach-/Video-Chat-Panel (eingebettet in room.php) ---------- */
.call-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; }
.call-tile { position: relative; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); }
.call-tile video, .call-tile audio { width: 100%; height: 100%; object-fit: cover; }
.call-avatar { font-size: 2.2rem; }
.call-label { position: absolute; bottom: 6px; left: 8px; font-size: 0.78rem; background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 999px; }

/* ---------- Chat-Reaktionen (Emotes) ---------- */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; position: relative; }
.reaction-chip {
    background: rgba(255,255,255,0.15); border-radius: 999px; padding: 2px 8px;
    font-size: 0.8rem; cursor: pointer; transition: transform 0.15s ease;
}
.reaction-chip:hover { transform: scale(1.08); }
.reaction-add {
    background: rgba(255,255,255,0.08); border-radius: 999px; padding: 2px 8px;
    font-size: 0.8rem; cursor: pointer; color: var(--text-muted);
}
.emoji-picker {
    position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px;
    background: rgba(20,20,30,0.95); border-radius: 12px; padding: 6px 8px;
    display: flex; gap: 6px; box-shadow: var(--shadow);
}
.emoji-choice { cursor: pointer; font-size: 1.1rem; transition: transform 0.1s ease; }
.emoji-choice:hover { transform: scale(1.25); }

/* ---------- Live-Übersetzung ---------- */
.translate-btn { cursor: pointer; opacity: 0.6; font-size: 0.85rem; }
.translate-btn:hover { opacity: 1; }
.chat-msg-report { cursor: pointer; opacity: 0.6; font-size: 0.85rem; }
.chat-msg-report:hover { opacity: 1; color: #ff8080; }
.translation { font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin-top: 4px; }

/* ---------- Festival-Effekte ---------- */
@keyframes fw-particle {
    0% { transform: translate(0,0); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
/* Läuft bewusst auf .world-bg statt direkt auf body: ein CSS filter auf
   einem Vorfahren-Element bricht laut Spezifikation position:sticky für
   alle Kind-Elemente (z.B. den Live-Ticker) -- lief die Lichtshow, wäre
   der Ticker in dem Moment nicht mehr fixiert gewesen. .world-bg deckt
   als fixer Vollbild-Hintergrund den ganzen Bildschirm ab, der Effekt
   sieht optisch identisch aus, betrifft aber nicht mehr die Fixierung. */
body.lightshow-active .world-bg {
    animation: lightshow-flash 0.4s infinite alternate;
}
@keyframes lightshow-flash {
    0% { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(120deg) brightness(1.3); }
}

/* ---------- Themes ---------- */
body.theme-dark { --glass-bg: rgba(20,20,30,0.55); --glass-border: rgba(255,255,255,0.08); }
body.theme-dark .world-bg { background: #0b0b12 !important; }

body.theme-neon { --accent: #00f5ff; --accent-2: #ff00e5; --glass-bg: rgba(10,10,25,0.5); }
body.theme-neon .glass { box-shadow: 0 0 24px rgba(0,245,255,0.25), var(--shadow); }
body.theme-neon .btn-primary { box-shadow: 0 0 16px var(--accent); }

body.theme-retro { --accent: #ff6b35; --accent-2: #f7c548; font-family: 'Courier New', monospace; }
body.theme-retro .glass { border-width: 2px; border-style: solid; }

/* ---------- Personal Room Hintergründe: jeder Raumtyp visuell klar erkennbar ---------- */
.room-hero { border-radius: var(--radius); padding: 40px; text-align: center; margin-bottom: 20px; position: relative; overflow: hidden; }
.room-hero::before {
    content: ''; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
}
.room-hero::after {
    content: attr(data-room-icon); position: absolute; bottom: -30px; right: -10px;
    font-size: 9rem; opacity: 0.14; pointer-events: none; line-height: 1;
}

/* Apartment: Stadt bei Nacht, Fenster-Raster-Muster */
.room-apartment { background: linear-gradient(160deg, #1a1440, #2575fc 140%); }
.room-apartment::before {
    background-image: repeating-linear-gradient(90deg, rgba(255,220,120,0.12) 0 6px, transparent 6px 26px),
                       repeating-linear-gradient(0deg, rgba(255,220,120,0.12) 0 6px, transparent 6px 26px);
}

/* Haus: warmes Grün, sanfte "Hügel"-Silhouette am unteren Rand */
.room-haus { background: linear-gradient(160deg, #2d5a3d, #78ffd6 160%); }
.room-haus::before {
    background: radial-gradient(ellipse 140% 60% at 20% 120%, rgba(255,255,255,0.18), transparent 70%),
                radial-gradient(ellipse 120% 50% at 80% 130%, rgba(255,255,255,0.12), transparent 70%);
}

/* Insel: Türkis-Wasser, Wellen-Streifen am unteren Rand */
.room-insel { background: linear-gradient(160deg, #0f3d3e, #43cea2 55%, #185a9d 140%); }
.room-insel::before {
    background-image: repeating-linear-gradient(-6deg, rgba(255,255,255,0.1) 0 3px, transparent 3px 22px);
    background-position: bottom; background-size: 100% 40%; background-repeat: repeat-x;
    bottom: 0; top: auto; height: 45%;
}

/* Geschäft: warmes Orange, Markisen-Streifen oben */
.room-geschaeft { background: linear-gradient(160deg, #7a4a10, #f7971e 60%, #ffd200 150%); }
.room-geschaeft::before {
    background-image: repeating-linear-gradient(100deg, rgba(255,255,255,0.16) 0 18px, rgba(0,0,0,0.08) 18px 36px);
    top: 0; bottom: auto; height: 30%;
}

/* Club: dunkel mit Neon-Spotlights */
.room-club { background: linear-gradient(160deg, #1a0a2e, #ee0979 70%, #ff6a00 160%); }
.room-club::before {
    background: radial-gradient(circle at 25% 20%, rgba(0,255,255,0.25), transparent 35%),
                radial-gradient(circle at 75% 15%, rgba(255,0,200,0.25), transparent 35%),
                radial-gradient(circle at 50% 90%, rgba(255,255,0,0.15), transparent 40%);
}

.room-type-badge {
    position: absolute; top: 14px; left: 14px; background: rgba(0,0,0,0.35);
    padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; z-index: 1;
}
.room-hero > *:not(.room-type-badge) { position: relative; z-index: 1; }

/* Info-Chips minimalistischer: weniger Rahmen/Füllung, mehr Fläche für Inhalt */
.info-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.info-chip {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.05); border: none;
    border-radius: 10px; padding: 6px 10px;
}
.info-chip-icon { font-size: 1rem; opacity: 0.85; }
.info-chip-label { display: block; font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }
.info-chip-value { display: block; font-size: 0.85rem; }

/* ---------- Toggle-Schalter (statt Checkboxen) ---------- */
.toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row-label { font-size: 0.9rem; }
.toggle-row-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch-track {
    position: absolute; inset: 0; background: rgba(255,255,255,0.15);
    border-radius: 999px; cursor: pointer; transition: background 0.2s ease;
}
.toggle-switch-track::before {
    content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform 0.2s ease;
}
.toggle-switch input:checked + .toggle-switch-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.toggle-switch input:checked + .toggle-switch-track::before { transform: translateX(20px); }
.room-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.room-hero-actions .btn { margin: 0; }
/* Alle Buttons hier sollen farblich identisch aussehen statt Haupt-/
   Nebenbutton zu unterscheiden (siehe Bug-Report: wirkte uneinheitlich/
   "hässlich" mit dem abgedunkelten Sekundär-Stil). */
.room-hero-actions .btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    color: #1a1a2e;
    text-shadow: none;
    font-weight: 700;
}
.room-hero-actions .btn:hover { filter: brightness(1.15); }
.role-badge {
    display: inline-block; font-size: 0.78rem; font-weight: 600;
    padding: 3px 12px; border-radius: 999px;
}
.role-badge-admin { background: linear-gradient(135deg, #ffd93d, #ff9d3d); color: #2a1a00; }
.role-badge-mod { background: rgba(124,92,255,0.25); border: 1px solid rgba(124,92,255,0.5); color: #c9bbff; }

/* ---------- Toast-Benachrichtigungen (oben rechts, verschwinden von selbst) ---------- */
#toast-container {
    position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px; max-width: 320px;
}
.toast-popup {
    padding: 12px 16px; border-radius: 14px;
    background: rgba(20,18,35,0.95); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transform: translateX(120%); transition: transform 0.3s ease;
}
.toast-popup-show { transform: translateX(0); }
.toast-popup strong { display: block; font-size: 0.9rem; margin-bottom: 3px; }
.toast-popup p { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
@media (max-width: 600px) {
    #toast-container { left: 16px; right: 16px; max-width: none; }
}

/* ---------- Weltkarte & Szenen ---------- */
.world-map-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, #1e3c72, #2a5298); }
.world-map-marker {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; text-decoration: none; color: inherit;
}
.world-map-marker .marker-icon {
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px); box-shadow: var(--shadow); transition: transform 0.2s ease;
}
.world-map-marker:hover .marker-icon { transform: scale(1.15); }
.world-map-marker .marker-label { font-size: 0.75rem; background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

.scene-wrap { position: relative; border-radius: var(--radius); overflow: hidden; cursor: crosshair; }
.scene-bg-strand { background: linear-gradient(180deg, #7ec8e3 0%, #7ec8e3 40%, #f4d58d 40%, #e8c072 100%); }
.scene-bg-innenstadt { background: linear-gradient(180deg, #8ec5fc 0%, #8ec5fc 35%, #6b7b8c 35%, #3a4a5c 100%); }
.scene-bg-freizeitpark { background: linear-gradient(180deg, #ffafbd 0%, #ffafbd 40%, #ffc3a0 100%); }
.scene-bg-wald { background: linear-gradient(180deg, #a8e6cf 0%, #a8e6cf 30%, #3a5f3a 30%, #234023 100%); }
.scene-bg-raumstation { background: radial-gradient(circle at 30% 30%, #2c1250, #0a0a1a 70%); }
.scene-bg-unterwasserwelt { background: linear-gradient(180deg, #0575e6 0%, #021b79 100%); }
.scene-bg-default { background: linear-gradient(160deg, #6a11cb, #2575fc); }

.scene-decoration { position: absolute; font-size: 1.8rem; transform: translate(-50%, -50%); pointer-events: none; }
.scene-avatar { position: absolute; transform: translate(-50%, -100%); transition: left 0.6s ease, top 0.6s ease; text-align: center; pointer-events: none; }
.scene-avatar .avatar-circle { width: 44px; height: 44px; margin: 0 auto; border: 2px solid rgba(255,255,255,0.6); }
.scene-avatar .scene-avatar-label { font-size: 0.7rem; background: rgba(0,0,0,0.55); padding: 1px 6px; border-radius: 999px; margin-top: 2px; display:inline-block; }

/* ---------- Welten-Baukasten ---------- */
.builder-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-palette-item { font-size: 1.5rem; padding: 8px; border-radius: 12px; background: rgba(255,255,255,0.1); cursor: pointer; border: 2px solid transparent; }
.builder-palette-item.selected { border-color: var(--accent); }
.builder-canvas { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); cursor: crosshair; overflow: hidden; }
.builder-item { position: absolute; font-size: 1.6rem; transform: translate(-50%, -50%); cursor: grab; }

/* ---------- Live-Präsenz / 2D-Karte im Raum ---------- */
.presence-area {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0.15));
    margin-bottom: 16px;
    overflow: hidden;
    cursor: crosshair;
    border: 1px dashed rgba(255,255,255,0.2);
}
.presence-hint {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 0.75rem; color: var(--text-muted); pointer-events: none;
}
.presence-avatar {
    position: absolute;
    width: 38px; height: 38px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.4s ease, top 0.4s ease;
}
.presence-avatar .avatar-circle {
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.4);
}
.presence-avatar.own .avatar-circle { border-color: #fff; }
.presence-avatar { z-index: 1; }
.presence-avatar.own { z-index: 2; }
.presence-avatar .presence-name {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; white-space: nowrap; background: rgba(0,0,0,0.5);
    padding: 1px 5px; border-radius: 6px; margin-top: 2px;
}

/* ---------- Werbebanner-Slot (Seitenende) ---------- */
.ad-slot {
    max-width: 1100px;
    margin: 30px auto 20px;
    padding: 14px;
    text-align: center;
}
.ad-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    opacity: 0.7;
}
.ad-link { display: inline-block; }
.ad-image {
    max-width: 100%;
    max-height: 140px;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}
.ad-html { display: flex; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .bottom-nav { display: flex; }
    .sidebar {
        left: -300px; top: 0; bottom: 0; border-radius: 0; width: 280px;
        transition: left 0.25s ease; z-index: 75;
    }
    .sidebar.open { left: 0; }
    .main-area { margin-left: 0; padding: 16px; padding-bottom: 88px; }
    .navbar { flex-wrap: wrap !important; gap: 10px; justify-content: center !important; }
    .navbar .logo { width: 100% !important; text-align: center !important; }
    .navbar nav { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 !important; }
}

@media (max-width: 720px) {
    .chat-box { height: 320px; }
    /* "Mein Raum": auf schmalen Bildschirmen wirkte der Header durch das große
       Innenpolster + das große Wasserzeichen-Icon unübersichtlich/gequetscht –
       hier bewusst kompakter, näher an der Desktop-Proportion. */
    .room-hero { padding: 24px 16px; }
    .room-hero::after { font-size: 5.5rem; }
    .room-hero h1 { font-size: 1.4rem; }
    .room-type-badge { top: 10px; left: 10px; font-size: 0.72rem; padding: 4px 10px; }
    .info-chip-grid { justify-content: center; }
    /* Site-Ticker: auf schmalen Bildschirmen kompakter, sonst wirkt er
       unverhältnismäßig breit und die Laufschrift zu langsam/groß */
    .admin-ticker.visible { padding: 6px 0; margin-bottom: 12px; }
    .admin-ticker-item { padding: 0 20px; font-size: 0.8rem; }
    .admin-ticker-track { animation-duration: 22s; }
}

/* ---------- Kompakte Compose-Toolbar (Feed, Chat, Forum, ...) ---------- */
.compose-toolbar {
    display: flex; align-items: center; gap: 6px; margin-top: 8px; position: relative;
    flex-wrap: wrap;
}
.compose-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border);
    cursor: pointer; font-size: 1.1rem; flex-shrink: 0; transition: background 0.2s ease;
    /* <button> und <label> teilen sich diese Klasse (Smiley/Link-Button vs.
       Kamera/Video-Label) -- Browser geben <button> von sich aus ein
       systemeigenes Aussehen mit eigener Innenpolsterung/Mindesthöhe, die
       nicht automatisch zum <label> passt (siehe Bug-Report: zwei der vier
       Kästchen sitzen tiefer als die anderen zwei). appearance:none nimmt
       dem <button> dieses native Verhalten komplett weg, padding/margin/
       font werden hart auf 0 bzw. geerbt gesetzt, damit <button> und
       <label> hier wirklich identisch rendern. */
    appearance: none; -webkit-appearance: none;
    padding: 0; margin: 0; font-family: inherit; line-height: normal;
    color: inherit;
}
.compose-icon-btn:hover { background: rgba(255,255,255,0.16); }

/* Emoji-Button im "Nachricht dazu"-Feld beim Geschenke-Senden: hing bisher
   halb außerhalb des Textfelds (überlappte Rand/Scrollleiste des Popups,
   siehe Bug-Report) statt sauber INS Feld eingesetzt zu sein. Eigener,
   etwas kleinerer Wert als die generische Compose-Toolbar, plus Platz im
   Textfeld reserviert, damit eingetippter Text nicht drunter verschwindet.
   Eigene, engere Werte für schmale (mobile) Bildschirme, wo sonst wenig
   Platz zwischen Button und Popup-Rand bleibt. */
#gift-message {
    margin-bottom: 0;
    padding-right: 46px;
}
#gift-emoji-btn {
    right: 10px;
    bottom: 10px;
    width: 32px;
    height: 32px;
    font-size: 1rem;
}
@media (max-width: 480px) {
    #gift-message { padding-right: 42px; }
    #gift-emoji-btn { right: 8px; bottom: 8px; width: 30px; height: 30px; font-size: 0.95rem; }
}
/* Der Anhang-Name (z.B. "📎 Bild ausgewählt (1.2 MB)") wird beliebig lang und
   hat sonst keine Breitenbegrenzung als Flex-Item -- das sprengt die Zeile
   und schiebt/quetscht den Posten/Senden-Button daneben (siehe Bug-Report:
   Button rutscht bei angehängtem Bild nach rechts raus). Fix: Anhang-Name
   bekommt per order/flex-basis immer eine eigene, volle Zeile UNTER den
   Icons+Button, statt mit ihnen um den Platz in einer Zeile zu konkurrieren.
   Gilt für alle Compose-Toolbars (Feed, Stories, ...), erkannt am
   Namensmuster "...-attach-name". */
.compose-toolbar [id$="-attach-name"] {
    order: 3;
    flex: 1 1 100%;
    margin-top: 4px;
    word-break: break-word;
}
.compose-toolbar .btn-primary {
    order: 2;
    margin-left: auto;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.hidden-install-btn { display: none !important; }
.hidden-toggle { display: none; }

/* ---------- Emoji-Picker ---------- */
.emoji-panel {
    position: fixed; z-index: 250;
    width: 300px; max-width: 90vw; padding: 10px;
    background: rgba(18,16,32,0.96); backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    border-radius: 16px;
}
.emoji-panel-tabs {
    display: flex; gap: 2px; overflow-x: auto; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 6px;
}
.emoji-panel-tab {
    background: none; border: none; font-size: 1.15rem; padding: 4px 7px;
    border-radius: 8px; cursor: pointer; flex-shrink: 0; opacity: 0.55;
}
.emoji-panel-tab.active, .emoji-panel-tab:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.emoji-panel-body {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
    max-height: 200px; overflow-y: auto;
}
.emoji-item {
    font-size: 1.3rem; text-align: center; padding: 5px 0; border-radius: 8px;
    cursor: pointer; transition: background 0.15s ease; user-select: none;
}
.emoji-item:hover { background: rgba(255,255,255,0.14); transform: scale(1.15); }

/* ---------- Seiten-Footer ---------- */
.site-footer {
    max-width: 1100px; margin: 10px auto 20px; padding: 16px 20px;
}
.site-footer-inner {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px;
}
.site-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer-links a { color: var(--text-muted); text-decoration: none; }
.site-footer-links a:hover { color: var(--text-main); text-decoration: underline; }
.legal-popup-trigger {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--text-muted); text-decoration: none; font-size: inherit; font-family: inherit;
}
.legal-popup-trigger:hover { color: var(--text-main); text-decoration: underline; }

/* ---------- Marken-Banner oben im Content-Bereich ---------- */
.content-banner {
    margin-bottom: 20px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.content-banner img { width: 100%; display: block; }

.back-btn { margin-bottom: 12px; }
/* Der generische "Zurück zum Feed"-Button ist auf Desktop überflüssig, da die
   Sidebar dort immer sichtbar ist und den Feed-Link ohnehin bereithält.
   Kontextbezogene Zurück-Links (Räume, Admin-Panel) bleiben unabhängig davon
   überall sichtbar, da die jeweils die aktuell offene Sidebar-Kategorie oder
   einen Bereich außerhalb der Navigation betreffen. */
@media (min-width: 901px) {
    .back-btn { display: none; }
}

/* ---------- Beta-Popup (erscheint einmal pro Login, solange die Beta läuft) ---------- */
.beta-popup-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(6,6,16,0.72); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: beta-fade-in 0.3s ease;
}
@keyframes beta-fade-in { from { opacity: 0; } to { opacity: 1; } }
.beta-popup {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    max-width: 440px; width: 100%;
    overflow: hidden;
    box-shadow: var(--shadow);
    animation: beta-pop-in 0.3s ease;
}
@keyframes beta-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.beta-popup-img { width: 100%; display: block; }
.beta-popup-body { padding: 22px 24px 26px; }
.beta-popup-body .eyebrow-ish {
    font-size: 0.72rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.beta-popup-body h2 { margin: 0 0 10px; font-size: 1.4rem; color: var(--text-main); }
.beta-popup-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 18px; }

/* ---------- Geschenke-Picker ---------- */
.gift-picker-overlay {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(6,6,16,0.72); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 20px;
}
.gift-picker-overlay.open { display: flex; }
.gift-picker {
    max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
    padding: 22px; border-radius: 20px;
}
.gift-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px; margin: 14px 0;
}
.gift-option {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 6px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,0.06); border: 1px solid transparent;
    text-align: center; margin-bottom: 0;
}
.gift-option:hover { background: rgba(255,255,255,0.12); }
.gift-option.selected { border-color: var(--accent); background: rgba(124,92,255,0.2); }
.gift-icon { font-size: 1.8rem; }
.gift-name { font-size: 0.72rem; }
.gift-price { font-size: 0.68rem; color: var(--text-muted); }

/* ---------- Glücksrad ---------- */
.wheel-overlay {
    position: fixed; inset: 0; z-index: 210;
    background: rgba(6,6,16,0.78); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: beta-fade-in 0.3s ease;
}
.wheel-modal { position: relative;
    max-width: 380px; width: 100%; padding: 24px; text-align: center; border-radius: 24px;
}
.wheel-wrap {
    position: relative; width: 240px; height: 240px; margin: 18px auto 0;
}
.wheel-pointer {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    font-size: 1.6rem; z-index: 5; color: #ffd93d;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.wheel-disc {
    width: 100%; height: 100%; border-radius: 50%;
    position: relative; overflow: hidden;
    border: 6px solid #2a1a5e;
    box-shadow: 0 0 0 3px #ffd93d, 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 4.5s cubic-bezier(0.15, 0.8, 0.15, 1);
    background:
        conic-gradient(
            #4a4a55 0deg 36deg, #7c5cff 36deg 72deg,
            #ff5ca8 72deg 108deg, #4a4a55 108deg 144deg,
            #7c5cff 144deg 180deg, #ff5ca8 180deg 216deg,
            #4a4a55 216deg 252deg, #7c5cff 252deg 288deg,
            #ff5ca8 288deg 324deg, #ffd93d 324deg 360deg
        );
}
.wheel-segment-niete span { font-size: 0.72rem; opacity: 0.85; }
.wheel-segment {
    position: absolute; inset: 0;
    display: flex; justify-content: center;
}
.wheel-segment span {
    display: block; margin-top: 14px; font-weight: 700; font-size: 1rem;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.wheel-disc.spinning { transition: transform 4.5s cubic-bezier(0.15, 0.8, 0.15, 1); }



.avatar-zoom img { cursor: zoom-in; }

/* Post mit Bild/Video: Bild steht oben rechts (auf Höhe des Löschen-X, das rechts daneben sitzt), der Text läuft
   links bis kurz vor das Bild und bricht erst dort um. Auf schmalen Bildschirmen: Bild unter dem Text. */
.post { position: relative; }
.post-with-media { display: flex; flex-direction: column; }
.post-with-media > .post-header { order: -3; }
.post-with-media > .post-text { order: -2; }
.post-with-media > .post-media { order: -1; }
@media (min-width: 900px) {
    .post-with-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 20px; padding-right: 60px; }
    .post-with-media > .post-media { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: start; width: 100%; max-width: 480px; justify-self: end; }
    .post-with-media > .post-header { grid-column: 1; grid-row: 1; }
    .post-with-media > .post-text { grid-column: 1; grid-row: 2; }
    .post-with-media > :not(.post-media):not(.post-header):not(.post-text) { grid-column: 1 / -1; }
    .post-with-media .post-delete-btn { position: absolute; top: 18px; right: 18px; }
}

/* Feed: einfache Zeilenumbrüche im Text zählen nur als Leerzeichen, damit der Text die volle Breite nutzt (auch mobil) */
.post-text br.soft { display: none; }