/* style.css – Layout, Lobby, Dialoge, Chat. Die Szene selbst steht in scene.css ---------- Design-Tokens (SSSS-Sprint 2026-09-29, Phase 3) ---------- Bestandsaufnahme statt Neuerfindung: jeder Wert unten ist die bereits im Produkt genutzte Farbe/Groesse (dunkles Lila/Neon, wie im gesamten Audit bestaetigt) -- dieser Block macht sie nur BENENNBAR und wiederverwendbar, aendert an sich kein Pixel. Bewusst NICHT angefasst: die Map-eigenen Farbverlaeufe (map.css/map-variants.css) und die Rarity-Farben (bleiben in js/characters.js RARITIES, dort bereits die eine Quelle der Wahrheit fuer --rc). */ :root { --bg-page: #0b0b12; /* Grundhintergrund (body, Lobby-Basis) */ --bg-panel: #181822; /* Karten/Dialoge -- die "Flaeche", auf der Inhalt liegt */ --bg-panel-alt: #1e1e2e; /* leicht angehobene Flaeche (Chips, Popover, Formularabschnitte) */ --bg-panel-raised: #12121c; /* Eingabefelder, am naechsten am Grundhintergrund */ --bg-input: #12121c; --border: #2a2a3c; /* Standard-Trennlinie/Rahmen */ --border-strong: #3a3a55; /* etwas betonter (Toast, Popover) */ --accent: #a56cff; /* primaerer Markenakzent (Buttons, Fokus, aktive Tabs) */ --accent-soft: #7c5cff; /* verwandter, etwas kuehlerer Lila-Ton (lively-Karten, Glow) */ --accent-tint: #cfc8ff; /* helle Variante fuer Text auf dunklem Grund (Abschnittstitel) */ --text-primary: #e8e8f0; --text-secondary: #9a9ab5; --text-muted: #7a7a95; --text-faint: #6a6a85; --success: #2e9e5b; /* LIVE-Badge */ --warning: #c98a1b; /* WARTERAUM-Badge */ --danger: #8a3040; /* Fehler-Toast/-Rahmen */ --danger-bg: #4a1f28; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --shadow-panel: 0 6px 20px #0008; --transition-fast: .12s ease; --focus-ring: 0 0 0 2px var(--accent); /* ---------- Room-Ebenen-Hierarchie (SSSS Phase A, 2026-09-30) ---------- Vorher: z-index-Werte pro Datei einzeln vergeben (1, 2, 3, 4, 5, 8, 12, 20, 25, 30, 39, 40, 50, 60, 90, 100 -- ohne erkennbares System), was genau den gemeldeten Fehler zuliess (Warteschlangen-Panel ueber Moebeln). Diese Skala ist die EINE Quelle der Wahrheit fuer "was liegt ueber was" in der Raum-Szene; neue Ebenen (z. B. die kommende DJ-Ability-Bar) reihen sich hier ein, statt eine neue Zahl zu raten. Grosse Luecken zwischen den Stufen absichtlich, fuer spaetere Zwischenwerte ohne alles zu verschieben. 10 Szenerie Hintergrund-Deko: Vorhaenge, Automaten, Girlanden, Raum-Deko-Steckplaetze (.decor) 20 Moebel #mapObjects: Sitzplatz-/Garderoben-Kunst UND ihre Klickflaechen (muessen zusammen wandern) 30 Figuren #crowd, #dj -- die Charaktere selbst 35 Figuren-FX Namensschild, Sprechblase, Reaktionen -- IMMER ueber der eigenen Figur, nie ueber Panels 40 Medien/DJ-Zone .screen (Video), .booth (Pult) -- bewusst ueber den Figuren (siehe bestehender Kommentar in map.css: "nichts liegt vor dem Video-Player") 45 Teilnahme Woot/Grab/Meh, kuenftige DJ-Ability-Bar -- MUSS ueber der Medien-Zone sichtbar bleiben, darf aber die Welt darunter nicht dauerhaft verdecken (siehe .qpanel-Neupositionierung) 50 Panels Warteschlange (.qpanel), Votes, Warteraum-Overlay 55 Status Verbindungsabbruch-Banner (.connbar) -- muss ueber allem in der Szene sichtbar sein 60 Popover Personen-/Moderationsmenue (bereits global, unveraendert) 100 Modal/Toast Dialoge, Toasts -- global, ueber der gesamten App, unveraendert Innerhalb einer Stufe gilt weiterhin die bestehende relative Reihenfolge (z. B. #dj bleibt HINTER .booth) -- diese Skala aendert nur die STUFEN, nie bewusst gesetzte Beziehungen innerhalb einer Stufe. */ --z-scenery: 10; --z-furniture: 20; --z-characters: 30; --z-character-fx: 35; --z-foreground: 38; /* .fg (map.css): bewusst dicht vor den Figuren, aber noch hinter Screen/Pult -- war zuvor 30, kollidierte mit der neuen --z-characters-Stufe */ --z-media: 40; --z-participation: 45; --z-panels: 50; --z-status: 55; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: system-ui, sans-serif; background: var(--bg-page); color: var(--text-primary); overflow: hidden; } [hidden] { display: none !important; } button { border: 0; cursor: pointer; font: inherit; color: #fff; } button:disabled { opacity: .45; cursor: not-allowed; } input, select, textarea { font: inherit; color: inherit; } input, select, textarea { padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; background: var(--bg-input); } input:focus, select:focus, textarea:focus { border-color: var(--accent); } textarea { resize: vertical; min-height: 64px; } ul { list-style: none; } .grow { flex: 1; } .btn { padding: 9px 14px; border-radius: var(--radius-sm); font-weight: 600; white-space: nowrap; transition: filter var(--transition-fast); } .btn.primary { background: var(--accent); } .btn.ghost { background: var(--bg-panel-alt); } .btn:hover:not(:disabled) { filter: brightness(1.15); } .btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 0; box-shadow: var(--focus-ring); } .linkbtn { background: none; color: var(--text-secondary); text-decoration: underline; font-size: 12px; align-self: center; } .legallinks { text-align: center; font-size: 12px; color: var(--text-faint); } .legallinks a { color: var(--text-secondary); } .legallinks a:hover { color: var(--accent-tint); } .lobbyfoot { padding: 8px 24px 28px; } /* ---------- Toasts ---------- */ #toasts { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: var(--bg-panel-alt); border: 1px solid var(--border-strong); padding: 9px 14px; border-radius: var(--radius-md); font-size: 13px; box-shadow: var(--shadow-panel); } .toast.err { background: var(--danger-bg); border-color: var(--danger); } /* ================= Lobby ================= */ #lobby { height: 100%; overflow-y: auto; background: radial-gradient(60em 30em at 70% -10%, #3a1a6b66, transparent), var(--bg-page); } .lobbybar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: #10101af0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .logo { font-weight: 800; font-size: 18px; letter-spacing: .3px; } #lSearch { width: 240px; max-width: 100%; } .codeform { display: flex; gap: 6px; } .codeform input { width: 110px; text-transform: uppercase; } .chipuser .miniav { flex: none; width: 30px; height: 30px; overflow: hidden; font-size: 4.6px; border-radius: 50%; background: #10101a; display: block; } .chipuser .miniav .av { position: relative; left: 0; bottom: 0; transform: none; animation: none; } .chipuser .miniav .cv * { animation: none !important; } .chipuser { display: flex; align-items: center; gap: 8px; background: #1e1e2e; padding: 6px 12px; border-radius: 20px; font-size: 13px; } .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c, #888); } .filters { display: flex; gap: 8px; padding: 16px 24px 4px; flex-wrap: wrap; } .filters button { background: var(--bg-panel-alt); padding: 6px 14px; border-radius: 20px; font-size: 13px; color: var(--text-secondary); } .filters button.on { background: var(--accent); color: #fff; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; padding: 16px 24px 40px; } .card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .12s, border-color .12s; } .card:hover { transform: translateY(-3px); border-color: var(--accent); } .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card .cover { height: 74px; display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 12px; background: linear-gradient(135deg, var(--g1), var(--g2)); font-size: 12px; } .card .body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .card h3 { font-size: 15px; } .card p { font-size: 12px; color: var(--text-secondary); min-height: 32px; } .card .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-top: auto; } .card.ended { opacity: .55; } /* Discovery: Hero, Gruppen, lebendige vs. ruhige Raeume */ .hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px 6px; } .hero h1 { font-size: 24px; } .hero p { color: #9a9ab5; font-size: 14px; margin-top: 4px; max-width: 60ch; } .btn.big { padding: 12px 20px; font-size: 15px; border-radius: 12px; } .sec { grid-column: 1 / -1; font-size: 15px; color: #cfc8ff; margin-top: 10px; } .sec.quiet, .sec.ended { color: #7a7a95; } /* Lebendig = die Karte muss OHNE Text auffallen: mehr Flaeche (Grid-Span auf breiten Screens), kraeftigerer Rahmen/ Glow, groessere Avatar-Vorschau, betontere Join-CTA (SSSS Phase 4 -- "size, motion, saturation or prominence, not just a number"). Der Puls-Glow respektiert prefers-reduced-motion (siehe Media Query weiter unten). */ .card.lively { border-color: var(--accent-soft); box-shadow: 0 0 0 1px #7c5cff40, 0 8px 26px #7c5cff33; animation: card-glow 3.6s ease-in-out infinite; } @keyframes card-glow { 50% { box-shadow: 0 0 0 1px #7c5cff66, 0 10px 32px #7c5cff4d; } } .card.lively .cover { height: 116px; } .card.lively .mini { font-size: 8.2px; } .card.lively .meta .join { background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 20px; } @media (min-width: 900px) { .grid .card.lively { grid-column: span 2; } .grid .card.lively .body { padding: 14px 16px; } .grid .card.lively h3 { font-size: 17px; } } .card.quiet, .card.soon { } .card.quiet { opacity: .62; } .card.quiet:hover { opacity: 1; } .card.quiet .cover { height: 46px; } .card .cover { position: relative; overflow: hidden; align-items: flex-start; } .card .cover .badge, .card .cover .chips { position: relative; z-index: 2; } .card .cover .badge.live { animation: livepulse 2s ease-in-out infinite; } @keyframes livepulse { 50% { box-shadow: 0 0 0 4px #2e9e5b55; } } .card .cover .chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 72%; } .card .cover .chip.map { border: 1px solid #ffffff33; } .card .track { font-size: 13px; color: #e8e4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card .track small { color: #9a9ab5; } .card .track.none { color: #7a7a95; } .card .meta .join { color: #b9a8ff; font-weight: 700; margin-left: auto; } .card.full { opacity: .6; } .card.full .join { color: #9a9ab5; } .card .meta { gap: 8px; align-items: center; } .card .meta > span:nth-child(2) { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .card .meta .join { white-space: nowrap; flex: none; } /* kleine Figuren-Vorschau im Cover */ .mini { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-end; font-size: 6.4px; padding-bottom: 2px; pointer-events: none; } .mini .av { position: relative; transform: none; animation: none; transition: none; margin: 0 -.7em; } .mini .more { align-self: center; margin-left: 1.6em; font: 700 11px system-ui; background: #0009; color: #fff; padding: 1px 6px; border-radius: 9px; } .empty { grid-column: 1 / -1; text-align: center; color: #7a7a95; padding: 60px 0; } .chip { background: #ffffff1c; padding: 2px 8px; border-radius: 10px; font-size: 11px; color: #fff; } .badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #333; color: #fff; } .badge.live { background: #2e9e5b; } .badge.waiting { background: #c98a1b; } .badge.ended { background: #555; } @media (prefers-reduced-motion: reduce) { .badge.live, .card.lively { animation: none !important; } } /* ================= Raum ================= */ #room { height: 100%; display: grid; grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr); } .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .topbar { height: 36px; flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px; background: #10101a; font-size: 12px; color: #9a9ab5; } .topbar b { color: #fff; } .tl, .tr { display: flex; align-items: center; gap: 10px; min-width: 0; } .tl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb { background: #23233a; padding: 4px 10px; border-radius: 5px; font-size: 12px; white-space: nowrap; } .tb:hover { background: #33334f; } /* Privater Raum: Code/Einladungslink fuer den Host, immer sichtbar statt im Moderationsmenue versteckt (nie ueber der Szene: darf den YouTube-Player nicht verdecken) */ .invitebar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #241a3d; border-bottom: 1px solid #3a2a6b; font-size: 13px; color: #e6e2ff; } .invitebar[hidden] { display: none; } .invitebar b { color: #fff; letter-spacing: .5px; font-variant-numeric: tabular-nums; } .invitebar button { background: #2a2a3c; color: #dcd8ff; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; min-height: 32px; white-space: nowrap; } .invitebar button:hover { background: #33334f; } .invitebar .close { background: transparent; color: #9a9ab5; padding: 4px 8px; min-height: 32px; margin-left: auto; } @media (max-width: 700px) { .invitebar { font-size: 12px; padding: 6px 10px; gap: 6px; } .invitebar button { padding: 8px 10px; font-size: 11px; min-height: 36px; } } .screen > * { grid-area: 1 / 1; } .screen iframe { width: 100%; height: 100%; border: 0; } .screen.playing .splash { display: none; } /* Verbindungs-Banner + Hinweis im Screen (Provider-Ausfall / Titel nicht abspielbar) */ .connbar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: var(--z-status); background: #7a4a12; border: 1px solid #c98a1b; padding: 6px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px #0008; } .screenmsg { display: grid; place-items: center; text-align: center; padding: 1em; background: #000000d9; color: #ffd9a0; font-size: 1.2em; line-height: 1.4; z-index: 2; } .screenmsg[hidden] { display: none; } /* Sammlung */ /* Meine Musik / Playlists */ .dialog.music { width: min(560px, 94vw); } .mhead { display: flex; align-items: center; gap: 8px; } .mhead h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #mBody { display: flex; flex-direction: column; gap: 12px; max-height: 68vh; overflow-y: auto; } .pllist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow-y: auto; } .pllist li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #1f1f2e; border-radius: 10px; cursor: pointer; min-height: 48px; } .pllist li:hover { background: #2a2a40; } .pllist li.full { opacity: .5; cursor: not-allowed; } .pllist li.last { outline: 1px solid #7c5cff88; } .pllist .ct, .items .ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pllist .ct b, .items .ct b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pllist small, .items small, .dialog.pick > small { color: #8a8aa5; font-size: 11px; } .pllist .chev { color: #8a8aa5; font-size: 20px; } .pllist .tag { font-size: 11px; color: #b9a8ff; } .hint { color: #8a8aa5; font-size: 13px; } .newpl, .addsong { display: flex; gap: 8px; } .newpl input, .addsong input { flex: 1; min-width: 0; } .plhead { display: flex; align-items: center; justify-content: space-between; } .items { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; } .items li { background: #1f1f2e; border-radius: 10px; padding: 6px 8px; } .items li.empty { background: none; color: #7a7a95; text-align: center; padding: 24px 0; } .items .row { display: flex; align-items: center; gap: 8px; } .items .ord { display: flex; flex-direction: column; } .items .ord button { background: none; color: #9a9ab5; font-size: 11px; line-height: 1; padding: 4px 6px; border-radius: 4px; } .items .ord button:hover:not(:disabled) { background: #33334f; color: #fff; } .items .ord button:disabled { opacity: .25; cursor: default; } .thumb { flex: none; width: 56px; height: 32px; object-fit: cover; border-radius: 4px; background: #10101a; display: grid; place-items: center; color: #55557a; } .items .btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; } .items .btn.q { flex: none; } .items .more-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px 34px; } .qmusic { margin: 0 12px 8px; padding: 8px; background: #23233a; border-radius: 8px; font-size: 13px; } .qmusic:hover { background: #33334f; } .qmusic[hidden] { display: none; } .dialog.pick .pllist { max-height: 40vh; } .modal.sheet .dialog.pick { width: min(400px, 94vw); } @media (max-width: 700px) { .modal.sheet { place-items: end center; } .modal.sheet .dialog.pick { width: 100%; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: 24px; } .thumb { width: 44px; height: 26px; } .items .btn.q { padding: 6px 8px; } } .collist { max-height: 55vh; overflow-y: auto; } .collist li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #23233a; } .collist li.empty { color: #7a7a95; display: block; padding: 20px 0; text-align: center; } .collist .ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .collist .ct b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collist .ct small { color: #7a7a95; font-size: 11px; } .collist .btn { padding: 6px 10px; } /* Warteraum / Beendet */ .overlay { position: absolute; inset: 0; z-index: var(--z-status); display: grid; place-items: center; background: #0a0818d9; } .ovbox { text-align: center; padding: 24px; max-width: 460px; display: flex; flex-direction: column; gap: 10px; align-items: center; } .ovicon { font-size: 44px; } .countdown { font: 800 56px/1 ui-monospace, Consolas, monospace; color: #c8b2ff; letter-spacing: 2px; } .ovbox p { color: #9a9ab5; font-size: 14px; } .ovlist { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .ovlist .dot { width: 22px; height: 22px; } .ovbtns { display: flex; gap: 10px; margin-top: 6px; } /* Warteschlangen-/Video-Panel (Product Reality Fix 01, 2026-10-01, P03: zentriert verdeckte DJ-Pult/Buehne/Taenzer -- Adrian hat das live als "oeffnet sich mitten ueber dem Raum" abgelehnt. Zurueck zu links buendig, DIESMAL bewusst an der Stelle des #qToggle-Knopfs (☰), der unten links in .bar sitzt -- das Panel waechst sichtbar aus dem Knopf, der es oeffnet, statt irgendwo in der Mitte aufzutauchen. Die Buehne/der Booth/die Tanzflaeche liegen horizontal IMMER in der Raummitte (x ca. 20-80, siehe js/map-objects.js/css/map.css) -- links buendig verlaesst diese Zone komplett, unabhaengig von der Hoehe. Ein fruehrer links buendiger Versuch (SSSS Phase A) deckte Seitenmoebel ab; das wiegt laut Auftrag jetzt weniger schwer als das Verdecken der Buehne, zumal die Garderobe seit P01 ohnehin nicht mehr sichtbar ist. */ .qpanel { position: absolute; left: 14px; bottom: 0; z-index: 5; width: min(280px, 72%); max-height: 56%; display: flex; flex-direction: column; background: #12121cf5; border: 1px solid #2a2a3c; border-bottom: 0; border-radius: .6em .6em 0 0; } @media (max-width: 480px) { .qpanel { width: 68%; left: 8px; } } /* Core Recovery (2026-10-01), CORE-01: der virtuelle Welt-Joystick ist entfernt (kein Free-Roam mehr in V1). */ /* Dance Rooms V1 (SSSS Gameplay Core 2026-09-30, Phasen M-AB). Warteschlangen-Panel: kompakt, obere linke Ecke (die untere Mitte gehoert schon dem Warteschlangen-/Queue-Panel, die untere linke Ecke dem Joystick) -- js/dance.js fuellt/leert den Inhalt selbst. */ /* Core Recovery (2026-10-01), CORE-09: Adrian fand den Einstieg zum Tanzen nicht ("ein unerklaertes Icon reicht nicht") -- eigener, deutlich beschrifteter Knopf statt eines generischen .tool-Icon-Quadrats, dezent farblich hervorgehoben (passend zur Dance-Akzentfarbe aus der Buehne/dem Ergebnis-Screen). */ #danceToggle { width: auto; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; background: #a56cff2a; border: 1px solid #a56cff66; color: #e6d9ff; } #danceToggle:hover { background: #a56cff44; } .dancepanel { position: absolute; left: 14px; top: 14px; width: 210px; z-index: var(--z-panels); background: #12121cf5; border: 1px solid #2a2a3c; border-radius: .6em; padding: 8px 10px; font-size: 12.5px; } .dqhead { font-weight: 700; margin-bottom: 6px; } .dqrow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .dqjoin { flex: 1; text-align: left; background: #2a2a3c; padding: 5px 8px; border-radius: 6px; } .dqjoin:hover { background: #3a3a4e; } .dqrow em { font-style: normal; background: #ffffff14; padding: 2px 7px; border-radius: 8px; min-width: 1.2em; text-align: center; } .dqmine { padding: 6px 0; color: #ffd23f; font-weight: 600; } .dqleave { width: 100%; margin-top: 4px; background: #3a1a1a; color: #ff8a8a; padding: 5px; border-radius: 6px; } /* Product Reality Fix 01, P08: ehrlicher Hinweis statt einer Warteschlange, die stillschweigend nie startet. */ .dqnote { background: #2a2210; color: #e8c97a; border: 1px solid #5a4a1e; border-radius: 6px; padding: 6px 7px; margin-bottom: 6px; line-height: 1.35; } /* Buehne: nimmt waehrend eines eigenen Auftritts den Raum optisch in Beschlag (Phase Q: sichtbare Noten + Timing-Flaeche + Urteil + Combo + Score), bleibt aber innerhalb der Szene (keine Vollbild-Modal-Sperre) -- Chat/Queue/Player bleiben technisch erreichbar (Auftrag Phase AD: "preserve chat accessibility"). */ .dancestage { position: absolute; inset: 0; z-index: var(--z-status); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 8%; pointer-events: none; gap: .6em; } .dscountdown { font-size: 4em; font-weight: 800; color: #fff; text-shadow: 0 0 .3em #a56cff; } .dsnotes { display: flex; gap: .5em; background: #0008; padding: .4em .7em; border-radius: .6em; } .dsnote { font-size: 1.6em; opacity: .45; width: 1.3em; text-align: center; } .dsnote.cur { opacity: 1; font-size: 2.2em; color: #ffd23f; text-shadow: 0 0 .4em #ffd23f; } .dshud { display: flex; align-items: center; gap: 1em; } .dsscore { font-size: 1.4em; font-weight: 800; color: #fff; } .dscombo { font-size: 1.1em; color: #a56cff; font-weight: 700; min-width: 2em; text-align: center; } .dsjudge { font-size: 1.2em; font-weight: 800; min-height: 1.4em; } .dsjudge.perfect { color: #ffd23f; } .dsjudge.good { color: #3ddc97; } .dsjudge.miss { color: #ff5a5a; } .dstouch { display: none; gap: .5em; pointer-events: auto; } @media (pointer: coarse) { .dstouch { display: flex; } } .dsbtn { width: 3em; height: 3em; font-size: 1.4em; background: #2a2a3ccc; border: 1px solid #ffffff33; border-radius: .5em; } .dsbtn:active { background: #a56cff55; } .danceresult { position: absolute; inset: 0; z-index: calc(var(--z-status) + 1); display: grid; place-items: center; background: #0a0818d9; } .drbox { background: #12121c; border: 1px solid #2a2a3c; border-radius: .8em; padding: 1.4em 1.8em; text-align: center; max-width: 320px; } .drbox h2 { margin-bottom: .5em; } .drstats { line-height: 1.6; margin-bottom: 1em; color: #d8d8ec; } .qhead { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #2a2a3c; } .qhead button { background: #2a2a3c; padding: 5px 10px; border-radius: 4px; font-size: 12px; margin-left: 6px; } .qform { display: flex; gap: 6px; padding: 10px 12px; } .qform input { flex: 1; min-width: 0; padding: 7px 9px; } .qform button { background: #a56cff; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } .qnote { padding: 0 12px 8px; font-size: 12px; color: #8a8aa5; } .qnote[hidden] { display: none; } .qmine { margin: 0 12px 8px; padding: 7px 10px; background: #a56cff22; border: 1px solid #a56cff66; border-radius: 8px; font-size: 13px; } .qmine-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .qmine-top small { color: #c8b2ff; font-size: 12px; text-align: right; } .qmine-track { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; } /* Fair Queue (2026-09-25): Liste eigener Songs statt nur einem Titel */ .qmine-item { display: flex; align-items: center; gap: 4px; } .qmine-item.replacing { background: #ffffff14; border-radius: 6px; } .qmine-item .qmine-pos { color: #c8b2ff; font-size: 12px; flex: none; } .qmine-item .qmine-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8d8ec; } .qmine-item button { background: none; color: #c8b2ff; padding: 0 3px; font-size: 12px; } .qmine-item button:hover { color: #fff; } .qmine-item button:disabled { opacity: .35; } #qlist { overflow-y: auto; font-size: 13px; } #qlist li.me { background: #a56cff22; box-shadow: inset 3px 0 #a56cff; } #qlist li.me small:first-child { color: #c8b2ff; font-weight: 700; } #qlist li { display: flex; gap: 8px; align-items: center; padding: 7px 12px; border-top: 1px solid #1e1e2e; } #qlist li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #qlist li small { color: #7a7a95; flex: none; } #qlist li button { background: none; color: #7a7a95; padding: 0 4px; } #qlist li button:hover { color: #fff; } #qlist li.empty { display: block; color: #7a7a95; } #qlist li.now { background: #a56cff22; } /* Song-Leiste */ .bar { height: 56px; flex: none; display: flex; align-items: center; background: #0d0d16; border-top: 1px solid #23233a; } .bar .list { flex: none; width: 48px; height: 100%; background: #a56cff; font-size: 20px; } .bar .song { flex: 1; min-width: 0; padding: 0 14px; } .bar .song b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar .song small { display: block; color: #7a7a95; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reacts { display: flex; gap: 2px; } .reacts button, .bar .tool { background: none; font-size: 20px; width: 40px; height: 40px; border-radius: 8px; } .reacts button:hover, .bar .tool:hover { background: #ffffff18; } .reacts button:active { transform: scale(1.25); } .djfxbar { display: flex; gap: 2px; padding-left: 6px; border-left: 1px solid #ffffff1f; margin-left: 4px; } .djfxbar button { background: #a56cff22; font-size: 20px; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #a56cff55; } .djfxbar button:hover { background: #a56cff3a; } .djfxbar button:active { transform: scale(1.15); } .djfxbar button:disabled { opacity: .4; cursor: not-allowed; } /* Core Recovery (2026-10-01), CORE-07: die Ability-Knoepfe lasen sich bislang wie Emoji-Emotes (πŸŽ‰πŸ”ΊπŸ’¨πŸŒŸπŸ’‘), nicht wie Faehigkeiten. Reine CSS-Symbole statt Emoji, Groesse in em -> skaliert automatisch mit der Knopf-Schriftgroesse (siehe die responsive .djfxbar-Regel weiter unten, kein zusaetzlicher Media-Query-Code noetig). */ .abicon { display: inline-block; position: relative; width: 1em; height: 1em; } .ab-confetti { background: #ffd23f; width: .34em; height: .46em; border-radius: 1px; transform: rotate(-12deg) translate(-.1em, .1em); } .ab-confetti::before, .ab-confetti::after { content: ""; position: absolute; width: .3em; height: .4em; border-radius: 50%; } .ab-confetti::before { background: #ff2fa0; left: .5em; top: -.14em; border-radius: 1px; transform: rotate(18deg); } .ab-confetti::after { background: #4d9dff; left: -.46em; top: .22em; transform: rotate(-10deg); } .ab-laser { background: linear-gradient(125deg, transparent 40%, #ff2fa0 47%, #fff 50%, #ff2fa0 53%, transparent 60%); } .ab-smoke { background: radial-gradient(circle at 36% 62%, #cfd3dd 0 .34em, transparent .35em), radial-gradient(circle at 62% 38%, #9aa0b5 0 .28em, transparent .29em); filter: blur(.5px); } .ab-lights { background: linear-gradient(#fff6c8, #ffd23f55); clip-path: polygon(44% 0, 56% 0, 86% 100%, 14% 100%); } .ab-sparkle { background: radial-gradient(circle, #fff 0 .07em, transparent .08em) 15% 15% / .32em .32em no-repeat, radial-gradient(circle, #fff 0 .07em, transparent .08em) 65% 45% / .32em .32em no-repeat, radial-gradient(circle, #fff 0 .07em, transparent .08em) 30% 78% / .32em .32em no-repeat, radial-gradient(circle, #ffd23f 0 .09em, transparent .1em) 78% 85% / .32em .32em no-repeat; } .bar .tool.on { background: #a56cff; } /* Volume/Mute V1: nur der eigene Player, nie der Raumzustand (siehe js/player.js setVolume/setMuted) */ .vol { flex: none; display: flex; align-items: center; gap: 2px; padding-right: 4px; } .vol input[type=range] { width: 72px; accent-color: #a56cff; cursor: pointer; } .bar .tool.attn { animation: pulse 1s ease-in-out infinite alternate; background: #c98a1b; } @keyframes pulse { to { transform: scale(1.15); } } /* Chat */ .chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #181822; border-left: 1px solid #2a2a3c; } .tabs { flex: none; display: flex; background: #10101a; border-bottom: 1px solid #2a2a3c; } .tabs button { flex: 1; padding: 10px 6px; background: none; font-size: 13px; color: #8a8aa5; border-bottom: 2px solid transparent; } .tabs button.on { color: #fff; border-bottom-color: #a56cff; } .tabs span { background: #2a2a3c; border-radius: 8px; padding: 0 6px; font-size: 11px; } .pane { flex: 1; min-height: 0; display: flex; flex-direction: column; } #messages { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 13px; } #messages .m { margin-bottom: 7px; word-wrap: break-word; position: relative; padding-right: 32px; } #messages .m b { color: #a99bff; cursor: pointer; } #messages .m.own b { color: #7bd0a0; } #messages .m time { color: #5e5e78; font-size: 10px; margin-right: 4px; } #messages .m .del, #messages .m .report { position: absolute; top: 0; background: none; color: #7a7a95; font-size: 11px; display: none; } #messages .m .del { right: 0; } #messages .m .report { right: 16px; } #messages .m:hover .del, #messages .m:hover .report { display: block; } #messages .sys { color: #7a7a95; font-size: 12px; margin-bottom: 6px; } #typing { height: 18px; flex: none; padding: 0 12px; font-size: 11px; color: #8a8aa5; font-style: italic; } #chatNote { flex: none; padding: 8px 12px; font-size: 12px; background: #2a2a3c; color: #c8c8e0; text-align: center; } #form { display: flex; flex: none; border-top: 1px solid #2a2a3c; } #form input { flex: 1; min-width: 0; padding: 12px; border: 0; border-radius: 0; background: #0f0f18; } #form button { background: #a56cff; padding: 0 14px; } #panePeople { overflow-y: auto; } #people li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #1e1e2e; } #people li:hover { background: #ffffff0d; } #people li span.n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #people li .ico { font-size: 12px; flex: none; } #people li.me span.n { color: #7bd0a0; } #people .hd { padding: 8px 12px; font-size: 11px; color: #7a7a95; text-transform: uppercase; letter-spacing: .5px; cursor: default; } #people .hd:hover { background: none; } /* Sprechblasen + Zuhoer-Modus (im Szenen-Avatar) */ .bub { position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); z-index: var(--z-character-fx); pointer-events: none; white-space: nowrap; background: #fff; color: #15151f; padding: .3em .7em; border-radius: .7em; font: 600 1.15em/1.2 system-ui; box-shadow: 0 .2em .6em #0006; } .av.listening { opacity: .45; } /* ================= Popover ================= */ .popover { position: fixed; z-index: 60; min-width: 210px; max-width: 260px; background: #1e1e2e; border: 1px solid #33334f; border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px #000a; display: flex; flex-direction: column; gap: 2px; } .popover .ph { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid #2a2a3c; margin-bottom: 4px; } .popover .ph small { color: #8a8aa5; } .popover .ph.phrow { flex-direction: row; align-items: center; gap: 10px; } .popover .phav { flex: none; width: 42px; height: 42px; overflow: hidden; font-size: 4.9px; border-radius: 50%; background: #10101a; display: block; } .popover .phav .av { position: relative; left: 0; bottom: 0; transform: none; animation: none; } .popover .phav .cv * { animation: none !important; } .popover .phtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .popover button { background: none; text-align: left; padding: 7px 8px; border-radius: 6px; font-size: 13px; } .popover button:hover { background: #33334f; } @media (pointer: coarse), (max-width: 700px) { .popover button { min-height: 44px; padding: 10px 10px; font-size: 14px; } .popover { max-width: min(300px, 94vw); } } /* Handy: Moderations-/Personenmenue mit grossen Touch-Zielen */ .popover button.danger { color: #ff8a8a; } /* ================= Dialoge ================= */ .modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #000b; } .dialog { width: min(440px, 92vw); max-height: 92vh; overflow: auto; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; } .dialog h2 { font-size: 20px; } .dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-secondary); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .profiles { display: flex; flex-direction: column; gap: 6px; } .profiles button { display: flex; align-items: center; gap: 8px; background: #23233a; padding: 8px 12px; border-radius: 8px; text-align: left; } .profiles button:hover { background: #33334f; } .profiles small { color: #8a8aa5; margin-bottom: 2px; } .avpick { display: flex; gap: 14px; align-items: center; } /* XP / Level: klein und ruhig */ .xpbox { display: flex; flex-direction: column; gap: 6px; background: #1b1b2a; border-radius: 10px; padding: 10px 12px; } .xpbox[hidden] { display: none; } .profoption { display: flex; flex-direction: column; gap: 8px; background: #1b1b2a; border-radius: 10px; padding: 10px 12px; } .profoption[hidden] { display: none; } .poprow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .poprow small { color: #a9a4d0; } .captchabox { display: flex; justify-content: center; } .captchabox[hidden] { display: none; } .xprow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .xprow b { font-size: 15px; } .xprow small { color: #a9a4d0; font-variant-numeric: tabular-nums; } .coinrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .coinrow b { font-size: 15px; font-variant-numeric: tabular-nums; } .coinrow small { color: #a9a4d0; } .chipuser .coinpill { font-size: 10.5px; font-weight: 700; color: #ffe08a; background: #ffb70026; border: 1px solid #ffb70066; border-radius: 9px; padding: 0 6px; margin-left: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; } .bump { animation: coinbump .9s ease-out; } @keyframes coinbump { 0% { filter: brightness(1.9); transform: scale(1.12); } 100% { filter: none; transform: none; } } @media (prefers-reduced-motion: reduce) { .bump { animation: none; } } .xpbar { height: 8px; border-radius: 5px; background: #0d0d16; overflow: hidden; } .xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c5cff, #4fd1c5); border-radius: 5px; transition: width .5s ease; } .xphint { color: #7a7a95; font-size: 11px; line-height: 1.3; } .chipuser .lvl { font-size: 10.5px; font-weight: 700; color: #cfc8ff; background: #7c5cff33; border: 1px solid #7c5cff66; border-radius: 9px; padding: 0 6px; margin-left: 2px; } .toast.levelup { background: linear-gradient(90deg, #5b3fd6, #2aa79b); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 18px; box-shadow: 0 6px 24px #7c5cff66; animation: lvlpop .5s ease-out; } @keyframes lvlpop { from { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.06); } to { transform: none; opacity: 1; } } .avopts b { font-size: 15px; } .avopts small { color: #8a8aa5; font-size: 12px; margin-top: -4px; } .avprev { flex: none; width: 104px; height: 124px; font-size: 12px; isolation: isolate; background: #10101a; border-radius: 10px; display: grid; place-items: end center; padding-bottom: 6px; } .avprev .av { position: relative; left: auto; bottom: auto; transform: none; } .avopts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; } /* Mein Character */ .dialog.charedit { width: min(560px, 96vw); max-height: 94vh; gap: 10px; } .cebody { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; padding-right: 2px; } .cebody h3 { font-size: 13px; color: #b9a8ff; font-weight: 600; margin-bottom: 8px; } .cebody h3 small { color: #7a7a95; font-weight: 400; } .cepreview { display: flex; flex-direction: column; gap: 14px; } /* Handy: nur ein Wrapper, Reihenfolge/Abstand unveraendert */ .ceoptions { display: flex; flex-direction: column; gap: 14px; } .cestage { position: relative; height: 250px; flex: none; border-radius: 14px; overflow: hidden; font-size: 24px; display: grid; place-items: end center; padding-bottom: 14px; background: radial-gradient(60% 50% at 50% 30%, #4b2f9a88, transparent), linear-gradient(#150f3a 0 62%, #3a1a3f 62%); } .cestage .av { position: relative; left: auto; bottom: auto; transform: none; animation: none; cursor: pointer; } .cestage::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 8px; height: 10px; border-radius: 50%; background: #0006; z-index: 0; } .ceanims { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .ceanims .chip { background: #23233a; color: #dcd8ff; font-size: 13px; padding: 8px 12px; border-radius: 16px; min-height: 36px; } .ceanims .chip:hover { background: #33334f; } .cetiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cetile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; min-height: 130px; background: #1f1f2e; border: 2px solid transparent; border-radius: 12px; text-align: center; } .cetile:hover { background: #2a2a40; } .cetile.on { border-color: #7c5cff; background: #2a2450; } .cetile b { font-size: 13px; } .cetile small { font-size: 10.5px; color: #8a8aa5; line-height: 1.2; } .cemini { height: 62px; font-size: 6.6px; display: grid; place-items: end center; } .cemini .av { position: relative; left: auto; bottom: auto; transform: none; animation: none; cursor: pointer; pointer-events: none; } .cetile .rar { margin-top: auto; font-size: 10px; padding: 1px 8px; border-radius: 9px; background: color-mix(in srgb, var(--rc) 25%, transparent); color: var(--rc); border: 1px solid var(--rc); } .ceinfo { font-size: 12px; color: #a9a4d0; min-height: 32px; margin: -2px 0 8px; line-height: 1.35; } .ceslot { margin-bottom: 12px; } .ceslot h4 { font-size: 12px; color: #8a86b0; font-weight: 600; margin: 0 0 6px; text-transform: none; } .cetiles.iv { grid-template-columns: repeat(3, 1fr); } .cetile.ivtile { min-height: 118px; padding: 6px 4px 8px; } .cetile.ivtile b { font-size: 12px; } .cetile.ivtile.none b { color: #8a8aa5; font-weight: 600; } .cetile .ck { position: absolute; top: 5px; right: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: #fff; background: #7c5cff; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; } .ceswatches { display: flex; flex-wrap: wrap; gap: 10px; } .ceswatches .sw { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 3px solid transparent; box-shadow: inset 0 0 0 1px #0006; padding: 0; position: relative; } .ceswatches .sw:hover { transform: scale(1.08); } .ceswatches .sw.on { border-color: #fff; box-shadow: 0 0 0 2px #7c5cff; } .ceswatches .sw.std::after { content: "Std"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px system-ui; color: #0009; } @media (max-width: 700px) { .cestage { height: 210px; font-size: 20px; } .cetile { min-height: 124px; } .ceswatches { gap: 12px; } .ceswatches .sw { width: 44px; height: 44px; } } /* Desktop-UX (PRELAUNCH_CHECKLIST B7): auf breiten Bildschirmen blieb der Dialog auf Handy-Breite eingefroren, die 3er-Kachelraster wirkten winzig. */ @media (min-width: 900px) { .dialog.charedit { width: min(760px, 90vw); } .cetiles, .cetiles.iv { grid-template-columns: repeat(4, 1fr); } } /* Desktop-UX (echtes Nutzerfeedback, 2026-09-25): Preview oben, Auswahl darunter zwang zu staendigem Hoch-/Runterscrollen (Item waehlen -> hoch scrollen -> Vorschau pruefen -> wieder runter). Ab 900px echtes Zweispaltenlayout: Vorschau bleibt links stehen (position: sticky, bleibt beim Scrollen der rechten Spalte sichtbar), nur die Auswahllisten scrollen. Handy unveraendert (siehe .cepreview/.ceoptions oben: dort nur einfache Wrapper ohne eigenes Layout). */ @media (min-width: 900px) { .dialog.charedit { width: min(980px, 94vw); } .cebody { display: grid; grid-template-columns: 300px 1fr; align-items: start; gap: 24px; } .cepreview { position: sticky; top: 0; } .cestage { height: 320px; } } .rwbox { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #ffffff14; padding-top: 8px; } .rwbox[hidden] { display: none; } .rwbox b { font-size: 13px; } .rwbox ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .rwbox li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #cfcbe8; flex-wrap: wrap; } .rwbox li em { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; } .rwbox li.own em { color: #7fe0b0; } .rwbox li.lock em { color: #a9a4d0; } .shhint { color: #b9a8ff; font-size: 12px; } /* Shop */ .dialog.shopdlg { width: min(520px, 96vw); max-height: 94vh; gap: 10px; } .shbody { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; } .shbal { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; background: var(--bg-panel-alt); border-radius: var(--radius-md); padding: 10px 12px; } .shbal span { color: var(--text-secondary); font-size: 13px; } .shbal b { font-size: 20px; color: #ffe08a; font-variant-numeric: tabular-nums; } /* Anprobieren (SSSS Phase 7): grosse Buehne ZUSAETZLICH zur kleinen, bewusst isolierten Karten-Vorschau (.shprev zeigt nur das eine Item, ohne die eigene Ausruestung, damit nichts es verdeckt) -- hier sieht man das Item dagegen MIT der eigenen echten Ausruestung kombiniert, ohne dass beim Kauf etwas gespeichert wird. */ .shtry { display: flex; gap: 12px; align-items: center; background: var(--bg-panel-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 10px; } .shtrystage { flex: none; width: 92px; height: 112px; font-size: 11px; display: grid; place-items: end center; padding-bottom: 6px; border-radius: var(--radius-md); overflow: hidden; background: radial-gradient(70% 55% at 50% 30%, #4b2f9a88, transparent), linear-gradient(#150f3a 0 66%, #3a1a3f 66%); } .shtrystage .av { position: relative; left: auto; bottom: auto; transform: none; } .shtryinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .shtryinfo b { font-size: 14px; } .shtryinfo small { color: var(--text-secondary); font-size: 12px; } .shtryinfo .btn { align-self: flex-start; padding: 5px 10px; font-size: 12px; margin-top: 2px; } .shtrybtn { flex: none; font-size: 16px; padding: 6px 9px; min-height: 40px; } .shtabs { display: flex; gap: 8px; flex-wrap: wrap; } .shtabs button { background: var(--bg-panel-alt); padding: 6px 14px; border-radius: 20px; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .shtabs button.on { background: var(--accent); color: #fff; } .shtabs button .soon { background: #ffffff22; color: #d8d8ec; font-size: 10px; padding: 1px 6px; border-radius: 8px; } .shtabs button.on .soon { background: #ffffff33; } .shgrid { display: flex; flex-direction: column; gap: 10px; } .shcard { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; background: var(--bg-panel-alt); border: 2px solid transparent; border-radius: var(--radius-lg); padding: 10px; } .shcard.own { border-color: #2f7d5b55; } .shprev { grid-row: 1 / span 2; height: 132px; font-size: 12.5px; display: grid; place-items: end center; padding-bottom: 8px; border-radius: 10px; overflow: hidden; background: radial-gradient(70% 55% at 50% 30%, #4b2f9a88, transparent), linear-gradient(#150f3a 0 66%, #3a1a3f 66%); } .shprev .av { position: relative; left: auto; bottom: auto; transform: none; animation: none; } /* Raum-Deko-Vorschau (SSSS Phase 8): echtes SVG statt Character, braucht eine eigene Box-Groesse statt der Figuren-Groesse (.av width/height in em, characters.css) -- dieselbe Zeichnung wie im Raum, nur groesser gezeigt. */ .shprev-icon { place-items: center; padding-bottom: 0; } .shprev-icon span { width: 84px; height: 84px; display: block; filter: drop-shadow(0 4px 8px #00000066); } .shprev-icon span svg { width: 100%; height: 100%; display: block; } /* CSS statt der SVG-eigenen width/height="100%"-Attribute, siehe js/app.js svgNode()-Kommentar */ .shmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shmeta b { font-size: 16px; } .shmeta small { font-size: 12px; color: #a9a4d0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .shmeta .rar { font-size: 10.5px; padding: 1px 8px; border-radius: 9px; background: color-mix(in srgb, var(--rc) 25%, transparent); color: var(--rc); border: 1px solid var(--rc); } .shdesc { font-size: 12.5px; color: #cfcbe8; line-height: 1.35; margin: 2px 0 0; overflow-wrap: anywhere; } .shbuy { display: flex; align-items: center; gap: 10px; min-width: 0; } .shprice { font-size: 20px; font-weight: 800; color: #ffe08a; white-space: nowrap; font-variant-numeric: tabular-nums; } .shbtn { flex: 1; min-height: 48px; font-size: 15px; font-weight: 700; } .shbtn:disabled { opacity: 1; cursor: default; } .shbtn.own { background: #1d3a2e; color: #7fe0b0; border-color: #2f7d5b; } .shbtn.poor { background: #2a2333; color: #b7a5c9; border-color: #4a3a5c; } .shbtn { min-width: 0; white-space: normal; line-height: 1.15; } @media (max-width: 480px) { .shcard { grid-template-columns: 96px minmax(0, 1fr); } .shprev { height: 120px; font-size: 11px; } .shbuy { flex-direction: column; align-items: stretch; gap: 4px; } .shbtn { flex: none; width: 100%; } .shprice { text-align: left; font-size: 18px; } } /* Desktop-UX (PRELAUNCH_CHECKLIST B7): Items standen auch auf breiten Bildschirmen einspaltig untereinander statt die Breite zu nutzen. */ @media (min-width: 760px) { .dialog.shopdlg { width: min(880px, 94vw); } .shgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } } .swatches { display: flex; gap: 6px; flex-wrap: wrap; } .oauth { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7a7a95; justify-content: center; } .oauth .btn { padding: 6px 12px; font-size: 12px; opacity: .6; } @media (max-width: 700px) { .lobbybar { position: static; } /* hohe Leiste (mehrere Zeilen) soll auf dem Handy nicht dauerhaft Platz wegnehmen */ .hero { padding: 16px 16px 4px; } .hero .btn.big { width: 100%; } #room { grid-template-columns: 1fr; grid-template-rows: 62% 38%; } .reacts { display: none; } /* SSSS Gameplay Core (2026-09-30), Phase I: WAR "display:none" -- exakt der vom Audit benannte Fehler ("aktiver DJ bekommt auf dem Handy gar keine Ability-Bar zu sehen"). Bleibt jetzt sichtbar, nur kompakter (kleinere Knoepfe, kein verschwendeter Rand) statt komplett zu verschwinden; faellt bei >5 besessenen Effekten auf horizontales Scrollen zurueck statt die Zeile zu sprengen. */ .djfxbar { display: flex; max-width: 34vw; overflow-x: auto; gap: 1px; padding-left: 4px; margin-left: 2px; } .djfxbar button { width: 30px; height: 30px; font-size: 15px; } .vol input[type=range] { display: none; } /* Mute-Knopf bleibt, der Regler braucht auf dem Handy zu viel Platz */ } /* Startfehler: Server nicht erreichbar (statt faelschlich Login zu zeigen) */ .boot-error { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: #12121c; } .boot-error p { color: #9a9ab5; font-size: 14px; max-width: 46ch; } .boot-error .muted { font-size: 12px; opacity: .7; } /* ---------- Admin/Moderator Dashboard V1 (022_admin_dashboard.sql): eigenes, desktop-first Panel; sichtbar ist reine Bequemlichkeit -- die Sicherheitsgrenze ist jedes admin_*-RPC selbst (siehe js/admin.js Kopf-Kommentar). ---------- */ .btn.danger { background: #7a2e2e; color: #ffd9d9; } .dialog.admindlg { width: min(560px, 96vw); max-height: 92vh; gap: 10px; } @media (min-width: 900px) { .dialog.admindlg { width: min(880px, 92vw); } } @media (min-width: 1200px) { .dialog.admindlg { width: min(1080px, 88vw); } } .admindlg .mhead .chip { margin-left: -4px; } .adtabs { display: flex; gap: 8px; flex-wrap: wrap; } .adtabs button { background: #1e1e2e; padding: 6px 14px; border-radius: 20px; font-size: 13px; color: #b8b8d0; } .adtabs button.on { background: #a56cff; color: #fff; } .adtabs.sub button { padding: 4px 10px; font-size: 12px; } .adbody { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 72vh; } .adgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 700px) { .adgrid { grid-template-columns: repeat(4, 1fr); } } .adcard { background: #1b1b2a; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; } .adcard b { font-size: 22px; font-variant-numeric: tabular-nums; } .adcard small { color: #a9a4d0; font-size: 11px; } .adsearch { display: flex; gap: 8px; } .adsearch input { flex: 1; min-width: 0; } .adlist { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; } .adrow { background: #1f1f2e; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; } .adrow:hover { background: #2a2a40; } .adrow.noclick { cursor: default; } .adrow-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .adrow-sub { color: #b8b8d0; font-size: 12px; } .adrow small.muted, .addetail small.muted, .adcard small.muted { color: #7a7a95; font-size: 11px; } .adtag { background: #ffffff1c; padding: 1px 8px; border-radius: 10px; font-size: 10px; color: #d8d8ec; } .adtag.on { background: #2e9e5b55; color: #b6f0cd; } .adtag.role { background: #a56cff55; color: #e6d6ff; } .adbadges { display: inline-flex; gap: 4px; } .addetail { background: #17172277; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .adkv { border-collapse: collapse; font-size: 13px; } .adkv td { padding: 3px 10px 3px 0; color: #b8b8d0; } .adkv td:first-child { color: #8a8aa5; } .adforms { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 700px) { .adforms { flex-direction: row; } .adform { flex: 1; } } .adform { display: flex; flex-direction: column; gap: 6px; background: #1b1b2a; border-radius: 10px; padding: 10px; } .adform input { width: 100%; } /* ---------- Auth UX (2026-10-10): Willkommen = Wahl Gast / Anmelden / Registrieren; Hinweise; Bestaetigung ausstehend ---------- */ .authchoose { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .authchoose[hidden], .authnote[hidden], #pAuthBack[hidden] { display: none; } .authchoose .btn { min-height: 46px; font-size: 16px; font-weight: 700; } .authnote { background: #3a2230; border: 1px solid #7a3a52; color: #ffd9e4; border-radius: 10px; padding: 10px 12px; margin: 0; font-size: 14px; } .authnote.info { background: #1d2b3a; border-color: #35607f; color: #cfe6ff; } .profoption.pending { border: 1px solid #7a6a2a; background: #2a2616; } .profoption.pending b { color: #ffe08a; } #pAuthBack { align-self: flex-start; } .authchoose .btn.ghost { background: #26263d; border: 1px solid #6b5aa8; }