/* ===========================================================================
DragonMaster Online — App stylesheet (Symfony + Turbo)
Tokens + components + screens, translated from the Design-System kit.
Dark-mode default, mobile-first PWA.
=========================================================================== */
@import url("tokens/fonts-jyUlPDF.css");
@import url("tokens/colors-l8o4mEe.css");
@import url("tokens/typography-BsPINlk.css");
@import url("tokens/spacing-mvXz46Z.css");
@import url("tokens/effects-MnuuL8q.css");
@import url("tokens/textures-0WDzQH5.css"); /* 60 echte UI-Sprites als --ui-* Tokens */
@import url("components-Mny9-_n.css"); /* kanonische Component-Library (dmo-*) */
/* --- Reduced Motion: ein Netz für ALLES ------------------------------------
Vorher gab es 11 einzelne @media-(prefers-reduced-motion)-Regeln — bei ~35 dauerhaft
laufenden `infinite`-Animationen. Ungedeckt blieben u. a. der Niedrig-HP-Warnpuls
(hud-low), der komplette Levelup-Burst (6,4 s), egg-pulse, bk-egg-breathe, orb-pulse,
moment-pulse, chatFlash. Jede neue Animation war automatisch wieder ungedeckt.
Deshalb hier EINE Deckungsregel; die spezifischeren Blöcke weiter unten bleiben gültig.
Ausgenommen: Lade-Indikatoren — ein stehender Spinner sieht aus wie ein Absturz. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.spinner, .chat-spin, .chat-tr-loading i, .ptr-fab.refreshing .ptr-spin i,
.dmo-btn.is-pending::after, .dmo-iconbtn.is-pending::after {
animation-duration: 1.6s !important;
animation-iteration-count: infinite !important;
}
}
/* Dasselbe als APP-Schalter (Optionen → Bewegung). Eine Medienabfrage laesst sich nicht mit
einem Selektor verodern, deshalb steht der Block zweimal. Wer das System nicht umstellen
will oder kann (geteiltes Geraet, Web-Kiosk), bekommt die Ruhe trotzdem. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
:root[data-motion="reduce"] .spinner, :root[data-motion="reduce"] .chat-spin,
:root[data-motion="reduce"] .chat-tr-loading i, :root[data-motion="reduce"] .ptr-fab.refreshing .ptr-spin i,
:root[data-motion="reduce"] .dmo-btn.is-pending::after, :root[data-motion="reduce"] .dmo-iconbtn.is-pending::after {
animation-duration: 1.6s !important;
animation-iteration-count: infinite !important;
}
/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
background: var(--grad-cave) fixed;
font-family: var(--font-body);
font-size: var(--text-md); /* fluide Basis (Web-clamp) — auch Bezug für em-basierte Icons */
color: var(--text);
-webkit-font-smoothing: antialiased;
}
/* `height: auto` ist das Gegenstueck zu den width/height-Attributen im Markup: Diese sind
PRAESENTATIONS-HINWEISE und wirken wie CSS mit Spezifitaet 0. Setzt eine Klasse nur die
Breite (z. B. `.login__logo { width: 86% }`), bleibt der Hoehen-Hinweis stehen — das Logo
wurde dadurch 281x1024 statt quadratisch. Umgekehrt genauso: Setzt die Klasse nur die Hoehe
(`.resource-bar .brand img { height: 32px }`), verzerrte der Breiten-Hinweis das Kopf-Logo
auf 70x32. Beide auf `auto` (Spezifitaet 0,0,1) neutralisiert die Hinweise fuer die GROESSE,
waehrend das Seitenverhaeltnis aus den Attributen erhalten bleibt — genau dafuer sind sie da.
Jede Klassenregel gewinnt weiterhin. */
img { display: block; max-width: 100%; width: auto; height: auto; }
button { font-family: inherit; }
a { color: var(--link); text-decoration: none; }
.tnum { font-variant-numeric: tabular-nums; }
/* --- App shell (mobile PWA) ---------------------------------------------- */
.app {
width: 100%;
max-width: var(--app-max);
min-height: 100vh;
min-height: 100dvh;
margin: 0 auto;
background: var(--bg);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 0 60px rgba(0,0,0,.5);
}
.app-main { flex: 1; overflow-x: hidden; }
.scroll-area { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
/* --- Resource bar (app header) ------------------------------------------- */
.resource-bar {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between;
height: var(--header-h); padding: 0 14px; flex: none;
background: linear-gradient(180deg, var(--stone-850), var(--stone-900));
border-bottom: 1px solid var(--border-strong);
}
/* Statuszeile direkt unter dem Res-Band: klebt an dessen Unterkante, damit die laufende
Tätigkeit auf JEDEM Screen sichtbar bleibt und nicht mit dem Inhalt wegscrollt. */
.hud-aktion {
position: sticky; top: var(--header-h); z-index: 19; flex: none;
display: flex; align-items: center; gap: 8px; min-width: 0;
padding: 5px 14px; text-decoration: none;
background: linear-gradient(180deg, var(--stone-900), var(--stone-850));
border-bottom: 1px solid var(--border);
font-size: var(--text-xs); color: var(--text-muted);
}
.hud-aktion__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hud-aktion__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.hud-aktion__mehr {
flex: none; padding: 0 6px; border-radius: var(--radius-pill);
background: var(--surface-sunken); font-size: var(--text-3xs);
}
.hud-aktion__zeit { flex: none; font-variant-numeric: tabular-nums; color: var(--gold-300); }
.resource-bar .brand { display: flex; align-items: center; gap: 8px; }
.resource-bar .brand img { height: 32px; filter: drop-shadow(0 2px 6px rgba(255,102,0,.4)); }
.resource-bar .brand .mark {
font-family: var(--font-display); font-weight: 900; font-size: var(--text-md);
color: var(--ember-500); line-height: 1;
}
.resource-bar .brand .brand-mark { color: var(--ember-500); font-size: 22px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255,102,0,.6)); }
.resource-bar .res { display: flex; align-items: center; gap: 10px; min-width: 0; }
.res-item {
display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-sm); color: var(--text);
}
.res-item .glyph { font-size: 15px; }
/* Welt-Drachen-Vitals als Medaillons direkt im Res-Band (neben Gold). */
.res-vitals { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.res-vitals .dmo-gauge { display: block; }
.res-vnum { display: inline-flex; align-items: center; gap: 4px; }
.res-vnum b { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-sm); }
.res-vnum__hp { color: var(--heal-400); }
.res-vnum__en { color: var(--ember-300); }
/* Schmale Phones (≤400px): Res-Band drängte über die Viewport-Breite (Optionen-Icon
ragte ~39px raus → horizontaler Scroll). Gaps/Padding straffen, damit alles reinpasst. */
@media (max-width: 480px) {
/* Die Sprung-Suche ist eine TASTATUR-Geste (Cmd+K). Auf dem Handy gibt es keine
Tastatur, der Knopf kostete dort aber 28 px in einer Leiste, die ohnehin zu breit
ist — gemessen: mit Lupe 457 px Inhalt bei 390 px Viewport, ohne 429 px.
Erreichbar bleibt die Suche ueber die Navigation. */
.resource-bar [data-action="sprung#oeffnen"] { display: none; }
}
@media (max-width: 400px) {
.resource-bar { padding: 0 4px; }
.resource-bar .res { gap: 2px; }
.resource-bar .res-vitals .dmo-gauge { width: 30px; height: 30px; }
.res-vitals { gap: 4px; }
.res-vnum { gap: 2px; }
.res-item { gap: 3px; }
}
/* Phones (≤430px): Vitals nur als Gauge-Medaillon — Gauges + Icons bleiben voll groß
(Tap-Targets), die Ziffern gibt's auf dem Drachen-Screen.
Die Regel galt bis 2026-08-06 nur ≤360px und liess damit genau die Luecke offen, in der
die MEISTEN Handys liegen: Gemessen brauchte die Leiste 398px, also scrollte die App bei
375px um 20px und bei 390px um 8px seitlich — bei 360px dagegen nie, weil dort die Regel
griff. Mit ihr bleiben selbst bei 123.456.789 Gold noch 9px Reserve. */
@media (max-width: 430px) {
.resource-bar .res-vnum b { display: none; }
}
/* Nick-Autocomplete-Dropdown (Gilden-/Chat-Einladung). */
.ac-list { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; inset-inline-end: 0; z-index: 30; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.ac-item { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: start; padding: 8px 12px; background: none; border: none; color: var(--text); cursor: pointer; font-size: var(--text-sm); }
.ac-item:hover { background: var(--surface-hover); }
.ac-lvl { color: var(--text-dim); font-size: var(--text-2xs); }
/* Wetten/Showkampf-Hauptkampf-Banner: volle-Breite-Artwork, höher auf Web. */
.wett-hero { min-height: 160px; }
@media (min-width: 980px) { .wett-hero { min-height: 300px; } }
/* Buttons · Icon-Buttons · Cards: kanonisch in components.css (.dmo-btn / .dmo-iconbtn / .dmo-card).
Alt-Set (.btn/.icon-btn/.card) in Welle 1 entfernt — eine Quelle, keine Doppelpflege. */
/* --- Badge ---------------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
padding: 3px 9px; border-radius: var(--radius-pill);
font-size: var(--text-xs); font-weight: 700; line-height: 1;
background: var(--surface-hover); color: var(--text-muted); border: 1px solid var(--border);
}
.badge--sm { padding: 2px 7px; font-size: var(--text-2xs); }
.badge--gold { background: var(--grad-gold); color: var(--stone-950); border-color: var(--gold-500); }
.badge--neutral{ background: var(--surface-hover); color: var(--text-muted); }
.badge--eis { background: var(--eis-soft); color: var(--eis-500); border-color: var(--eis-700); }
/* heal/blood/ember werden von den Enum-Tönen (TradeStatus u.a.) und direkt im Markup benutzt,
fehlten hier aber — ein angenommener Handel fiel damit auf die graue Basis zurück und war
nicht von "abgelehnt/storniert/verfallen" zu unterscheiden. Werte identisch zu .dmo-badge--*. */
.badge--heal { background: var(--heal-soft); color: var(--heal-400); border-color: var(--heal-500); }
.badge--blood { background: var(--blood-500); color: var(--stone-100); border-color: var(--blood-600); }
.badge--ember { background: var(--ember-600); color: var(--stone-950); border-color: var(--ember-700); }
/* Collab-Monitoring: fremder vs. eigener Drache in einer Gruppe. */
.badge--fremd { background: var(--elektro-900); color: var(--elektro-200); border-color: var(--elektro-600); }
.badge--eigen { background: var(--surface-raised); }
/* --- StatBar -------------------------------------------------------------- */
.statbar { display: flex; flex-direction: column; gap: 4px; }
.statbar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.statbar__label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.statbar__val { font-size: var(--text-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight: 700; }
.statbar__track {
position: relative; height: 9px; border-radius: var(--radius-pill);
background: var(--surface-sunken); overflow: hidden; box-shadow: var(--shadow-inset);
}
.statbar--md .statbar__track { height: 12px; }
.statbar__fill {
position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill);
background: var(--bar-tone, var(--ember-500));
box-shadow: 0 0 8px var(--bar-glow, rgba(255,102,0,.4));
transition: width var(--dur-slow) var(--ease-out);
}
/* Framed = echte bronzene Sprite-Leiste (DS StatBar variant=framed):
3-slice border-image-Track + lava/gold/eis/erde-Flüssigkeit als Füllung. */
.statbar--framed .statbar__track {
height: 22px; border-radius: 0; background: transparent; overflow: hidden;
border-style: solid; border-color: transparent; border-width: 5px 18px;
border-image-source: var(--ui-stat-track);
border-image-slice: 20 78 fill; border-image-width: 5px 18px; border-image-repeat: stretch;
box-shadow: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.statbar--md.statbar--framed .statbar__track { height: 26px; border-width: 6px 22px; border-image-width: 6px 22px; }
.statbar--framed .statbar__fill {
border-radius: 1px; box-shadow: none;
background: var(--bar-fill, var(--ui-fill-feuer)); background-size: auto 100%; background-repeat: repeat-x;
}
.statbar--framed .statbar__fill.tone-hp,
.statbar--framed .statbar__fill.tone-feuer { --bar-fill: var(--ui-fill-feuer); }
.statbar--framed .statbar__fill.tone-gold,
.statbar--framed .statbar__fill.tone-elektro { --bar-fill: var(--ui-fill-gold); }
.statbar--framed .statbar__fill.tone-eis { --bar-fill: var(--ui-fill-eis); }
.statbar--framed .statbar__fill.tone-erde { --bar-fill: var(--ui-fill-erde); }
/* .tone-* (Bar-Töne) kanonisch in components.css — alt-Dup hier in Welle 1 entfernt. */
/* Attribut-Trainingsliste: füllt breite Karten (Web) adaptiv statt links zu huddeln —
auto-fit legt so viele ≥300px-Spalten an wie passen (Handy=1, breite Karte=mehrere). */
.attr-grid { display: grid; gap: 11px; }
@media (min-width: 980px) {
.attr-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 20px; align-items: start; }
}
/* --- ElementBadge --------------------------------------------------------- */
.el-badge { display: inline-flex; align-items: center; gap: 7px; }
.el-orb {
width: 26px; height: 26px; border-radius: 50%; flex: none;
display: grid; place-items: center; font-size: 13px; color: #fff;
background: radial-gradient(60% 60% at 40% 35%, rgba(255,255,255,.45), transparent 60%), var(--el-color);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.5);
}
.el-badge--md .el-orb { width: 34px; height: 34px; font-size: 17px; }
.el-badge--glow .el-orb { box-shadow: inset 0 -2px 5px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.5), 0 0 14px var(--el-glow); }
.el-badge__label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--text); }
/* .el-* (Element-Farb-Tokens) kanonisch in components.css — alt-Dup hier in Welle 1 entfernt. */
/* --- Dragon-Art (echte Key-Art aus dem Handoff-Zip) auf element-beleuchteter Stage --- */
.dragon-art { position: absolute; inset: 0; display: grid; place-items: end center; pointer-events: none; padding-bottom: 4px;
/* ⚠️ Definite Zeile ist Pflicht. Mit der Vorgabe (auto) ist das `max-height: 100%` am
Bild eine ZYKLISCHE Prozentangabe -- die Zeilenhoehe haengt am Inhalt, der Inhalt an
der Zeilenhoehe -- und der Browser verwirft sie. Das Bild nahm dann seine natuerliche
Hoehe (512 px) in einer 320-px-Buehne und rutschte unten heraus: vom Baby war nur noch
die Schnauze zu sehen, beim Adult fehlten 114 px. Gemessen, nicht vermutet.
Dieselbe Falle gilt fuer die Spalte: beide Bilder liegen in Zelle 1/1 und tragen
`max-width: 94%` -- ohne definite Spalte waere auch das eine zyklische Prozentangabe. */
grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
/* Element-Schein hinter dem Drachen. Er hing an der BREITE der Buehne (78 %) — auf einer
1568 px breiten Hero-Buehne wurde daraus ein Kreis von rund 1220 px, also weit groesser
als das Tier, und faerbte das Hoehlen-Artwork bis in die Ecken ein. Jetzt an der HOEHE:
die Buehnenhoehe entspricht ungefaehr der Drachengroesse (das Bild ist auf max-height 98 %
gefittet), damit bleibt der Schein bei jeder Buehnenbreite eng am Tier. Etwas unter die
Mitte gesetzt, weil der Drache bodenbuendig steht. */
.dragon-art::before {
content: ''; position: absolute; top: 60%; inset-inline-start: 50%; transform: translate(-50%,-50%);
height: 74%; width: auto; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, var(--el-glow) 0%, transparent 62%);
}
.dragon-art img {
/* BEIDE Bilder (Haut + Eigenleuchten) liegen in DERSELBEN Rasterzelle. Sie sind damit
gleich gebaute Grid-Items, bekommen dieselbe Ausrichtung und -- weil ihr Seitenverhältnis
identisch ist -- exakt dieselbe Box. Vorher hing das Leuchten an `position:absolute;inset:0`
und bekam dadurch eine ANDERS GEFORMTE Box als das Grid-Item darunter: in einer breiten,
flachen Bühne (Arena-Kämpferkarte) wurde es schmaler gefittet und saß mittig statt unten --
sichtbar als zweiter, versetzter Drache. */
grid-area: 1 / 1;
position: relative; max-height: 98%; max-width: 94%; object-fit: contain; object-position: bottom;
filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
/* Lebensphasen-Größe: Renders sind normalisiert, echte Größe nur über diese Scale.
Bottom-Origin hält die Füße am Boden (Container ist end-aligned). */
transform: scale(var(--stage-scale, 1)); transform-origin: bottom center;
}
.dragon-art--stage-ei { --stage-scale: .38; }
.dragon-art--stage-baby { --stage-scale: .55; }
.dragon-art--stage-jung { --stage-scale: .90; }
.dragon-art--stage-adult { --stage-scale: 1; }
/* Hero-Bühne (breit + flach, 320 px): das Baby versank sonst hinter dem Namensband unten — nur der
Kopf lugte raus (mika). Im Scale-Raum anheben, damit Kopf + Oberkörper frei stehen. Skin UND Glow
teilen den Selektor → bleiben deckungsgleich. (Kein Ei-Fall: Dragon::stage() liefert nur
baby/jung/adult; Eier sind eine eigene Entity und rendern nicht über die Hero-Bühne.) */
.detail-stage .dragon-art--stage-baby img { transform: scale(var(--stage-scale)) translateY(-46%); }
/* --- Eigenleuchten als eigene Ebene (Emissive-Sprite) ---------------------
Ein zweites, deckungsgleiches Bild mit NUR den glühenden Stellen, additiv darüber.
Warum eine eigene Ebene statt eines Filters aufs Hauptbild: ein Filter würde den ganzen
Drachen aufhellen, hier pulsen nur Adern, Blitze und Glut.
plus-lighter addiert physikalisch korrekt und respektiert Alpha; screen als Rückfall für
ältere Engines. Die Stärke hängt an --glow-boost und damit an der POSE — im Angriff darf
die Glut lodern, im Schlaf glimmt sie nur. */
img.dragon-art__glow {
/* Kein absolutes Positionieren: dieselbe Zelle, dieselbe Ausrichtung, dieselbe Box wie die
Haut darunter (siehe .dragon-art img). Die Deckungsgleichheit ist damit vom Layout
garantiert und nicht mehr davon abhängig, wie breit die Bühne gerade ist. */
grid-area: 1 / 1;
max-height: 98%; max-width: 94%; object-fit: contain; object-position: bottom;
transform: scale(var(--stage-scale, 1)); transform-origin: bottom center;
/* Das Sprite trägt sein Alpha selbst (Alpha = Helligkeit), es deckt also nichts ab.
screen/plus-lighter sind Zugabe, nicht Voraussetzung. */
mix-blend-mode: screen;
/* Stärke über brightness statt opacity: opacity ist bei 1 am Anschlag, das Leuchten war
damit kaum vom Hauptbild zu unterscheiden. brightness darf über 1 und macht die Adern
wirklich heller als die Haut darunter. */
opacity: .92;
filter: brightness(var(--glow-boost, 1));
pointer-events: none;
animation: dragon-glow-puls var(--glow-takt, 3.4s) var(--ease-in-out) infinite;
will-change: filter;
}
@supports (mix-blend-mode: plus-lighter) { img.dragon-art__glow { mix-blend-mode: plus-lighter; } }
.dragon-art--lg img.dragon-art__glow { max-height: 100%; }
/* ⚠️ Weite Auslenkung, sonst sieht man nichts. Mit .82…1.18 war der Unterschied auf einem
ohnehin hellen Leucht-Sprite nicht wahrnehmbar. Zusaetzlich schwingt die Deckkraft mit —
Helligkeit allein geht bei plus-lighter im Untergrund unter. */
@keyframes dragon-glow-puls {
0%, 100% { filter: brightness(calc(var(--glow-boost, 1) * .58)); opacity: .70; }
50% { filter: brightness(calc(var(--glow-boost, 1) * 1.42)); opacity: 1; }
}
/* Kontext: die Pose bestimmt, wie stark die Seele durchscheint. */
.dragon-art.pose-attack { --glow-boost: 2.30; --glow-takt: 2.2s; }
.dragon-art.pose-train { --glow-boost: 1.85; --glow-takt: 2.8s; }
.dragon-art.pose-fly { --glow-boost: 1.70; --glow-takt: 3.2s; }
.dragon-art.pose-idle { --glow-boost: 1.35; --glow-takt: 4.4s; }
.dragon-art.pose-heal { --glow-boost: 1.55; --glow-takt: 3.4s; }
.dragon-art.pose-sleep { --glow-boost: 1.00; --glow-takt: 6.2s; }
/* Elektro zuckt statt zu atmen — dieselbe Unterscheidung wie im 3D-Viewer. */
.dragon-art.el-elektro img.dragon-art__glow { animation-name: dragon-glow-zucken; }
@keyframes dragon-glow-zucken {
0%, 100% { filter: brightness(calc(var(--glow-boost, 1) * .64)); opacity: .72; }
38% { filter: brightness(calc(var(--glow-boost, 1) * 1.38)); opacity: 1; }
46% { filter: brightness(calc(var(--glow-boost, 1) * .60)); opacity: .68; }
54% { filter: brightness(calc(var(--glow-boost, 1) * 1.46)); opacity: 1; }
72% { filter: brightness(calc(var(--glow-boost, 1) * .88)); opacity: .86; }
}
.dragon-art--lg img { max-height: 100%; }
/* --- Ortswahl im Aktivitäts-Launcher (Collab) ------------------------------
Dieselbe Informationstiefe wie /wirtschaft: Artwork, Ertrag, Spezialfunde, Risiko und
die echte Dauer — VOR der Entscheidung, nicht danach. Radio statt select, weil ein
Dropdown nichts davon zeigen kann. */
/* Laufende Gruppe: Ort, Restzeit, Größe und Bonus auf einen Blick. Dasselbe Artwork wie die
Ortswahl darunter — der Spieler erkennt wortlos, WO seine Drachen gerade sind. */
.collab-lauf {
background-color: var(--surface-card); background-size: auto, cover; background-position: center, right center;
border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 9px 11px; margin: 4px 0; display: flex; flex-direction: column; gap: 5px;
}
.collab-lauf__kopf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.collab-lauf__kopf b { font-family: var(--font-display); font-size: var(--text-sm); color: var(--text); }
.collab-lauf__chip {
display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px;
border-radius: var(--radius-pill); background: var(--surface-sunken);
font-size: var(--text-2xs); color: var(--text-muted);
}
.collab-lauf__chip--gold { color: var(--gold-300); background: color-mix(in srgb, var(--gold-400) 16%, transparent); }
.collab-lauf__namen { font-size: var(--text-xs); color: var(--text-muted); }
.collab-lauf__fuss { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.collab-lauf__bar {
flex: 1; min-width: 90px; height: 6px; border-radius: var(--radius-pill);
background: var(--surface-sunken); overflow: hidden;
}
.collab-lauf__bar > i { display: block; height: 100%; background: var(--grad-ember); }
.collab-lauf__zeit { font-variant-numeric: tabular-nums; color: var(--gold-300); font-size: var(--text-sm); }
.ort-wahl { display: grid; gap: 6px; }
.ort-karte {
position: relative; display: block; cursor: pointer;
padding: 9px 11px; border-radius: var(--radius-md);
border: 1px solid var(--border); background-size: auto, cover; background-position: center, right center;
min-height: var(--control-lg);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ort-karte:hover { border-color: var(--border-strong); }
.ort-karte input { position: absolute; opacity: 0; pointer-events: none; }
/* Gewählt = Ember-Rahmen + Glut-Schein. Wortlos, kein Häkchen nötig. */
.ort-karte:has(input:checked) { border-color: var(--ember-600); box-shadow: var(--glow-ember); }
.ort-karte:has(input:focus-visible) { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.ort-karte__text { display: flex; flex-direction: column; gap: 3px; }
.ort-karte__kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ort-karte__kopf b { font-family: var(--font-display); font-size: var(--text-sm); color: var(--text); }
.ort-karte__warn { color: var(--blood-300); }
.ort-karte__ertrag { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
font-size: var(--text-2xs); color: var(--text-muted); }
.ort-karte__ertrag > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ort-karte__spezial { color: var(--gold-300); }
/* --- Element-Orb-Sprites (ui/orbs/) --- */
.el-orb-img { display: block; object-fit: contain; flex: none; }
.el-orb-img--sm { width: 24px; height: 24px; }
.el-orb-img--md { width: 36px; height: 36px; }
.el-badge--glow .el-orb-img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)) drop-shadow(0 0 9px rgba(255,160,60,.45)); }
/* --- Szenen-Backdrops (assets/scenes/) hinter Drachen/Karte --- */
.stage-bg { position: absolute; inset: 0; background-size: cover; background-position: center 32%; }
/* Tiefer ins Bild schwenken → Höhlenboden füllt die Bühne, der Drache steht darauf statt über
der dunklen Decke zu schweben (sonst viel toter Raum oben). */
.dragon-stage .stage-bg { background-position: center 62%; }
.map-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* --- Stadt-Wappen (assets/crests/) in der Städteliste --- */
.city-row .crest { width: 30px; height: 34px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
/* --- Aufmerksamkeits-Badges (Audit §20) --- */
.nav-badge { position: absolute; top: -5px; inset-inline-end: -8px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
border-radius: 8px; background: var(--blood-500); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700;
line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.nav-badge--dot { min-width: 9px; width: 9px; height: 9px; padding: 0; top: -2px; inset-inline-end: -3px; }
.dmo-bottomnav__icon { position: relative; }
/* --- Welt-Sub-Nav (segmented hub) --- */
/* Insel-Cinematic-Band (Tag/Nacht): voll-breites Banner mit WO/WANN/Tech-Infos unten überlagert. */
/* Banner füllt die VOLLE BREITE; Höhe gedeckelt (lieber Breite nutzen + in der Höhe Abstriche,
3:2-Art wird via cover beschnitten). Großzügiger als der alte dünne Slice. */
.welt-band { position: relative; display: flex; align-items: flex-end; gap: 9px; min-height: 150px; padding: 11px 13px; margin-bottom: 7px;
border-radius: var(--radius-lg); border: 1px solid var(--gold-700); background-size: cover; background-position: center 40%; text-decoration: none; overflow: hidden; }
@media (min-width: 980px) { .welt-band { min-height: 400px; } }
.welt-band__crest { width: 30px; height: 30px; flex: none; background: url(/assets/crests/shield-empty.png) center/contain no-repeat; filter: drop-shadow(0 2px 5px rgba(0,0,0,.85)); }
.welt-band__main { flex: 1; min-width: 0; line-height: 1.18; }
.welt-band__name { font-family: var(--font-display); font-size: var(--text-md); color: var(--stone-100); text-shadow: 0 2px 9px rgba(0,0,0,.92); }
.welt-band__sub { display: block; font-size: var(--text-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-300); text-shadow: 0 1px 6px rgba(0,0,0,.92); }
.welt-band__tech { position: relative; font-size: var(--text-2xs); color: var(--elektro-300); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.92); padding-bottom: 3px; }
/* Mini-Fortschrittsleiste zur nächsten Kollektiv-Stufe (wortlos, geteilter Balken en miniature). */
.welt-band__tech::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: calc(var(--tech-pct, 0) * 1%); background: var(--elektro-400); border-radius: 2px; box-shadow: 0 0 4px var(--elektro-500); }
/* ===== Großes Siegel (Chronik) — konzentrische Epochen-Ringe ===== */
.siegel-stage { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 0 4px; }
.siegel { position: relative; flex: none; width: clamp(160px, 44vw, 216px); aspect-ratio: 1; }
.siegel__glow { position: absolute; inset: -12%; background: radial-gradient(50% 50% at 50% 50%, rgba(176,126,16,.22), transparent 68%); pointer-events: none; }
.siegel__ring { position: absolute; inset: 0; margin: auto; width: calc(60px + var(--i) * 30px); height: calc(60px + var(--i) * 30px);
border-radius: 50%; border: 2px solid var(--c, var(--gold-500)); box-shadow: 0 0 6px color-mix(in srgb, var(--c, var(--gold-500)) 45%, transparent), inset 0 0 6px rgba(0,0,0,.4); }
.siegel__mark { position: absolute; top: -8px; inset-inline-start: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xs);
color: var(--stone-950); background: var(--c, var(--gold-500)); padding: 1px 5px; border-radius: var(--radius-pill); white-space: nowrap; letter-spacing: .02em; }
.siegel__ring--forming { border-style: dashed; border-color: var(--gold-400); box-shadow: 0 0 14px rgba(255,204,51,.5); animation: siegel-spin 26s linear infinite; }
@keyframes siegel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .siegel__ring--forming { animation: none; } }
.siegel__core { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
background: radial-gradient(60% 60% at 50% 40%, #1c120b, #0a0604); border: 1px solid var(--gold-700); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
.siegel__crest { width: 38px; height: 38px; background: url(/assets/crests/shield-empty.png) center/contain no-repeat; filter: drop-shadow(0 2px 5px rgba(0,0,0,.7)); }
.siegel__epoche { position: absolute; bottom: -3px; inset-inline-start: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xs); color: var(--gold-300); background: #0a0604; padding: 0 5px; border-radius: var(--radius-pill); border: 1px solid var(--gold-700); }
.siegel-side { flex: 1; min-width: 160px; }
.siegel-side__eyebrow { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-300); }
.siegel-side__sub { font-size: var(--text-3xs); color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.siegel-grav { margin-top: 7px; }
.siegel-grav__cap { font-size: var(--text-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.siegel-grav__v { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--text); margin-top: 2px; min-width: 0; }
.siegel-grav__v--offen { color: var(--text-dim); font-weight: 600; font-style: italic; }
.welt-band__era { text-align: end; line-height: 1.18; }
.welt-band__era b { font-size: var(--text-2xs); color: var(--gold-300); font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.92); }
.welt-band__era span { display: block; font-size: var(--text-3xs); color: var(--stone-300); font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.92); }
.weltnav { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; }
/* Subnav-Gruppen (Hick): 7 Tabs in zwei beschriftete Sinn-Cluster geteilt. */
.weltnav-group { margin-bottom: 8px; }
.weltnav-group__label { display: block; font-size: var(--text-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 3px 6px; }
.weltnav-group .weltnav { margin-bottom: 4px; }
/* Chrome-Tabs (DS): jeder Tab = vergoldeter Sprite (aktiv) bzw. Stein-Sprite (inaktiv),
Gem-Crown oben. Heller Text auf beiden (Sprite-Innenfläche ist dunkel). */
.weltnav__tab { flex: 1; min-width: max-content; text-align: center; padding: 15px 12px 9px;
font-size: var(--text-sm); font-weight: 700; text-decoration: none; white-space: nowrap;
color: #d9c4a3; text-shadow: 0 1px 2px rgba(0,0,0,.8);
background: var(--ui-chrome-tab-inaktiv) center / 100% 100% no-repeat;
transition: filter var(--dur-fast) var(--ease-out); }
.weltnav__tab:hover { filter: brightness(1.12); }
.weltnav__tab.is-active { background: var(--ui-chrome-tab-aktiv) center / 100% 100% no-repeat; color: #ffe9b8; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
/* --- Welt-Drache-Chip (§21): wer geht raus? --- */
.weltdrache-chip { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin-bottom: 8px;
background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.weltdrache-chip.is-locked { border-color: var(--ember-700); background: linear-gradient(180deg, rgba(168,80,20,.10), var(--surface-card)); }
.weltdrache-chip__orb { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--orb);
box-shadow: 0 0 9px var(--orb), inset 0 1px 2px rgba(255,255,255,.5); }
.is-locked .weltdrache-chip__orb { animation: orb-pulse 1.6s var(--ease-out) infinite; }
@keyframes orb-pulse { 50% { box-shadow: 0 0 16px var(--orb), inset 0 1px 2px rgba(255,255,255,.6); } }
.weltdrache-chip__body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.weltdrache-chip__label { font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.weltdrache-chip__select { background: transparent; border: 0; color: var(--text); font-family: var(--font-display);
font-weight: 700; font-size: var(--text-sm); padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.weltdrache-chip__select:focus { outline: none; color: var(--gold-300); }
.weltdrache-chip__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--text); }
.weltdrache-chip__name i { color: var(--ember-400); font-size: .9em; }
.weltdrache-chip__hint { font-size: var(--text-2xs); color: var(--text-muted); }
.weltdrache-chip__hint b { color: var(--gold-300); }
.weltdrache-chip__lock { color: var(--ember-500); font-size: 16px; flex: none; }
.weltdrache-chip__ready { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--heal-400);
box-shadow: 0 0 5px var(--heal-400); vertical-align: middle; }
/* Aktuelle Tätigkeit blass im HUD (§ Wunsch): leicht ausgegraut, Drache „arbeitet gerade". */
.weltdrache-chip__busy { margin-inline-start: 7px; font-weight: 600; text-transform: none; letter-spacing: 0;
color: var(--text-dim); opacity: .62; font-size: var(--text-2xs); }
.weltdrache-chip__busy i { color: var(--erde-300); font-size: .95em; margin-inline-end: 1px; }
.weltdrache-chip.is-busy .weltdrache-chip__name { opacity: .55; }
.weltdrache-chip.is-busy .weltdrache-chip__orb { filter: saturate(.5); opacity: .6; }
.weltdrache-chip__signals { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-2xs);
font-weight: 700; color: var(--gold-300); white-space: nowrap; }
.weltdrache-chip__signals i { font-size: 12px; color: var(--blood-400); }
/* --- Roster-Kachel-Zustände (§21, wortlos) --- */
.roster-tile__glyph { position: absolute; inset-inline-end: 8px; top: 8px; width: 26px; height: 26px; display: grid; place-items: center;
border-radius: 50%; background: rgba(8,5,4,.62); backdrop-filter: blur(2px); color: var(--stone-100); font-size: 15px; z-index: 2; }
.roster-tile__glyph--work { color: var(--eis-500); }
.roster-tile__glyph--guard { color: var(--gold-300); }
.roster-tile__glyph--ko { color: var(--blood-400); }
.roster-tile__timer { position: absolute; inset-inline-end: 8px; top: 38px; z-index: 2; font-size: var(--text-2xs); font-weight: 700;
color: var(--gold-300); background: rgba(8,5,4,.62); padding: 1px 6px; border-radius: var(--radius-pill); }
.roster-tile--unterwegs .sprite { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) grayscale(.55) brightness(.6); }
.roster-tile--unterwegs::after { content: ''; position: absolute; inset: 0; background: rgba(8,5,4,.42); z-index: 1; }
.roster-tile--bewacht { border-color: var(--gold-600); }
.roster-tile--bewacht .sprite { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) brightness(.92); }
.roster-tile--ko .sprite { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) grayscale(.85) brightness(.5); }
/* --- Freunde-Aktions-Sheet (§19): seltene Aktionen im ⋯-Overflow --- */
.friend-more > summary::-webkit-details-marker { display: none; }
.friend-more > summary::marker { content: ''; }
/* --- HUD-Delta (§6.2): schwebende Gold-/Energie-Änderung --- */
.hud-delta { position: absolute; inset-inline-start: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap;
font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); pointer-events: none; z-index: 50;
text-shadow: 0 1px 4px rgba(0,0,0,.8); animation: hud-float 1.4s var(--ease-out) forwards; }
.hud-delta--up { color: var(--gold-300); }
.hud-delta--down { color: var(--blood-300); }
@keyframes hud-float { 0% { opacity: 0; transform: translate(-50%, 4px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -18px); } }
.res-item--glow { animation: res-glow 0.6s var(--ease-out); border-radius: var(--radius-pill); }
.res-item--drain { animation: res-drain 0.6s var(--ease-out); border-radius: var(--radius-pill); }
@keyframes res-glow { 50% { box-shadow: 0 0 14px var(--gold-400); } }
@keyframes res-drain { 50% { box-shadow: 0 0 12px var(--blood-500); } }
/* --- Wandlungs-Plakette (§33.4): Lifecycle-Wechsel feiern --- */
.metamorph { animation: metamorph-in 0.5s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both; }
.metamorph__sigil { animation: metamorph-sigil 2.4s var(--ease-out, ease) infinite; }
@keyframes metamorph-in { 0% { opacity: 0; transform: translateY(-8px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes metamorph-sigil { 0%,100% { transform: scale(1) rotate(0); opacity: .9; } 50% { transform: scale(1.18) rotate(8deg); opacity: 1; } }
/* --- Kommandoleiste (§33.4.3 work-strip): wortlose Slot-Übersicht, FREI pulst --- */
.work-strip { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; padding: 6px 10px;
overflow-x: auto; background: var(--surface-sunken); border-bottom: 1px solid var(--border-soft); scrollbar-width: none; }
.work-strip::-webkit-scrollbar { display: none; }
.work-cluster { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 10px;
border-radius: var(--radius-pill); font-size: var(--text-2xs); text-decoration: none;
background: var(--surface-card); border: 1px solid var(--border); color: var(--text-muted); }
.work-cluster .wc-lbl { font-family: var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.work-cluster .wc-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.work-cluster--out { border-color: var(--blood-600); color: var(--blood-300); }
.work-cluster--out .wc-val { color: var(--gold-300); }
.work-cluster--arbeitet { border-color: var(--eis-700); color: var(--eis-300); opacity: .85; }
.work-cluster--wache { border-color: var(--stone-600); opacity: .6; }
.work-cluster--frei { border-color: var(--ember-500); color: var(--ember-300); animation: wc-pulse 1.6s ease-out infinite; }
.work-cluster--frei .wc-val { color: var(--ember-200); }
.wc-pulse { display: none; }
@keyframes wc-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,102,0,.5); } 70% { box-shadow: 0 0 0 7px rgba(255,102,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,102,0,0); } }
/* --- Toggle-Switch (§23 Optionen): wortloser Ein/Aus-Zustand --- */
.switch { width: 46px; height: 26px; flex: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; padding: 0;
position: relative; background: var(--surface-sunken); border: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-out); }
.switch__knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--stone-400);
transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-out); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch.is-on { background: var(--grad-ember); border-color: var(--ember-600); }
.switch.is-on .switch__knob { transform: translateX(20px); background: var(--stone-950); }
.switch::after { content: ''; position: absolute; inset: -9px 0; }
/* --- A11y-Pass (§26): sichtbarer Fokus + Mindest-Tap-Targets --- */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--gold-400); outline-offset: 2px; border-radius: 3px;
}
/* ⚠️ Hier stand `.dmo-btn { min-height: 36px }`. Gleiche Spezifität wie .dmo-btn--lg, aber
später im Quelltext → es hat components.css:19/29 (44px/52px) app-weit überschrieben, also
AUCH jeden --lg-Button. Der Login-Submit maß live 36px. Entfernt: die Größe kommt aus
--control-md/-lg. Für --sm bleibt die kompakte Optik, bekommt aber wie .dmo-iconbtn--sm
eine unsichtbare 44px-Trefferfläche (::before, weil ::after schon der is-pending-Spinner ist). */
.dmo-btn--sm { position: relative; }
.dmo-btn--sm::before { content: ''; position: absolute; inset: -4px; }
.dmo-iconbtn, .icon-btn { min-width: var(--control-sm); min-height: var(--control-sm); }
/* Der Kommentar oben versprach diese Trefferfläche auch für --sm-Icon-Knöpfe, aber die Regel
fehlte: sie blieben bei 36px (10 Stellen, u. a. Freunde-Entfernen und die Res-Band-Knöpfe).
Dieselben −4px wie beim Textknopf machen daraus 44px. */
.dmo-iconbtn--sm { position: relative; }
.dmo-iconbtn--sm::before { content: ''; position: absolute; inset: -4px; }
.bottom-nav a, nav a { min-height: 44px; } /* Haupt-Nav = volle 44px */
/* --- Fund-Strahl (Loot §15.6): zweites Reward-Gleis, Tier = Farbe --- */
.fund-strahl { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 11px; border-radius: var(--radius-md);
background: color-mix(in srgb, var(--tier) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); }
.fund-strahl > i { color: var(--tier); font-size: 17px; filter: drop-shadow(0 0 6px var(--tier)); }
.fund-strahl__txt { flex: 1; font-size: var(--text-sm); color: var(--text); }
.fund-strahl__txt b { color: var(--tier); }
.fund-strahl__tier { font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tier); opacity: .85; }
/* Item-Tier-Punkt (Markt/Inventar) */
.tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tier);
box-shadow: 0 0 5px var(--tier); vertical-align: middle; margin-inline-end: 5px; }
/* Schatz-Schimmer auf Risiko-Städten */
.city-row--schatz .nm { text-shadow: 0 0 10px rgba(255,204,51,.25); }
/* --- In-Game-Bestätigungs-Modal (statt Browser-confirm) --- */
.confirm-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
background: rgba(8,5,4,.72); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.confirm-overlay.is-open { opacity: 1; }
.confirm-modal { width: 100%; max-width: 340px; padding: 20px; border-radius: var(--radius-lg);
background: var(--surface-card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xl), var(--edge-gold);
transform: translateY(8px) scale(.98); transition: transform var(--dur-base) var(--ease-spring); }
.confirm-overlay.is-open .confirm-modal { transform: none; }
.confirm-modal__msg { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); text-align: center; line-height: 1.3; }
.confirm-modal__actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
/* --- Schnellaktionen (Höhle-Menü-Kacheln) --- */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.qa-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px;
border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border);
color: var(--text); cursor: pointer; text-decoration: none; font: inherit; width: 100%; transition: border-color var(--dur-fast) var(--ease-out); }
.qa-tile:hover { border-color: var(--border-strong); }
.qa-tile .ico { width: 30px; height: 30px; display: grid; place-items: center; font-size: 20px; }
.qa-tile .ico--sprite { background-size: contain; background-repeat: no-repeat; background-position: center; }
/* Medaillon-Kacheln (Design-System): rundes forged-gold Icon, etwas größer als Sprite/Font-Icons */
.qa-tile .ico--med { width: 42px; height: 42px; }
.med-ico { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.qa-tile .lbl { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .02em; }
/* --- Ausbrüten / Brutplatz (brütender Drache) --- */
.brutplatz { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-lg); overflow: hidden; }
.brutplatz .glow { position: absolute; inset: 0; background: radial-gradient(60% 90% at 22% 60%, rgba(255,90,44,.28), transparent 70%); }
.brutplatz .brut-art { position: relative; width: 104px; height: 104px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.brutplatz .body { position: relative; flex: 1; min-width: 0; }
/* --- Brutkammer-Szenen-Banner --- */
.brut-banner {
height: 78px; margin: -2px 0 10px; border-radius: var(--radius-md);
background-size: cover; background-position: center 40%;
box-shadow: var(--shadow-inset), var(--edge-gold); opacity: .9;
}
/* --- DragonCard ----------------------------------------------------------- */
.dragon-card { display: flex; flex-direction: column; }
/* Hero-Variante (Höhle): Höhlen-Artwork randlos über die volle Breite, damit es zur Geltung kommt. */
.dragon-card--hero { margin-inline-start: -16px; margin-inline-end: -16px; border-radius: 0; border-inline-start: 0; border-inline-end: 0; border-top: 0; }
.dragon-card--hero .dragon-stage { height: 300px; }
@media (min-width: 980px) {
/* Web/Tablet: Hero spannt über ALLE Spalten (2/3-Column-Layout) + randlos auf die volle Content-Breite. */
.content-col .scroll-area > .dragon-card--hero { column-span: all; margin-inline-start: -44px; margin-inline-end: -44px; border-radius: 0; border-inline-start: 0; border-inline-end: 0; border-top: 0; }
.dragon-card--hero .dragon-stage { height: 420px; }
.dragon-card--hero .stage-bg { background-position: center 58%; }
}
/* Sehr breite Schirme: die Hero-Buehne ist bei 420 px rund 2,8:1 flach, das Artwork ist 16:9.
Bei `cover` blieb davon nur knapp zwei Drittel der Bildhoehe stehen — Decke, Stalaktiten und
die Tunnelboegen im Hintergrund fielen komplett raus. Mehr Buehnenhoehe zeigt mehr Bild, ohne
den Drachen zu vergroessern: der haengt an --stage-scale, nicht an der Buehne. */
@media (min-width: 1400px) { .dragon-card--hero .dragon-stage { height: 500px; } }
.dragon-stage { position: relative; height: 200px; background: var(--grad-cave); overflow: hidden; cursor: pointer; }
.dragon-stage .wash { position: absolute; inset: 0; }
.dragon-stage .sprite {
position: absolute; inset-inline-start: 50%; bottom: 6px; transform: translateX(-50%);
max-height: 188px; max-width: 92%; object-fit: contain;
filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
/* Scrim NUR fürs Bild/Caption-Kontrast — der Drache liegt DRÜBER (z-index), sonst versinkt
das bodenbündige Artwork im Verlauf. Flacherer Verlauf: dicht nur ganz unten. */
.dragon-stage .scrim { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(0deg, rgba(15,8,6,.85) 0%, rgba(15,8,6,.30) 16%, rgba(15,8,6,0) 38%); }
.dragon-stage .dragon-art { z-index: 1; }
.dragon-stage .caption, .dragon-stage .topleft, .dragon-stage .topright, .dragon-stage .bond-ring { z-index: 2; }
/* Leere Höhle (Drache unterwegs): Artwork klar erkennbar lassen, nur leicht gedämpft fürs „verlassen"-Gefühl.
Tiefer ins Bild schwenken (72%) → der leere Höhlenboden/-bogen füllt die Bühne statt der dunklen Decke
(sonst wirkt oben viel toter Raum). */
.dragon-stage.is-empty .stage-bg { filter: grayscale(.08) brightness(.95); background-position: center 66%; }
/* Lesbarkeits-Schleier NUR hinter dem Mitteltext (radial), statt das ganze Bild abzudunkeln. */
.stage-away { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 16px;
background: radial-gradient(ellipse 60% 40% at center, rgba(0,0,0,.5), transparent 75%); }
.stage-away i { font-size: 40px; color: var(--ember-400); opacity: .95; filter: drop-shadow(0 0 12px rgba(0,0,0,.9)); }
.stage-away__act { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--text); text-shadow: 0 2px 10px rgba(0,0,0,.95); }
.stage-away__time { font-size: var(--text-2xs); color: var(--gold-300); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.95); }
/* §UX: auf breiten Screens die Höhlenszene prominenter (mehr Höhe) — mika. */
@media (min-width: 900px) { .dragon-stage { height: 320px; } }
.dragon-stage .topleft { position: absolute; top: 10px; inset-inline-start: 12px; }
.dragon-stage .topright { position: absolute; top: 10px; inset-inline-end: 12px; }
.dragon-stage .caption { position: absolute; inset-inline-start: 14px; inset-inline-end: 14px; bottom: 10px; }
.dragon-stage .name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); color: var(--stone-100); text-shadow: 0 2px 12px rgba(0,0,0,.85); line-height: 1; }
.dragon-stage .lvl { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--gold-300); letter-spacing: .05em; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.dragon-card__bars { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.dragon-card__footer { padding: 0 14px 14px; }
/* Element-Licht am Drachen. Frueher ein Radial ueber 72x62 % der Buehne, zentriert
auf 42 % Hoehe — also grossflaechig ueber dem Bild statt am Tier, was das Artwork
flaechig einfaerbte. Jetzt eng und tief: 40x46 % um den Standpunkt des Drachen bei
72 % Hoehe. Weil die Flaeche klein ist, darf die Deckung wieder hoeher liegen als
beim breiten Hauch — der Elementton wird dadurch am Drachen SICHTBARER, blutet aber
nicht mehr in die Ecken. Prozentual definiert, passt sich also allen Buehnenhoehen an
(Roster-Kachel 120 px bis Hero 420 px). */
.wash-feuer { background: radial-gradient(40% 46% at 50% 72%, rgba(255,90,44,.30), transparent 70%); }
.wash-eis { background: radial-gradient(40% 46% at 50% 72%, rgba(69,198,232,.27), transparent 70%); }
.wash-erde { background: radial-gradient(40% 46% at 50% 72%, rgba(180,138,78,.27), transparent 70%); }
.wash-elektro { background: radial-gradient(40% 46% at 50% 72%, rgba(245,200,30,.27), transparent 70%); }
.roster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roster-tile { position: relative; height: 120px; border-radius: var(--radius-md); overflow: hidden; background: var(--grad-cave); border: 1px solid var(--border); cursor: pointer; }
.roster-tile.is-active { border-color: var(--ember-600); box-shadow: var(--glow-ember); }
.roster-tile .sprite { position: absolute; inset-inline-end: -6px; bottom: -4px; height: 104%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.roster-tile .badge-pos { position: absolute; inset-inline-start: 10px; top: 9px; }
.roster-tile .meta { position: absolute; inset-inline-start: 10px; bottom: 8px; }
.roster-tile .meta .n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--stone-100); text-shadow: 0 1px 5px rgba(0,0,0,.9); line-height: 1; }
.roster-tile .meta .s { font-size: var(--text-2xs); color: var(--gold-300); font-weight: 700; letter-spacing: .05em; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.egg-tile { text-align: center; background: var(--surface-sunken); border-radius: var(--radius-md); border: 1px solid var(--border); padding: 10px 6px; }
.egg-tile img { height: 48px; margin: 0 auto 6px; }
/* Gleiche Sprache wie im Nest-Panorama: je reifer, desto wärmer glüht das Ei von innen. */
.egg-gif {
height: 52px; margin: 0 auto 6px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.5))
drop-shadow(0 0 calc(var(--reife, 0) * 0.12px) var(--tier, var(--gold-300)))
brightness(calc(1 + var(--reife, 0) * 0.0018));
}
.egg-tile .pct { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 5px; }
.egg-shape {
width: 38px; height: 50px; margin: 2px auto 8px;
border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
background: radial-gradient(58% 48% at 38% 32%, rgba(255,255,255,.55), transparent 55%), var(--el-color);
box-shadow: inset 0 -5px 9px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.4), 0 0 12px var(--el-glow);
animation: egg-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes egg-pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
/* --- Bottom nav ----------------------------------------------------------- */
.bottom-nav {
position: sticky; bottom: 0; z-index: 20; flex: none;
display: grid; grid-template-columns: repeat(5, 1fr);
height: var(--bottom-nav);
background: linear-gradient(0deg, var(--stone-900), var(--stone-850));
border-top: 1px solid var(--border-strong);
}
.nav-item {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
color: var(--text-dim); font-size: var(--text-2xs); font-weight: 600; cursor: pointer;
border: none; background: none; position: relative; text-decoration: none;
}
.nav-item .glyph { font-size: 20px; line-height: 1; }
.nav-item.is-active { color: var(--ember-400); }
.nav-item.is-active .glyph { filter: drop-shadow(0 0 8px rgba(255,102,0,.6)); }
.nav-item.is-active::before {
content: ''; position: absolute; top: 6px; width: 40px; height: 28px; border-radius: var(--radius-md);
background: radial-gradient(60% 60% at 50% 40%, rgba(255,102,0,.22), transparent 70%);
}
/* Mobile + Tablet (<980px): BottomNav fix am Viewport-Boden (kein Scrollen mehr), an .app-Breite
zentriert, iOS-Safe-Area respektiert. Content bekommt Boden-Polster, damit nichts verdeckt wird. */
@media (max-width: 979px) {
.dmo-bottomnav {
position: fixed; bottom: 0; inset-inline-start: 50%; transform: translateX(-50%);
width: 100%; max-width: var(--app-max); z-index: 30;
height: calc(var(--bottom-nav) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
box-shadow: 0 -4px 18px rgba(0,0,0,.45);
}
.app-main { padding-bottom: calc(var(--bottom-nav) + env(safe-area-inset-bottom, 0px)); }
}
/* Installierte PWA (§20, Handoff-3): status-bar-style=black-translucent → Inhalt liegt UNTER
Notch/Dynamic-Island/Statusleiste. Wir reservieren oben einen Platzhalter, damit die echte
OS-Uhr/Indikatoren die App-UI NIE überdecken. `max(20px, …)` garantiert die Reserve auch dort,
wo env() (notch-lose Geräte) 0 melden würde; bei Notch gewinnt der echte Inset. Querformat = L/R. */
@media (display-mode: standalone), (display-mode: fullscreen) {
:root { --safe-top: max(20px, env(safe-area-inset-top, 0px)); }
.resource-bar {
height: calc(var(--header-h) + var(--safe-top));
padding-top: var(--safe-top);
padding-inline-start: max(14px, env(safe-area-inset-left));
padding-inline-end: max(14px, env(safe-area-inset-right));
}
/* Login/Register-Auth-Screens: oberen Inhalt unter der Statusleiste freistellen */
.login__inner { padding-top: calc(24px + var(--safe-top)); }
}
/* --- Login ---------------------------------------------------------------- */
.login { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #0a0604; overflow: hidden; }
.login__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; opacity: .55; }
.login__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,4,.5) 0%, rgba(10,6,4,.35) 38%, rgba(10,6,4,.92) 78%, #0a0604 100%); }
.login__inner { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 24px 24px 36px; text-align: center; }
.login__logo { width: 86%; max-width: 300px; margin-bottom: 24px; filter: drop-shadow(0 8px 28px rgba(255,102,0,.4)); }
.login--art { background: radial-gradient(100% 64% at 50% 102%, rgba(226,76,0,.55) 0%, rgba(126,18,18,.4) 36%, transparent 64%), var(--grad-onyx); }
.login--art::after { content: '🜂'; position: absolute; top: 16%; inset-inline-start: 50%; transform: translateX(-50%); font-size: 200px; color: var(--ember-600); opacity: .16; text-shadow: 0 0 60px rgba(255,102,0,.5); pointer-events: none; }
.login__wordmark { position: relative; margin-bottom: 30px; }
.wm-mark { font-size: 60px; line-height: 1; color: var(--ember-500); text-shadow: 0 0 42px rgba(255,102,0,.65); margin-bottom: 6px; }
.wm-title { font-family: var(--font-display-logo); font-weight: 900; font-size: var(--text-4xl); line-height: 1; letter-spacing: .01em; background: var(--grad-gold-metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wm-sub { font-family: var(--font-label); letter-spacing: .22em; text-transform: uppercase; font-size: var(--text-xs); color: var(--ember-300); margin-top: 8px; }
.login__form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.field {
width: 100%; height: var(--control-lg); padding: 0 16px;
border-radius: var(--radius-md); border: 1px solid var(--border-strong);
background: rgba(15,8,6,.55); backdrop-filter: blur(6px); color: var(--text);
font-family: var(--font-body); font-size: var(--text-md); outline: none;
}
.login__alt { background: none; border: none; color: var(--stone-200); font-size: var(--text-sm); cursor: pointer; margin-top: 4px; }
/* --- Screen titles -------------------------------------------------------- */
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
/* Langer Titel (z. B. langer Nick) darf ellipsen statt die rechte Aktion aus dem Viewport zu drücken. */
.screen-head > :first-child { min-width: 0; }
.screen-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.screen-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--text); }
/* --- Drache detail hero --------------------------------------------------- */
.detail-stage { position: relative; height: 320px; background: var(--grad-cave); overflow: hidden; }
/* Element-Wash auf der Hero-Stage stark zurücknehmen — die Szene ist schon element-getönt, der
volle Tint dämpfte das Artwork nur (mika). Ein Hauch bleibt für die Stimmung. */
.detail-stage .wash { opacity: .35; }
/* Bottom-Scrim nur aufs Text-Band ganz unten begrenzen — nicht die halbe Bildhälfte (mit dem Drachen,
der unten sitzt) verdunkeln. Name/Stufe bleiben unten lesbar, Artwork + Drache zeigen sich (mika). */
.detail-stage .scrim { background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 20%, transparent 42%); }
/* Deep-Link: Ziel springt sich in den Blick + kurzer Ember-Focus-Puls (#train etc.). */
.is-deeplinked { animation: deeplink-pulse 2s var(--ease-out) 1; }
@keyframes deeplink-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,102,0,0); }
14% { box-shadow: 0 0 0 3px var(--ember-500), var(--glow-ember); }
100% { box-shadow: 0 0 0 0 rgba(255,102,0,0); }
}
/* Klickbare Karten/Tat-Zeilen (Deep-Link-Affordance). */
.card-deeplink { transition: border-color var(--dur-fast) var(--ease-out); }
.card-deeplink:hover { border-color: var(--ember-700); }
.ww-goal--link { cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out); }
.ww-goal--link:hover { opacity: .82; }
/* Freiskill-Stapel: „Pinselstärke"-Chips ×1…×N — nur im Freiskill-Modus (.use-frei) sichtbar. */
.frei-amounts { display: none; gap: 6px; flex-wrap: wrap; margin: -3px 0 2px; }
.use-frei .frei-amounts { display: flex; }
.frei-chip { min-width: 42px; min-height: 38px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.frei-chip.is-active { background: var(--grad-ember); color: var(--stone-950); border-color: transparent; }
/* Normal-Batch-Chips (§QoL, nur bei vollem Bund) — sichtbar außer im Freiskill-Modus. */
.batch-amounts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -3px 0 2px; }
.use-frei .batch-amounts { display: none; }
.batch-amounts__lbl { font-size: var(--text-2xs); color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
/* Brutkammer-Vollbild-Banner: die Kammer + die Eier im Nest (Position & Größe je Element). */
.bk-stage { position: relative; height: 300px; overflow: hidden; background: var(--grad-cave); border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-bottom: 12px; }
.bk-stage__bg { position: absolute; inset: 0; background-size: cover; background-position: center 42%; }
.bk-stage__scrim { position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none; }
.bk-stage__back { position: absolute; top: 12px; inset-inline-start: 12px; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(10,6,4,.66); backdrop-filter: blur(4px); color: var(--text); font-size: 18px; display: grid; place-items: center; text-decoration: none; }
.bk-stage__cap { position: absolute; inset-inline-start: 16px; bottom: 12px; }
.bk-stage__eyebrow { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.bk-stage__title { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); color: var(--stone-100); text-shadow: 0 2px 12px rgba(0,0,0,.85); line-height: 1; }
/* Ein Ei im Nest — je Element eigene Nische (left/bottom/Breite). --i staffelt mehrere gleicher Art. */
.bk-egg { position: absolute; transform: translateX(-50%); margin-inline-start: calc(var(--i, 0) * 12px); }
/* Reifegrad wortlos: --reife (0..100, einheitenlos) steuert Innenglut und Atem-Takt.
Das Leben drin wird sichtbar, statt nur als Prozentzahl danebenzustehen.
⚠️ --reife MUSS einheitenlos bleiben — in calc() mit einer Zeit multipliziert. */
.bk-egg::before {
content: ''; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
width: 82%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, var(--tier, var(--gold-300)) 0%, transparent 62%);
opacity: calc(var(--reife, 0) * 0.006); /* 0 % → unsichtbar, 100 % → 0,6 */
filter: blur(6px);
}
.bk-egg__img {
display: block; width: 100%; height: auto; position: relative;
filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) brightness(calc(1 + var(--reife, 0) * 0.0018));
/* 4,4 s bei 0 % → 1,9 s kurz vor dem Schlüpfen: der Atem wird schneller. */
animation: bk-egg-breathe calc(4.4s - var(--reife, 0) * 0.025s) ease-in-out infinite;
}
/* Ab 90 % wackelt es — der erste sichtbare Stoß von innen. */
.bk-egg.is-bald .bk-egg__img { animation: bk-egg-breathe 1.9s ease-in-out infinite, bk-egg-ruckeln 2.6s ease-in-out infinite; }
@keyframes bk-egg-ruckeln {
0%, 62%, 100% { rotate: 0deg; }
68% { rotate: -3.5deg; }
74% { rotate: 3deg; }
80% { rotate: -1.5deg; }
}
.bk-egg__pct { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xs); color: var(--tier, var(--gold-300)); text-shadow: 0 1px 5px rgba(0,0,0,.95); white-space: nowrap; }
@keyframes bk-egg-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.bk-egg--feuer { left: 49%; bottom: 17%; width: 92px; }
.bk-egg--eis { left: 29%; bottom: 21%; width: 78px; }
.bk-egg--erde { left: 68%; bottom: 15%; width: 100px; }
.bk-egg--elektro { left: 79%; bottom: 29%; width: 70px; }
/* Brutkammer Desktop: voll-breite Bühne (span-all) + 2 Spalten — Paarung (Tat) | Nest (Eier/reifendes Leben). */
.bk-nest { display: contents; } /* Mobil: Karten fließen normal in die Spalte */
@media (min-width: 980px) {
.content-col .scroll-area.bk-screen { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 16px; align-items: start; max-width: 1180px; }
.content-col .scroll-area.bk-screen > * { margin: 0; }
.scroll-area.bk-screen > .span-all { grid-column: 1 / -1; }
.bk-nest { display: flex; flex-direction: column; gap: 16px; } /* rechte Spalte: Eier-Karte + Brutplatz gestapelt */
.bk-pair { position: sticky; top: 0; }
}
@media (min-width: 1280px) { .content-col .scroll-area.bk-screen { max-width: 1280px; } }
/* Sprach-Chips (Profil): Haupt = ember (★), gesprochen = gold, aus = muted. */
.lang-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-chip { min-width: 40px; min-height: 36px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.lang-chip.is-on { background: rgba(255,204,51,.16); color: var(--gold-300); border-color: var(--gold-700); }
.lang-chip.is-main { background: var(--grad-ember); color: var(--stone-950); border-color: transparent; }
/* Read-only Mini-Variante (öffentliches Profil: welche Sprachen ein Trainer spricht). */
.lang-chip--mini { min-width: 0; min-height: 22px; padding: 0 6px; font-size: var(--text-2xs); cursor: default; }
/* Profil auf breiten Schirmen mehrspaltig (CSS-Columns, Karten ungeteilt; Kopf spannt). */
@media (min-width: 980px) {
.scroll-area.profil-cols { display: block; column-count: 2; column-gap: 16px; }
/* Spezifitaet 0 wie die allgemeine Vorgabe darueber — eine Komponente mit eigenem
Abstand (z. B. .profil-standing--links) soll sich durchsetzen duerfen. */
:where(.scroll-area.profil-cols) > * { break-inside: avoid; margin-bottom: 14px; }
.scroll-area.profil-cols > .screen-head { column-span: all; }
}
.detail-stage .sprite { position: absolute; inset-inline-start: 50%; bottom: 18px; transform: translateX(-50%); max-height: 268px; max-width: 94%; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
.detail-stage .shadow { position: absolute; inset-inline-start: 50%; bottom: 24px; width: 58%; height: 22px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%); border-radius: 50%; }
.detail-stage .back { position: absolute; top: 12px; inset-inline-start: 12px; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(10,6,4,.66); backdrop-filter: blur(4px); color: var(--text); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.detail-stage .el { position: absolute; top: 12px; inset-inline-end: 12px; }
.detail-stage .caption { position: absolute; inset-inline-start: 16px; inset-inline-end: 16px; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.detail-stage .over { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--stone-200); text-shadow: 0 1px 4px rgba(0,0,0,.9); }
/* Zielort-Wappen über der Aktions-Zeile (z. B. „Angriff · Rang 8") während eines Stadt-Überfalls. */
.detail-stage .stage-crest { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 0 6px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.85)); }
@media (min-width: 980px) { .detail-stage .stage-crest { width: 156px; height: 156px; } }
.detail-stage .name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-3xl); color: var(--stone-100); text-shadow: 0 2px 14px rgba(0,0,0,.85); line-height: 1; }
.detail-stage .lvl { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--gold-300); letter-spacing: .05em; text-shadow: 0 2px 8px rgba(0,0,0,.9); white-space: nowrap; }
.matchup { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); }
.matchup--strong { background: var(--heal-soft); border: 1px solid var(--heal-500); }
.matchup--weak { background: var(--blood-800); border: 1px solid var(--blood-600); }
.matchup .k { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.matchup--strong .k { color: var(--heal-400); }
.matchup--weak .k { color: var(--blood-300); }
.matchup .v { font-family: var(--font-display); font-weight: 700; color: var(--text); }
/* --- Welt map ------------------------------------------------------------- */
.island { position: relative; height: 300px; background: radial-gradient(60% 55% at 50% 50%, #3a1a10 0%, #1d100b 60%, var(--stone-950) 100%); overflow: hidden; }
/* Illustrierte Insel-Karte (DS scenes/regions/inselkarte): echtes 16:9-Seitenverhältnis
statt fester Höhe, damit die gezeichnete Karte unverzerrt voll passt (Pins per %). */
.island--karte { height: auto; aspect-ratio: 1376 / 768; background: #0a0604; }
.island .rim { position: absolute; top: 50%; inset-inline-start: 50%; width: 264px; height: 264px; transform: translate(-50%,-50%); border-radius: 50%; border: 2px dashed var(--stone-600); box-shadow: inset 0 0 40px rgba(255,90,44,.18); }
.island .crater { position: absolute; top: 50%; inset-inline-start: 50%; width: 92px; height: 92px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--grad-ember); box-shadow: var(--glow-ember); display: grid; place-items: center; }
.island .crater span { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xs); color: var(--stone-950); text-align: center; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }
.island .pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--stone-900); box-shadow: 0 0 8px rgba(0,0,0,.6); transform: translate(-50%,-50%); }
.city-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--border-soft); }
.city-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.city-row .nm { flex: 1; font-weight: 600; color: var(--text); font-size: var(--text-sm); }
/* --- Arena ---------------------------------------------------------------- */
.arena-stage { position: relative; overflow: hidden; background: var(--grad-cave); }
.arena-stage .sprite { position: absolute; bottom: 0; height: 110%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
/* Gegner spiegeln: die Angriffs-Renders blicken alle nach links, sonst kehrt der Gegner dem
eigenen Drachen den Rücken zu. Gespiegelt wird die ganze Bühne des Bildes — Haut und
Eigenleuchten liegen in derselben Zelle und bleiben dadurch zwingend deckungsgleich. */
.arena-stage--gegner .dragon-art { transform: scaleX(-1); }
.arena-stage .head { position: absolute; top: 10px; inset-inline-start: 12px; inset-inline-end: 12px; }
.arena-stage .foot { position: absolute; bottom: 10px; inset-inline-start: 12px; inset-inline-end: 12px; }
/* Levelup-Modal (Port DS LevelUpBurst) — INSZENIERT: 1) Bildschirm abdunkeln (.lu-show),
2) Intro-Text „Die Höhle füllt sich mit Energie" ein-/ausblenden, 3) auf .lu-go startet
der 5-Frame-Burst + Runen-Ring + Funken + „STUFENAUFSTIEG". Der Burst hängt komplett an
.lu-go → vorher ist alles unsichtbar, nur Backdrop + Intro laufen. */
#lvlup { position:fixed; inset:0; z-index:9998; cursor:pointer; overflow:hidden;
background:radial-gradient(120% 90% at 50% 40%, rgba(36,23,18,.92), rgba(10,6,4,.96)); backdrop-filter:blur(3px);
opacity:0; transition:opacity .45s ease; }
#lvlup.lu-show { opacity:1; }
/* Phase 2: Intro-Text — startet NACH dem Abdunkeln (.4s delay), blendet ein, hält, blendet aus. */
#lvlup .lu-intro { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 34px;
text-align:center; font-family:var(--font-display); font-weight:700; font-size:23px; line-height:1.35; letter-spacing:.03em;
color:var(--gold-200); text-shadow:0 0 20px rgba(255,204,51,.5), 0 2px 12px rgba(0,0,0,.92); opacity:0; pointer-events:none; }
#lvlup.lu-show .lu-intro { animation:lu-intro 2.2s ease .4s 1 both; }
#lvlup.lu-go .lu-intro { animation:none; opacity:0; }
@keyframes lu-intro { 0%{opacity:0; transform:scale(.96);} 20%{opacity:1; transform:scale(1);} 72%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1.03);} }
#lvlup .lu-stack { position:absolute; inset:0; transform-origin:50% 50%; }
#lvlup.lu-go .lu-stack { animation:lu-zoom 6.4s cubic-bezier(.37,0,.4,1) 1 both; }
#lvlup .lu-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#lvlup .lu-layer img { height:60%; object-fit:contain; opacity:0; will-change:opacity; }
#lvlup.lu-go .lu-layer img {
animation-duration:6.4s; animation-timing-function:linear; animation-iteration-count:1; animation-fill-mode:both; }
#lvlup.lu-go .lu1 img{animation-name:lu-f1;} #lvlup.lu-go .lu2 img{animation-name:lu-f2;} #lvlup.lu-go .lu3 img{animation-name:lu-f3;}
#lvlup.lu-go .lu4 img{animation-name:lu-f4;} #lvlup.lu-go .lu5 img{animation-name:lu-f5;}
@keyframes lu-f1 { 0%{opacity:0;} 5%{opacity:1;} 16%{opacity:1;} 30%{opacity:0;} 100%{opacity:0;} }
@keyframes lu-f2 { 0%,16%{opacity:0;} 30%{opacity:1;} 38%{opacity:1;} 50%{opacity:0;} 100%{opacity:0;} }
@keyframes lu-f3 { 0%,38%{opacity:0;} 50%{opacity:1;} 55%{opacity:1;} 63%{opacity:0;} 100%{opacity:0;} }
@keyframes lu-f4 { 0%,53%{opacity:0;} 62%{opacity:1;} 67%{opacity:1;} 75%{opacity:0;} 100%{opacity:0;} }
@keyframes lu-f5 { 0%,66%{opacity:0;} 78%{opacity:1;} 100%{opacity:1;} }
@keyframes lu-zoom { 0%{transform:scale(.97);} 58%{transform:scale(1.05);} 100%{transform:scale(1.02);} }
#lvlup .lu-runes { position:absolute; inset-inline-start:50%; top:46%; width:300px; height:300px; margin:-150px 0 0 -150px; opacity:0; }
#lvlup.lu-go .lu-runes { animation:lu-runelife 6.4s ease-in 1 both; }
#lvlup .lu-runes .lu-ring { position:absolute; inset:0; animation:lu-spin 5s linear infinite; }
#lvlup .lu-runes span { position:absolute; inset-inline-start:50%; top:50%; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--gold-300); text-shadow:0 0 8px rgba(255,204,51,.9); }
@keyframes lu-spin { to { transform:rotate(360deg); } }
@keyframes lu-runelife { 0%{opacity:0; transform:scale(.62);} 14%{opacity:.92; transform:scale(1);} 44%{opacity:.95; transform:scale(1);} 55%{opacity:.7; transform:scale(.14);} 60%{opacity:0; transform:scale(.05);} 100%{opacity:0;} }
#lvlup .lu-sparks { position:absolute; inset-inline-start:50%; top:50%; width:0; height:0; }
#lvlup .lu-sparks span { position:absolute; inset-inline-start:0; top:0; width:5px; height:5px; margin:-2.5px; border-radius:50%;
background:radial-gradient(circle, #fff 0%, var(--gold-400) 45%, transparent 70%); opacity:0; }
#lvlup.lu-go .lu-sparks span { animation:lu-spark 6.4s ease-out 1 both; }
@keyframes lu-spark { 0%,54%{opacity:0; transform:translate(0,0) scale(.3);} 62%{opacity:1;} 70%{opacity:.85;} 80%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1);} 100%{opacity:0;} }
#lvlup .lu-flash { position:absolute; inset:0; mix-blend-mode:screen; opacity:0;
background:radial-gradient(circle at 50% 48%, rgba(255,255,255,.92) 0%, rgba(255,210,120,.45) 24%, transparent 56%); }
#lvlup.lu-go .lu-flash { animation:lu-flash 6.4s ease-in-out 1 both; }
@keyframes lu-flash { 0%,56%{opacity:0;} 63%{opacity:1;} 73%{opacity:0;} 100%{opacity:0;} }
#lvlup .lu-title { position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0; display:flex; flex-direction:column; align-items:center; padding-bottom:72px; pointer-events:none; }
#lvlup .lu-title b { font-family:var(--font-display); font-weight:900; font-size:30px; letter-spacing:.05em; color:var(--gold-300); text-shadow:0 2px 16px rgba(0,0,0,.95), 0 0 24px rgba(255,204,51,.6); }
#lvlup .lu-title small { font-family:var(--font-label); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-100); text-shadow:0 1px 8px rgba(0,0,0,.95); }
#lvlup .lu-title b, #lvlup .lu-title small { opacity:0; transform:translateY(34px); }
#lvlup.lu-go .lu-title b, #lvlup.lu-go .lu-title small { animation:lu-rise 6.4s cubic-bezier(.2,.7,.3,1) 1 both; }
#lvlup.lu-go .lu-title small { animation-delay:.14s; }
@keyframes lu-rise { 0%,68%{opacity:0; transform:translateY(34px);} 80%{opacity:1; transform:translateY(0);} 100%{opacity:1; transform:translateY(0);} }
#lvlup .lu-hint { position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:26px; text-align:center; font-size:11px; color:var(--text-dim); opacity:0; }
#lvlup.lu-go .lu-hint { animation:lu-rise 6.4s linear 1 both; }
/* Launch-Splash (DS ui_kit „native launch") — In-App-Boot-Overlay, 1× pro Session. Fixed übers Viewport. */
.launch { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:#070504; }
.launch.out { animation:launch-out .55s ease 1 forwards; }
@keyframes launch-out { to { opacity:0; visibility:hidden; } }
.launch::before { content:''; position:absolute; inset:0; background-size:cover; background-position:center;
background-image: linear-gradient(rgba(7,5,4,.55), rgba(7,5,4,.86)), url('/assets/scenes/backdrop-dusk.png'); opacity:.66; }
.launch::after { content:''; position:absolute; inset:0; background:radial-gradient(70% 50% at 50% 42%, rgba(255,102,0,.16), transparent 70%); }
.launch-logo { position:relative; width:74%; max-width:300px; filter:drop-shadow(0 0 26px rgba(255,102,0,.35)); }
.launch-tag { position:relative; margin-top:18px; font-family:var(--font-display); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:12px; color:var(--gold-300); text-shadow:0 1px 8px rgba(0,0,0,.7); animation:launch-fade 1s ease .35s; }
.launch-bar { position:relative; margin-top:26px; width:148px; height:5px; border-radius:99px; background:rgba(255,200,120,.12); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,200,120,.18); animation:launch-fade .6s ease .4s; }
.launch-bar > i { position:absolute; inset-inline-start:0; top:0; bottom:0; width:100%; background:linear-gradient(90deg, var(--ember-600), var(--gold-300)); box-shadow:0 0 10px var(--ember-500); transform-origin:left; animation:launch-fill 1.5s cubic-bezier(.5,.05,.2,1) .25s both; }
@keyframes launch-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes launch-fade { from { opacity:0; } to { opacity:1; } }
.launch-foot { position:absolute; bottom:26px; inset-inline-start:0; inset-inline-end:0; text-align:center; font-family:var(--font-label); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); animation:launch-fade 1s ease .6s; }
@media (prefers-reduced-motion: reduce) { .launch-logo,.launch-tag,.launch-bar,.launch-bar>i,.launch-foot{animation:none;} }
/* Hover-Tooltip (Port der DS-Tooltip-Komponente): dunkle Bubble, Gold-Top-Kante. Pure CSS, web/mouse.
Nutzung: …icon… — Text wandert in den Tooltip. */
.tip { position: relative; display: inline-flex; align-items: center; }
.tip::after {
content: attr(data-tip); position: absolute; bottom: 100%; inset-inline-start: 50%; transform: translateX(-50%) translateY(-6px);
z-index: 90; white-space: nowrap; pointer-events: none; padding: 5px 9px; border-radius: var(--radius-md);
background: linear-gradient(180deg, #2a1c14, #170f0b); border: 1px solid var(--border-strong); border-top: 2px solid var(--gold-600);
color: var(--stone-100); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0; text-transform: none;
box-shadow: 0 8px 20px rgba(0,0,0,.5); opacity: 0; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; }
/* :focus (nicht nur :focus-visible) → Tap auf Touch zeigt den Tipp (Mobile-First, kein Hover-only). */
.tip:hover::after, .tip:focus-visible::after, .tip:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.tip[tabindex] { cursor: help; }
.tip[tabindex]:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; border-radius: 6px; }
/* Breite Tooltips (mehrzeilig) — z.B. „Zutat wird verwendet in: …"-Rezeptlisten oder Trank-Wirkung. */
.tip--wide::after { white-space: normal; width: max-content; max-width: 220px; text-align: center; line-height: 1.4; font-weight: 500; }
/* Tooltips dürfen die Kartenkante überragen — `.dmo-card` clippt (overflow:hidden), sonst werden
die Tooltips oben/seitlich abgeschnitten. Auf Tooltip-Seiten (Wirtschaft) die Karten NICHT clippen. */
.scroll-area.wirtschaft-cols > .dmo-card { overflow: visible; }
/* §14 Kampfart-Banner: Grafik prominent, anklickbar, aktiv = Heat-Ring. */
.kampf-banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
min-height: 116px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer;
background-size: cover; background-position: center 30%; text-align: start; overflow: hidden;
border: 1.5px solid var(--border); transition: border-color .15s, transform var(--dur-fast), box-shadow .15s; }
.kampf-banner:hover { transform: translateY(-1px); }
.kampf-banner .kb-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,3,.18) 0%, rgba(8,5,3,.62) 70%, rgba(8,5,3,.86) 100%); }
.kampf-banner .kb-title { position: relative; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--stone-100); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.kampf-banner .kb-sub { position: relative; font-size: var(--text-2xs); color: var(--stone-300); text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.kampf-banner.is-active { border-color: var(--ember-500); box-shadow: 0 0 0 1px var(--ember-500), 0 0 22px rgba(255,102,0,.35); }
.kampf-banner--show.is-active { border-color: var(--eis-400, #45c6e8); box-shadow: 0 0 0 1px var(--eis-400, #45c6e8), 0 0 22px rgba(69,198,232,.32); }
.kampf-banner.is-locked { cursor: not-allowed; filter: grayscale(.7) brightness(.6); }
.kampf-banner.is-locked .kb-sub { color: var(--blood-300); }
.log-line { font-size: var(--text-xs); color: var(--text-dim); font-family: var(--font-lore); }
.log-line.is-latest { color: var(--gold-300); }
/* --- LORE-HINT (i): gildenes Medaillon → Pergament-Sheet/Popover ------------ */
.lorehint { display: inline-flex; vertical-align: middle; }
.lorehint__trigger { display: inline-grid; place-items: center; width: 44px; height: 44px;
margin: -11px; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lorehint__medallion { width: 24px; height: 24px; object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition: transform var(--dur-fast), filter var(--dur-fast); }
.lorehint__trigger:hover .lorehint__medallion,
.lorehint__trigger:focus-visible .lorehint__medallion { transform: scale(1.08);
filter: drop-shadow(0 0 6px rgba(232,178,60,.7)); }
.lorehint-ov { position: fixed; inset: 0; z-index: 120; opacity: 0;
background: rgba(8,5,4,.55); transition: opacity .18s ease; }
.lorehint-ov.is-open { opacity: 1; }
.lorehint-ov--sheet { display: flex; align-items: flex-end; }
.lorehint-ov--pop { display: grid; place-items: center; padding: 24px; }
.lorehint-panel { width: 100%; max-width: 380px; padding: 18px 20px 16px;
border-radius: var(--radius-xl, 22px); outline: none; }
.lorehint-ov--sheet .lorehint-panel { max-width: none;
border-radius: var(--radius-xl, 22px) var(--radius-xl, 22px) 0 0; transform: translateY(18px); transition: transform var(--dur-base) ease; }
.lorehint-ov--pop .lorehint-panel { transform: translateY(8px) scale(.98); transition: transform .18s ease; }
.lorehint-ov.is-open .lorehint-panel { transform: none; }
.lorehint-grab { display: block; width: 42px; height: 4px; border-radius: 2px;
background: var(--scroll-edge, #b89b63); opacity: .6; margin: -4px auto 12px; }
.lorehint-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.lorehint-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px;
border-radius: 50%; background: var(--blood-600, #8a2a1a); color: var(--parchment-50);
font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; }
.lorehint-title { font-family: var(--font-display); font-size: var(--text-md, 16px);
color: var(--parchment-ink); font-weight: 700; line-height: 1.2; }
.lorehint-body { font-family: var(--font-lore); font-size: var(--text-sm, 14px);
line-height: 1.55; color: var(--parchment-ink); }
.lorehint-body b { color: #7a4410; font-weight: 700; }
.lorehint-close { margin-top: 14px; width: 100%; color: var(--parchment-ink-soft) !important; }
/* --- Bruthöhle-Tagesritual (§45): element-getönte Pflege-Geste -------------- */
.ritual-ov { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:24px;
background:rgba(8,5,4,.7); opacity:0; transition:opacity var(--dur-base) ease; }
.ritual-ov.is-open { opacity:1; }
.ritual-panel { width:100%; max-width:300px; padding:20px; border-radius:var(--radius-xl,22px); text-align:center;
background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 60%), var(--surface-card,#1a110d);
border:1px solid var(--stone-700); transform:translateY(10px); transition:transform var(--dur-base) ease; }
.ritual-ov.is-open .ritual-panel { transform:none; }
.ritual-egg { width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--hue) 60%, transparent)); }
.ritual-prompt { font-family:var(--font-lore); font-size:var(--text-sm); color:var(--text-muted); margin:8px 0 14px; min-height:2.6em; line-height:1.35; }
.ritual-gauge { position:relative; width:54px; height:176px; margin:0 auto; border-radius:27px;
background:var(--surface-sunken,#120c0a); border:1px solid var(--stone-700); overflow:hidden; cursor:pointer; touch-action:none; }
.ritual-band { position:absolute; inset-inline-start:0; inset-inline-end:0; background:color-mix(in srgb, var(--gold-400) 38%, transparent);
border-top:1px solid var(--gold-300); border-bottom:1px solid var(--gold-300); }
.ritual-fill { position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0; height:0;
background:linear-gradient(180deg, color-mix(in srgb, var(--hue) 85%, #fff 15%), var(--hue)); box-shadow:0 0 16px var(--hue); }
.ritual-gentle { margin-top:14px; opacity:.7; }
.ritual-panel.is-good .ritual-egg { animation:ritual-pulse .5s ease; }
@keyframes ritual-pulse { 0%{transform:scale(1);} 40%{transform:scale(1.13);} 100%{transform:scale(1);} }
.ritual-ov.is-resolving .ritual-gauge, .ritual-ov.is-resolving .ritual-gentle { opacity:.4; pointer-events:none; }
/* === §47 Responsive Shell: mobil = Bottom-Nav · Tablet/Web = linke Schiene ================ */
.content-col { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Backdrop-Kontext (Region/Krieg/Tageszeit) — subtiler Atmosphäre-Schimmer hinter dem Inhalt. */
.app::before { content: ''; position: absolute; inset: 0; background: var(--bd, none) center/cover no-repeat;
opacity: .24; pointer-events: none; z-index: 0; }
.app > * { position: relative; z-index: 1; }
.app > .corners { position: absolute; inset: 0; z-index: 40; pointer-events: none; } /* Voll-Overlay → Spans an allen 4 Ecken */
.app.bd-dusk { --bd: url('/assets/scenes/backdrop-dusk.png'); }
.app.bd-war { --bd: url('/assets/scenes/backdrop-war.png'); }
.app.bd-day { --bd: url('/assets/scenes/backdrop-day.png'); }
.app.bd-moonlight { --bd: url('/assets/scenes/backdrop-moonlight.png'); }
.app.bd-storm { --bd: url('/assets/scenes/backdrop-storm.png'); }
/* Eck-Frames (vergoldete Reliefs) — nur Tablet/Web. */
.corners { display: none; }
.corners > span { position: absolute; width: 96px; height: 82px; background-size: contain;
background-repeat: no-repeat; opacity: .85; filter: drop-shadow(0 2px 7px rgba(0,0,0,.5)); z-index: 30; }
.corners .c-tl { top: 0; inset-inline-start: 0; background-image: url('/assets/ui/frame/corner-tl.png'); background-position: top left; }
.corners .c-tr { top: 0; inset-inline-end: 0; background-image: url('/assets/ui/frame/corner-tr.png'); background-position: top right; }
.corners .c-bl { bottom: 0; inset-inline-start: 0; background-image: url('/assets/ui/frame/corner-bl.png'); background-position: bottom left; }
.corners .c-br { bottom: 0; inset-inline-end: 0; background-image: url('/assets/ui/frame/corner-br.png'); background-position: bottom right; }
/* RTL: die Ecken-Positionen flippen logisch (inset-inline-*), aber die Artwork ist eckenspezifisch
→ an der gespiegelten Position zeigte die falsche Krümmung. Artwork horizontal spiegeln, dann passt
die mitgewanderte Gegen-Ecke (z.B. c-tr-Bild gespiegelt = tl-Optik) zur visuellen Ecke. */
[dir="rtl"] .corners > span { transform: scaleX(-1); }
/* Gesinnung „Sonnenbund" (hell) → goldene Ecken (bereit, sobald Gesinnung am Player liegt). */
.app.align-hell .corners .c-tl { background-image: url('/assets/ui/frame/gold/corner-tl.png'); }
.app.align-hell .corners .c-tr { background-image: url('/assets/ui/frame/gold/corner-tr.png'); }
.app.align-hell .corners .c-bl { background-image: url('/assets/ui/frame/gold/corner-bl.png'); }
.app.align-hell .corners .c-br { background-image: url('/assets/ui/frame/gold/corner-br.png'); }
/* §Desktop-UX: Schienen-/Mehrspalten-Layout, aber als zentriertes „Fenster" gekappt (max-width) mit Backdrop —
nutzt breite Screens (2–3 Karten-Spalten via column-count), ohne auf Ultrawide edge-to-edge zu zerlaufen. */
@media (min-width: 980px) {
html { background: radial-gradient(1500px 1050px at 50% -6%, #191222 0%, #0b0810 58%, #060409 100%) fixed; }
.app { max-width: 1800px; margin-inline: auto; flex-direction: row; height: 100vh; min-height: 100vh; overflow: hidden;
box-shadow: 0 0 0 1px var(--border-strong), 0 30px 90px rgba(0,0,0,.7); }
.corners { display: block; }
.content-col { order: 2; flex: 1; min-width: 0; height: 100vh; overflow: hidden; }
.content-col .app-main { flex: 1; overflow-y: auto; }
/* §47 Mehrspaltig: Karten fließen in 2 Spalten, Header/Hero spannen über alle. */
.content-col .scroll-area { max-width: 1180px; margin: 0 auto; width: 100%; padding: 26px 44px;
display: block; column-count: 2; column-gap: 20px; }
/* ⚠️ `:where()` gibt dieser Regel Spezifitaet NULL — bewusst. Sie ist eine Layout-VORGABE
fuer die Mehrspalten-Ansicht, keine Uebersteuerung: eine Komponente mit eigenem Abstand
soll sich durchsetzen duerfen. Vorher schlug `.content-col .scroll-area > *` (0,2,0) jede
einzelne Klasse, und beim Aufloesen von Inline-Styles kippten die Abstaende deshalb SIEBEN
Mal still um (.profil-rechtliches, .konzept-marke, .u-mb-2, .wirt-szene,
.berufe-abschnitt, .u-mb-7, .berufe-fuss). Als Inline-Stil hatte sich der Wert immer
durchgesetzt — mit dieser Zeile tut es die Klasse auch. */
:where(.content-col .scroll-area) > * { break-inside: avoid; margin: 0 0 16px; }
.content-col .scroll-area > .screen-head,
.content-col .scroll-area > .span-all { column-span: all; }
/* Bottom-Nav → linke vertikale Schiene */
.dmo-bottomnav { order: 1; width: 212px; height: auto; flex-direction: column; justify-content: flex-start;
align-items: stretch; gap: 6px; padding: 16px 12px; border-top: none; border-inline-end: 1px solid var(--border-strong);
box-shadow: 6px 0 18px rgba(0,0,0,.4); }
.dmo-bottomnav__item { flex: none; flex-direction: row; justify-content: flex-start; gap: 11px;
padding: 11px 14px; border-radius: var(--radius-md); min-height: 0; }
.dmo-bottomnav__item.is-active { background: var(--grad-ember); color: var(--primary-ink); box-shadow: var(--glow-ember); }
.dmo-bottomnav__item.is-active .dmo-bottomnav__icon { transform: none; background: transparent; box-shadow: none; }
.dmo-bottomnav__label { font-size: var(--text-2xs); font-weight: 600; }
}
@media (min-width: 1280px) { .content-col .scroll-area { max-width: 1360px; } }
@media (min-width: 1560px) { .content-col .scroll-area { max-width: 1500px; column-count: 3; } }
/* Sehr breite Monitore: die gesamte Box darf mehr atmen (Box-Cap folgt, sonst limitiert .app die Content-Breite). */
@media (min-width: 1920px) { .app { max-width: 2080px; } .content-col .scroll-area { max-width: 2000px; } }
@media (min-width: 2560px) { .app { max-width: 2360px; } .content-col .scroll-area { max-width: 2200px; column-count: 4; } }
/* §47 Wirtschaft: feste 3-Spalten (Sammler · Terrain · Braukessel) statt column-count-Masonry —
sonst springt die hohe Terrain/Braukessel-Karte je nach Inhaltshöhe in eine andere Spalte. Grid
platziert die Karten stabil in Quell-Reihenfolge; Banner/Header spannen über alle Spalten. */
@media (min-width: 980px) {
.content-col .scroll-area.wirtschaft-cols { column-count: unset; display: grid;
grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.55fr) minmax(0, 1.55fr);
gap: 16px 18px; align-items: start; }
:where(.content-col .scroll-area.wirtschaft-cols) > * { margin: 0; break-inside: auto; }
.content-col .scroll-area.wirtschaft-cols > .span-all,
.content-col .scroll-area.wirtschaft-cols > .screen-head { grid-column: 1 / -1; }
}
/* === §47 Lade-Indikatoren: Turbo-Bar · Spinner-Overlay · Skeleton-Shimmer ============== */
.turbo-progress-bar { height: 3px; background: var(--grad-ember); box-shadow: 0 0 8px rgba(255,102,0,.6); }
.spinner { display: inline-block; width: 44px; height: 44px;
background: url('/assets/ui/spinner.png') center/contain no-repeat; animation: dmo-spin .8s linear infinite; }
@keyframes dmo-spin { to { transform: rotate(360deg); } }
.app-spinner { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
background: rgba(8,5,4,.32); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.app-spinner.on { opacity: 1; }
/* Lokaler Button-Spinner (Doherty): der getippte Button zeigt SOFORT, dass die Aktion läuft.
Label wird transparent, ein kleiner Ring dreht mittig — gilt für CTA-Buttons + Icon-Buttons
(z.B. + Trainieren, Kaufen, Verkaufen). Turbo-Morph entfernt .is-pending automatisch. */
.dmo-btn.is-pending, .dmo-iconbtn.is-pending { color: transparent !important; pointer-events: none; position: relative; }
.dmo-btn.is-pending > *, .dmo-iconbtn.is-pending > * { visibility: hidden; }
.dmo-btn.is-pending::after, .dmo-iconbtn.is-pending::after {
content: ''; position: absolute; top: 50%; inset-inline-start: 50%; width: 15px; height: 15px; margin: -8px 0 0 -8px;
border: 2px solid var(--ember-300); border-top-color: transparent; border-radius: 50%;
animation: dmo-spin .6s linear infinite; }
/* Skeleton-Platzhalter (Shimmer) — für Lazy-Frames / async Sektionen. */
.skeleton { position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: var(--radius-md); }
.skeleton::after { content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
transform: translateX(-100%); animation: dmo-shimmer 1.3s infinite; }
@keyframes dmo-shimmer { to { transform: translateX(100%); } }
.skeleton--text { height: 12px; margin: 6px 0; }
.skeleton--line { height: 12px; }
.skeleton--card { height: 84px; }
.skeleton--avatar { width: 56px; height: 56px; border-radius: var(--radius-md); }
/* §47 Auth-Screens (Login/Register) full-bleed statt mobiler 480px-Säule; Form zentriert + gekappt. */
.app--auth { max-width: none; box-shadow: none; }
.app--auth .login__form { max-width: 380px; margin: 0 auto; }
@media (min-width: 980px) {
.app--auth .login__inner { justify-content: center; }
.app--auth .login__bg { opacity: .42; object-position: center 22%; }
.app--auth .login__logo { max-width: 340px; }
}
/* §47 Fix: Responsive-Shell-Row-Layout NICHT auf Auth-Screens (sonst wird .login zur schmalen Flex-Spalte). */
@media (min-width: 980px) {
.app--auth { flex-direction: column; height: 100vh; overflow: hidden; }
.app--auth .login { flex: 1; width: 100%; }
}
/* §47 Content-Abstand zu den Eck-Frames auf Tablet/Web (sonst überlagern sie Resource-Bar/Inhalt). */
@media (min-width: 980px) {
.content-col > .resource-bar { padding-inline-end: 96px; }
.content-col .scroll-area { padding-top: 30px; }
}
/* §47 Drache-Detail (eigene Hero-Struktur, kein .scroll-area): Hero full-bleed, Content gekappt auf Web. */
.detail-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 980px) {
/* Web: Drachenansicht nutzt die Breite — Hero voll oben, Inhalt als Masonry-Spalten (wie der Rest
der App, column-count). KEIN Grid → kurze Karten (z. B. „Training läuft") strecken sich NICHT. */
.detail-body { max-width: 1080px; margin: 0 auto; padding: 26px 40px; column-count: 2; column-gap: 16px; }
.detail-body > * { break-inside: avoid; margin: 0 0 16px; }
.detail-stage { max-width: 1080px; margin: 0 auto; max-height: 380px; border-radius: 0 0 var(--radius-xl,22px) var(--radius-xl,22px); }
}
/* Sehr breite Screens: drei Spalten + mehr Breite. */
@media (min-width: 1440px) {
.detail-body { max-width: 1560px; column-count: 3; }
.detail-stage { max-width: 1560px; }
}
/* §47 Szenen-Banner (Mock-Scene-Grafiken als Screen-Header, z.B. Markt). */
.scene-banner { height: 150px; border-radius: var(--radius-lg); background-size: cover; background-position: center;
box-shadow: inset 0 -38px 46px -28px var(--bg), inset 0 0 0 1px var(--border); }
@media (min-width: 980px) { .scene-banner { height: 380px; } }
/* §47 Listen-/Single-Flow-Screens: eine breite Spalte statt mehrspaltig (Rangliste, Codex, Legends…). */
@media (min-width: 980px) {
.content-col .scroll-area.single-col { column-count: 1; max-width: 920px; }
}
/* Rangliste-Leaderboard: auf Desktop eine echte Ranking-TABELLE — die Sub-Zeile (mobil gestapelt)
wird zu ausgerichteten Metrik-Spalten, die die Breite mit DATEN füllen statt mit Leere. */
.lb-cols { display: none; }
@media (min-width: 980px) {
.single-col .lb-sub { display: none; }
.single-col .lb-cols { display: flex; gap: 32px; align-items: center; flex: none; }
.lb-col { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; line-height: 1.15; }
.lb-col__v { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-sm); color: var(--text-muted); }
.lb-col__k { font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
}
/* §47 Roster-Drachen auf Tablet/Web mehr vertikaler Raum (sonst Kopf gecropped). */
@media (min-width: 980px) {
.roster-tile { height: 172px; }
.roster-tile .dragon-art img { max-height: 92%; }
}
/* §47 Postfach: schmale zentrierte Inbox-Spalte (wenige Nachrichten → nicht in 920px verloren). */
@media (min-width: 980px) {
.content-col .scroll-area.inbox-col { column-count: 1; max-width: 660px; }
}
/* §47 Arena-Kampfkarten auf Web höher + Drache kleiner (sonst Kopf abgeschnitten). */
@media (min-width: 980px) {
.arena-stage { height: 230px !important; }
.arena-stage .dragon-art img { max-height: 80%; }
}
/* §47.9 Welt-Karte: Pins jetzt klickbar (Stadt-Detail) */
.island .pin { cursor: pointer; transition: transform var(--dur-base,.18s) var(--ease-spring,ease), box-shadow var(--dur-base,.18s); z-index: 2; display: block; }
.island .pin::after { content: ''; position: absolute; inset: -15px; border-radius: 50%; } /* 14+30 = 44px echtes Touch-Ziel (Fitts) */
.island .pin:hover, .island .pin:focus-visible { transform: translate(-50%,-50%) scale(1.5); box-shadow: 0 0 0 3px rgba(255,204,51,.35), 0 0 12px rgba(0,0,0,.7); outline: none; }
.island .pin--locked { opacity: .45; filter: grayscale(.5); }
/* §47.9 Stadt-Detail (Überfall-Vorschau) */
.stadt-stage { position: relative; height: 172px; border-radius: var(--radius-lg); overflow: hidden;
background-size: cover; background-position: center 38%; background-color: #160d09;
border: 1px solid var(--border); display: flex; align-items: flex-end; padding: 14px; }
.stadt-stage__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,6,4,.66) 0%, rgba(10,6,4,.10) 40%, transparent 62%); }
.stadt-stage__crest { position: absolute; inset-inline-end: 12px; top: 52%; transform: translateY(-50%); width: 120px; height: 150px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.7)); }
.stadt-stage__rich { position: relative; font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-400); text-shadow: 0 1px 6px rgba(0,0,0,.92); }
.stadt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-cap { font-size: var(--text-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.stat-big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin-top: 3px; font-variant-numeric: tabular-nums; }
.risk-bar { height: 9px; border-radius: var(--radius-pill,99px); background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; }
.risk-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-500), var(--blood-500)); transition: width var(--dur-slow) var(--ease-out); }
@media (min-width: 980px) { .stadt-stage { height: 420px; } .stadt-stage__crest { width: 200px; height: 248px; } .stadt-stage__rich { font-size: var(--text-xs); } }
/* Desktop: voll-breite Artwork-Bühne (span-all) + 2-spaltige Raub-Vorschau (Einsatz | Ablauf), Aktionen voll-breit. */
@media (min-width: 980px) {
.content-col .scroll-area.stadt-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; max-width: 1040px; }
.content-col .scroll-area.stadt-screen > * { margin: 0; }
.scroll-area.stadt-screen > .span-all { grid-column: 1 / -1; }
}
@media (min-width: 1280px) { .content-col .scroll-area.stadt-screen { max-width: 1180px; } }
/* ===== Postfach Master-Detail ===== */
.pf-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-detail { display: none; } /* Mobil leer: Pane unsichtbar (nur Liste). Befüllt → Vollbild-Overlay (s.u.) */
/* Mobil: geöffnete Nachricht/Verfassen als Vollbild-Overlay über der Liste; „Zurück"/„×" schließt (lädt leeres Pane). */
@media (max-width: 979px) {
.pf-detail:has(> .pf-detail__inner) { display: block; position: fixed; inset: 0; z-index: 90;
background: var(--grad-cave); overflow-y: auto; padding: 14px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
/* Kind-Medaillon (wortlose Art-Kennung) */
.pf-med { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
font-size: 18px; border: 1px solid var(--border); background: var(--surface-hover); color: var(--text-muted); }
.pf-med--angriff { color: var(--blood-400); background: color-mix(in srgb, var(--blood-500) 16%, transparent); border-color: color-mix(in srgb, var(--blood-500) 40%, transparent); }
.pf-med--kampf { color: var(--feuer-500); background: color-mix(in srgb, var(--feuer-500) 15%, transparent); border-color: color-mix(in srgb, var(--feuer-500) 38%, transparent); }
.pf-med--bericht { color: var(--heal-400); background: color-mix(in srgb, var(--heal-400) 15%, transparent); border-color: color-mix(in srgb, var(--heal-400) 36%, transparent); }
.pf-med--privat { color: var(--gold-400); background: color-mix(in srgb, var(--gold-400) 16%, transparent); border-color: color-mix(in srgb, var(--gold-400) 40%, transparent); }
.pf-med--system { color: var(--text-muted); }
/* Team-Ankündigung: dieselbe Wertigkeit wie persönliche Post, aber unverwechselbar (Megafon). */
.pf-med--team { color: var(--gold-300, #e0ac4c); background: color-mix(in srgb, var(--gold-400) 20%, transparent); border-color: color-mix(in srgb, var(--gold-400) 55%, transparent); }
/* Listenzeile */
.pf-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; text-decoration: none;
border-inline-start: 3px solid transparent; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pf-row__main { flex: 1; min-width: 0; }
.pf-row__top { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.pf-row__from { font-size: var(--text-2xs); color: var(--text-muted); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row__date { margin-inline-start: auto; flex: none; font-size: var(--text-2xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pf-row__subj { color: var(--text); font-size: var(--text-sm); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row__prev { font-size: var(--text-2xs); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row--unread { border-inline-start-color: var(--ember-500); }
.pf-row--unread .pf-row__subj { font-weight: 800; }
.pf-row--unread .pf-row__from { color: var(--text); }
.pf-row--read .pf-row__subj { font-weight: 600; }
.pf-row.is-active { background: var(--surface-hover); border-inline-start-color: var(--gold-500); }
/* Stilles-Archiv-Verwaltung (eingeklappt) */
.pf-mute > .pf-mute__sum { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 8px;
font-family: var(--font-display); color: var(--gold-300); font-size: var(--text-sm); }
.pf-mute > .pf-mute__sum::-webkit-details-marker { display: none; }
.pf-mute__caret { margin-inline-start: auto; transition: transform var(--dur-fast) var(--ease-out); font-size: 14px; }
.pf-mute[open] .pf-mute__caret { transform: rotate(180deg); }
/* Leerzustände */
.pf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
color: var(--text-dim); padding: 32px 16px; }
.pf-empty i { font-size: 44px; color: var(--text-muted); opacity: .7; }
.pf-empty p { font-size: var(--text-sm); margin: 0; max-width: 28ch; }
.pf-empty--pane { height: 100%; min-height: 280px; }
/* Detail-Pane Inhalt (Lesen/Verfassen) */
.pf-detail__inner { display: flex; flex-direction: column; gap: 12px; }
.pf-detail__head { display: flex; align-items: center; gap: 10px; }
.pf-detail__from { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pf-detail__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.pf-detail__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold-300); display: flex; align-items: center; gap: 8px; }
.pf-detail__back, .pf-detail__close { margin-inline-start: auto; flex: none; }
.pf-detail__body { display: flex; flex-direction: column; gap: 8px; }
.pf-detail__actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ===== Desktop: 2-Pane Master-Detail ===== */
@media (min-width: 980px) {
.content-col .scroll-area.pf-screen { display: grid; grid-template-columns: minmax(320px, 360px) 1fr; gap: 18px; align-items: start; max-width: 1180px; }
.content-col .scroll-area.pf-screen > * { margin: 0; }
.scroll-area.pf-screen > .span-all { grid-column: 1 / -1; }
.pf-detail { display: block; position: sticky; top: 0; }
.pf-detail__back { display: none; } /* Lesen: Liste ist sichtbar daneben → kein „Zurück" nötig ( __close bleibt für Verfassen) */
}
@media (min-width: 1440px) { .content-col .scroll-area.pf-screen { max-width: 1320px; grid-template-columns: 380px 1fr; } }
/* §47.9 Markt: Item-Icon-Plättchen (tier-gerahmt) statt nacktem Punkt */
.item-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-md,10px);
background: var(--surface-sunken); border: 1px solid color-mix(in srgb, var(--tier,#888) 55%, var(--border));
box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 9px -3px var(--tier,transparent); }
.item-ico img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
/* §40 Spieler-Editor (admin-player-Controller) — Autocomplete + Voll-Detail + Inline-Aktionen */
.ap-searchbox { position: relative; }
.ap-searchbox .field { width: 100%; padding-inline-start: 34px; }
.ap-searchbox__ico { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
.ap-suggest { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column;
background: var(--surface-card); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-md); overflow: hidden;
box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); max-height: 320px; overflow-y: auto; }
.ap-suggest:empty { display: none; }
.ap-suggest__item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: none; border: 0; border-bottom: 1px solid var(--border);
cursor: pointer; text-align: start; color: var(--text); font: inherit; transition: background var(--dur-fast,.12s); }
.ap-suggest__item:hover, .ap-suggest__item:focus-visible { background: var(--surface-hover); outline: none; }
.ap-suggest__nick { flex: 1; font-weight: 700; font-size: var(--text-sm); }
.ap-suggest__meta { font-size: var(--text-2xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ap-suggest__empty { padding: 10px 12px; color: var(--text-dim); font-size: var(--text-2xs); }
.ap-orb { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--el,#888); box-shadow: 0 0 7px -1px var(--el,#888), inset 0 0 0 1.5px rgba(0,0,0,.35); }
.ap-flag { font-size: var(--text-3xs); letter-spacing: .06em; padding: 1px 5px; border-radius: var(--radius-pill,99px); background: var(--surface-sunken); color: var(--text-dim); vertical-align: middle; }
.ap-flag--ban { background: var(--blood-700); color: var(--blood-100); }
.ap-flag--staff { background: var(--ember-700,#7a3a10); color: var(--ember-100,#ffd9b8); }
.ap-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-top: 12px; background: var(--surface-sunken);
border: 1px solid var(--ember-700,var(--border)); border-radius: var(--radius-lg); }
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ap-eyebrow { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.ap-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--text); display: flex; align-items: center; gap: 7px; }
.ap-lv { font-family: var(--font-display); font-weight: 800; color: var(--gold-300); background: var(--surface-card); border: 1px solid var(--gold-700); border-radius: var(--radius-pill,99px); padding: 3px 11px; font-size: var(--text-sm); flex: none; }
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ap-stat { text-align: center; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 4px; }
.ap-stat__cap { font-size: var(--text-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.ap-stat__val { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); margin-top: 2px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-dragons { display: flex; flex-direction: column; gap: 6px; }
.ap-dragon { display: flex; flex-direction: column; align-items: stretch; gap: 7px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 7px 10px; }
.ap-dragon__main { flex: 1; min-width: 0; }
.ap-dragon__name { font-size: var(--text-sm); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-hp { height: 6px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; margin-top: 4px; }
.ap-hp__fill { display: block; height: 100%; transition: width var(--dur-slow) var(--ease-out); }
.ap-dim { color: var(--text-dim); font-weight: 400; }
.ap-num { font-size: var(--text-2xs); font-variant-numeric: tabular-nums; flex: none; }
.ap-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-quick .ap-danger { color: var(--blood-300); }
.ap-apply { display: flex; gap: 6px; align-items: center; }
.ap-select { flex: 1; min-width: 0; }
.ap-amount { width: 96px; flex: none; text-align: end; }
.ap-rollenote, .ap-hint { font-size: 10px; }
.ap-hint { margin-top: 8px; }
.ap-toast { position: fixed; inset-inline-start: 50%; bottom: 84px; transform: translate(-50%, 14px); z-index: 120; pointer-events: none;
padding: 9px 16px; border-radius: var(--radius-pill,99px); font-size: var(--text-sm); font-weight: 600;
opacity: 0; transition: opacity var(--dur-base,.2s), transform var(--dur-base,.2s); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); }
.ap-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.ap-toast--ok { background: var(--heal-600,#1f6f3e); color: #eafff1; }
.ap-toast--err { background: var(--blood-600); color: #ffecec; }
@media (min-width: 980px) { .ap-toast { bottom: 28px; } }
/* §40 Spieler-Editor God-Mode — Sektionen + interaktive Controls */
.ap-sec { margin-top: 4px; }
.ap-sec + .ap-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ap-sec__cap { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-300); margin-bottom: 8px; }
.ap-grid--2 { grid-template-columns: 1fr 1fr; }
.ap-stat--act { text-align: start; display: flex; flex-direction: column; gap: 6px; }
.ap-stat--act .ap-stat__cap { text-align: start; }
.ap-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ap-chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill,99px); cursor: pointer;
background: var(--surface-sunken); border: 1px solid var(--border-strong,var(--border)); color: var(--gold-300); }
.ap-chip:hover { background: var(--gold-700); color: var(--gold-100); }
.ap-stepper { display: flex; align-items: center; gap: 8px; }
.ap-stepper .ap-stat__val { min-width: 38px; text-align: center; }
.ap-stepmini { display: inline-flex; align-items: center; gap: 5px; }
.ap-step { position: relative; width: 24px; height: 24px; border-radius: var(--radius-sm,7px); cursor: pointer; flex: none;
background: var(--surface-card); border: 1px solid var(--border-strong,var(--border)); color: var(--text); font-weight: 800; line-height: 1; }
.ap-step::after { content: ''; position: absolute; inset: -10px; }
.ap-step:hover { background: var(--ember-700); color: var(--ember-100); border-color: var(--ember-500); }
.ap-set { display: inline-flex; gap: 4px; }
.ap-set__inp { width: 84px; padding: 4px 7px; text-align: end; font-size: var(--text-2xs); }
.ap-set__btn { padding: 4px 9px; border-radius: var(--radius-sm,7px); cursor: pointer; font-size: var(--text-2xs); font-weight: 700;
background: var(--surface-card); border: 1px solid var(--border-strong,var(--border)); color: var(--text-muted); }
.ap-set__btn:hover { background: var(--gold-700); color: var(--gold-100); }
.ap-range { width: 100%; accent-color: var(--ember-500); cursor: pointer; }
.ap-rolesel, .ap-statesel { padding: 5px 7px; font-size: var(--text-2xs); }
.ap-statesel { max-width: 130px; }
.ap-dragon__top { display: flex; align-items: center; gap: 8px; }
.ap-dragon__lv { margin-inline-start: auto; font-size: var(--text-2xs); }
.ap-dragon__acts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ap-mini { position: relative; width: 22px; height: 22px; flex: none; border-radius: var(--radius-sm,6px); cursor: pointer; line-height: 1;
background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.ap-mini::after { content: ''; position: absolute; inset: -11px; }
.ap-mini:hover { background: var(--surface-hover); color: var(--text); }
.ap-mini.ap-danger:hover { background: var(--blood-700); color: var(--blood-100); border-color: var(--blood-500); }
.ap-inv { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.ap-inv:last-of-type { border-bottom: 0; }
.ap-inv__name { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tierdot { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--t,#888); box-shadow: 0 0 6px -1px var(--t,#888); }
.ap-invadd { display: flex; gap: 6px; align-items: center; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border); }
.ap-invsel { flex: 1; min-width: 0; font-size: var(--text-2xs); }
.ap-invmenge { width: 64px; flex: none; text-align: end; }
/* §40 Wirtschaft — Geldmengen-Bilanz + Klartext-Ledger */
.wz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .wz-grid { grid-template-columns: repeat(4, 1fr); } }
.wz-stat { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; }
.wz-cap { font-size: var(--text-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.wz-cap small { text-transform: none; letter-spacing: 0; opacity: .8; }
.wz-val { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); margin-top: 3px; font-variant-numeric: tabular-nums; }
.wz-sep { height: 1px; background: var(--border); margin: 14px 0; }
.wz-q { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--border-strong,var(--border)); color: var(--text-dim); font-size: var(--text-3xs); cursor: help; vertical-align: 1px; }
.wz-row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; background: var(--surface-sunken); border-radius: var(--radius-md); }
.wz-row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-row__name { font-weight: 700; font-size: var(--text-sm); color: var(--text); }
.wz-fluss { font-size: var(--text-3xs); letter-spacing: .04em; padding: 1px 7px; border-radius: var(--radius-pill,99px); }
.wz-row__desc { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.wz-row__meta { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.wz-row__sum { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); font-variant-numeric: tabular-nums; flex: none; }
.wz-horter { display: flex; align-items: center; gap: 10px; }
.wz-horter__rank { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); border: 1px solid var(--border); font-size: var(--text-2xs); font-weight: 700; color: var(--gold-300); }
.wz-horter__name { font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-bar { height: 5px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; margin-top: 3px; }
.wz-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); transition: width var(--dur-slow) var(--ease-out); }
/* §40 News-WYSIWYG */
.nw-lbl { display: flex; flex-direction: column; gap: 3px; font-size: var(--text-2xs); color: var(--text-muted); flex: 1; min-width: 140px; }
.nw-opt { color: var(--text-dim); font-weight: 400; }
.nw-toolbar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 5px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: 0; }
.nw-tb { position: relative; min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--radius-sm,6px); cursor: pointer; background: var(--surface-card); border: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1; }
.nw-tb::after { content: ''; position: absolute; inset: -8px; }
.nw-tb:hover { background: var(--ember-700); color: var(--ember-100); border-color: var(--ember-500); }
.nw-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.nw-editor { min-height: 120px; max-height: 340px; overflow-y: auto; padding: 12px 14px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md); color: var(--text); font-size: var(--text-sm); line-height: var(--leading-relaxed); outline: none; }
.nw-editor:focus { border-color: var(--ember-500); box-shadow: 0 0 0 1px var(--ember-600); }
.nw-editor:empty::before { content: attr(data-placeholder); color: var(--text-dim); }
.nw-editor h3 { font-family: var(--font-display); font-size: var(--text-md); margin: 8px 0 4px; color: var(--gold-300); }
.nw-editor blockquote { border-inline-start: 3px solid var(--ember-600); margin: 6px 0; padding: 2px 0 2px 12px; color: var(--text-muted); font-style: italic; }
.nw-editor ul, .nw-editor ol { margin: 6px 0; padding-inline-start: 22px; }
.nw-editor a { color: var(--gold-300); text-decoration: underline; }
.nw-pvwrap { margin-top: 2px; }
.nw-entry { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.nw-entry:last-child { border-bottom: 0; }
.nw-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; box-shadow: 0 0 6px -1px currentColor; }
.nw-entry__title { font-size: var(--text-sm); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-entry__meta { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
/* §40 Editor-Vervollständigung: Drachen-Detail (Skills/Bond/Element) */
.ap-dmore { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.ap-dmore > summary { cursor: pointer; font-size: var(--text-2xs); color: var(--ember-300); letter-spacing: .04em; list-style: none; padding: 3px 0; }
.ap-dmore > summary::-webkit-details-marker { display: none; }
.ap-dmore > summary::before { content: '▸ '; }
.ap-dmore[open] > summary::before { content: '▾ '; }
.ap-skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
@media (min-width: 560px) { .ap-skills { grid-template-columns: repeat(3, 1fr); } }
.ap-skill { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-sm,7px); padding: 5px 8px; }
.ap-skill__lbl { font-size: var(--text-2xs); color: var(--text-muted); }
/* §40 Balancing-Konsole */
.bl-row { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.bl-row:last-child { border-bottom: 0; }
.bl-row__info { flex: 1; min-width: 0; }
.bl-row__label { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.bl-changed { color: var(--ember-400); font-size: 10px; vertical-align: 2px; }
.bl-row__desc { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.bl-row__ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.bl-num { display: inline-flex; align-items: center; gap: 5px; }
.bl-num .field { width: 110px; text-align: end; }
.bl-unit { font-size: var(--text-2xs); color: var(--text-dim); }
.bl-range { display: inline-flex; align-items: center; gap: 8px; }
.bl-range .ap-range { width: 130px; }
.bl-out { font-family: var(--font-display); font-weight: 700; color: var(--gold-300); font-variant-numeric: tabular-nums; min-width: 44px; text-align: end; }
.bl-default { font-size: 10px; color: var(--text-dim); white-space: nowrap; min-width: 64px; text-align: end; }
.bl-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.bl-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bl-toggle__track { width: 40px; height: 22px; border-radius: 99px; background: var(--surface-sunken); border: 1px solid var(--border-strong,var(--border)); position: relative; transition: background var(--dur-base,.2s); }
.bl-toggle__knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); transition: transform var(--dur-base,.2s), background var(--dur-base,.2s); }
.bl-toggle input:checked + .bl-toggle__track { background: var(--grad-ember,var(--ember-600)); border-color: var(--ember-500); }
.bl-toggle input:checked + .bl-toggle__track .bl-toggle__knob { transform: translateX(18px); background: var(--stone-950,#1a0f0a); }
.bl-toggle__txt { font-size: var(--text-2xs); color: var(--text-muted); min-width: 26px; }
.bl-savebar { position: sticky; bottom: 0; margin-top: 14px; padding: 12px 0; background: linear-gradient(0deg, var(--bg) 60%, transparent); }
.bl-savebar .dmo-btn { width: 100%; }
/* Stand des Selbstspeicherns. Leer = nichts passiert, also auch kein leerer Kasten. */
.bl-stand { min-height: 0; margin-bottom: 6px; text-align: center; font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .06em; color: var(--text-muted); }
.bl-stand:empty { display: none; }
.bl-stand[data-art="gut"] { color: var(--heal-400, #6fc98a); }
.bl-stand[data-art="fehler"] { color: var(--blood-400, #d86a6a); }
@media (min-width: 980px) { .bl-savebar { bottom: 14px; } }
/* ============ §40 Admin-Komponenten (wiederverwendbar, Mock screens-admin.jsx) ============ */
/* Sub-Navigation (Pill-Tabs) */
.adm-nav { display: flex; gap: 4px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill,99px); padding: 4px; overflow-x: auto; }
.adm-nav__tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill,99px); white-space: nowrap;
font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); text-decoration: none; transition: background var(--dur-base,.18s), color var(--dur-base,.18s); }
.adm-nav__tab:hover { color: var(--text); background: var(--surface-hover); }
.adm-nav__tab.is-active { background: var(--grad-ember, var(--ember-600)); color: var(--stone-950,#1a0f0a); }
.adm-nav__tab i { font-size: 14px; }
/* Ab Tablet-Breite umbrechen statt seitwärts scrollen: mit zehn Reitern lief der letzte sonst
auch auf einem 1400-px-Schirm angeschnitten aus dem Bild, ohne dass ein Scrollbalken das
verriet — es sah schlicht aus wie ein kaputter Rand. */
@media (min-width: 700px) {
.adm-nav { flex-wrap: wrap; overflow-x: visible; }
.adm-nav__tab { flex: 0 0 auto; }
}
/* Status-Cockpit */
.adm-cockpit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .adm-cockpit { grid-template-columns: repeat(4, 1fr); } }
.adm-tile { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; }
.adm-tile__cap { font-size: var(--text-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.adm-tile__val { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin-top: 3px; font-variant-numeric: tabular-nums; }
/* Moderation-Report-Zeile + Cluster-Chip */
.adm-report { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border); }
.adm-cluster { padding: 5px 11px; border-radius: var(--radius-pill,99px); cursor: pointer; font-size: var(--text-2xs); font-weight: 700;
background: var(--blood-800,#3a1010); border: 1px solid var(--blood-500); color: var(--blood-200,#ffb3b3); }
.adm-cluster:hover { background: var(--blood-700); }
/* Vorsicht-Zone (Danger Zone) */
.danger-zone { border-radius: var(--radius-lg); border: 1px solid var(--blood-500); padding: 14px;
background: linear-gradient(180deg, rgba(168,27,27,.12), rgba(20,8,8,.30)); }
.danger-zone__head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
/* Danger Zone ist collapsibel (§40 Politur): eingeklappt per Default, damit man beim Moderieren
nicht versehentlich an Welt-Reset/Tick scrollt. Summary = klickbarer Kopf, Marker→eigener Caret. */
details.danger-zone > summary { cursor: pointer; list-style: none; user-select: none; margin-bottom: 0; }
details.danger-zone > summary::-webkit-details-marker { display: none; }
details.danger-zone[open] > summary { margin-bottom: 11px; }
details.danger-zone > summary::after { content: '▸'; margin-inline-start: auto; color: var(--blood-400); font-size: 12px; transition: transform var(--dur-fast) ease; }
details.danger-zone[open] > summary::after { transform: rotate(90deg); }
.danger-zone__head i { color: var(--blood-400); font-size: 16px; }
.danger-zone__title { font-family: var(--font-display); font-weight: 800; color: var(--blood-300); font-size: var(--text-md); }
.danger-zone__note { font-size: var(--text-2xs); color: var(--text-dim); }
.dz-row { display: flex; gap: 6px; align-items: center; }
.dz-lbl { flex: 1; font-size: var(--text-2xs); color: var(--text-muted); }
.dz-feld { width: 84px; }
/* Mod-Knöpfe am Chat-Beitrag: sichtbar anders als die Spieler-Aktionen daneben. */
.chat-act--staff { color: var(--ember-300); }
.chat-act--staff:hover { background: color-mix(in srgb, var(--ember-600) 18%, transparent); }
/* --- Staff-Griff (In-Game-Werkzeug, bewusst nicht wie Spiel-UI) ------------ */
.staff-griff {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin: 8px 0; padding: 6px 8px;
border: 1px dashed var(--ember-600); border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--ember-600) 8%, transparent);
}
.staff-griff__marke {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase;
color: var(--ember-300);
}
.staff-griff__tat {
display: inline-flex; align-items: center; gap: 4px;
min-height: 32px; padding: 4px 9px;
font-size: var(--text-2xs); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-raised); text-decoration: none;
}
.staff-griff__tat:hover { border-color: var(--ember-600); color: var(--ember-300); }
/* --- Bann mit Grund und Frist --------------------------------------------- */
.ap-bann { display: inline-block; }
.ap-bann > summary { list-style: none; cursor: pointer; }
.ap-bann > summary::-webkit-details-marker { display: none; }
.ap-bann__form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ap-bann__grund { min-width: 200px; flex: 1; }
.ap-bann__info { display: block; margin-bottom: 4px; }
/* --- Backend-Protokoll ---------------------------------------------------- */
.log-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.log-zeile { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--text-2xs); }
.log-zeile:last-child { border-bottom: 0; }
.log-zeile__kopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.log-zeile__payload { display: flex; gap: 6px 12px; flex-wrap: wrap; margin-top: 4px; padding-left: 4px; }
.log-diff { color: var(--text-muted); }
.log-diff__key { color: var(--text-dim); }
.log-diff__alt { color: var(--text-dim); }
.log-diff__neu { color: var(--gold-300); }
.log-blaettern { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; }
/* Ungültiges Feld im Balancing-Formular sichtbar machen (sonst blockt der Browser stumm). */
.field.is-invalid { border-color: var(--blood-500); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blood-500) 35%, transparent); }
.bl-fehler { flex: 1; font-size: var(--text-2xs); color: var(--blood-400); }
/* --- Gilden-Verwaltung ---------------------------------------------------- */
.gildeadm-treffer { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.gildeadm-zeile { display: flex; gap: 6px; align-items: center; margin: 3px 0; font-size: var(--text-2xs); }
/* --- Collab-Monitoring ---------------------------------------------------- */
.collab-kpis { display: flex; gap: 18px; flex-wrap: wrap; }
.collab-kpi__wert { font-family: var(--font-display); font-size: var(--text-xl); }
.collab-kpi__wert--gold { color: var(--gold-300); }
.collab-kpi__wert--elektro { color: var(--elektro-300); }
.collab-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.collab-teiln { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* Confirm-Modal */
.adm-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; }
.adm-modal[hidden] { display: none; }
.adm-modal__backdrop { position: absolute; inset: 0; background: rgba(8,4,3,.72); backdrop-filter: blur(2px); }
.adm-modal__box { position: relative; width: min(420px, 100%); background: var(--surface-card); border: 1px solid var(--border-strong,var(--border));
border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.8); border-top: 3px solid var(--ember-500); }
.adm-modal__box[data-tone="blood"] { border-top-color: var(--blood-500); }
.adm-modal__box[data-tone="gold"] { border-top-color: var(--gold-500); }
.adm-modal__eyebrow { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.adm-modal__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--text); margin: 3px 0 8px; }
.adm-modal__body { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); margin: 0 0 16px; }
.adm-modal__actions { display: flex; gap: 8px; }
.adm-modal__actions .dmo-btn { flex: 1; }
/* §40 Editor: Drachen-Portrait statt Orb (Mock DragonStage) */
.ap-dragon__portrait { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm,7px); overflow: hidden;
background: radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--el,#888) 40%, var(--surface-sunken)), var(--surface-sunken));
border: 1px solid color-mix(in srgb, var(--el,#888) 50%, var(--border)); display: flex; align-items: flex-end; justify-content: center; }
.ap-dragon__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* §5-G · fx-Overlays (Sieg/Niederlage/Stufenaufstieg) — einmaliger Burst nach dem Kampf, reine CSS-Animation */
.fx-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
pointer-events: none; opacity: 0; animation: fx-pop 1.9s ease forwards; }
.fx-overlay img { max-width: 64%; max-height: 52%; object-fit: contain;
filter: drop-shadow(0 12px 40px rgba(0,0,0,.7)); }
.fx-overlay--levelup img { max-width: 56%; max-height: 46%;
filter: drop-shadow(0 0 36px var(--gold-500)) drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
@keyframes fx-pop {
0% { opacity: 0; transform: scale(.72); }
12% { opacity: 1; transform: scale(1.06); }
24% { transform: scale(1); }
68% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .fx-overlay { animation-duration: 1.2s; } }
/* §8 Beutel-Pack-Link in der Welt-Drache-Leiste */
.weltdrache-chip__pack { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-md,9px);
background: var(--surface-sunken); border: 1px solid var(--border); color: var(--gold-300); text-decoration: none; font-size: 15px; }
.weltdrache-chip__pack:hover { background: var(--gold-700); color: var(--gold-100); border-color: var(--gold-500); }
/* §3-8 · Drachen-Erstellung: Element-Wähler-Chips unter dem Pose-Preview */
.reg-el { cursor: pointer; padding: 6px 15px; border-radius: var(--radius-pill); border: 1px solid var(--line);
font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: .04em; color: var(--text-muted);
background: rgba(10,6,4,.45); transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
.reg-el:hover { color: var(--text); border-color: var(--gold-700); }
.reg-el.is-sel { border-color: var(--gold-400); color: var(--gold-200);
background: color-mix(in srgb, var(--gold-500) 16%, transparent); box-shadow: var(--glow-gold); }
/* §3-11 · Karten-Pins als Stadt-Wappen (statt nackter Farbpunkt); Element-Akzent als Ring */
.island .pin--crest { width: 32px; height: 32px; background: none; border: 2px solid var(--accent, var(--gold-500));
padding: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.55); display: grid; place-items: center; }
.island .pin--crest img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.85)); }
/* §33.4 Ausbrüten: Ei optisch am Brutplatz (Brutkammer-Szene + Ei-Overlay) */
.brutplatz-scene { position: relative; min-height: 168px; border-radius: var(--radius-lg); overflow: hidden;
background: #160d09 url('/assets/scenes/brutkammer.png') center 38%/cover no-repeat;
display: flex; align-items: flex-end; padding: 14px; }
/* Ei-Turntable in der Brutplatz-Szene. Der Canvas liegt an derselben Stelle wie das Bild,
die Szene waechst beim Umschalten — bei 168 px Hoehe waere eine Drehansicht sinnlos.
`:has()` haelt die Regel am Zustand des Canvas fest: kein zweiter Zustand im Markup, der
mit dem `hidden`-Attribut auseinanderlaufen koennte. */
.brutplatz-scene:has(.brutplatz-scene__3d:not([hidden])) { min-height: 300px; }
.brutplatz-scene__3d { position: absolute; inset-inline-start: 50%; top: 38%; transform: translate(-50%,-50%);
z-index: 2; width: min(58%, 190px); aspect-ratio: 1; }
.brutplatz-scene__toggle { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 4; }
.brutplatz-scene__egg { position: absolute; inset-inline-start: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 2;
width: 88px; height: 88px; object-fit: contain;
filter: drop-shadow(0 0 16px color-mix(in srgb, var(--el,#ff5a2c) 70%, transparent)) drop-shadow(0 5px 10px rgba(0,0,0,.6));
animation: brut-bob 3.2s ease-in-out infinite; }
.brutplatz-scene__egg::after { content: ''; }
.brutplatz-scene__veil { position: absolute; inset: 0; z-index: 1;
background: radial-gradient(60% 55% at 50% 38%, color-mix(in srgb, var(--el,#ff5a2c) 22%, transparent), transparent 70%),
linear-gradient(0deg, rgba(10,6,4,.92) 0%, rgba(10,6,4,.35) 52%, transparent 78%); }
.brutplatz-scene__body { position: relative; z-index: 3; }
@keyframes brut-bob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-58%); } }
/* §3-11 · Segment-Pins als Basis-Marker (Höhlen-Icon, Relation als Ring/Farbe) statt nacktem Punkt */
.island .pin--base { width: 26px; height: 26px; background: rgba(10,6,4,.72); border: 2px solid currentColor;
border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 8px rgba(0,0,0,.6); }
.island .pin--base i { font-size: 13px; line-height: 1; color: currentColor; }
.island .pin--me { box-shadow: 0 0 10px var(--ember-500), 0 0 0 1px rgba(0,0,0,.5); }
/* §IA Schnellaktionen: Gruppen-Label (Drache vs Höhle) */
.qa-group__label { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 0 2px 7px; }
.qa-group__label i { color: var(--gold-400); font-size: 13px; }
/* §6.1 Welt-Städte-Zeile mit Inline-Vorschau (wie Mock) */
.stadt-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-md); text-decoration: none;
background: var(--surface-sunken); border: 1px solid var(--border); transition: background var(--dur-fast,.12s), border-color var(--dur-fast,.12s); }
.stadt-row:hover { background: var(--surface-hover); border-color: var(--border-strong,var(--border)); }
.stadt-row.is-locked { opacity: .6; }
.stadt-row--schatz { border-color: color-mix(in srgb, var(--gold-500) 40%, var(--border)); }
.stadt-row .crest { width: 34px; height: 40px; flex: none; object-fit: contain; }
.stadt-row__main { flex: 1; min-width: 0; }
.stadt-row__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--text); display: flex; align-items: center; gap: 7px; }
.stadt-row__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.stadt-row__stats .st-gold { color: var(--gold-300); font-weight: 700; }
.stadt-row__stats .st-risk { color: var(--blood-300); }
.stadt-row__stats .st-en { color: var(--elektro-400); }
.stadt-row__stats .st-dur { color: var(--text-dim); }
.stadt-row__go { flex: none; font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ember-300); font-weight: 700; }
.stadt-row.is-locked .stadt-row__go { color: var(--text-dim); }
/* §3-8 · Drachen-Erstellung: Gesinnung-Wähler (Licht/Schatten) */
.reg-section-label { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .14em;
text-transform: uppercase; color: var(--text-dim); margin: 4px 0 2px; }
.reg-align { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 12px 10px; border-radius: var(--radius-md); border: 1px solid var(--line);
background: rgba(10,6,4,.45); text-align: center; transition: border-color .15s, background .15s, box-shadow .15s; }
.reg-align i { font-size: 24px; color: var(--text-muted); }
.reg-align__name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: var(--text-sm); }
.reg-align__flavor { font-size: var(--text-2xs); color: var(--text-dim); line-height: 1.35; }
.reg-align:hover { border-color: var(--gold-700); }
.reg-align.is-sel { border-color: var(--ember-500); background: color-mix(in srgb, var(--ember-500) 15%, transparent); box-shadow: var(--glow-ember); }
.reg-align.is-sel i, .reg-align.is-sel .reg-align__name { color: var(--ember-300); }
/* Live-Auswahl ohne JS (Gesinnung-Radios sitzen im Label) */
.reg-align:has(input:checked) { border-color: var(--ember-500); background: color-mix(in srgb, var(--ember-500) 15%, transparent); box-shadow: var(--glow-ember); }
.reg-align:has(input:checked) i, .reg-align:has(input:checked) .reg-align__name { color: var(--ember-300); }
/* §19 Vermächtnis-Link (sichtbar + kopierbar) */
.invite-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-sunken); border: 1px solid var(--gold-700); border-radius: var(--radius-md); }
.invite-link__url { flex: 1; min-width: 0; font-family: var(--font-mono,monospace); font-size: var(--text-2xs); color: var(--gold-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* §Sozial User-Picker (Empfänger-Autocomplete) */
.up-wrap { position: relative; }
.up-results { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 3px); z-index: 30; display: flex; flex-direction: column;
background: var(--surface-card); border: 1px solid var(--border-strong,var(--border)); border-radius: var(--radius-md); overflow: hidden;
box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); max-height: 260px; overflow-y: auto; }
.up-results:empty { display: none; }
.up-item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: none; border: 0; border-bottom: 1px solid var(--border);
cursor: pointer; text-align: start; color: var(--text); font: inherit; }
.up-item:hover { background: var(--surface-hover); }
.up-nick { flex: 1; font-weight: 700; font-size: var(--text-sm); }
.up-meta { font-size: var(--text-2xs); color: var(--text-dim); }
.up-empty { padding: 9px 12px; color: var(--text-dim); font-size: var(--text-2xs); }
/* Codex-Prosa auf Pergament (Chronik-Seed formatiert) */
/* Zeilenlänge deckeln. Auf Tablet/Web lief der Codex mit über 100 Zeichen pro Zeile — beim
Zeilenwechsel verliert das Auge dann regelmäßig die Spur. 66 Zeichen sind die übliche
Obergrenze für Fließtext; die Lore-Schrift (Spectral) ist darauf ausgelegt. */
.lore, .lore--prose { max-width: 66ch; }
.dmo-card--scroll .lore { margin-inline: auto; }
.lore--prose p { margin: 0 0 9px; }
.lore--prose p:last-child { margin-bottom: 0; }
.lore--prose b { color: #6b3410; font-weight: 800; }
.lore--prose i { color: #8a5a28; font-style: italic; }
.lore--prose blockquote { margin: 10px 0; padding: 5px 0 5px 14px; border-inline-start: 3px solid #b5651d; color: #7a4410; font-style: italic; }
/* Spieldomain-Links in Nachrichten (game_links-Filter) */
.msg-link { color: var(--gold-300); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
/* Showkampf-Wette: gewählte Seite hervorheben (§23) */
.wette-pick{transition:border-color .15s,background .15s}
.wette-pick.is-picked{border-color:var(--gold-500);background:var(--surface-card);box-shadow:0 0 10px color-mix(in srgb,var(--gold-500) 30%,transparent)}
/* §44 · Gilden-Banner-Baukasten (Heraldik): Emblem auf gildenem Schild, Element-getönt */
.guild-banner { position: relative; width: 42px; height: 50px; display: inline-grid; place-items: center; flex: none; }
.guild-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.guild-banner i { position: relative; font-size: 18px; color: var(--el-color, #ff5a2c); filter: drop-shadow(0 1px 2px rgba(0,0,0,.75)); }
.guild-banner--lg { width: 74px; height: 88px; }
.guild-banner--lg i { font-size: 34px; }
.banner-swatch { position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; background: var(--el-color, #888);
border: 2px solid var(--border); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); transition: box-shadow .15s, border-color .15s; }
.banner-swatch::after { content: ''; position: absolute; inset: -9px; }
.banner-swatch.is-sel { border-color: var(--gold-400); box-shadow: 0 0 9px var(--el-glow, rgba(255,204,51,.5)); }
.banner-emblem { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md);
border: 1px solid var(--border); background: rgba(10,6,4,.4); cursor: pointer; color: var(--text-muted); transition: all .15s; }
.banner-emblem i { font-size: 18px; }
.banner-emblem:hover { color: var(--text); border-color: var(--gold-700); }
.banner-emblem.is-sel { border-color: var(--gold-400); color: var(--gold-300); background: color-mix(in srgb, var(--gold-500) 14%, transparent); }
/* ── Gildenchat (modernisiert §Sozial) ───────────────────────────── */
/* §67 Chat-Tabs: persistente Kanal-Leiste (Gilde·Welt·Privat·Gruppen) statt Slide-in-Drawer */
.chat-tabs { display: flex; align-items: stretch; gap: 4px; padding: 4px 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.chat-tabs__back { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; border-radius: var(--radius-md); color: var(--text-muted); font-size: 18px; text-decoration: none; }
.chat-tabs__back:hover { color: var(--text); background: var(--surface-sunken); }
.chat-tabs__tab { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: var(--radius-md); text-decoration: none; color: var(--text-dim); font-size: var(--text-2xs); border: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.chat-tabs__tab i { font-size: 19px; }
.chat-tabs__lbl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.chat-tabs__tab:hover { color: var(--text); background: var(--surface-sunken); }
.chat-tabs__tab.is-active { color: var(--ember-300); background: var(--surface-sunken); border-color: var(--ember-600); box-shadow: var(--glow-ember); }
.chat-tabs__pill { position: absolute; top: 1px; inset-inline-end: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--blood-500); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.chat-empty{text-align:center;color:var(--text-dim);font-size:var(--text-sm);padding:14px}
.chat-row{display:flex;flex-direction:column;align-items:flex-start;position:relative}
.chat-row.is-mine{align-items:flex-end}
.chat-meta{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:var(--text-2xs);color:var(--text-dim)}
.chat-dot{width:8px;height:8px;border-radius:50%;flex:none}
.chat-bubble{max-width:80%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--surface-card);color:var(--text);border:1px solid var(--border);font-size:var(--text-sm);line-height:1.3;word-break:break-word}
.chat-bubble--mine{border-radius:14px 14px 4px 14px;background:var(--grad-ember);color:var(--stone-950);border:none}
/* Optimistisch: die eigene Nachricht steht sofort da, blass bis der Server sie bestaetigt.
Schlaegt das Senden fehl, wird sie rot umrandet und bleibt mit „Erneut senden" stehen. */
.chat-bubble--pending{opacity:.55}
.chat-bubble--fehler{opacity:.85;outline:1px solid var(--blood-400);outline-offset:1px}
.chat-sticker{display:block;width:96px;height:96px;object-fit:contain}
/* §Chat modern: Reply-Zitat · Reaktionen · Reply-Bar · Reaktions-Bar · @Mention · Swipe/Flash */
.chat-reply-quote{display:flex;gap:5px;align-items:baseline;max-width:80%;margin:0 0 2px;padding:4px 9px;border:0;border-inline-start:2px solid var(--ember-500);border-radius:6px;background:color-mix(in srgb,var(--ember-500) 10%,var(--surface-sunken));color:var(--text-muted);font-size:var(--text-2xs);cursor:pointer;text-align:start;overflow:hidden}
.chat-row.is-mine .chat-reply-quote{align-self:flex-end}
.chat-reply-quote b{color:var(--ember-300);white-space:nowrap}
.chat-reply-quote__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.chat-react-pill{border:1px solid var(--border);background:var(--surface-sunken);border-radius:999px;padding:1px 8px;font-size:var(--text-2xs);cursor:pointer;line-height:1.6}
.chat-react-pill.is-mine{border-color:var(--ember-500);background:color-mix(in srgb,var(--ember-500) 18%,transparent);color:var(--ember-200)}
.chat-replybar{display:flex;align-items:center;gap:8px;padding:6px 11px;margin:0;border-inline-start:3px solid var(--ember-500);background:var(--surface-sunken);font-size:var(--text-2xs);color:var(--text-muted)}
.chat-replybar__info{flex:1;min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden}
.chat-replybar__info b{color:var(--ember-300)}
.chat-replybar__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim)}
.chat-replybar__x{border:0;background:none;color:var(--text-dim);cursor:pointer;font-size:15px;padding:2px}
.chat-reactbar{position:absolute;bottom:100%;inset-inline-end:0;z-index:20;display:flex;gap:2px;padding:4px 6px;border-radius:999px;background:linear-gradient(180deg,#2a1c14,#170f0b);border:1px solid var(--border-strong);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.chat-reactbar__em{border:0;background:none;font-size:19px;cursor:pointer;line-height:1;padding:2px;border-radius:6px;transition:transform .1s}
.chat-reactbar__em:hover{transform:scale(1.25)}
.chat-mention{position:absolute;bottom:calc(100% + 4px);inset-inline-start:8px;z-index:30;min-width:150px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(0,0,0,.5);overflow:hidden}
.chat-mention__opt{display:block;width:100%;text-align:start;border:0;background:none;color:var(--text);padding:8px 12px;font-size:var(--text-sm);cursor:pointer}
.chat-mention__opt:hover{background:var(--grad-ember);color:var(--stone-950)}
.chat-row.is-swiping{transition:none;opacity:.92}
.chat-row{transition:transform .18s ease}
.chat-row--flash .chat-bubble{animation:chatFlash 1.1s ease}
@keyframes chatFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 2px var(--ember-500),0 0 14px rgba(255,102,0,.5)}}
.chat-actions{display:flex;gap:4px;margin-top:3px;opacity:0;transition:opacity var(--dur-fast)}
.chat-row:hover .chat-actions,.chat-row:focus-within .chat-actions{opacity:1}
/* Scrollen ja, Balken nein — auf dem Web (macOS „immer sichtbar") sonst dauerhaft im Weg.
Horizontaler Overflow ganz unterbinden (kein Quer-Balken). */
.chat-list{overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
.chat-list::-webkit-scrollbar,.picker-panel::-webkit-scrollbar{width:0;height:0;display:none}
.picker-panel{scrollbar-width:none;-ms-overflow-style:none}
.chat-act{position:relative;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text-muted);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.chat-act::after{content:'';position:absolute;inset:-9px}
.chat-act:hover{color:var(--text)}
.chat-act.is-confirm{border-color:var(--blood-600);color:var(--blood-300);background:color-mix(in srgb,var(--blood-600) 18%,transparent)}
.chat-act.is-active{border-color:var(--gold-600);color:var(--gold-300);background:color-mix(in srgb,var(--gold-600) 16%,transparent)}
/* Touch: Aktionen ohne Hover immer tappbar — sonst ist das Übersetzen-Icon auf dem Handy unerreichbar. */
@media (hover:none){.chat-actions{opacity:1}}
/* Übersetzungs-Block (on-demand) unter der Bubble */
.chat-tr{margin-top:5px;max-width:80%;border:1px solid var(--eis-700);border-radius:10px;background:color-mix(in srgb,var(--surface-sunken) 70%,var(--eis-900,#08151b));overflow:hidden}
.chat-row.is-mine .chat-tr{align-self:flex-end}
.chat-tr-menu{display:flex;align-items:center;gap:6px;padding:6px 8px;flex-wrap:wrap}
.chat-tr-label{font-size:var(--text-2xs);color:var(--text-dim)}
.chat-tr-chip{border:1px solid var(--border);background:var(--surface-card);color:var(--text-muted);border-radius:999px;padding:3px 10px;font-size:var(--text-2xs);font-weight:700;cursor:pointer}
.chat-tr-chip:hover{border-color:var(--eis-500);color:var(--eis-300)}
.chat-tr-chip.is-sel{border-color:var(--eis-500);color:var(--eis-200);background:color-mix(in srgb,var(--eis-500) 18%,transparent)}
.chat-tr-result{border-top:1px solid var(--border)}
/* Chat In-Place: Steuerleiste unter der (ersetzten) Bubble */
.chat-tr-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;max-width:80%}
.chat-tr-ctl.is-mine{align-self:flex-end;justify-content:flex-end}
.chat-bubble--tr{box-shadow:inset 2px 0 0 var(--eis-600)}
.chat-tr-fail{color:var(--text-dim);font-style:italic}
.chat-tr-retry{border:none;background:none;color:var(--eis-300);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.chat-tr-loading{padding:7px 10px;font-size:var(--text-2xs);color:var(--eis-300);display:flex;align-items:center;gap:6px}
.chat-tr-loading i{animation:chat-spin 1s linear infinite}
.chat-tr-head{display:flex;align-items:center;gap:6px;padding:5px 9px;font-size: var(--text-3xs);text-transform:uppercase;letter-spacing:.1em;color:var(--eis-300);border-bottom:1px solid var(--border)}
.chat-tr-close{margin-inline-start:auto;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:13px;display:flex}
.chat-tr-close:hover{color:var(--text)}
.chat-tr-text{padding:7px 10px;font-size:var(--text-sm);color:var(--text);line-height:1.35;white-space:pre-wrap;word-break:break-word}
@keyframes chat-spin{to{transform:rotate(360deg)}}
/* Generisches On-demand-Übersetzen (Postfach, Gilden-Beschreibung, Bio …) — nutzt die chat-tr-Innereien. */
.tr-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text-muted);border-radius:999px;padding:3px 11px;font-size:var(--text-2xs);cursor:pointer}
.tr-btn:hover{border-color:var(--eis-500);color:var(--eis-300)}
.tr-out{margin-top:7px;border:1px solid var(--eis-700);border-radius:10px;background:color-mix(in srgb,var(--surface-sunken) 70%,var(--eis-900,#08151b));overflow:hidden}
.tr-out[hidden]{display:none}
/* In-Place-Übersetzen DB-Inhalte: Leiste mit Badge/Original-Umschalter unter dem (übersetzten) Text. */
.tr-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.tr-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-2xs);font-weight:700;color:var(--eis-200);background:color-mix(in srgb,var(--eis-500) 16%,transparent);border:1px solid var(--eis-700);border-radius:999px;padding:2px 9px}
.tr-link{border:none;background:none;color:var(--text-dim);text-decoration:underline;cursor:pointer;font:inherit;font-size:var(--text-2xs);padding:0}
.tr-link:hover{color:var(--eis-300)}
.tr-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-2xs);color:var(--eis-300)}
.chat-spin{animation:chat-spin 1s linear infinite}
.chat-edit-field{width:100%;margin-bottom:6px}
.chat-edit-bar{display:flex;gap:6px;justify-content:flex-end}
.chat-tool{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--border);background:var(--surface-sunken);color:var(--text-muted);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
.chat-tool:hover{color:var(--gold-300);border-color:var(--border-strong)}
.picker-panel{display:flex;flex-wrap:wrap;gap:4px;padding:8px;margin-bottom:6px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-md);max-height:180px;overflow-y:auto}
/* Panel-Display-Klasse schlägt sonst das HTML-[hidden] (gleiche Specificity, Author>UA) → Picker war immer offen. */
.picker-panel[hidden]{display:none}
.emoji-cell{width:34px;height:34px;border:none;background:transparent;cursor:pointer;font-size:20px;border-radius:8px;line-height:1}
.emoji-cell:hover{background:var(--surface-hover)}
.emoji-cell--asset{width:40px;height:40px;padding:3px;border:1px solid var(--border);background:var(--surface-card)}
.emoji-cell--asset:hover{border-color:var(--gold-500);background:var(--surface-card)}
.emoji-cell--asset img{width:100%;height:100%;object-fit:contain}
.chat-emoji{height:1.5em;width:auto;vertical-align:-0.35em;margin:0 1px}
.picker-panel--sticker{gap:6px}
.sticker-cell{width:66px;height:66px;border:1px solid var(--border);background:var(--surface-card);border-radius:var(--radius-md);cursor:pointer;padding:4px}
.sticker-cell:hover{border-color:var(--gold-500)}
.sticker-cell img{width:100%;height:100%;object-fit:contain}
/* WYSIWYG Inline-Link-Leiste (lore-clean statt window.prompt) */
.nw-linkbar{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.nw-linkbar input{flex:1}
/* Diplomatie Pakt-Art-Menü */
.pakt-menu summary::-webkit-details-marker{display:none}
/* DragonCreate (§44.1) — Start-Attribut-Vials + Namens-Pool im Register */
.dc-stats{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px}
.dc-stat{display:flex;align-items:center;gap:9px}
.dc-stat__lbl{width:96px;flex:none;font-size:var(--text-2xs);color:var(--text-muted)}
.dc-stat__bar{flex:1;height:7px;border-radius:99px;background:var(--surface-sunken);border:1px solid var(--border);overflow:hidden}
.dc-stat__fill{display:block;height:100%;border-radius:99px;transition:width .25s ease}
.dc-stat__val{width:24px;text-align:end;font-size:var(--text-2xs);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dc-namechip{padding:5px 10px;border-radius:999px;cursor:pointer;font-size:var(--text-2xs);font-weight:600;background:var(--surface-sunken);border:1px solid var(--border);color:var(--text-muted)}
.dc-namechip:hover{color:var(--text)}
.dc-namechip.is-sel{background:var(--ember-soft);border-color:var(--ember-500);color:var(--ember-300)}
/* Arena 3-Runden-Reveal (§14) */
.arena-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(8,5,3,.78);opacity:0;transition:opacity var(--dur-base)}
.arena-ov.is-open{opacity:1}
.arena-fightcard{width:min(92vw,420px);background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.af-round{text-align:center;font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300)}
.af-side{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.af-name{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:var(--text-sm)}
.af-dmg{grid-row:1/3;grid-column:2;font-family:var(--font-display);font-weight:800;color:var(--blood-300);min-width:54px;text-align:end;font-variant-numeric:tabular-nums}
.af-dmg.is-heal{color:var(--heal-400)}
.af-bar{grid-column:1;height:10px;border-radius:99px;background:var(--surface-sunken);border:1px solid var(--border);overflow:hidden}
.af-fill{display:block;height:100%;border-radius:99px;transition:width .55s ease}
.af-fill--hero{background:var(--grad-ember)}
.af-fill--opp{background:var(--eis-500)}
.af-vs{text-align:center;color:var(--blood-400);font-size:18px}
.af-result{text-align:center;min-height:4px;display:flex;flex-direction:column;align-items:center;gap:8px}
.af-verdict{font-family:var(--font-display);font-weight:900;font-size:var(--text-2xl)}
.af-result.is-win .af-verdict{color:var(--heal-400)}
.af-result.is-loss .af-verdict{color:var(--blood-300)}
.af-sub{font-size:var(--text-sm);color:var(--gold-300)}
/* Inline-Toast (optimistische Aktionen + Arena): tone-aware, über der Bottom-Nav, safe-area-fest. */
.arena-toast{position:fixed;inset-inline-start:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);transform:translate(-50%,8px);z-index:61;
background:var(--surface-card);border:1px solid var(--border-strong);color:var(--text);padding:9px 15px;border-radius:var(--radius-pill);
font-size:var(--text-sm);box-shadow:var(--shadow-pop);opacity:0;animation:arena-toast-in .22s var(--ease-out,ease) forwards;max-width:88vw;text-align:center}
.arena-toast--success{border-color:var(--heal-500);color:var(--heal-400)}
.arena-toast--danger{border-color:var(--blood-600);color:var(--blood-300)}
@keyframes arena-toast-in{to{opacity:1;transform:translate(-50%,0)}}
/* Countdown-Ziffern nicht zappeln lassen (tabellarische Zahlen). */
[data-countdown-target="display"]{font-variant-numeric:tabular-nums}
/* Freiskill-Toggle + grüne „+", wenn aktiv (nutzt Sofort-Ladung statt normalem Training). */
.frei-toggle { display: flex; align-items: center; gap: 9px; min-height: var(--tap-min, 44px); cursor: pointer;
padding: 6px 11px; border-radius: var(--radius-md); border: 1px solid var(--heal-700, #2f7d4f);
background: linear-gradient(90deg, color-mix(in srgb, var(--heal-500) 16%, var(--surface-card)), var(--surface-card)); }
.frei-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.frei-toggle__sw { flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--surface-sunken); border: 1px solid var(--border-strong); position: relative; transition: background var(--dur-fast) var(--ease-out); }
.frei-toggle__knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.frei-toggle input:checked + .frei-toggle__sw { background: var(--heal-500); border-color: var(--heal-600, var(--heal-500)); }
.frei-toggle input:checked + .frei-toggle__sw .frei-toggle__knob { transform: translateX(16px); background: #fff; }
.frei-toggle input:focus-visible + .frei-toggle__sw { outline: 2px solid var(--heal-400); outline-offset: 2px; }
.frei-toggle__txt { font-size: var(--text-2xs); color: var(--text-muted); }
.frei-toggle__txt b { color: var(--heal-400); font-variant-numeric: tabular-nums; }
.frei-toggle__txt i { color: var(--heal-400); }
.frei-toggle__hint { color: var(--text-dim); }
/* aktiver Toggle → alle „+" grün (wortlos: „dieser Tap nutzt einen Freiskill"). */
.use-frei .dmo-iconbtn--ember { background: linear-gradient(180deg, var(--heal-400), var(--heal-600, var(--heal-500))); border-color: var(--heal-600, var(--heal-500)); box-shadow: 0 0 10px color-mix(in srgb, var(--heal-500) 55%, transparent); }
@media (min-width:980px){.arena-toast{bottom:28px}}
/* Treffer-Wucht (Game-Juice): Karten-Shake + kurzes Aufblitzen des getroffenen Balkens. */
.af-shake{animation:af-shake .24s ease}
@keyframes af-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.af-bar.is-struck{animation:af-struck .24s ease}
@keyframes af-struck{0%{box-shadow:0 0 0 0 var(--blood-500)}50%{box-shadow:0 0 10px 2px var(--blood-500)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.af-shake,.af-bar.is-struck{animation:none}}
/* Vollendungs-Funke beim Tätigkeits-Ende: kurzer Gold-Schimmer von den Rändern (Game-Juice). */
.done-flash{position:fixed;inset:0;z-index:120;pointer-events:none;animation:done-flash .6s ease forwards;
background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(255,204,51,.22) 100%)}
@keyframes done-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
/* Erschaffen-Zeremonie: Vollbild-Geburt des ersten Drachen (Aura → Hatch-Flash → Reveal). */
.birth-ov{position:fixed;inset:0;z-index:130;display:grid;place-items:center;
background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--hue) 22%,#080503) 0%,#080503 70%);
opacity:0;transition:opacity .4s ease;-webkit-tap-highlight-color:transparent}
.birth-ov.is-hatching,.birth-ov.is-open{opacity:1}
.birth-ov.is-closing{opacity:0}
.birth-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px;text-align:center}
.birth-aura{position:absolute;top:8%;inset-inline-start:50%;width:280px;height:280px;transform:translateX(-50%);border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb,var(--hue) 55%,transparent) 0%,transparent 65%);
filter:blur(6px);animation:birth-aura 2.4s ease-in-out infinite}
@keyframes birth-aura{0%,100%{opacity:.55;transform:translateX(-50%) scale(.96)}50%{opacity:.9;transform:translateX(-50%) scale(1.06)}}
.birth-egg{width:min(60vw,240px);height:auto;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.6));
opacity:0;transform:scale(.7);transition:opacity .5s ease,transform .6s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
.birth-ov.is-open .birth-egg{opacity:1;transform:scale(1)}
.birth-flash{position:absolute;top:8%;inset-inline-start:50%;width:280px;height:280px;transform:translateX(-50%);border-radius:50%;pointer-events:none;
background:radial-gradient(circle,#fff 0%,color-mix(in srgb,var(--hue) 60%,#fff) 30%,transparent 70%);opacity:0}
.birth-ov.is-hatching .birth-flash{animation:birth-flash .9s ease forwards}
@keyframes birth-flash{0%{opacity:0;transform:translateX(-50%) scale(.3)}55%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.4)}}
.birth-eyebrow{font-family:var(--font-label);font-size:var(--text-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);
opacity:0;transition:opacity .5s ease .15s}
.birth-name{font-family:var(--font-display);font-weight:900;font-size:var(--text-2xl);color:var(--text);
opacity:0;transform:translateY(6px);transition:opacity .5s ease .25s,transform .5s ease .25s}
.birth-hint{font-size:var(--text-2xs);color:var(--text-dim);margin-top:8px;opacity:0;transition:opacity .5s ease .5s;animation:birth-hint 1.8s ease-in-out .9s infinite}
.birth-ov.is-open .birth-eyebrow,.birth-ov.is-open .birth-name,.birth-ov.is-open .birth-hint{opacity:1;transform:none}
@keyframes birth-hint{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.birth-aura,.birth-flash,.birth-hint{animation:none}.birth-egg{transition:opacity .3s ease}}
/* Scrollbare Auth-Seite (Register: Banner + DragonCreate ist länger als der Viewport) */
.login--tall { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.login--tall .login__inner { justify-content: flex-start; min-height: 0; }
.login--tall .login__bg, .login--tall .login__scrim { position: fixed; inset: 0; }
/* Hochformat-Nudge (Handoff-3): nur echtes Phone-Querformat (Höhe ≤480px) — Tablet/Desktop nie. */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 480px) {
.rotate-hint {
display: flex; position: fixed; inset: 0; z-index: 200; flex-direction: column;
align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
background:
linear-gradient(rgba(7,5,4,.82), rgba(7,5,4,.92)),
radial-gradient(60% 60% at 50% 40%, rgba(255,102,0,.14), transparent 70%),
#070504;
color: var(--text);
}
.rotate-hint .ph { font-size: 54px; color: var(--gold-300); filter: drop-shadow(0 0 14px rgba(255,102,0,.4)); animation: rotate-nudge 2.4s ease-in-out infinite; }
.rotate-h { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--gold-200); letter-spacing: .04em; }
.rotate-p { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); max-width: 320px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .rotate-hint .ph { animation: none; } }
@keyframes rotate-nudge { 0%,55%,100% { transform: rotate(0); } 70% { transform: rotate(-26deg); } 85% { transform: rotate(-26deg); } }
/* ============================================================
§Onboarding — Progressive Disclosure (Locked-Teaser) + Aufgaben-Chip
============================================================ */
/* Gesperrte Welt-Subtabs: gedimmt + Schloss, lockt statt zu blocken. */
.weltnav__tab.is-locked { color: var(--text-dim); opacity: .6; }
.weltnav__tab.is-locked i { font-size: .85em; opacity: .8; vertical-align: -1px; }
.weltnav__tab.is-locked:hover { opacity: .85; color: var(--gold-300); }
/* Gesperrter Haupt-Nav-Tab (Gilde vor Stufe X). */
.dmo-bottomnav__item.is-locked { opacity: .5; }
.dmo-bottomnav__item.is-locked .dmo-bottomnav__sprite { filter: grayscale(.7) brightness(.8); }
.nav-lock { position: absolute; top: -3px; inset-inline-end: -6px; width: 15px; height: 15px; border-radius: 50%;
background: var(--stone-950); border: 1px solid var(--gold-700); display: grid; place-items: center; }
.nav-lock i { font-size: var(--text-3xs); color: var(--gold-300); }
/* Aufgaben-Chip (der geführte Faden). Pergament-Gold-Glut, wortlos: Icon = was tun, Pfeil = los. */
.quest-chip { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
margin: 8px 0 4px; padding: 9px 13px; text-decoration: none;
background: linear-gradient(90deg, rgba(255,204,51,.14), rgba(255,102,0,.06) 60%, transparent);
border: 1px solid var(--gold-700); border-radius: var(--radius-md);
transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.quest-chip:hover { border-color: var(--gold-500); transform: translateY(-1px); }
.quest-chip:active { transform: translateY(0); }
.quest-chip__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--gold-500), var(--ember-700)); color: var(--stone-950); box-shadow: 0 0 10px rgba(255,170,40,.35); }
.quest-chip__icon i { font-size: 17px; }
.quest-chip__body { flex: 1; min-width: 0; line-height: 1.2; }
.quest-chip__kicker { display: block; font-size: var(--text-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); font-weight: 700; }
.quest-chip__tat { display: block; font-family: var(--font-display); font-size: var(--text-sm); color: var(--text); font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-chip__go { color: var(--gold-300); flex: none; }
/* Locked-Teaser-Sheet: von unten einschwebend, Pergament-Prosa (Chronist). */
.teaser-scrim { position: fixed; inset: 0; background: rgba(8,5,4,.55); opacity: 0; pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out); z-index: 90; }
.teaser-scrim.open { opacity: 1; pointer-events: auto; }
.teaser-sheet { position: fixed; inset-inline-start: 50%; bottom: 0; transform: translate(-50%, 110%);
width: min(440px, 100%); box-sizing: border-box; z-index: 91;
padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(180deg, var(--surface-card), var(--surface-sunken));
border: 1px solid var(--gold-700); border-bottom: none; border-radius: 18px 18px 0 0;
box-shadow: 0 -12px 40px rgba(0,0,0,.5); transition: transform var(--dur-base) var(--ease-out); }
.teaser-sheet.open { transform: translate(-50%, 0); }
.teaser-sheet__grip { display: block; width: 38px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--gold-700); opacity: .6; }
.teaser-sheet__title { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold-300); }
.teaser-sheet__hint { margin: 0 0 10px; font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ember-300); font-weight: 700; }
.teaser-sheet__lore { margin: 0 0 16px; font-family: var(--font-lore, Spectral, serif); font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }
.teaser-sheet__cta { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; margin-bottom: 8px; }
/* `display:block` überstimmt sonst das [hidden]-Attribut → leerer Ember-Button bei Locks ohne CTA. */
.teaser-sheet__cta[hidden], .teaser-sheet__hint[hidden] { display: none; }
.teaser-sheet__close { display: block; width: 100%; }
/* Drachenname als Umbenennen-Trigger (Detail-Hero): sieht aus wie der Name, Stift signalisiert Klick. */
.detail-stage .name--editable { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-align: start; }
.detail-stage .name--editable i { font-size: .42em; color: var(--gold-300); opacity: .7; transition: opacity var(--dur-fast) var(--ease-out); }
.detail-stage .name--editable:hover i { opacity: 1; }
.detail-stage .name--editable:active { transform: translateY(1px); }
/* ============================================================
§Remediation — globale Flash-Meldung + 1-Klick-Fix-Button
============================================================ */
.flash { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
margin: 8px 0; padding: 10px 13px; border-radius: var(--radius-md);
background: var(--surface-card); border: 1px solid var(--border); font-size: var(--text-sm); line-height: 1.35; }
.flash__icon { flex: none; font-size: 18px; }
.flash__text { flex: 1; min-width: 0; color: var(--text); }
.flash--danger, .flash--error { border-color: var(--blood-600); background: linear-gradient(180deg, rgba(168,27,27,.12), var(--surface-card)); }
.flash--danger .flash__icon, .flash--error .flash__icon { color: var(--blood-300); }
.flash--warning { border-color: var(--ember-700); background: linear-gradient(180deg, rgba(255,102,0,.10), var(--surface-card)); }
.flash--warning .flash__icon { color: var(--ember-300); }
.flash--success { border-color: var(--heal-500); background: linear-gradient(180deg, rgba(70,170,90,.12), var(--surface-card)); }
.flash--success .flash__icon { color: var(--heal-400); }
.flash--info, .flash--notice { border-color: var(--gold-700); background: linear-gradient(180deg, rgba(176,126,16,.10), var(--surface-card)); }
.flash--info .flash__icon, .flash--notice .flash__icon { color: var(--gold-300); }
/* Der Fix-Button: glüht (ember), 1 Tap zur Behebung. ≥36px Touch-Ziel. */
.flash__fix { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; min-height: 36px; box-sizing: border-box;
border-radius: var(--radius-pill); background: var(--grad-ember); color: var(--stone-950);
font-size: var(--text-2xs); font-weight: 700; text-decoration: none; white-space: nowrap;
box-shadow: 0 0 10px rgba(255,102,0,.3); transition: transform var(--dur-fast) var(--ease-out); }
.flash__fix:hover { transform: translateY(-1px); }
.flash__fix:active { transform: translateY(0); }
.flash__fix i { font-size: 14px; }
/* DMO-Alert-Toasts: Server-Flashes als Panel-Sprite-Feedback, gleiten ein + gehen von selbst.
Über dem Bottomnav, gestapelt; Sprite-Rahmen + Scrim-Plate kommen aus .dmo-alert (components.css). */
.flash-toasts { position: fixed; inset-inline-start: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
z-index: 70; display: flex; flex-direction: column-reverse; gap: 9px; width: min(92vw, 440px); pointer-events: none; }
.flash-toast { pointer-events: auto; cursor: pointer; padding: 0 6% 0 27%;
box-shadow: var(--shadow-pop); animation: flash-in .35s var(--ease-spring, ease) both; }
.flash-toast.is-out { animation: flash-out .28s ease forwards; }
@keyframes flash-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes flash-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
.flash-toast .flash-toast__fix { margin-top: 7px; }
.flash-toast__x { position: absolute; top: 5px; inset-inline-end: 8px; width: 24px; height: 24px; border: 0; background: transparent;
color: rgba(255,255,255,.7); font-size: 19px; line-height: 1; cursor: pointer; }
.flash-toast__x:hover { color: #fff; }
@media (min-width: 980px) { .flash-toasts { bottom: 24px; } }
/* Quest-Sheet (Aufgaben-Chip-Tap): order-free Einsteiger-Checkliste im Pergament-Sheet (lorehint-Stil). */
.quest-steps { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Steht auf dem Pergament-Sheet (.dmo-card--scroll) → dunkle Pergament-Tinte, NICHT var(--text)
(das ist hell fürs Dark-Theme → war unsichtbar; nur erledigte/durchgestrichene sah man). */
.quest-step { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--parchment-ink); }
.quest-step i { font-size: 20px; color: var(--ember-500); flex: none; }
.quest-step.is-done { color: var(--parchment-ink-soft); }
.quest-step.is-done i { color: var(--heal-400); }
.quest-step.is-done span { text-decoration: line-through; }
.quest-sheet-lore { font-family: var(--font-body); color: var(--parchment-ink-soft); font-size: var(--text-2xs); line-height: 1.55; border-top: 1px solid color-mix(in srgb, var(--parchment-ink) 22%, transparent); padding-top: 11px; margin-bottom: 13px; }
.quest-sheet-lore b { color: var(--ember-700); font-family: var(--font-display); display: block; margin-bottom: 3px; }
.quest-sheet-lore p { margin: 0; }
.quest-sheet-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* §Social: klickbarer Nick → öffentliches Profil (Chat, Rangliste …). */
.chat-nick { color: var(--gold-300); text-decoration: none; }
.chat-nick:hover { text-decoration: underline; }
/* §33.6 Bond-Ring am Drachen-Avatar: füllt sich mit dem Vertrauen (--bond 0..100). */
/* Bond-Ring am Drachen (wortlos). Position je Bühne so, dass er NICHTS überdeckt:
Detail-Bühne oben-links (unter dem Zurück-Pfeil, el-Badge sitzt oben-rechts),
Höhle-Bühne oben-rechts (el-Badge sitzt dort oben-links). Nie unten-links = Name. */
.detail-stage .bond-ring, .dragon-stage .bond-ring { position: absolute; width: 44px; height: 44px; border-radius: 50%; z-index: 3;
background: conic-gradient(var(--heal-400) calc(var(--bond) * 1%), rgba(255,255,255,.14) 0);
display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.detail-stage .bond-ring { inset-inline-start: 14px; top: 62px; }
.dragon-stage .bond-ring { inset-inline-start: 12px; top: 54px; }
.detail-stage .bond-ring::before, .dragon-stage .bond-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: rgba(12,8,6,.82); }
.bond-ring__pct { position: relative; font-size: 11px; font-weight: 800; color: var(--heal-300); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bond-ring__pct i { font-size: 12px; margin-bottom: 1px; }
/* Aktivitätsleiste pro Drache (Minrok): eine Zeile je Drache mit Aktion + Detail + Countdown. */
/* Nutzt die Bildschirmbreite: so viele Spalten wie passen (≥260px), sonst Umbruch.
Schmal (Handy) = 1 Spalte, breit (Tablet/Web) = mehrere → spart Höhe bei vielen Drachen (mika). */
.work-strip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin: 0 0 8px; }
.work-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--radius-md);
background: var(--surface-card); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.work-row:hover { border-color: var(--gold-700); }
.wr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.wr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wr-top { display: flex; align-items: baseline; gap: 8px; }
.wr-name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Aktivität bekommt die volle Zeilenbreite (Zeit sitzt oben neben dem Namen) → kein Abschneiden. */
.wr-act { color: var(--text-muted); font-size: var(--text-2xs); white-space: normal; overflow-wrap: anywhere; }
.wr-act i { color: var(--ember-400); }
.wr-time { font-variant-numeric: tabular-nums; color: var(--gold-300); font-weight: 700; font-size: var(--text-sm); flex: none; margin-inline-start: auto; }
/* Border NEUTRAL halten — der pulsierende Ember-Orb (.wr-pulse) trägt das „bereit/braucht Arbeit"-Signal
allein (Design-System: Ember NUR am Aktionspunkt, nicht als Glow auf jeder Zeile → kein Rauschen). */
.work-row--out { border-color: var(--border-strong); }
.work-row--frei { border-color: var(--border-strong); }
.work-row--wache { opacity: .7; }
/* Ortsgenaues Aktivitäts-Artwork (mika): Szene als gefadeter Hintergrund, Drachenpose nur auf breiten Screens. */
.work-row--art { position: relative; overflow: hidden; isolation: isolate; }
.work-row--art::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--wr-bg);
background-size: cover; background-position: center; opacity: .16;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.wr-pose { display: none; }
@media (min-width: 900px) {
.work-row--art { padding-inline-end: 68px; }
.wr-pose { display: block; position: absolute; inset-inline-end: 4px; bottom: -8px; width: 60px; height: 60px; z-index: -1; opacity: .9; pointer-events: none; }
.wr-pose .dragon-art { width: 100%; height: 100%; margin: 0; }
.wr-pose img { width: 100%; height: 100%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
}
.wr-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ember-400); flex: none; animation: orb-pulse 1.6s var(--ease-out, ease) infinite; }
.wr-top .wr-pulse { margin-inline-start: auto; }
.work-row--frei .wr-act { color: var(--text-dim); font-style: italic; }
/* Kompakte Status-Zeile auf Nicht-Höhle-Tabs: eine scrollbare Reihe, Tippen → Höhle. */
.work-strip-mini { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 7px 12px;
border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-card);
text-decoration: none; color: var(--text-muted); font-size: var(--text-2xs);
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.work-strip-mini::-webkit-scrollbar { display: none; }
.work-strip-mini:hover { border-color: var(--gold-700); }
.wsm-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.wsm-item i { color: var(--ember-400); }
.wsm-item b { color: var(--text); font-variant-numeric: tabular-nums; }
.wsm-item--out b { color: var(--ember-300); }
.wsm-item--frei { color: var(--ember-300); }
.wsm-go { margin-inline-start: auto; color: var(--text-dim); flex: none; }
/* Erstschlag-Haken: prominenter Gold-Streifen, sanft pulsend („nutz mich heute"). */
.erstschlag-chip { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; padding: 8px 12px;
border-radius: var(--radius-md); text-decoration: none; color: var(--text);
background: linear-gradient(90deg, color-mix(in srgb, var(--gold-500) 22%, var(--surface-card)), var(--surface-card));
border: 1px solid var(--gold-600); box-shadow: 0 0 0 0 rgba(255,204,51,.4); animation: erst-pulse 2.4s ease-in-out infinite; }
.erstschlag-chip { min-height: var(--tap-min, 44px); box-sizing: border-box; }
.erstschlag-chip:active, .work-strip-mini:active, .seg-listrow:active { transform: translateY(1px); }
.work-strip-mini { min-height: var(--tap-min, 44px); box-sizing: border-box; }
.erstschlag-chip__star { color: var(--gold-400); font-size: 18px; flex: none; }
.erstschlag-chip__txt { flex: 1; min-width: 0; font-size: var(--text-2xs); }
.erstschlag-chip__txt b { color: var(--gold-300); }
@keyframes erst-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,204,51,.34) } 60% { box-shadow: 0 0 0 5px rgba(255,204,51,0) } }
@media (prefers-reduced-motion: reduce) { .erstschlag-chip { animation: none } }
/* Push-Einladung (Höhle): wegtippbarer Hinweis, holt Abwesende zurück. */
.push-nudge { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; padding: 8px 10px 8px 12px;
border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--gold-700); }
.push-nudge[hidden] { display: none; }
.push-nudge__bell { color: var(--gold-400); font-size: 18px; flex: none; }
.push-nudge__txt { flex: 1; min-width: 0; font-size: var(--text-2xs); color: var(--text-muted); }
.push-nudge__txt b { color: var(--gold-300); }
.push-nudge__x { flex: none; background: none; border: none; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.push-nudge__x:hover { color: var(--text); }
/* Treuefeuer-Chip (Morgengruß-Streak): kleine warme Glut-Marke, Retention-Anker. */
.treuefeuer-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; padding: 5px 11px;
border-radius: var(--radius-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--ember-500) 18%, var(--surface-card)), var(--surface-card));
border: 1px solid var(--ember-700); font-size: var(--text-2xs); color: var(--text-muted); }
.treuefeuer-chip b { color: var(--ember-300); }
.treuefeuer-chip__flame { color: var(--ember-400); font-size: 15px; animation: treuefeuer 2.2s ease-in-out infinite; }
@keyframes treuefeuer { 0%,100% { opacity: .75; transform: scale(.94) } 50% { opacity: 1; transform: scale(1.08) } }
@media (prefers-reduced-motion: reduce) { .treuefeuer-chip__flame { animation: none } }
/* Treuefeuer im Höhlen-Artwork (neben Rang): kompakt + dunkler Backdrop für Lesbarkeit über dem Bild. */
.treuefeuer-chip--stage { margin: 0; padding: 3px 9px; gap: 5px; color: var(--gold-100, #ffe9b8);
background: rgba(8,5,4,.5); border-color: var(--ember-600); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); white-space: nowrap; }
.treuefeuer-chip--stage .treuefeuer-chip__flame { font-size: 13px; }
/* Wochenwerk-Karte: drei Taten mit Fortschrittsbalken (Goal-Gradient). */
.wochenwerk.is-ready { border-color: var(--gold-600); box-shadow: 0 0 0 1px var(--gold-700), var(--glow-gold, 0 0 16px rgba(255,204,51,.25)); }
.ww-goals { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.ww-goal__head { display: flex; align-items: center; gap: 6px; font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: 3px; }
.ww-goal__head i { color: var(--ember-400); }
.ww-goal__num { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--text); }
.ww-goal.is-done .ww-goal__num { color: var(--heal-400); }
/* Erledigt: auch das Icon grün — sonst steht ein ember-farbenes Häkchen über einem grünen Balken. */
.ww-goal.is-done .ww-goal__head i { color: var(--heal-400); }
.ww-bar { height: 7px; border-radius: 99px; background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; }
.ww-bar__fill { display: block; height: 100%; border-radius: 99px; background: var(--grad-ember); transition: width var(--dur-slow, .5s) var(--ease-out, ease); }
.ww-goal.is-done .ww-bar__fill { background: var(--heal-500); }
.ww-claimed { margin-top: 9px; font-size: var(--text-2xs); color: var(--text-dim); font-style: italic; text-align: center; }
/* Claim-Burst: Gold-Ring + Münzen-Funken beim Wochenwerk-Einlösen (Belohnungs-Höhepunkt). */
.claim-burst { position: fixed; inset-inline-start: 50%; top: 50%; z-index: 130; pointer-events: none; transform: translate(-50%, -50%); }
.claim-burst__ring { position: absolute; inset-inline-start: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%;
border: 3px solid var(--gold-400); opacity: 0; animation: claim-ring .7s var(--ease-out, ease) forwards; }
@keyframes claim-ring { 0% { opacity: .9; transform: scale(.3) } 100% { opacity: 0; transform: scale(2.2) } }
.claim-burst span { position: absolute; inset-inline-start: 0; top: 0; width: 9px; height: 9px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--gold-200, #ffe9a8), var(--gold-500)); box-shadow: 0 0 8px var(--gold-400);
opacity: 0; animation: claim-coin .85s var(--ease-out, ease) forwards; }
@keyframes claim-coin { 0% { opacity: 0; transform: translate(0,0) scale(.4) } 18% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) } }
@media (prefers-reduced-motion: reduce) { .claim-burst { display: none } }
/* Segment: immer-sichtbare Ziel-Liste (Fitts/Recognition) — große Tap-Reihen statt nur Karten-Pins. */
.seg-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.seg-listrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap-min, 44px);
padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-card); color: var(--text); text-align: start; cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.seg-listrow:hover { border-color: var(--gold-700); }
.seg-listrow.is-sel { border-color: var(--ember-500); background: color-mix(in srgb, var(--ember-500) 10%, var(--surface-card)); }
.seg-listrow--prot { opacity: .72; }
.seg-listrow__orb { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--orb); box-shadow: 0 0 7px var(--orb); }
.seg-listrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.seg-listrow__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-listrow__lvl { color: var(--text-dim); font-weight: 400; font-size: var(--text-2xs); }
.seg-listrow__meta { font-size: var(--text-2xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.seg-listrow__go { color: var(--text-dim); flex: none; }
/* Gesperrter Button (z.B. Angreifen vor Arena-Freischaltung): gedimmt + Schloss, teasert statt zu führen. */
.dmo-btn.is-locked { opacity: .5; }
.dmo-btn.is-locked i { font-size: .9em; }
/* --- Markt UX-Fixes -------------------------------------------------------- */
/* Fix 1: Markt city-row mit wrap — Kauf-Zeile bricht auf eigene Reihe */
.markt-city-row { flex-wrap: wrap; align-items: center; }
/* Kauf-Reihe (Stepper + Kaufen): volle Breite = eigene zweite Zeile */
.markt-kauf-row { flex: 0 0 100%; display: flex; gap: 6px; margin-top: 6px; }
/* Stepper-Buttons: ≥44px Touch-Target (Fitts) */
.markt-step-btn { min-width: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: 700; }
/* Mengen-Input: ≥44px Höhe, lesbare Breite */
.markt-menge-input { min-height: 44px; width: 52px; text-align: center; padding: 4px 6px;
border-radius: var(--radius-sm, 7px); border: 1px solid var(--border);
background: var(--surface-sunken); color: var(--text); font-variant-numeric: tabular-nums;
font-size: var(--text-sm); }
/* Kaufen-Button: streckt sich auf verbleibenden Platz */
.markt-kauf-btn { flex: 1; min-height: 44px; }
/* Fix 2: Preis-Wächter als Toggle — ≥44px Glocken-Button */
.markt-wacht-wrap { position: relative; }
.markt-wacht-wrap[open] { position: static; }
.markt-wacht-toggle { min-width: 44px; min-height: 44px; padding: 0; display: flex;
align-items: center; justify-content: center; list-style: none; cursor: pointer; }
.markt-wacht-toggle::-webkit-details-marker { display: none; }
/* Sheet öffnet sich als kleines Dropdown direkt unter dem Toggle */
.markt-wacht-sheet { position: absolute; inset-inline-end: 0; z-index: 10; margin-top: 4px;
background: var(--surface-card); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 6px; display: flex; flex-direction: column; gap: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,.45); min-width: 160px; }
.markt-wacht-btn { min-height: 40px; width: 100%; justify-content: flex-start; padding: 0 10px; gap: 6px; }
/* Fix 3: Trend-Pill — ph-icon, min. text-2xs (11px), ember für Anstieg */
.markt-trend-pill { display: inline-flex; align-items: center; gap: 2px;
font-size: var(--text-2xs); font-weight: 600; padding: 1px 5px; border-radius: 99px;
line-height: 1.4; margin-bottom: 3px; }
.markt-trend-pill--up { background: var(--ember-800, rgba(180,60,20,.25)); color: var(--ember-400); }
.markt-trend-pill--down { background: var(--heal-soft, rgba(30,140,90,.2)); color: var(--heal-400); }
/* Fix 4: Empty-State Verkaufen */
.markt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 28px 16px; color: var(--text-dim); text-align: center; }
.markt-empty__text { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
/* ============================================================
§UX Welle A — HUD-Drachen-Vitals · Quest-Progress · Touch-Hitboxen
============================================================ */
/* Welt-Drachen Leben/Energie global im HUD (Nielsen #1, wortlos). */
.dragon-hud { display: flex; gap: 6px; align-items: center; padding: 4px 12px 0; text-decoration: none; }
.dragon-hud__bar { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; box-shadow: var(--shadow-inset); }
.dragon-hud__fill { display: block; height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-base) var(--ease-out); }
.dragon-hud__fill--hp { background: linear-gradient(90deg, var(--blood-500), var(--blood-300)); }
.dragon-hud__fill--en { background: linear-gradient(90deg, var(--ember-600), var(--ember-400)); }
.dragon-hud__fill--hp.is-low { animation: hud-low 1.2s var(--ease-in-out) infinite; }
@keyframes hud-low { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
/* Quest-Chip Fortschrittsbalken (Goal-Gradient — Zug zum Ziel). */
.quest-chip__prog { display: block; height: 3px; margin: 3px 0; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.quest-chip__prog-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-400), var(--ember-400)); transition: width var(--dur-slow) var(--ease-spring); }
/* Touch: kleine Icon-Buttons + Detail-Back ≥44px Trefferfläche (unsichtbar, kein Layout-Shift). */
.dmo-iconbtn--sm { position: relative; }
.dmo-iconbtn--sm::after { content: ''; position: absolute; inset: -4px; }
/* Kein `position: relative` hier: der Knopf ist oben schon `absolute` positioniert (top/left 12px),
und `absolute` bildet fuer das ::after denselben Bezugsrahmen. Das `relative` hat die Positionierung
aufgehoben — der Zurueck-Knopf sass dadurch auf JEDER Detail-Buehne 36 px zu tief (48 statt 12). */
.detail-stage .back::after { content: ''; position: absolute; inset: -6px; }
/* RTL: Richtungs-Icons spiegeln (Pfeile/Carets) — nur unter dir=rtl, LTR unberührt. */
[dir="rtl"] .ph-caret-right,
[dir="rtl"] .ph-caret-left,
[dir="rtl"] .ph-arrow-right,
[dir="rtl"] .ph-arrow-left,
[dir="rtl"] .ph-arrow-u-up-left,
[dir="rtl"] .ph-paper-plane-tilt { transform: scaleX(-1); }
/* RTL: nutzer-/übersetzungs-Inhalt rendert in SEINER eigenen Richtung (wie dir=auto, ohne JS) —
arab. Chat-Nachricht/Übersetzung wird rtl, dt. ltr, unabhängig von der Seiten-Richtung. */
.chat-bubble,
[data-translate-target="out"],
.tr-out { unicode-bidi: plaintext; text-align: start; }
/* --- Namens-Plakette (Design-System ui/plaques/name-*): Drachenkopf-Medaillon links,
geschmiedete Leiste. Asym. 9-Slice: links 170px (Kopf bleibt unverzerrt). --- */
.name-plaque {
display: inline-flex; align-items: center; min-height: 40px;
padding: 0 16px 0 30px;
border: 22px solid transparent; border-left-width: 64px; border-right-width: 24px;
border-image: var(--ui-plaque-name-gold) 58 100 58 170 fill / 22px 24px 22px 64px stretch;
text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.name-plaque--ember { border-image-source: var(--ui-plaque-name-ember); }
/* --- Chrome-Section-Header (ui/chrome/hdr-*): geschmiedete Header-Plate für Cards. --- */
.dmo-card__header--chrome {
border: 18px solid transparent; border-radius: 0;
border-image: var(--ui-chrome-hdr-neutral) 52 fill / 18px stretch;
padding: 4px 10px;
}
.dmo-card__header--chrome.is-aktiv { border-image-source: var(--ui-chrome-hdr-aktiv); }
/* Detail-Stage: Drache über dem Boden-Scrim (wie Höhle) — Artwork nicht versenken. */
.detail-stage .dragon-art { z-index: 1; }
.detail-stage .caption, .detail-stage .el, .detail-stage .bond-ring, .detail-stage .dmo-iconbtn { z-index: 2; }
/* --- Handel: Wertvergleich + gefaltete Felder ------------------------------
Das Angebotsformular zeigte 28 Felder auf einmal und verriet nicht, ob der Tausch fair ist.
Jetzt: eine offene Gegenstands-Zeile je Seite, Rest gefaltet, darunter eine Bilanz. */
.handel-mehr > summary {
cursor: pointer; list-style: none; padding: 4px 0;
font-size: var(--text-2xs); color: var(--ember-300);
}
.handel-mehr > summary::-webkit-details-marker { display: none; }
.handel-mehr > summary::before { content: '+ '; }
.handel-mehr[open] > summary::before { content: '– '; }
.handel-bilanz {
border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-sunken); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px;
}
.handel-bilanz__zeile { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-2xs); }
.handel-bilanz__seite { color: var(--text-muted); }
.handel-bilanz__seite b { color: var(--gold-300); font-variant-numeric: tabular-nums; }
.handel-bilanz__seite--r { text-align: end; }
.handel-bilanz__bar { height: 6px; border-radius: var(--radius-pill); background: var(--heal-700, var(--erde-700)); overflow: hidden; }
.handel-bilanz__bar > i { display: block; height: 100%; background: var(--blood-500); }
.handel-bilanz__urteil { font-size: var(--text-2xs); text-align: center; }
.handel-bilanz__urteil[data-ton="fair"] { color: var(--heal-400); }
.handel-bilanz__urteil[data-ton="schlecht"] { color: var(--blood-300); }
.handel-bilanz__urteil[data-ton="gut"] { color: var(--gold-300); }
.handel-bilanz__urteil[data-ton="neutral"] { color: var(--text-dim); }
/* Alpha-Kunde: Kern sichtbar, Rest aufklappbar (Progressive Disclosure vor dem ersten Feld). */
.alpha-banner__mehr > summary {
cursor: pointer; list-style: none; margin-top: 5px;
font-size: var(--text-2xs); color: var(--gold-300); text-decoration: underline dotted;
}
.alpha-banner__mehr > summary::-webkit-details-marker { display: none; }
.alpha-banner__mehr[open] > summary { margin-bottom: 4px; }
/* --- Arena: Gegnerwahl + Trank-Anzeige -------------------------------------
Der Gegner wurde bei jedem Seitenaufbau neu gewürfelt; jetzt drei Kandidaten zur Wahl,
jeder mit seiner Siegchance. Die Auto-Heilung im Kampf war unsichtbar. */
.gegner-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gegner-karte {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--surface-card); text-decoration: none; color: var(--text-muted);
}
.gegner-karte.is-active { border-color: var(--ember-600); box-shadow: var(--glow-ember); }
.gegner-karte__kopf { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gegner-karte__kopf b { font-size: var(--text-2xs); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gegner-karte__meta { font-size: var(--text-3xs); color: var(--text-dim); }
.gegner-karte__chance { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.arena-traenke {
display: flex; align-items: center; gap: 7px;
padding: 7px 10px; border-radius: var(--radius-md);
background: var(--surface-sunken); border: 1px solid var(--border);
font-size: var(--text-2xs); color: var(--text-muted);
}
.arena-traenke.is-leer { border-color: var(--blood-700); color: var(--blood-300); }
/* Showkampf: eigener Wett-Ausgang im Ergebnis-Schaukasten. */
.wett-ausgang { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: var(--text-2xs); }
.wett-ausgang.is-gewinn { color: var(--gold-300); }
.wett-ausgang.is-verlust { color: var(--text-dim); }
/* Kriegsraum: Wettlauf beider Gilden auf dieselbe Siegschwelle. */
.krieg-lauf { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; }
.krieg-lauf__zeile { display: flex; align-items: center; }
.krieg-lauf__bar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.krieg-lauf__bar > i { display: block; height: 100%; }
.krieg-lauf__ich { background: var(--grad-ember); }
.krieg-lauf__feind { background: var(--blood-500); }
/* --- Chat-Politur ----------------------------------------------------------
Tastatur-Auswahl in der @-Liste sichtbar machen (bisher gab es nur :hover — mit den
Pfeiltasten sah man nicht, worauf man steht) und die Hinweis-Pille für neue Nachrichten. */
.chat-mention__opt.is-active { background: var(--grad-ember); color: var(--stone-950); }
.chat-mention__opt:focus-visible { outline: 2px solid var(--gold-400); outline-offset: -2px; }
.chat-neu {
align-self: center; margin: -4px auto 4px; padding: 4px 12px;
border: 1px solid var(--ember-600); border-radius: var(--radius-pill);
background: var(--surface-card); color: var(--ember-200);
font-size: var(--text-2xs); cursor: pointer; box-shadow: var(--shadow-md);
}
/* Sichtbarer Fokus auf allen Chat-Bedienelementen — ohne ihn ist Tastaturbedienung Blindflug. */
.chat-act:focus-visible, .chat-react-pill:focus-visible,
.chat-reactbar__em:focus-visible, .chat-tool:focus-visible {
outline: 2px solid var(--gold-400); outline-offset: 2px;
}
/* --- Chat: Tages-Trenner, Gruppierung, Erwähnung ---------------------------
Eine Woche Chat lief als ein Block durch, und jede Nachricht wiederholte Punkt, Name und
Uhrzeit — auch die fünfte in Folge desselben Absenders. */
.chat-tag {
align-self: center; margin: 6px 0 2px; padding: 2px 12px;
border-radius: var(--radius-pill); background: var(--surface-sunken);
font-size: var(--text-3xs); letter-spacing: .06em; text-transform: uppercase;
color: var(--text-dim);
}
.chat-row.is-folge { margin-top: -6px; }
/* Direkte Ansprache: eine @-Erwähnung ging im Verlauf unter. */
.chat-row.is-mention .chat-bubble {
border-inline-start: 3px solid var(--gold-400);
background: color-mix(in srgb, var(--gold-400) 9%, var(--surface-card));
}
/* --- Chat: Emoji-Auswahl mit Suche + zuletzt benutzten ---------------------
36 Symbole in fester Reihenfolge — wer dasselbe zum zehnten Mal wollte, suchte es neu. */
.emoji-kopf { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.emoji-suche { font-size: var(--text-sm); padding: 5px 9px; }
.emoji-zuletzt { display: flex; flex-wrap: wrap; gap: 2px; }
.emoji-zuletzt::before {
content: ''; flex-basis: 100%; height: 0;
}
/* Aktionen unter der Nachricht: fünf Knöpfe dauerhaft sichtbar sind Lärm. Auf Zeigegeräten
erscheinen sie bei Hover/Fokus, auf Touch bleiben sie sichtbar — dort gibt es kein Hover,
und ein unsichtbarer Knopf ist auf dem Handy kein Knopf. */
@media (hover: hover) and (pointer: fine) {
.chat-actions { opacity: 0; transition: opacity .12s ease; }
.chat-row:hover .chat-actions,
.chat-row:focus-within .chat-actions { opacity: 1; }
}
/* „Bis hier gelesen" — die Stelle, an der man beim letzten Besuch aufgehört hat. */
.chat-trenner {
display: flex; align-items: center; gap: 8px;
margin: 8px 0 2px; font-size: var(--text-3xs);
text-transform: uppercase; letter-spacing: .07em; color: var(--ember-300);
}
.chat-trenner::before, .chat-trenner::after {
content: ''; flex: 1; height: 1px; background: var(--ember-700);
}
/* --- Bühnen-Hintergründe (DS §83) ---------------------------------------------
Die Artworks sind jetzt VOLLBILD-Renders (16:9, randlos) statt freigestellter
Dioramen. Damit gilt wieder schlicht `cover`: kein Überskalieren, keine
Bottom-Verankerung, keine Kantenmaske — all das gab es nur, um die freigestellten
Ränder aus der Bühne zu schieben.
Der dunkle Radial-Verlauf, der früher über dem ganzen Bild lag, ist raus. Er sollte
die transparenten Diorama-Ränder kaschieren, legte aber einen Schleier über die
gesamte Fläche und schluckte die Zeichnung im Artwork. Wo Text über der Bühne
steht, verdunkelt ihn ein Scrim gezielt unten (--scrim-bottom), nicht flächig. */
.stage-bg--dio,
.dragon-stage .stage-bg--dio,
.dragon-card--hero .stage-bg--dio,
.bk-stage__bg--dio {
background-color: #120c08;
background-image: var(--dio-img);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* --- Profil ---------------------------------------------------------------
Der Screen trug 73 Inline-Styles — fast alles Wiederholungen von vier Mustern:
Schnellzugriff-Karte, Bühne des Helden, Gruppen-Überschrift, Icon-Kachel.
Die Werte sind 1:1 übernommen; hier wurde nichts umgestaltet, nur benannt. */
/* Schnellzugriff-Karte: Medaillon + Text + optionaler Akzentrand. */
.profil-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.profil-link--ember { border-color: var(--ember-700); }
.profil-link--ember-hell { border-color: var(--ember-600); }
.profil-link--gold { border-color: var(--gold-700); position: relative; }
.profil-link--blood { border-color: var(--blood-700); }
/* Gestrichelt + eisblau = „Ausblick, noch nicht Spiel" (Konzept-Skizzen). */
.profil-link--ausblick { border: 1px dashed var(--eis-500); background: var(--eis-soft); }
.profil-link__ico { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; }
.profil-link__ico--schmal { width: 34px; text-align: center; display: block; }
.profil-link__bild { width: 40px; height: 40px; object-fit: contain; flex: none; }
/* Zähler-Blase am Drachenpfad (einlösbare Stufen). */
.profil-pfad-zahl {
position: absolute; top: 7px; right: 7px; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 800;
background: linear-gradient(180deg, #e7b455, #c68a34); color: #1a1204; box-shadow: inset 0 1px 0 #fff6;
}
/* Prestige — die größte Zahl des Screens (Miller: wichtigste Kennzahl zuerst). */
.profil-prestige__label { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 6px; }
.profil-prestige__wert { font-family: var(--font-display); font-size: clamp(2.8rem, 10vw, 4rem); font-weight: 900; color: var(--gold-300); line-height: 1; letter-spacing: -.02em; }
/* Bühne des Helden-Drachen. */
.profil-buehne { position: relative; height: 260px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--grad-cave); }
.profil-buehne__marke { position: absolute; top: 12px; right: 12px; }
.profil-buehne__fuss { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.profil-buehne__rolle { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--stone-200); text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.profil-buehne__name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); color: var(--stone-100); line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
/* Gruppen-Überschrift INNERHALB einer Karte — nicht zu verwechseln mit dem
Karten-Eyebrow (.dmo-card__eyebrow), der andere Laufweite und Farbe hat. */
.profil-gruppe { font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.profil-gruppe--eis { color: var(--eis-500); margin-bottom: 0; }
.profil-trenner { border-top: 1px solid var(--border); margin: 10px 0 8px; }
/* Sprach-Abschnitt: zwei Zwischenüberschriften über den Chip-Reihen. */
.profil-sprachtitel { font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.profil-sprachtitel--weitere { margin: 11px 0 5px; }
/* Errungene Embleme (Drachenpfad-Trophäen). */
.profil-emblem { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #130d07; border: 1px solid var(--gold-700); }
.profil-emblem img { width: 34px; height: 34px; object-fit: contain; }
.profil-embleme { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Inline-Bearbeiten (Nick, Drachenname, Bio). */
.profil-inline { display: inline-flex; align-items: center; gap: 8px; }
.profil-inline-form { gap: 6px; align-items: center; flex-wrap: wrap; }
.profil-stift { min-width: 34px; min-height: 34px; }
.profil-stift--klein{ min-width: 30px; min-height: 30px; padding: 4px; }
.profil-bio-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.profil-bio-text { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); white-space: pre-wrap; flex: 1; }
.profil-bio-leer { margin: 0; font-size: var(--text-sm); color: var(--text-dim); flex: 1; }
.profil-diorama { --dio-img: url(/assets/scenes/hoehle.png); opacity: .88; }
.profil-standing { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
/* Fallback ohne Prestige-Karte: dieselben Abzeichen, aber linksbündig und ohne Abstand oben. */
.profil-standing--links { justify-content: flex-start; margin-top: 0; margin-bottom: 8px; }
.profil-brut { display: flex; align-items: center; gap: 12px; border-color: var(--eis-700); box-shadow: 0 0 16px rgba(69,198,232,.25); }
.profil-brut__ico { font-size: 30px; color: var(--eis-500); }
.profil-sperre { color: var(--stone-300); font-size: 15px; }
.profil-feld { max-width: 170px; }
.profil-feld[name="neuer_name"] { max-width: 160px; }
.profil-bio-feld { resize: vertical; line-height: 1.4; }
.profil-drache { text-decoration: none; display: flex; align-items: center; gap: 9px; }
.profil-energie { color: var(--elektro-500); }
.profil-mentor-zahl { font-weight: 800; color: var(--gold-400); }
.profil-sprachhinweis { margin: 5px 0 10px; font-size: var(--text-2xs); color: var(--text-dim); line-height: 1.4; }
.profil-rechtliches { text-align: center; font-size: var(--text-2xs); }
/* ⚠️ Der Abstand braucht den Container im Selektor: ab 980px setzt
`.content-col .scroll-area > *` alle oberen Abstaende auf 0 und schlaegt eine einzelne
Utility-Klasse. Als Inline-Style hat sich der Wert vorher immer durchgesetzt — gemessen. */
.profil-cols .profil-rechtliches { margin-top: 6px; }
/* Diorama-Bühnen: Höhe aus dem Bild-Seitenverhältnis ableiten (2,32:1), damit das Diorama in voller
Breite KOMPLETT sichtbar ist statt oben beschnitten zu werden (gemessen: bei 1678 px Breite braucht
es 722 px Höhe, die Bühne bot nur 420). Gedeckelt, damit die Bühne die Seite nicht sprengt. */
.dragon-stage:has(.stage-bg--dio),
.dragon-card--hero .dragon-stage:has(.stage-bg--dio),
.detail-stage:has(.stage-bg--dio) { height: min(43vw, 430px); }
.bk-stage:has(.bk-stage__bg--dio) { height: min(46vw, 400px); }
@media (max-width: 700px) {
.dragon-stage:has(.stage-bg--dio),
.dragon-card--hero .dragon-stage:has(.stage-bg--dio),
.detail-stage:has(.stage-bg--dio) { height: min(52vw, 300px); }
.bk-stage:has(.bk-stage__bg--dio) { height: min(54vw, 320px); }
}
/* --- Höhle -----------------------------------------------------------------
70 Inline-Styles, fast alles Einzelfälle — die Muster tragen jetzt Namen.
Werte 1:1 übernommen; hier wurde nichts umgestaltet. */
.text-erde { color: var(--erde-500); }
.u-block { display: block; }
.u-ml-6 { margin-left: 6px; }
.u-mt-5 { margin-top: 5px; }
.u-mt-6 { margin-top: 6px; }
.u-no-underline { text-decoration: none; }
.u-pt-0 { padding-top: 0; }
.u-rowc-7 { display: flex; align-items: center; gap: 7px; }
.u-scroll-anker { scroll-margin-top: 12px; }
.hoehle-banner { display:block; background:linear-gradient(150deg,color-mix(in srgb,var(--gold-500) 15%,var(--surface-card)),var(--surface-card)); text-decoration:none; }
.hoehle-banner__ico { font-size:26px; color:var(--gold-400); }
.hoehle-brut-kandidaten { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.hoehle-brut-liste { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.hoehle-brut__bar { flex:2; height:7px; border-radius:4px; background:var(--surface-sunken); overflow:hidden; }
.hoehle-brut__bereit { color:var(--heal-400); font-weight:600; }
.hoehle-brut__hinweis { color:var(--text-dim); font-size:var(--text-2xs); line-height:1.45; }
.hoehle-brut__mangel { color:var(--text-dim); font-size:var(--text-2xs); margin-bottom:10px; }
.hoehle-brut__ok { color:var(--heal-400); font-size:16px; }
.hoehle-brutplatz__text { margin:4px 0 8px; font-size:var(--text-2xs); color:var(--text-muted); line-height:1.4; }
.hoehle-brutplatz__titel { font-family:var(--font-display); font-weight:700; font-size:var(--text-md); color:var(--text); line-height:1.15; }
.hoehle-caret { color:var(--text-dim); font-size:17px; }
.hoehle-diorama { --dio-img:url(/assets/scenes/hoehle.png); }
.hoehle-ei__sub { font-size:9px; color:var(--text-dim); line-height:1.3; margin-top:2px; }
.hoehle-heimkehr__kopf { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.hoehle-heimkehr__liste { display:flex; flex-direction:column; gap:5px; align-items:stretch; }
.hoehle-heimkehr__name { color:var(--text); text-decoration:none; font-weight:600; flex:none; }
.hoehle-heimkehr__zeile { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:var(--text-sm); }
.hoehle-heimkehr__zeit { flex:1; min-width:0; text-align:end; }
.hoehle-hinweis { display:flex; gap:9px; align-items:flex-start; padding:9px 11px; border-radius:var(--radius-md); background:linear-gradient(100deg,rgba(176,126,16,.12),transparent); border:1px solid var(--gold-700); font-size:var(--text-2xs); line-height:1.45; color:var(--text-muted); margin-bottom:6px; }
.hoehle-hort { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:var(--radius-md); background:linear-gradient(100deg,color-mix(in srgb,var(--gold-500) 18%,transparent),transparent); border:1px solid var(--gold-700); margin-bottom:7px; }
.hoehle-hort__bar { margin:0 0 6px; }
.hoehle-hort__cap { color:var(--text-dim); font-weight:400; font-size:var(--text-2xs); }
.hoehle-hort__form { display:flex; gap:4px; flex:1; }
.hoehle-hort__label { display:flex; align-items:center; gap:7px; font-family:var(--font-display); color:var(--gold-200); }
.hoehle-hort__sub { font-size:var(--text-2xs); color:var(--text-dim); font-family:var(--font-body); }
.hoehle-hort__wert { font-family:var(--font-display); font-weight:800; color:var(--gold-300); font-variant-numeric:tabular-nums; }
.hoehle-info-ico { margin-inline-start:5px; color:var(--text-dim); vertical-align:-1px; }
.hoehle-inv-link { display:block; margin:2px 0 6px; text-decoration:none; }
.hoehle-koord { font-family:var(--font-mono,monospace); color:var(--text-muted); }
.hoehle-leer { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 12px; text-align:center; }
.hoehle-leer__ico { opacity:.75; animation:revealPop .6s var(--ease-spring,ease) both; }
.hoehle-leer__text { font-family:var(--font-display); font-size:var(--text-sm); color:var(--text-muted); line-height:1.4; }
.hoehle-name__weg { font-size:var(--text-2xs); color:var(--ember-300); font-family:var(--font-label); }
.hoehle-qa-gruppe { margin-top:13px; }
.hoehle-szene { display:block; position:relative; margin:-2px 0 10px; }
.hoehle-szene__bild { display:block; width:100%; height:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-inset),var(--edge-gold); }
.hoehle-szene__marke { position:absolute; top:8px; inset-inline-end:8px; width:30px; height:30px; border-radius:var(--radius-md); background:rgba(10,6,4,.62); backdrop-filter:blur(3px); display:grid; place-items:center; color:var(--gold-300); }
.hoehle-zucht-kopf { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; margin-bottom:8px; }
.hoehle-zucht__herz { color:var(--blood-400); font-size:22px; filter:drop-shadow(0 0 6px var(--blood-600)); }
.hoehle-zucht__odds { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.hoehle-zucht__slot { aspect-ratio:1; display:grid; place-items:center; background:radial-gradient(circle,rgba(255,120,40,.12),transparent 65%); border-radius:var(--radius-md); }
.hoehle-zucht__vorschau { font-size:9px; line-height:1.4; margin-top:5px; display:flex; flex-wrap:wrap; gap:3px; }
.text-erde { color:var(--erde-500); }
.u-mb-12 { margin-bottom:12px; }
.u-ml-6 { margin-left:6px; }
.u-mt-6 { margin-top:6px; }
.u-no-underline { text-decoration:none; }
.u-pt-0 { padding-top:0; }
.u-rowc-7 { display:flex; align-items:center; gap:7px; }
.u-scroll-anker { scroll-margin-top:12px; }
/* --- Drachen-Detailseite --------------------------------------------------*/
.text-elektro-400 { color: var(--elektro-400); }
.u-mt-4 { margin-top: 4px; }
.u-no-hit { pointer-events: none; }
.u-row-3 { display: flex; gap: 3px; align-items: center; }
.u-self-start { align-self: flex-start; }
.drache-sub { font-size:var(--text-2xs); color:var(--text-dim); margin-top:2px; }
.drache-warn--ko { border-color:var(--blood-600); box-shadow:0 0 18px rgba(168,27,27,.4); }
.drache-label--blood { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--blood-300); }
.drache-warn--bund { border-color:var(--ember-600); box-shadow:var(--glow-ember); }
.drache-bund__ico { font-size:30px; color:var(--ember-400); }
.drache-label--ember { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ember-300); }
.drache-ico-ember { color:var(--ember-400); font-size:18px; }
.drache-ico-elektro { color:var(--elektro-400); font-size:18px; }
.drache-spalte-70 { width:70px; }
.drache-spalte-104 { width:104px; }
.drache-hinweis { font-size:var(--text-2xs); color:var(--text-dim); line-height:1.5; }
.drache-anker { scroll-margin-top:14px; }
.drache-wert-kopf { display:flex; flex-direction:column; gap:3px; align-items:flex-end; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.u-self-start { align-self:flex-start; }
.drache-wert-zeile { display:flex; align-items:flex-end; gap:10px; }
.drache-mini--blood { font-size:9px; color:var(--blood-300); margin-top:1px; }
.drache-mini { font-size:9px; color:var(--text-dim); margin-top:1px; }
.drache-mini-reihe { font-size:9px; color:var(--text-dim); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.text-elektro-400 { color:var(--elektro-400); }
.drache-fuss { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:var(--text-2xs); color:var(--text-dim); }
.drache-drei { display:flex; justify-content:space-between; gap:6px; }
.drache-drei__spalte { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.drache-caps { font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); }
.drache-notiz { font-size:var(--text-2xs); color:var(--text-dim); margin-top:10px; line-height:1.4; }
.drache-berufung { margin-top:14px; padding:12px 14px; border:2px solid var(--gold-600); border-radius:10px; background:var(--surface-sunken); display:flex; gap:12px; align-items:flex-start; }
.drache-berufung__ico { width:44px; height:44px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--gold-900); border:2px solid var(--gold-500); color:var(--gold-300); font-size:22px; }
.drache-berufung__titel { font-family:var(--font-display); font-weight:700; color:var(--gold-300); }
.drache-berufung__sub { color:var(--text-muted); font-weight:400; }
.drache-berufung__text { font-size:var(--text-2xs); color:var(--text-muted); margin:3px 0 6px; line-height:1.4; }
.u-row-3 { display:flex; gap:3px; align-items:center; }
.drache-berufung__meta { font-size:9px; color:var(--text-dim); margin-left:6px; text-transform:uppercase; letter-spacing:.05em; }
.drache-wandel { margin-top:14px; padding:12px 14px; border:1px dashed var(--gold-700); border-radius:10px; background:var(--surface-sunken); }
.drache-wandel__text { font-size:var(--text-2xs); color:var(--gold-300); margin-bottom:8px; line-height:1.45; }
.drache-wandel__btn { flex:none; display:inline-flex; gap:6px; align-items:center; padding:7px 12px; border-radius:8px; border:1px solid var(--gold-600); background:var(--gold-900); color:var(--gold-200); font-family:var(--font-display); font-weight:700; cursor:pointer; }
.drache-fussnote { font-size:var(--text-2xs); color:var(--text-dim); line-height:1.35; }
.drache-bd-ember { border-color:var(--ember-600); }
.drache-chip-ember { color:var(--ember-300); border:1px solid var(--ember-600); }
.drache-fussnote--flach { font-size:var(--text-2xs); color:var(--text-dim); margin:0; line-height:1.4; }
.drache-leer { font-size:var(--text-sm); color:var(--text-dim); margin:4px 0 0; }
/* --- Konzept-Skizzen (Ausblick) -------------------------------------------*/
.u-gap-8 { gap: 8px; }
.u-mb-4 { margin-bottom: 4px; }
.u-text-end { text-align: end; }
.konzept-marke { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill); background:var(--eis-soft); border:1px dashed var(--eis-500); }
/* ⚠️ Der Abstand braucht den Container: ab 980px setzt `.content-col .scroll-area > *`
margin-bottom auf 16px und schlaegt eine einzelne Klasse. Als Inline-Stil hat sich der Wert
vorher immer durchgesetzt — gemessen. Gleiche Falle wie bei .profil-rechtliches. */
.content-col .scroll-area > .konzept-marke { margin-bottom: 4px; }
.konzept-marke__ico { font-size:12px; color:var(--eis-300); }
.konzept-eyebrow { font-family:var(--font-label); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--eis-300); }
.konzept-notiz { background:var(--eis-soft); border:1px dashed var(--eis-500); font-size:var(--text-2xs); color:var(--text-muted); line-height:1.5; }
.konzept-eintrag { display:flex; align-items:center; gap:13px; text-decoration:none; }
.konzept-eintrag__titel { font-family:var(--font-display); font-weight:700; font-size:var(--text-md); color:var(--text); }
.konzept-eintrag__text { font-size:var(--text-2xs); color:var(--text-dim); line-height:1.4; }
.konzept-caret { color:var(--text-dim); font-size:18px; }
.konzept-tafel { border-color:var(--gold-700); overflow:hidden; }
.konzept-tafel__kopf { display:flex; align-items:center; gap:10px; padding:10px 13px; background:linear-gradient(90deg,rgba(176,126,16,.18),transparent); }
.konzept-wappen { width:34px; height:34px; flex:none; background:url(/assets/crests/shield-empty.png) center/contain no-repeat; }
.konzept-zahl { font-variant-numeric:tabular-nums; font-weight:700; color:var(--gold-300); }
.konzept-kachel { border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(176,126,16,.2),rgba(40,26,8,.4)); border:1px solid var(--gold-600); padding:18px 16px; text-align:center; }
.konzept-kachel__zahl { font-family:var(--font-display); font-size:32px; color:var(--text); font-variant-numeric:tabular-nums; }
.konzept-kachel__sub { font-size:var(--text-2xs); color:var(--text-muted); margin-top:4px; }
.u-gap-8 { gap:8px; }
.u-mb-4 { margin-bottom:4px; }
.konzept-pergament-zeile { font-size:var(--text-2xs); color:var(--parchment-ink); display:flex; gap:5px; align-items:center; }
.konzept-sunken { background:var(--surface-sunken); }
.konzept-zeile-dim { font-size:var(--text-2xs); color:var(--text-dim); display:flex; gap:5px; align-items:center; }
.konzept-fliess { font-size:var(--text-2xs); color:var(--text-muted); line-height:1.45; }
.konzept-schluss { font-size:var(--text-2xs); color:var(--eis-300); text-align:center; }
.konzept-link { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.konzept-punkt { width:10px; height:10px; border-radius:50%; flex:none; background:var(--gold-400); box-shadow:0 0 8px var(--gold-500); }
.konzept-punkt__titel { font-weight:700; font-size:var(--text-sm); color:var(--text); }
.konzept-punkt__pfeil { color:var(--gold-300); flex:none; }
.konzept-punkt__text { font-size:var(--text-2xs); color:var(--text-dim); padding:2px 0 0; }
.konzept-kopfzeile { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.konzept-kopfzeile__label { font-size:var(--text-2xs); color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.konzept-kopfzeile__wert { font-size:var(--text-2xs); color:var(--gold-300); font-weight:700; }
.konzept-fuss { margin:7px 0 0; font-size:var(--text-2xs); color:var(--text-dim); }
.konzept-untertitel { font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--text); }
.konzept-buehne { position:relative; height:160px; border-radius:var(--radius-lg); overflow:hidden; background:var(--grad-cave,#1a110d); border:1px solid var(--ember-700); display:flex; align-items:flex-end; justify-content:center; }
.konzept-buehne__glut { position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 90%,rgba(255,102,0,.18),transparent 70%); }
.konzept-buehne__bild { width:90px; height:90px; object-fit:contain; margin-bottom:8px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.konzept-liste { display:flex; flex-direction:column; gap:6px; font-size:var(--text-sm); }
.konzept-liste__nr { width:26px; text-align:center; color:var(--gold-400); font-weight:800; }
.konzept-liste__sub { font-size:var(--text-2xs); color:var(--text-dim); margin-top:4px; }
/* --- Gilde ----------------------------------------------------------------*/
.bd-gold-600 { border-color: var(--gold-600); }
.u-col-14 { display: flex; flex-direction: column; gap: 14px; }
.u-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-hit-40 { min-width: 40px; min-height: 40px; }
.u-mb-6 { margin-bottom: 6px; }
.u-row-6-oben { display: flex; gap: 6px; align-items: flex-start; }
.bd-gold-600 { border-color:var(--gold-600); }
.gilde-liste { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.gilde-banner { background:linear-gradient(150deg,color-mix(in srgb,var(--gold-500) 14%,var(--surface-card)),var(--surface-card)); }
.gilde-banner__ico { font-size:24px; color:var(--gold-400); }
.gilde-kopf__links { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.u-ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gilde-kopf__rechts { display:flex; align-items:center; gap:8px; flex:none; }
.gilde-marke { position:absolute; top:-4px; inset-inline-end:-4px; }
.gilde-absatz { margin:0 0 10px; }
.gilde-absatz--klein { margin:0 0 6px; font-size:var(--text-sm); }
.gilde-zahlen { display:flex; gap:18px; font-size:var(--text-sm); color:var(--text-muted); }
.u-col-14 { display:flex; flex-direction:column; gap:14px; }
.gilde-wappen-platz { display:flex; justify-content:center; padding:2px 0; }
.gilde-wappen { width:120px; height:120px; }
.u-mb-6 { margin-bottom:6px; }
.gilde-raster-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.gilde-raster__label { margin:0; text-align:center; font-size:var(--text-2xs); color:var(--text-dim); }
.gilde-prestige { font-variant-numeric:tabular-nums; font-weight:800; color:var(--gold-400); }
.gilde-info-ico { color:var(--gold-400); font-size:13px; vertical-align:-1px; }
.u-hit-40 { min-width:40px; min-height:40px; }
.gilde-bar__legende { display:flex; justify-content:space-between; font-size:var(--text-2xs); color:var(--text-dim); margin-top:3px; }
.gilde-zeile { display:flex; gap:8px; margin-bottom:12px; }
.gilde-rang-spalte { width:34px; flex:0 0 34px; text-align:center; }
.gilde-dim-sm { font-size:var(--text-sm); color:var(--text-dim); }
.gilde-feld { width:48px; text-align:center; padding:3px; border-radius:6px; border:1px solid var(--border); background:var(--surface-sunken); color:var(--text); }
.gilde-aktionen { display:flex; gap:5px; margin-top:6px; border-top:1px solid var(--stone-700); padding-top:7px; }
.gilde-spalte-54 { width:54px; text-align:center; }
.u-row-6-oben { display:flex; gap:6px; align-items:flex-start; }
.gilde-suchfeld { flex:1; position:relative; }
/* --- Kriegsraum -----------------------------------------------------------*/
.text-dim-400 { color: var(--text-dim); font-weight: 400; }
.u-rowc-5 { display: flex; gap: 5px; align-items: center; }
.u-wrap-6 { flex-wrap: wrap; row-gap: 6px; }
.krieg-ico { font-size:20px; color:var(--gold-400); }
.krieg-partei { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.krieg-partei__tag { font-size:var(--text-2xs); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.krieg-schwert { flex:none; text-shadow:0 0 12px var(--blood-700); }
.krieg-pott { margin-top:10px; display:flex; align-items:center; justify-content:space-between; padding:7px 11px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--gold-400) 12%, transparent); border:1px solid color-mix(in srgb, var(--gold-400) 35%, transparent); }
.krieg-schwelle { margin-top:6px; font-size:var(--text-2xs); color:var(--text-dim); text-align:center; }
.krieg-punkte { font-variant-numeric:tabular-nums; color:var(--text-muted); }
.krieg-frieden { margin-top:10px; padding:9px 11px; border:1px solid var(--heal-500); border-radius:var(--radius-md); background:color-mix(in srgb,var(--heal-400) 10%,transparent); font-size:var(--text-2xs); color:var(--heal-400); }
.krieg-bar__kopf { display:flex; align-items:center; justify-content:space-between; font-size:var(--text-sm); margin-bottom:5px; }
.krieg-bar__wert { font-variant-numeric:tabular-nums; color:var(--ember-300); font-weight:700; }
.text-dim-400 { color:var(--text-dim); font-weight:400; }
.krieg-bar { height:7px; border-radius:var(--radius-pill); background:var(--surface-sunken); overflow:hidden; }
.krieg-eintraege { display:flex; flex-direction:column; gap:0; }
.krieg-eintrag { display:flex; align-items:flex-start; gap:9px; padding:7px 2px; border-bottom:1px solid var(--border-soft); }
.krieg-eintrag__text { font-size:var(--text-sm); color:var(--text); line-height:1.3; }
.krieg-eintrag__meta { font-size:var(--text-2xs); color:var(--text-dim); line-height:1.5; padding:2px 2px 6px; border-bottom:1px solid var(--border-soft); }
.u-wrap-6 { flex-wrap:wrap; row-gap:6px; }
.u-rowc-5 { display:flex; gap:5px; align-items:center; }
.krieg-pakt-summary { list-style:none; cursor:pointer; color:var(--heal-400); }
.krieg-pakt-menue { position:absolute; inset-inline-end:0; top:100%; margin-top:4px; z-index:5; background:var(--surface-card); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-pop); padding:5px; display:flex; flex-direction:column; gap:4px; min-width:200px; }
/* --- Segment (Ueberfall-Karte) --------------------------------------------*/
.u-between-row { display: flex; align-items: center; justify-content: space-between; }
.u-fade-85 { opacity: .85; }
.u-mb-10 { margin-bottom: 10px; }
.u-p-0 { padding: 0; }
.u-rowc-9 { display: flex; align-items: center; gap: 9px; }
.segment-warnung { margin-bottom:10px; border-color:var(--blood-600); background:linear-gradient(150deg,color-mix(in srgb,var(--blood-600) 14%,var(--surface-card)),var(--surface-card)); }
.segment-warnung__titel { font-family:var(--font-display); color:var(--blood-200); }
.segment-karte__overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.segment-legende { display:flex; gap:14px; flex-wrap:wrap; font-size:var(--text-2xs); color:var(--text-dim); justify-content:center; margin:8px 0; }
.segment-punkt { width:9px; height:9px; border-radius:50%; background:var(--feuer-500); border:1px solid var(--feuer-400); }
.segment-chip-elektro { background:var(--elektro-900); color:var(--elektro-200); border:1px solid var(--elektro-600); }
.segment-kopf { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.segment-sub { color:var(--text-dim); font-weight:400; font-size:var(--text-xs); }
.segment-link { display:flex; align-items:center; gap:4px; flex:none; text-decoration:none; }
.segment-mini { font-size:var(--text-2xs); color:var(--text-dim); font-weight:700; }
.segment-hinweis.segment-hinweis--blood { border-color:var(--blood-600); background:linear-gradient(150deg,color-mix(in srgb,var(--blood-600) 16%,var(--surface-card)),var(--surface-card)); color:var(--blood-200); font-size:var(--text-2xs); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.segment-hinweis.segment-hinweis--gold { border-color:var(--gold-800); color:var(--text-muted); font-size:var(--text-2xs); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.segment-hinweis.segment-hinweis--ember { border-color:var(--ember-800); color:var(--text-muted); font-size:var(--text-2xs); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.segment-leer { border-color:var(--eis-700); color:var(--text-muted); font-size:var(--text-sm); text-align:center; }
.segment-notiz.segment-notiz--gold { border-color:var(--gold-700); color:var(--gold-300); font-size:var(--text-2xs); margin-bottom:8px; }
.segment-notiz.segment-notiz--blood { border-color:var(--blood-700); color:var(--blood-300); font-size:var(--text-2xs); margin-bottom:8px; }
.segment-zahl { font-family:var(--font-display); font-size:var(--text-xl); color:var(--gold-300); }
.segment-zahl__sub { text-align:end; font-size:var(--text-2xs); color:var(--text-dim); }
.segment-fuss { margin:8px 0 0; font-size:var(--text-2xs); color:var(--text-dim); }
/* --- Handel (Tauschangebote) ----------------------------------------------*/
.u-mt-9 { margin-top: 9px; }
.u-row-10-oben { display: flex; gap: 10px; align-items: flex-start; }
.u-row-12-wrap { display: flex; gap: 12px; flex-wrap: wrap; }
.u-row-wrap-4 { display: flex; flex-wrap: wrap; gap: 4px; }
.u-w-half { width: 50%; }
.u-row-wrap-4 { display:flex; flex-wrap:wrap; gap:4px; }
.handel-titel { font-size:var(--text-sm); color:var(--text); margin-bottom:6px; }
.handel-notiz { font-size:var(--text-2xs); color:var(--text-muted); font-style:italic; margin-top:2px; }
.u-row-10-oben { display:flex; gap:10px; align-items:flex-start; }
.handel-leer { color:var(--text-dim); margin-top:14px; }
.handel-dim-sm { font-size:var(--text-sm); color:var(--text-dim); }
.u-mt-9 { margin-top:9px; }
.handel-label { font-family:var(--font-label); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.u-row-12-wrap { display:flex; gap:12px; flex-wrap:wrap; }
.handel-item-zeile { display:flex; gap:5px; margin-bottom:5px; }
.handel-menge { width:54px; text-align:center; }
.handel-res-zeile { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:var(--text-2xs); color:var(--text-muted); margin-bottom:3px; }
.handel-res-feld { width:60px; text-align:center; }
.handel-gold-feld { width:80px; text-align:center; }
.u-w-half { width:50%; }
/* --- Bibliothek (oeffentliche Wissensseiten) ------------------------------*/
.lib-seite { max-width:760px; margin:0 auto; padding:24px 16px 80px; font-family:var(--font-body); color:var(--text); }
.lib-kopf { text-align:center; margin-bottom:32px; }
.lib-titel { font-family:var(--font-display); font-weight:900; font-size:var(--text-3xl); color:var(--ember-500); }
.lib-untertitel { color:var(--text-dim); font-size:var(--text-sm); }
.lib-abschnitt { text-align:center; margin:10px 0 18px; }
.lib-raster { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
.lib-abschnitt.lib-abschnitt--weit { text-align:center; margin:34px 0 18px; }
.lib-fuss { text-align:center; margin-top:40px; color:var(--text-dim); font-size:var(--text-2xs); }
/* --- Gemeinsame Aktivitaeten ----------------------------------------------*/
.u-minw-120 { min-width: 120px; }
.collab-seg { display:flex; gap:4px; background:var(--surface-sunken); border-radius:var(--radius-pill); padding:3px; }
.collab-primaer { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:10px; background:var(--surface-sunken); border:1px solid var(--ember-700); }
.collab-primaer__name { flex:1; font-weight:600; }
.collab-parameter { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; }
.collab-menge { display:flex; align-items:center; gap:5px; font-size:var(--text-2xs); color:var(--text-muted); }
.collab-menge__feld { width:64px; }
.collab-inline { display:inline-flex; align-items:center; gap:6px; }
.collab-gefaehrten { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.collab-waehler { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:var(--surface-sunken); }
.collab-abschnitt-label { font-size:var(--text-2xs); margin:6px 2px 2px; }
.collab-waehler.collab-waehler--einladbar { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; background:var(--surface-sunken); border:1px dashed var(--elektro-600); }
.collab-bonus { display:flex; align-items:center; gap:10px; margin-top:10px; }
.collab-bonus__bar { flex:1; height:10px; background:var(--surface-sunken); border-radius:5px; overflow:hidden; }
.collab-bonus__fill { height:100%; width:0; background:linear-gradient(90deg,var(--gold-600),var(--gold-400)); transition:width .2s; }
.collab-bonus__wert { font-family:var(--font-display); color:var(--gold-300); min-width:120px; text-align:right; }
.collab-fuss { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:8px; }
.collab-feld-80 { width:80px; }
.collab-feld-110 { width:110px; }
/* --- Freunde --------------------------------------------------------------*/
.u-items-center { align-items: center; }
.u-mb-2 { margin-bottom: 2px; }
.u-minw-0 { min-width: 0; }
.u-mt-9 { margin-top: 9px; }
.u-row-4 { display: flex; gap: 4px; }
.u-row-8-oben { display: flex; gap: 8px; align-items: flex-start; }
.u-rowc-11 { display: flex; align-items: center; gap: 11px; }
.freunde-seg { display:flex; gap:4px; background:var(--surface-sunken); border-radius:var(--radius-pill); padding:3px; flex:1; max-width:300px; }
.freunde-seg__opt { flex:1; text-align:center; padding:7px; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:600; text-decoration:none; color:var(--text-muted); }
.freunde-seg__opt.freunde-seg__opt--aktiv { flex:1; text-align:center; padding:7px; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:600; background:var(--grad-ember); color:var(--stone-950); }
.freunde-banner { display:flex; align-items:center; gap:11px; border-color:var(--gold-600); background:linear-gradient(150deg,color-mix(in srgb,var(--gold-500) 14%,var(--surface-card)),var(--surface-card)); text-decoration:none; }
.freunde-banner__bild { width:42px; height:42px; flex:none; object-fit:contain; }
.freunde-banner__titel { font-family:var(--font-display); color:var(--gold-200); font-size:var(--text-sm); }
.freunde-mentor { display:flex; align-items:center; gap:10px; border-color:var(--ember-600); }
.freunde-mentor__ico { font-size:22px; color:var(--ember-400); }
.freunde-mentor__zeile { display:flex; align-items:center; gap:8px; font-size:var(--text-2xs); color:var(--ember-300); }
.freunde-code { font-family:var(--font-mono,monospace); font-size:var(--text-2xs); color:var(--gold-300); word-break:break-all; }
.freunde-karte-pad { padding:10px 12px; }
.freunde-mehr__summary { list-style:none; cursor:pointer; }
.freunde-mehr__panel { display:flex; flex-direction:column; gap:5px; margin-top:6px; padding:8px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); }
.freunde-grund { font-size:var(--text-2xs); padding:5px 6px; flex:1; min-width:0; }
/* ⚠️ Dritte Stelle derselben Falle: ab 980px setzt `.content-col .scroll-area > *` die
Abstaende aller direkten Kinder fest und schlaegt eine einzelne Utility-Klasse. Wer einen
Abstand an einem direkten Kind aufloest, braucht den Container im Selektor. */
.content-col .scroll-area > .u-mb-2 { margin-bottom: 2px; }
/* --- Brutkammer -----------------------------------------------------------*/
.u-fade-75 { opacity: .75; }
.brut-diorama { --dio-img:url(/assets/scenes/brutkammer.png); }
.u-rowc-7.t-2xs { display:flex; align-items:center; gap:7px; font-size:var(--text-2xs); }
.u-flex1-min0.text-base { flex:1; min-width:0; color:var(--text); }
.u-rowc-8.t-2xs { display:flex; align-items:center; gap:8px; font-size:var(--text-2xs); }
.u-flex1-min0.text-muted { flex:1; min-width:0; color:var(--text-muted); }
.text-dim.u-nums { color:var(--text-dim); font-variant-numeric:tabular-nums; }
.brut-hinweis { display:flex; gap:9px; align-items:flex-start; padding:9px 11px; border-radius:var(--radius-md); background:linear-gradient(100deg,rgba(176,126,16,.12),transparent); border:1px solid var(--gold-700); font-size:var(--text-2xs); line-height:1.45; color:var(--text-muted); }
.u-mt-5.u-w-full { margin-top:5px; width:100%; }
.brut-leer { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 12px; text-align:center; }
/* --- Arena ----------------------------------------------------------------*/
.u-mt-11 { margin-top: 11px; }
.arena-szene { background-image:var(--arena-scene,url(/assets/scenes/arena.png)); }
.arena-buehne.arena-buehne--gegner { height:170px; box-shadow:inset 0 0 60px rgba(69,198,232,.28); }
.arena-dio { --dio-img:var(--arena-dio,url(/assets/scenes/arena.png)); opacity:.88; }
.arena-wash.arena-wash--gegner { position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 45%,rgba(69,198,232,.22),transparent 72%); }
.arena-name { font-family:var(--font-display); font-weight:700; color:var(--stone-100); text-shadow:0 1px 6px rgba(0,0,0,.9); }
.arena-chance__kopf { display:flex; justify-content:space-between; font-size:var(--text-2xs); color:var(--text-dim); margin-bottom:3px; }
.arena-chance__bar { height:7px; border-radius:999px; background:var(--surface-sunken); overflow:hidden; box-shadow:var(--shadow-inset); }
.arena-chance__fuss { font-size:9px; color:var(--text-dim); margin-top:4px; }
.arena-buehne.arena-buehne--held { height:150px; box-shadow:inset 0 0 60px rgba(255,90,44,.3); }
.arena-wash.arena-wash--held { position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 45%,rgba(255,90,44,.24),transparent 72%); }
.arena-zahl { font-family:var(--font-display); font-size:var(--text-lg); color:var(--gold-300); }
.arena-warnung { text-align:center; color:var(--blood-300); }
.arena-ok { color:var(--heal-400); font-size:var(--text-sm); }
.arena-modus-kopf { margin-bottom:7px; display:flex; align-items:center; gap:6px; }
.arena-bg--arena { background-image:url(/assets/scenes/arena.png); }
.arena-bg--show { background-image:url(/assets/scenes/showkampf.png); }
.arena-bericht { margin:0; font-size:var(--text-sm); line-height:var(--leading-relaxed); }
/* --- Wirtschaft (Crafting und Sammeln) ------------------------------------*/
.text-erde-300 { color: var(--erde-300); }
.u-fade-55 { opacity: .55; }
.u-gesperrt-45 { opacity: .45; cursor: not-allowed; }
.u-mb-5 { margin-bottom: 5px; }
.u-no-border { border: none; }
.u-nowrap-2 { white-space: nowrap; gap: 2px; }
.u-wrap-5 { display: flex; flex-wrap: wrap; gap: 5px; }
.wirt-szene { background-image:url(/assets/scenes/crafting-sammeln.png); margin:0 0 10px; }
.wirt-rezept__kopf { display:inline-flex; align-items:center; gap:7px; flex:1; }
.wirt-trenner { margin-top:9px; padding-top:8px; border-top:1px solid var(--border); }
.wirt-karte--gold { border-color:var(--gold-700); gap:3px; }
.wirt-szene--wanderung { background-image:url(/assets/scenes/wanderung.png); height:120px; margin:0 0 8px; }
.wirt-ort__text { display:flex; flex-direction:column; gap:3px; margin-bottom:7px; padding-bottom:7px; border-bottom:1px solid var(--border); }
.wirt-ertrag { font-size:var(--text-2xs); color:var(--text-dim); display:inline-flex; flex-wrap:wrap; gap:3px 9px; align-items:center; }
.wirt-spezial { white-space:nowrap; color:var(--gold-300); }
.wirt-feld { max-width:118px; padding:4px; font-size:var(--text-2xs); }
.wirt-szene--kessel { background-image:url(/assets/scenes/braukessel.png); height:120px; margin:0 0 8px; }
/* --- Berufe ---------------------------------------------------------------*/
.bd-eis-700 { border-color: var(--eis-700); }
.bd-ember-600 { border-color: var(--ember-600); }
.u-fade-60 { opacity: .6; }
.u-mb-7 { margin-bottom: 7px; }
.u-mb-8 { margin-bottom: 8px; }
.u-row-5 { display: flex; gap: 5px; }
.berufe-szene { background-image:url(/assets/scenes/berufe.png); }
.berufe-karte { border-color:var(--gold-700); display:flex; align-items:center; gap:10px; }
.berufe-text { font-size:var(--text-sm); color:var(--text-muted); line-height:1.4; }
.berufe-fortschritt__kopf { display:flex; justify-content:space-between; font-size:var(--text-2xs); color:var(--text-dim); margin-bottom:2px; }
.berufe-fortschritt__bar { height:6px; border-radius:var(--radius-pill); background:var(--surface-sunken); overflow:hidden; box-shadow:var(--shadow-inset); }
.berufe-gold-hinweis { font-size:var(--text-sm); color:var(--gold-300); margin-top:8px; }
.berufe-abschnitt { margin:12px 0 6px; }
.berufe-zeile { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.berufe-mini-gold { font-size:var(--text-2xs); color:var(--gold-300); margin-top:2px; }
.berufe-eis-hinweis { font-size:var(--text-sm); color:var(--eis-300); margin-top:8px; }
.berufe-fuss { margin-top:7px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
/* --- Showkampf ------------------------------------------------------------*/
.u-nowrap { white-space: nowrap; }
.u-overflow-hidden { overflow: hidden; }
.u-visuell-weg { position: absolute; opacity: 0; pointer-events: none; }
.show-buehne { position:relative; background:url(/assets/scenes/showkampf.png) center 38%/cover; display:flex; align-items:flex-end; }
.show-buehne__wash { position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 38%, rgba(255,204,51,.16), rgba(10,6,4,.72)); }
.show-buehne__inhalt { position:relative; padding:12px 14px; width:100%; }
.show-kopf { display:flex; justify-content:space-between; align-items:flex-end; gap:8px; }
.show-titel { font-family:var(--font-display); font-weight:900; font-size:var(--text-xl); color:var(--stone-100); text-shadow:0 2px 8px #000; line-height:1.1; }
.show-titel__ico { color:var(--gold-400); font-size:var(--text-md); }
.show-untertitel { margin:0 0 4px; font-size:var(--text-2xs); color:var(--text-dim); }
.show-partei { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 8px; border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; text-align:center; }
.show-partei__name { font-family:var(--font-display); font-weight:700; color:var(--text); font-size:var(--text-sm); }
.show-partei__meta { font-size:var(--text-2xs); color:var(--text-muted); display:inline-flex; align-items:center; gap:3px; }
.show-quote { color:var(--gold-400); font-weight:700; }
.show-mini { font-size:11px; color:var(--text-dim); }
.show-pott { font-family:var(--font-display); color:var(--gold-300); font-weight:800; }
.show-rechts { text-align:right; min-width:96px; }
.show-gewinn { color:var(--heal-400); font-family:var(--font-display); }
.show-legende { margin:0; font-size:var(--text-2xs); color:var(--text-dim); text-align:center; }
.show-leer { text-align:center; font-size:var(--text-sm); color:var(--text-dim); }
.show-leer.show-leer--ember { text-align:center; font-size:var(--text-sm); color:var(--ember-300); }
/* --- Gemeinsame Makros ----------------------------------------------------*/
.u-kein-marker { list-style: none; }
.statf__mitte { position:absolute; inset:0; background-image:var(--ui-statf-mid-empty); background-size:100% 100%; background-repeat:no-repeat; }
.statf__kante { position:absolute; top:0; bottom:0; right:0; width:2px; background:rgba(255,255,255,.5); box-shadow:0 0 6px rgba(255,240,200,.7); }
/* --- Chat-Inhalt ----------------------------------------------------------*/
.chat-kopf__mitte { flex:1; text-align:center; min-width:0; }
.chat-kopf__titel { font-size:var(--text-lg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-kopf__aktionen { text-align:right; display:flex; gap:4px; justify-content:flex-end; flex:none; }
.chat-gruppe__liste { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.chat-gruppe__zeile { display:flex; align-items:center; gap:8px; font-size:var(--text-sm); }
.chat-gruppe__form { display:flex; gap:6px; margin-top:6px; }
.chat-thread { flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-liste { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 2px 12px; }
.chat-stumm { text-align:center; color:var(--blood-300); font-size:var(--text-sm); }
.chat-eingabe { display:flex; gap:6px; padding:6px 0; align-items:center; }
.chat-eingabe__feld { flex:1; border-radius:999px; }
.chat-neu__summary { cursor:pointer; font-size:var(--text-sm); color:var(--gold-300); }
.chat-kanal { display:flex; align-items:center; gap:12px; padding:11px 13px; text-decoration:none; }
.chat-kanal__name { font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--text); }
.chat-kanal__vorschau { font-size:var(--text-2xs); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-kanal__zahl { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--blood-500); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.chat-leer { padding:26px 12px; text-align:center; color:var(--text-dim); font-size:var(--text-sm); }
/* --- Codex ----------------------------------------------------------------*/
.t-xl { font-size: var(--text-xl); }
.u-fade-50 { opacity: .5; }
.u-mb-14 { margin-bottom: 14px; }
.codex-szene { background-image:url(/assets/scenes/kodex.png); margin-bottom:10px; }
.codex-kopf { margin-bottom:14px; text-align:center; }
.codex-kopf__titel { font-family:var(--font-display); font-size:var(--text-md); color:var(--parchment-ink); }
.codex-zyklus { display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; margin:10px 0; }
.codex-tinte { color:#8a5a28; }
/* ⚠️ Mit Container: `.dmo-card--scroll .lore` (0,2,0) setzt auf Pergament Farbe und
zentrierte Ränder und schlaegt eine einzelne Klasse. Als Inline-Stil hat sich der Wert
vorher durchgesetzt — gemessen. */
.dmo-card--scroll .codex-lore { margin:0; font-size:var(--text-sm); color:var(--parchment-ink); line-height:1.5; }
.dmo-card--scroll .codex-lore__quelle { margin:6px 0 0; font-size:var(--text-2xs); font-style:italic; color:#7a4410; }
.codex-abschnitt__titel { font-family:var(--font-display); font-size:var(--text-md); color:var(--parchment-ink); margin-bottom:6px; }
.codex-eintrag { border-top:1px solid var(--parchment-line,rgba(0,0,0,.12)); padding:7px 0; }
.codex-eintrag__summary { cursor:pointer; font-family:var(--font-display); font-size:var(--text-sm); color:var(--parchment-ink); }
.codex-eintrag__text { font-size:var(--text-sm); color:var(--parchment-ink); opacity:.85; line-height:1.5; }
.codex-zeitstrahl { position:relative; padding-left:20px; }
.codex-zeitstrahl__linie { position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--ember-500),var(--stone-700)); }
.codex-block { position:relative; margin-bottom:14px; }
/* --- Rangliste ------------------------------------------------------------*/
.u-p-16 { padding: 16px; }
.rang-platz { width:34px; display:inline-flex; justify-content:center; flex:none; }
.rang-nummer { width:34px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:var(--text-lg); color:var(--text-dim); flex:none; }
.rang-bild { width:100%; height:auto; max-height:min(52vh,440px); object-fit:cover; object-position:center; display:block; border-radius:var(--radius-lg); margin:0 0 4px; }
.rang-wert { font-variant-numeric:tabular-nums; font-weight:700; color:var(--gold-400); font-size:var(--text-sm); min-width:88px; text-align:end; }
.rang-held.rang-held--erster { display:flex; align-items:center; gap:12px; border-color:var(--gold-700); background:linear-gradient(180deg,rgba(255,204,51,.06),transparent); }
.rang-held__name { font-family:var(--font-display); font-weight:700; color:var(--gold-300); font-size:var(--text-md); }
.rang-held.rang-held--zweiter { display:flex; align-items:center; gap:12px; border-color:var(--gold-700); }
.rang-held__orb { width:38px; height:38px; flex:none; border-radius:50%; background:var(--grad-ember); display:flex; align-items:center; justify-content:center; color:var(--stone-950); font-size:18px; }
.rang-held__label { font-size:var(--text-2xs); color:var(--gold-300); text-transform:uppercase; letter-spacing:.1em; }
.rang-held__rechts { display:flex; flex-direction:column; align-items:flex-end; min-width:88px; }
.rang-held__wert { font-variant-numeric:tabular-nums; font-weight:700; color:var(--gold-400); font-size:var(--text-sm); }
.rang-meta { font-variant-numeric:tabular-nums; color:var(--text-dim); font-size:var(--text-2xs); }
.rang-wechsler { display:flex; justify-content:center; align-items:center; gap:10px; margin:8px 0 0; }
.rang-fuss { text-align:center; font-size:var(--text-2xs); color:var(--text-dim); margin:4px 0 0; }
/* --- Stadt ----------------------------------------------------------------*/
.u-flex-2 { flex: 2; }
.stadt-szene { background-image:url(/assets/scenes/ueberfall.png); }
.stadt-karte { display:flex; align-items:center; gap:10px; border-color:var(--stone-600); }
.stadt-karte__ico { font-size:22px; color:var(--text-dim); }
.stadt-karte__text { font-size:var(--text-sm); color:var(--text-muted); }
.stadt-leer { text-align:center; padding:12px 8px; }
.stadt-sub { font-size:var(--text-2xs); color:var(--text-dim); margin-top:8px; line-height:1.5; }
.stadt-zeile { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.stadt-zeile__wert { color:var(--text-muted); font-size:var(--text-sm); }
.stadt-aktion { display:flex; align-items:center; gap:10px; padding:10px 14px; }
.stadt-aktion__ico { font-size:20px; color:var(--text-muted); }
.stadt-aktion__text { flex:1; font-size:var(--text-2xs); color:var(--text-dim); line-height:1.5; }
.stadt-warnung { text-align:center; color:var(--blood-300); font-size:var(--text-sm); }
/* --- Inventar -------------------------------------------------------------*/
.u-rowc-8-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-szene { background-image:url(/assets/scenes/lager.png); }
.inv-zeile { display:flex; align-items:center; gap:12px; padding:8px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); }
.inv-ico { width:18px; height:18px; flex:none; }
.inv-sub { font-size:var(--text-xs); color:var(--text-dim); margin-top:2px; }
.inv-leer { color:var(--text-dim); font-size:var(--text-sm); text-align:center; padding:16px; }
.inv-leer.inv-leer--ember { color:var(--ember-300); font-size:var(--text-sm); text-align:center; padding:8px; }
.inv-zeile.inv-zeile--beutel { display:flex; align-items:center; gap:12px; padding:8px; background:var(--surface-sunken); border:1px solid var(--ember-800); border-radius:var(--radius-md); }
.inv-leer.inv-leer--dim { color:var(--text-dim); font-size:var(--text-sm); text-align:center; padding:12px; }
.inv-raster { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.inv-titel { font-family:var(--font-display); font-size:var(--text-sm); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-leiste { position:sticky; bottom:12px; z-index:30; display:flex; align-items:center; gap:8px; background:var(--surface-card); border:1px solid var(--gold-700); border-radius:var(--radius-pill); box-shadow:var(--shadow-lg); padding:8px 14px; margin-top:10px; }
/* --- Stall (Lebenszyklus) -------------------------------------------------*/
.u-mb-9 { margin-bottom: 9px; }
.stall-label { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin:-4px 0 8px; }
.stall-kopf { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.stall-label.stall-label--gold { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); }
.stall-phasen { display:flex; align-items:flex-end; justify-content:space-between; gap:4px; }
.stall-phase { flex:1; text-align:center; }
.stall-phase__buehne { position:relative; height:66px; }
.stall-phase__rahmen { position:absolute; inset:0; border-radius:var(--radius-md); opacity:.5; }
.stall-phase__name { font-family:var(--font-display); font-size:var(--text-2xs); color:var(--text); margin-top:3px; }
.stall-pfeil { color:var(--text-dim); align-self:center; }
.stall-medaillon { position:relative; width:56px; height:56px; flex:none; border-radius:var(--radius-md); overflow:hidden; text-decoration:none; }
.stall-medaillon__marke { position:absolute; left:2px; bottom:2px; }
.stall-titel { font-family:var(--font-display); font-size:var(--text-sm); color:var(--text); text-decoration:none; }
.stall-meta { font-size:var(--text-2xs); margin-top:2px; display:flex; align-items:center; gap:5px; }
/* --- §View Transitions -------------------------------------------------------
Screenwechsel gleiten, statt hart umzuschalten. Aktiviert wird das über
in base.html.twig; Turbo 8
fährt den Übergang dann bei jeder gleichseitigen Navigation.
Bewusst zurückhaltend: ein Kreuzblenden über 180 ms plus ein Hauch Bewegung nach
oben. Ein Spiel, in dem man zwischen Höhle, Welt und Markt hin und her springt,
darf keine auffällige Animation pro Wechsel haben — die nervt ab dem zehnten Mal.
Der 8-Sekunden-Live-Morph ist KEIN Visit und löst hier nichts aus. */
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: dmo-vt-out 140ms var(--ease-out, ease) both; }
::view-transition-new(root) { animation: dmo-vt-in 180ms var(--ease-out, ease) both; }
}
@keyframes dmo-vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes dmo-vt-in { from { opacity: 0; transform: translateY(6px); } }
/* Die Bühne trägt einen eigenen Namen und wird dadurch VERFOLGT statt mitgeblendet:
wechselt man von der Höhle auf die Drachen-Detailseite, wandert dasselbe Artwork
an seinen neuen Platz, statt aus- und wieder einzublenden. Genau der Effekt, der
eine Web-App nativ wirken lässt.
⚠️ Ein view-transition-name muss auf der Seite EINDEUTIG sein. Darum nur an der
Hero-Bühne (max. eine pro Screen) und der Kopfzeile, nicht an Listenkarten. */
.dragon-card--hero .dragon-stage,
.detail-stage { view-transition-name: dmo-buehne; }
.resource-bar { view-transition-name: dmo-hud; }
/* Das HUD bleibt beim Wechsel stehen, statt mitzublenden — es ist auf jedem Screen
dasselbe Band, und ein blinkendes Goldkonto beim Navigieren wirkt wie ein Fehler. */
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(dmo-hud),
::view-transition-new(dmo-hud) { animation: none; }
}
/* --- §Szenen-Ambient ---------------------------------------------------------
Fackeln, Glut und Lava sind in die Artworks gebrannt und stehen deshalb still.
Statt neu zu rendern bekommen die Bühnen zwei sehr leise Bewegungsebenen:
1. Ein ungleichmäßiges Helligkeits-Flackern über der ganzen Fläche. Die Kurve ist
absichtlich unregelmäßig (nicht 0-50-100), sonst liest man den Takt als Puls
statt als Feuer. Der Ausschlag ist winzig — es soll auffallen, wenn es FEHLT,
nicht wenn es da ist.
2. Ein warmer Lichtsaum am unteren Rand, der langsam wandert: das Glutbecken,
das man nicht sieht.
Beides liegt auf ::before/::after der Bühne, nicht auf dem Bild — das Artwork
selbst bleibt unangetastet, und die Ebenen kosten keine Layout-Arbeit
(nur opacity/transform, also Compositor).
Ausschließlich in Szenen mit Feuer. Wo Tageslicht herrscht (Markt bei Tag,
Wanderung, Weltkarte) wäre Flackern schlicht falsch. */
.szene-lebt { position: relative; }
.szene-lebt::before,
.szene-lebt::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
/* Ebene 1 — Feuerschein, ungleichmäßig */
.szene-lebt::before {
background: radial-gradient(120% 80% at 50% 96%, rgba(255,120,40,.16), transparent 62%);
mix-blend-mode: screen;
animation: szene-flackern 5.7s ease-in-out infinite;
}
/* Ebene 2 — wandernder Glutsaum unten */
.szene-lebt::after {
background: radial-gradient(60% 40% at 22% 100%, rgba(255,90,20,.14), transparent 70%);
mix-blend-mode: screen;
animation: szene-glut 13s ease-in-out infinite;
}
/* Unregelmäßiger Takt: Feuer atmet nicht gleichmäßig. */
@keyframes szene-flackern {
0% { opacity: .85; }
17% { opacity: 1; }
31% { opacity: .72; }
46% { opacity: .94; }
58% { opacity: .8; }
73% { opacity: 1; }
88% { opacity: .78; }
100% { opacity: .85; }
}
/* Der Glutsaum wandert langsam von links nach rechts und zurück. */
@keyframes szene-glut {
0%, 100% { transform: translateX(0); opacity: .7; }
50% { transform: translateX(46%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.szene-lebt::before, .szene-lebt::after { animation: none; opacity: .85; }
}
/* Wo brennt es? Nur diese Bühnen bekommen das Ambient. Tageslicht-Szenen (Showkampf,
Wanderung, Weltkarte, Inselkarten) bleiben bewusst still — dort wäre Flackern falsch. */
.dragon-stage, .arena-stage, .bk-stage, .stadt-stage { position: relative; }
.dragon-stage::before, .dragon-stage::after,
.arena-stage::before, .arena-stage::after,
.bk-stage::before, .bk-stage::after,
.stadt-stage::before, .stadt-stage::after {
content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
}
.dragon-stage::before, .arena-stage::before, .bk-stage::before, .stadt-stage::before {
background: radial-gradient(120% 80% at 50% 96%, rgba(255,120,40,.16), transparent 62%);
mix-blend-mode: screen; animation: szene-flackern 5.7s ease-in-out infinite;
}
.dragon-stage::after, .arena-stage::after, .bk-stage::after, .stadt-stage::after {
background: radial-gradient(60% 40% at 22% 100%, rgba(255,90,20,.14), transparent 70%);
mix-blend-mode: screen; animation: szene-glut 13s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.dragon-stage::before, .dragon-stage::after,
.arena-stage::before, .arena-stage::after,
.bk-stage::before, .bk-stage::after,
.stadt-stage::before, .stadt-stage::after { animation: none; opacity: .85; }
}
/* Beute-Einordnung im Kampfbericht: nur Top 3, sonst waere es Laerm. Der Rekord bekommt
Gold und einen leichten Schimmer, Platz 2/3 bleiben stiller Text. */
.beute-rang { display: flex; align-items: center; gap: 6px; padding: 7px 14px;
font-family: var(--font-label); font-size: var(--text-2xs); letter-spacing: .08em;
text-transform: uppercase; color: var(--text-dim); border-top: 1px solid var(--border); }
.beute-rang--rekord { color: var(--gold-300); background: linear-gradient(90deg, color-mix(in srgb, var(--gold-500) 12%, transparent), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
.beute-rang--rekord { animation: beute-rekord-glanz 2.4s var(--ease-out, ease) 1; }
}
@keyframes beute-rekord-glanz {
0% { background-position: -140% 0; }
100% { background-position: 240% 0; }
}
/* --- §Flow · Reise auf der Weltkarte ----------------------------------------
Der Drache ist unterwegs — statt nur einer Zahl im Chip wandert ein Punkt über
die Karte, von der Inselmitte zum Ziel-Pin.
Die Bewegung macht ausschließlich CSS. Der Trick ist der negative animation-delay:
die Animation läuft über die volle Reisedauer, und ein Delay von minus der bereits
verstrichenen Zeit setzt sie an genau die richtige Stelle und lässt sie dort
weiterlaufen. Kein JS-Timer, keine Synchronisation mit dem Live-Poll — und weil
alles in Style-Werten steckt, überlebt es den Morph unbeschadet. */
.reise-punkt {
position: absolute; pointer-events: none; z-index: 2;
left: 50%; top: 50%;
width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
border-radius: 50%;
background: var(--el, var(--gold-400));
box-shadow: 0 0 10px var(--el, var(--gold-400)), 0 0 3px #fff inset;
animation-name: reise-flug;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes reise-flug {
from { left: 50%; top: 50%; }
to { left: var(--nach-x); top: var(--nach-y); }
}
/* Zusätzlich ein ruhiger Puls, damit der Punkt auf der detailreichen Karte auffällt. */
@media (prefers-reduced-motion: no-preference) {
.reise-punkt::after {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
border: 1px solid var(--el, var(--gold-400));
animation: reise-puls 1.8s ease-out infinite;
}
}
@keyframes reise-puls {
0% { transform: scale(.6); opacity: .9; }
100% { transform: scale(1.6); opacity: 0; }
}
/* Ohne Bewegung: der Punkt sitzt still am Ziel — die Information (wohin) bleibt, die
Animation entfällt. */
@media (prefers-reduced-motion: reduce) {
.reise-punkt { animation: none; left: var(--nach-x); top: var(--nach-y); }
}
/* --- Moderations-Warteschlange -------------------------------------------- */
.mq-tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.mq-tab { padding: 5px 11px; border-radius: var(--radius-pill); font-size: var(--text-2xs); color: var(--text-muted); text-decoration: none; }
.mq-tab.is-active { background: var(--grad-ember, var(--ember-600)); color: var(--stone-950); }
.mq-zeile { padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--text-2xs); }
.mq-zeile:last-child { border-bottom: 0; }
.mq-zeile.is-erledigt { opacity: .55; }
.mq-zeile__kopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mq-zeile__grund { margin: 4px 0; color: var(--text); }
.mq-zeile__tat { display: flex; gap: 6px; flex-wrap: wrap; }
/* --- Wirtschafts-Tagesverlauf (reines CSS — die CSP laesst keine Chart-Bibliothek zu) --- */
.wv-chart { display: flex; gap: 2px; align-items: stretch; height: 120px; padding: 4px 0; }
.wv-tag { flex: 1; display: flex; flex-direction: column; min-width: 3px; }
.wv-oben, .wv-unten { flex: 1; display: flex; }
.wv-oben { align-items: flex-end; }
.wv-unten { align-items: flex-start; border-top: 1px solid var(--border); }
.wv-balken { width: 100%; border-radius: 2px; }
.wv-balken--mint { background: var(--heal-400); }
.wv-balken--sink { background: var(--blood-500); }
.wv-achse { display: flex; justify-content: space-between; margin-top: 6px; }
/* --- Konto-Zeitleiste ------------------------------------------------------ */
.vl-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 5px 0 5px 8px; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent; font-size: var(--text-2xs); }
.vl-zeile:last-child { border-bottom: 0; }
.vl-zeile--gold { border-left-color: var(--gold-500); }
.vl-zeile--taetigkeit { border-left-color: var(--eis-600); }
.vl-zeile--kampf { border-left-color: var(--blood-500); }
.vl-zeile--staff { border-left-color: var(--ember-600); }
.vl-zeit { flex: none; min-width: 76px; font-variant-numeric: tabular-nums; }
.vl-titel { color: var(--text); }
.vl-wert { font-variant-numeric: tabular-nums; }
/* --- „Ansehen als Spieler"-Band -------------------------------------------- */
.als-band {
position: sticky; top: 0; z-index: 60;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 7px 12px;
background: var(--blood-600); color: var(--stone-100);
font-size: var(--text-2xs); letter-spacing: .02em;
box-shadow: 0 2px 10px rgb(0 0 0 / .45);
}
.als-band__raus {
margin-left: auto; padding: 4px 10px; min-height: 32px;
display: inline-flex; align-items: center;
border: 1px solid var(--stone-100); border-radius: var(--radius-pill);
color: var(--stone-100); text-decoration: none; font-weight: 700;
}
.als-band__raus:hover { background: var(--stone-100); color: var(--blood-600); }
/* --- §Sprung-Palette ---------------------------------------------------------
Suchfeld über Bereiche, Städte, Spieler und Gilden. Sitzt oben statt mittig: die
Trefferliste wächst nach unten, und ein mittig zentriertes Feld würde beim Tippen
springen. Gleiche Begründung wie bei jeder Befehls-Palette. */
.sprung { position: fixed; inset: 0; z-index: 120; background: rgba(8,5,4,.72);
backdrop-filter: blur(3px); display: flex; justify-content: center;
/* align-items MUSS gesetzt sein: der Flex-Default ist stretch, und das zieht das Panel
auf die volle Hoehe des Overlays — eine Liste mit vier Treffern fuellte den Schirm. */
align-items: flex-start;
padding: max(10vh, 64px) 16px 16px; }
.sprung[hidden] { display: none; }
.sprung__panel { width: min(94vw, 560px); max-height: 70vh; display: flex; flex-direction: column;
background: var(--surface-card); border: 1px solid var(--border-strong, var(--border));
border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.sprung__feld { width: 100%; padding: 15px 18px; border: 0; border-bottom: 1px solid var(--border);
background: transparent; color: var(--text); font-family: var(--font-display);
font-size: var(--text-md); outline: none; }
.sprung__feld::placeholder { color: var(--text-dim); }
.sprung__liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.sprung__treffer { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
border-radius: var(--radius-md); cursor: pointer; color: var(--text); }
.sprung__treffer.is-aktiv { background: color-mix(in srgb, var(--ember-500) 16%, transparent); }
.sprung__treffer i { color: var(--gold-300); font-size: 17px; flex: none; }
.sprung__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sprung__meta { flex: none; font-size: var(--text-2xs); color: var(--text-dim); }
.sprung__leer { padding: 14px 16px; color: var(--text-dim); font-size: var(--text-sm); }
@media (prefers-reduced-motion: no-preference) {
.sprung__panel { animation: sprung-auf .16s var(--ease-out, ease) both; }
}
@keyframes sprung-auf { from { opacity: 0; transform: translateY(-8px); } }
/* Registrierung: Element- und Gesinnungswahl sind label-umschlossene Radios. Sie lagen auf
display:none und waren damit gar nicht anspringbar — die ganze Auswahl war per Tastatur
unbedienbar. Jetzt sr-only (versteckt, aber fokussierbar); der Fokus muss dann aber am
umschliessenden Label sichtbar werden, sonst tippt man ins Leere. */
.reg-el:has(:focus-visible),
.reg-align:has(:focus-visible) {
outline: 2px solid var(--ember-500);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* --- Registrierung --------------------------------------------------------*/
.reg-notiz.reg-notiz--gold { border-color:var(--gold-600); color:var(--gold-300); font-size:var(--text-sm); }
.reg-notiz.reg-notiz--ember { border-color:var(--ember-600); color:var(--ember-300); font-size:var(--text-sm); }
.reg-schritte { display:flex; gap:6px; justify-content:center; margin:2px 0 4px; }
.reg-schritt { width:26px; height:4px; border-radius:99px; background:var(--surface-sunken); transition:background .25s; }
.reg-staerke { display:flex; align-items:center; gap:8px; margin-top:5px; }
.reg-staerke__bahn { flex:1; height:5px; border-radius:99px; background:var(--surface-sunken); overflow:hidden; box-shadow:var(--shadow-inset); }
.reg-staerke__fuellung { display:block; height:100%; width:0; background:var(--blood-500); transition:width .2s,background .2s; }
.reg-staerke__text { font-size:var(--text-2xs); color:var(--text-dim); min-width:52px; text-align:right; }
.reg-buehne { position:relative; height:230px; display:grid; place-items:center; margin:2px 0 6px; overflow:hidden; }
.reg-buehne__glut { position:absolute; width:62%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--el-glow,rgba(255,120,40,.4)) 0%,transparent 62%); }
.reg-buehne__bild { position:relative; height:200px; width:auto; max-width:92%; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(0,0,0,.6)); }
.reg-elwahl { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:2px; }
.reg-mittehinweis { text-align:center; font-size:var(--text-2xs); color:var(--text-dim); margin:6px 0 2px; }
.reg-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.reg-aktionen { display:flex; gap:8px; margin-top:2px; }
/* 13 Inline-Styles ersetzt */
/* --- Fremdprofil (Whois) --------------------------------------------------*/
.whois-eckdaten { display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:var(--text-sm); }
.whois-zeile { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.whois-meldeform { display:flex; gap:6px; margin-top:6px; }
.whois-meldegrund { font-size:var(--text-2xs); padding:6px 8px; flex:1; min-width:0; }
.whois-zeile-dim { display:flex; align-items:center; gap:7px; color:var(--text-muted); }
.whois-sprachen { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.whois-zeile-gold { display:flex; align-items:center; gap:7px; color:var(--gold-300); }
.whois-lore { margin:0 0 7px; font-size:var(--text-sm); line-height:var(--leading-relaxed); white-space:pre-wrap; }
.whois-warn { color:var(--blood-300); font-size:var(--text-2xs); }
.whois-zahl { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.whois-raster-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-size:var(--text-sm); }
/* --- Gilden-Whois ---------------------------------------------------------*/
.gw-zahl-gross { font-family:var(--font-display); font-size:var(--text-xl); color:var(--text); }
.gw-eckdaten { display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:var(--text-sm); }
.gw-schatz { font-variant-numeric:tabular-nums; color:var(--gold-400); }
.gw-zeile-gold { display:flex; align-items:center; gap:7px; color:var(--gold-300); }
.gw-zeile-dim { display:flex; align-items:center; gap:7px; color:var(--text-muted); }
.gw-lore { margin:0; font-size:var(--text-sm); line-height:var(--leading-relaxed); white-space:pre-wrap; }
.gw-meta-zahl { font-variant-numeric:tabular-nums; color:var(--text-muted); font-size:var(--text-2xs); }
.gw-raster-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; font-size:var(--text-sm); }
.gw-mitglied { display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; }
.gw-mitglied__rang { color:var(--ember-400); flex:none; }
.gw-mitglied__zahl { font-variant-numeric:tabular-nums; color:var(--text-muted); flex:none; }
.gw-zahl-dim { color:var(--text-muted); font-variant-numeric:tabular-nums; }
/* --- Optionen -------------------------------------------------------------*/
.opt-ico.opt-ico--eis { font-size:20px; color:var(--eis-400); }
.opt-ico.opt-ico--elektro { font-size:20px; color:var(--elektro-400); }
.opt-regler { display:block; width:100%; margin-top:7px; accent-color:var(--ember-500); }
.opt-haken { width:18px; height:18px; accent-color:var(--ember-500); }
.opt-link { display:block; text-decoration:none; border-color:var(--ember-700); }
.opt-ico-gross { font-size:22px; color:var(--ember-400); }
.opt-wert { font-weight:700; color:var(--text); }
/* --- Willkommen -----------------------------------------------------------*/
.u-mt-14 { margin-top: 14px; }
.wc-buehne__drache { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); height:78%; object-fit:contain; filter:drop-shadow(0 10px 28px rgba(0,0,0,.55)); }
.wc-buehne__schleier { position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(16,10,8,.82) 100%); }
.wc-buehne__text { position:absolute; left:0; right:0; bottom:14px; text-align:center; }
.wc-eyebrow { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-300); }
.wc-titel { font-family:var(--font-display); font-weight:900; font-size:var(--text-xl); color:var(--text); text-shadow:0 2px 14px rgba(0,0,0,.9); }
.wc-karte-gold { border-color:var(--gold-700); background:linear-gradient(90deg,rgba(176,126,16,.16),transparent); display:flex; align-items:center; gap:10px; margin-top:10px; }
.wc-karte-gold__ico { font-size:24px; color:var(--gold-400); }
.wc-karte-gold__text { font-size:var(--text-sm); color:var(--text-muted); line-height:1.4; }
.wc-abschnitt { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-300); margin:14px 0 7px; }
.wc-klein { font-size:var(--text-2xs); color:var(--text-dim); line-height:1.35; }
.wc-fuss { text-align:center; font-size:var(--text-2xs); color:var(--text-dim); margin-top:7px; }
/* --- Verschenken ----------------------------------------------------------*/
.vs-ico { font-size:26px; color:var(--gold-400); display:block; margin-bottom:6px; }
.vs-buehne { position:relative; overflow:hidden; background:linear-gradient(155deg,color-mix(in srgb,var(--gold-500) 18%,var(--surface-card)),var(--surface-card)); border-color:var(--gold-600); text-align:center; padding:18px 16px; }
.vs-buehne__glut { position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--gold-400) 22%,transparent),transparent 60%); pointer-events:none; }
.vs-buehne__bild { position:relative; width:92px; height:92px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.vs-buehne__titel { position:relative; font-family:var(--font-display); color:var(--gold-200); font-size:var(--text-lg); margin-top:4px; }
.vs-buehne__text { position:relative; font-size:var(--text-sm); color:var(--text); margin-top:2px; }
.vs-buehne__lore { position:relative; font-family:var(--font-lore,var(--font-display)); font-style:italic; color:var(--text-dim); font-size:var(--text-2xs); margin-top:6px; min-height:1em; }
.vs-wahl { display:flex; align-items:center; gap:11px; padding:8px; background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; }
.vs-wahl__haken { accent-color:var(--gold-500); }
.vs-hint { font-size:var(--text-2xs); color:var(--text-dim); margin-top:1px; }
.u-w-full.vs-notiz { width:100%; resize:vertical; }
/* --- Legendenhalle --------------------------------------------------------*/
.u-col-12 { display: flex; flex-direction: column; gap: 12px; }
.lg-bild { width:100%; height:auto; display:block; border-radius:var(--radius-lg); margin:0 0 4px; }
.lg-text { font-size:var(--text-sm); line-height:var(--leading-relaxed); }
/* `.dmo-card--scroll .lore` zentriert Pergament-Text per `margin-inline:auto` und hat mit (0,2,0)
mehr Gewicht als eine einzelne Klasse — der frühere Inline-Stil gewann das automatisch. Deshalb
hier Element + Klasse im selben Kontext (0,2,1): eindeutig, statt auf die Quellreihenfolge zu bauen. */
.dmo-card--scroll p.lg-text { margin: 0; }
.lg-absatz { margin:2px 0; }
.lg-abschnitt { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--eis-300); margin:10px 0 2px; }
.lg-rahmen { box-shadow:var(--shadow-md),var(--edge-gold); }
.lg-medaille { width:44px; height:44px; flex:none; border-radius:50%; background:var(--grad-ember); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; color:var(--stone-950); box-shadow:var(--glow-gold); font-size:20px; }
.lg-zitat { margin:8px 0 0; font-size:var(--text-sm); color:var(--text-muted); font-style:italic; }
/* --- Postfach -------------------------------------------------------------*/
.pf-szene { background-image:url(/assets/scenes/nachrichten.png); }
.pf-zeile { padding:11px 12px; }
.pf-kopf { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.pf-zeit { margin-inline-start:auto; font-size:var(--text-2xs); color:var(--text-dim); }
.pf-vorschau { font-size:var(--text-2xs); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-tasten { display:flex; gap:6px; margin-top:8px; }
.pf-hinweis { font-size:var(--text-2xs); color:var(--text-dim); line-height:1.5; padding-bottom:4px; }
.pf-blaettern { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 0 4px; }
/* --- Welt -----------------------------------------------------------------*/
.welt-alarm { display:flex; align-items:center; gap:14px; border-color:var(--ember-600); box-shadow:var(--glow-ember); }
.welt-alarm__ico { font-size:28px; color:var(--ember-300); }
.welt-alarm__eyebrow { font-family:var(--font-label); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ember-300); }
.welt-lore { margin:0 0 10px; font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--parchment-ink); }
/* Wie bei .lg-text: `.dmo-card--scroll .lore` zentriert per `margin-inline:auto` und wiegt (0,2,0)
schwerer als eine Klasse. Der Inline-Stil gewann das vorher von allein. */
.dmo-card--scroll p.welt-lore { margin: 0 0 10px; }
/* --- Vitalwerte -----------------------------------------------------------*/
.vt-buehne { position:relative; height:240px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--grad-cave); }
.vt-diorama { --dio-img:url(/assets/scenes/hoehle.png); opacity:.9; }
.vt-reihe { display:flex; justify-content:space-around; align-items:flex-end; gap:12px; }
.vt-warnung { display:flex; align-items:center; gap:10px; border-color:var(--blood-600); color:var(--blood-300); font-size:var(--text-sm); }
.vt-regler { flex:1; accent-color:var(--ember-500); }
.vt-zahl { font-variant-numeric:tabular-nums; color:var(--gold-300); font-size:var(--text-sm); min-width:64px; text-align:right; }
.vt-zahl-klein { font-size:var(--text-xs); text-align:right; font-variant-numeric:tabular-nums; }
.vt-hinweis { font-size:var(--text-2xs); color:var(--text-dim); line-height:1.5; padding:0 4px; }
/* --- Drachenpfad ----------------------------------------------------------*/
.u-p-12 { padding: 12px; }
.pa-leer { text-align:center; padding:28px 16px; }
.pa-leer__bild { width:56px; height:56px; object-fit:contain; opacity:.7; }
.pa-leer__text { margin:10px 0 0; color:var(--text-dim); }
.pa-stufenbild { width:48px; height:48px; object-fit:contain; }
.pa-mini-ico { width:16px; height:16px; object-fit:contain; }
/* --- Festtage (Admin) -----------------------------------------------------*/
.ev-kopfzeile { display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.ev-absatz { margin:10px 0 0; }
.ev-felder { display:flex; gap:10px; flex-wrap:wrap; }
.ev-feld-schmal { flex:1; min-width:120px; }
.ev-feld-breit { flex:1; min-width:180px; }
/* --- Backend-Dashboard ----------------------------------------------------*/
.u-mt-2 { margin-top: 2px; }
.u-row-wrap-6 { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-zahl { flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:grid; place-items:center; font-size:11px; font-weight:800; background:linear-gradient(180deg,#e7b455,#c68a34); color:#1a1204; }
.adm-text { font-size:var(--text-sm); color:var(--text); }
.adm-leer { color:var(--text-dim); font-size:var(--text-2xs); padding:4px; }
/* --- Anmeldung ------------------------------------------------------------*/
.u-fade-80 { opacity: .8; }
.anm-feld-voll { width:100%; margin-bottom:6px; }
.anm-trenner { text-align:center; color:rgba(255,255,255,.5); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; margin:2px 0 8px; }
.anm-hinweis-heal { border-color:var(--heal-500); color:var(--heal-400); font-size:var(--text-sm); }
.anm-fuss { text-align:center; margin-top:10px; font-size:var(--text-2xs); }
/* --- Konto sichern --------------------------------------------------------*/
.ks-karte-gold { border-color:var(--gold-600); }
.ks-zeile { display:flex; align-items:flex-start; gap:11px; margin-bottom:12px; }
.ks-ico { font-size:26px; color:var(--gold-400); flex:none; }
.ks-text { margin:0; font-size:var(--text-sm); color:var(--text-muted); line-height:1.55; }
.ks-warnung { border-color:var(--blood-600); color:var(--blood-300); font-size:var(--text-sm); margin-bottom:10px; }
.ks-trenner { text-align:center; color:var(--text-dim); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; margin:12px 0 8px; }
/* --- Markt (Admin) --------------------------------------------------------*/
.u-rowc-5-wrap { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.u-wrap-7 { flex-wrap: wrap; gap: 7px; }
.amk-info { border-color:var(--gold-700); font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; }
.amk-zahl { text-align:right; min-width:64px; }
.amk-eingabe { width:54px; text-align:center; padding:4px; border-radius:var(--radius-sm,7px); border:1px solid var(--border); background:var(--surface-sunken); color:var(--text); font-variant-numeric:tabular-nums; }
.amk-leer { font-size:var(--text-sm); color:var(--text-dim); padding:8px; }
/* --- Rechtliches ----------------------------------------------------------*/
.rt-seite { max-width:720px; margin:0 auto; padding:24px 18px; }
.rt-text { font-size:var(--text-sm); line-height:1.7; color:var(--text); }
.rt-warn { margin-top:16px; color:var(--blood-300); font-size:var(--text-2xs); }
.rt-mitte { text-align:center; margin-top:10px; }
.rt-link { color:var(--gold-300); font-size:var(--text-sm); }
/* --- Datenschutz ----------------------------------------------------------*/
/* --- Grundgeruest ---------------------------------------------------------*/
.pwa-ico { width:40px; height:40px; border-radius:9px; flex:none; }
.pwa-schliessen { flex:none; background:none; border:none; color:#b9a99c; font-size:22px; cursor:pointer; padding:0 4px; }
.pwa-knopf { flex:none; background:linear-gradient(180deg,#ff8a3d,#ff6600); color:#160d09; font-weight:700; border:none; border-radius:99px; padding:9px 16px; font-size:13px; cursor:pointer; }
.pwa-schliessen-schmal { flex:none; background:none; border:none; color:#b9a99c; font-size:22px; cursor:pointer; padding:0 2px; }
/* --- Markt ----------------------------------------------------------------*/
.mk-szene { background-image:url(/assets/scenes/markt.png); }
.mk-kopfzeile { min-height:0; padding:10px 18px 10px 78px; }
.mk-ico-inline { vertical-align:-1px; }
.mk-zahl { text-align:right; flex-shrink:0; }
/* --- Geschenke ------------------------------------------------------------*/
.gs-karte { display:flex; align-items:center; gap:13px; background:linear-gradient(150deg,color-mix(in srgb,var(--gold-500) 12%,var(--surface-card)),var(--surface-card)); border-color:var(--gold-700); }
.gs-bild { width:56px; height:56px; flex:none; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.gs-titel { font-family:var(--font-display); color:var(--gold-200); font-size:var(--text-sm); }
.gs-fuss { font-size:var(--text-2xs); color:var(--text-dim); text-align:center; margin-top:4px; }
/* --- Wirtschaft (Admin) ---------------------------------------------------*/
.awi-leer { color:var(--text-dim); font-size:var(--text-sm); text-align:center; padding:8px; }
.awi-zahl { color:var(--gold-300); font-variant-numeric:tabular-nums; font-size:var(--text-2xs); }
.awi-mini { font-size:10px; color:var(--text-dim); }
/* --- Vermaechtnis ---------------------------------------------------------*/
.vm-bild-300 { width:100%; max-width:300px; margin-top:14px; }
.vm-bild-340 { width:100%; max-width:340px; margin-top:18px; }
.vm-fuss { text-align:center; font-size:var(--text-2xs); color:var(--text-dim); margin-top:7px; }
/* --- Spieler (Admin) ------------------------------------------------------*/
.asp-zeile { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:6px; }
.asp-feld-schmal { flex:1; min-width:120px; }
.asp-feld-breit { flex:1; min-width:140px; }
/* --- News (Admin) ---------------------------------------------------------*/
.u-col-5 { display: flex; flex-direction: column; gap: 5px; }
.ann-absatz { margin:2px 0 8px; }
/* --- Spiel-Rahmen ---------------------------------------------------------*/
.u-col-block { display: flex; flex-direction: column; }
.res-ico-20 { width:20px; height:20px; object-fit:contain; vertical-align:-4px; }
/* --- Drache gesperrt ------------------------------------------------------*/
.dg-karte { max-width:440px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 22px; }
.dg-text { font-size:var(--text-sm); color:var(--text-muted); line-height:var(--leading-relaxed); margin:0; }
.dg-tasten { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
/* --- Welt-Navigation ------------------------------------------------------*/
.wn-warnknopf { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid var(--blood-600); color:var(--blood-300); border-radius:var(--radius-pill); padding:5px 10px; font-size:var(--text-2xs); font-weight:600; cursor:pointer; white-space:nowrap; }
.wn-punkt { position:absolute; top:-3px; inset-inline-end:-3px; }
/* --- Passwort vergessen ---------------------------------------------------*/
.anm-intro { color:rgba(255,255,255,.8); font-size:var(--text-sm); line-height:1.5; text-align:center; margin-bottom:4px; }
/* --- Passwort neu ---------------------------------------------------------*/
/* --- Kriegsraum -----------------------------------------------------------*/
.kr-szene { background-image:url(/assets/scenes/kriegsraum.png); margin-bottom:10px; }
/* --- Handelsposten --------------------------------------------------------*/
.hd-szene { background-image:url(/assets/scenes/handelsposten.png); margin-bottom:10px; }
/* --- Freunde --------------------------------------------------------------*/
.fr-szene { background-image:url(/assets/scenes/freunde.png); margin-bottom:10px; }
/* --- Chat -----------------------------------------------------------------*/
/* --- Balancing ------------------------------------------------------------*/
/* --- Nachricht lesen ------------------------------------------------------*/
.pfl-text { font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--parchment-ink); white-space:pre-wrap; }
/* Dritter Fall derselben Falle (nach .lg-text und .welt-lore): `.dmo-card--scroll .lore` zentriert
per `margin-inline:auto` und wiegt (0,2,0) — eine einzelne Klasse verliert dagegen. */
.dmo-card--scroll div.pfl-text { margin: 0; }
/* --- Geschenk oeffnen -----------------------------------------------------*/
.gr-tasten { display:flex; gap:8px; margin-top:18px; width:100%; max-width:340px; }
/* --- Trefferflächen kleiner Bedienelemente (gemessen 2026-08-07) --------------
Ein Durchgang über 21 Bereiche bei 390 px fand Bedienelemente von 19×20 px
(„×" der Push-Einladung), 21 px Höhe („Übersetzen") und 14×19 px (Zurück auf
der Detail-Bühne). Apple empfiehlt 44, Google 48.
Vergrößert wird die TREFFERFLÄCHE, nicht das Aussehen: ein unsichtbares
::after legt sich mittig darüber. Das lässt jede Kachel, jeden Abstand und
jede Ausrichtung unangetastet.
Bewusst NICHT angefasst: dicht stehende Gruppen — die Formatierungsleiste im
Postfach (28 px, 4 px Abstand), der Segment-Umschalter und die Schalter in
den Optionen. Dort würden sich 44er Flächen überlappen und die Knöpfe sich
gegenseitig blockieren; das ist eine Layout-Entscheidung, keine Zeile CSS. */
.push-nudge__x { position: relative; }
.push-nudge__x::after {
content: '';
position: absolute;
inset-inline-start: 50%;
top: 50%;
width: max(100%, 44px);
height: max(100%, 44px);
transform: translate(-50%, -50%);
}
/* „Übersetzen" steht frei unter dem Text — hier ist echte Höhe sauberer als eine
unsichtbare Auflage, die im Fluss ohnehin nicht zuverlässig griff. 21 -> 32 px. */
.tr-btn { min-height: 32px; }
/* NICHT angefasst: `.detail-stage .back`. Der misst bereits 38x38; die 14x19, die der
Durchgang meldete, gehören einem anderen Zurück-Knopf. Eine 44er Fläche erzeugte dort
drei Überlappungen mit Nachbarelementen — nachgemessen, nicht vermutet. */