/* ===========================================================================
   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-22hlib5.css");
@import url("tokens/colors-CV9G2cx.css");
@import url("tokens/typography-bCW-zyI.css");
@import url("tokens/spacing-mvXz46Z.css");
@import url("tokens/effects-5HqLKDp.css");
@import url("tokens/textures-YnEeZlP.css");   /* 60 echte UI-Sprites als --ui-* Tokens */
@import url("components-U5OWCiC.css");         /* kanonische Component-Library (dmo-*) */

/* --- 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;
}
img { display: block; max-width: 100%; }
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);
}
.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: 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; }
}
/* Sehr schmale Phones (≤360px, iPhone mini/SE): zusätzlich Gauges + Header-Icons
   leicht verkleinern, sonst überläuft das Res-Band weiter. */
@media (max-width: 360px) {
  /* Vitals nur als Gauge-Medaillon (die Zahl klebte sonst am Gauge) — Gauges + Icons
     bleiben voll groß (Tap-Targets), die Ziffern gibt's auf dem Drachen-Screen. */
  .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); }

/* --- 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. */

/* --- 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; }
.dragon-art::before {
  content: ''; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%,-50%);
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--el-glow) 0%, transparent 60%);
}
.dragon-art img {
  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; }
.dragon-art--lg img { max-height: 100%; }

/* --- 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 { opacity: .96; background-position: center 70%; }
.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;
}
.dmo-btn { min-height: 36px; } /* komfortables Tap-Ziel (Icon-Buttons separat) */
.dmo-iconbtn, .icon-btn { min-width: 36px; min-height: 36px; }
.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 64%; }
}
.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 { opacity: .92; filter: grayscale(.08) brightness(.95); background-position: center 72%; }
/* 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; }

.wash-feuer   { background: radial-gradient(72% 62% at 50% 42%, rgba(255,90,44,.34), transparent 72%); }
.wash-eis     { background: radial-gradient(72% 62% at 50% 42%, rgba(69,198,232,.3), transparent 72%); }
.wash-erde    { background: radial-gradient(72% 62% at 50% 42%, rgba(180,138,78,.3), transparent 72%); }
.wash-elektro { background: radial-gradient(72% 62% at 50% 42%, rgba(245,200,30,.3), transparent 72%); }

.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; }
.egg-gif { height: 52px; margin: 0 auto 6px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.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; }
.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); }
.bk-egg__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); animation: bk-egg-breathe 4s ease-in-out infinite; }
.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; }
  .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)); }
.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: <span class="tip" data-tip="Waldmeister">…icon…</span> — 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'); }

@media (min-width: 980px) {
  .app { max-width: none; flex-direction: row; height: 100vh; min-height: 100vh; box-shadow: none; overflow: hidden; }
  .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: 1040px; margin: 0 auto; width: 100%; padding: 26px 44px;
    display: block; column-count: 2; column-gap: 18px; }
  .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: 1240px; } }
@media (min-width: 1560px) { .content-col .scroll-area { max-width: 1500px; column-count: 3; } }
@media (min-width: 1920px) { .content-col .scroll-area { max-width: 1820px; } }

/* §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; }
  .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)); }
@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); }

/* 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; align-items: center; gap: 9px; 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: 600; 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%; }
.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 { flex-direction: column; align-items: stretch; gap: 7px; }
.ap-dragon__top { display: flex; align-items: center; gap: 8px; }
.ap-dragon__name { font-weight: 700; font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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)); }

/* §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%; }
@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; }

/* 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); }

/* 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; }
.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) */
.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) ───────────────────────────── */
.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}
.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; min-height: 72px; padding: 11px 32px 11px 84px;
  border-radius: var(--radius-md); 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; }
.quest-step { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--text); }
.quest-step i { font-size: 20px; color: var(--ember-400); flex: none; }
.quest-step.is-done { color: var(--text-dim); }
.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(--text-muted); font-size: var(--text-2xs); line-height: 1.55; border-top: 1px solid var(--border); padding-top: 11px; margin-bottom: 13px; }
.quest-sheet-lore b { color: var(--gold-300); 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); }
.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 <details> 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; }
.detail-stage .back { position: relative; }
.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; }