/* ROMNIA — Chrome (Phase 1, Spur A). REINES CSS, keine Bild-Assets noetig.
   Aliast NUR auf die gelockten Palette-Tokens (tokens.css) — kein zweiter Wertesatz.
   Die .rom-frame__ornament-Hooks bleiben in Spur A leer; Spur B legt dort die
   Ornament-PNGs ab (Enhancement, keine Abhaengigkeit — A sieht ohne sie vollstaendig aus). */

/* === Alias-Schicht: --rom-* referenziert NUR die 0.1-Tokens (Doktrin-Punkt 4) ===== */
:root{
  --rom-accent:      var(--arcane);
  --rom-accent-2:    var(--arcane-2);
  --rom-gold:        var(--gold);
  --rom-gold-dim:    var(--gold-dim);
  --rom-gold-bright: var(--gold-bright);
  --rom-obsidian:    var(--void-1);
  --rom-indigo-2:    var(--indigo-2);
  --rom-black:       var(--void);
  --rom-ink:         var(--ink);
  --rom-dim:         var(--dim);
  /* abgeleitete Chrome-Toene: NUR Mischungen der Tokens, keine neuen Festwerte */
  --rom-edge:      color-mix(in srgb, var(--rom-gold) 50%, transparent);
  --rom-edge-2:    color-mix(in srgb, var(--rom-gold) 22%, transparent);
  --rom-glow:      color-mix(in srgb, var(--rom-accent) 55%, transparent);
  --rom-glow-soft: color-mix(in srgb, var(--rom-accent) 14%, transparent);
}

/* === PANEL / Reliquiar-Rahmen ===================================================== */
.rom-panel{
  position:relative; isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% -14%, var(--rom-glow-soft), transparent 50%),
    var(--bg-fenster); /* (v60 User 2026-07-05) STANDARD-Hintergrund aller Fenster + Modi = der Hub-Icon-Lila-Ton (arcane-2/indigo-2, wie .hh-ico/.hh-cur). Ersetzt indigo->schwarz. Wert = --bg-fenster (tokens.css, EINE Quelle seit 14.07.). */
  border:1px solid var(--rom-edge);
  border-radius:16px;
  padding:20px 22px;
  color:var(--rom-ink);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--rom-gold-bright) 30%, transparent) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 0 20px -8px color-mix(in srgb, var(--rom-accent) 22%, transparent) inset,
    0 26px 56px -30px #000;
}
/* (User 2026-07-05) Gold-Eckklammern GLOBAL ENTFERNT — passten nicht ins Design; alle Fenster/Modals ohne Eckrahmen. */
.rom-panel::before, .rom-panel::after{ content:none; }
/* .rom-frame__ornament: echte Regeln s. "SPUR B (Prep)" weiter unten (Eck-Hooks + Spiegel). */

.rom-panel__title{
  font-family:var(--f-display); font-size:var(--fs-title); letter-spacing:.06em; text-transform:uppercase;   /* (W1) Rollen-Token statt Festwert — gleicher 15px-Wert */
  color:var(--rom-gold-bright); margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--rom-edge-2);
  text-shadow:0 0 14px var(--rom-glow-soft);
}

/* === BUTTONS ====================================================================== */
.rom-btn{
  position:relative; font:600 13px/1 var(--f-body); letter-spacing:.02em;
  padding:11px 18px; border-radius:11px; cursor:pointer; color:var(--rom-ink);
  background:linear-gradient(180deg, var(--rom-indigo-2), var(--rom-black));
  border:1px solid var(--rom-edge-2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 18px -12px #000;
  transition:transform .12s, box-shadow .2s, border-color .2s, filter .2s;
}
.rom-btn:hover{ border-color:var(--rom-edge); box-shadow:0 0 20px -8px var(--rom-glow), 0 1px 0 rgba(255,255,255,.06) inset; }
.rom-btn:active{ transform:translateY(1px); }

/* primaer: getriebenes Gold mit Magenta-Runenglow + Sheen */
.rom-btn--primary{
  color:var(--rom-black); font-weight:700;
  background:linear-gradient(180deg, var(--rom-gold-bright), var(--rom-gold) 55%, var(--rom-gold-dim));
  border:1px solid var(--rom-gold-bright);
  box-shadow:0 0 26px -6px var(--rom-glow), 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 22px -14px #000;
  overflow:hidden;
}
.rom-btn--primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-120%); animation:rom-sheen 4.5s ease-in-out infinite;
}
@keyframes rom-sheen{ 0%,18%{transform:translateX(-120%)} 38%,100%{transform:translateX(120%)} }

.rom-btn--secondary{ border-color:var(--rom-edge); }
.rom-btn--secondary:hover{ background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 78%, var(--rom-gold)), var(--rom-black)); }

.rom-btn--ghost{ background:transparent; border-color:var(--rom-edge-2); color:var(--rom-dim); box-shadow:none; }
.rom-btn--ghost:hover{ color:var(--rom-ink); border-color:var(--rom-edge); box-shadow:none; }

.rom-btn:disabled, .rom-btn--disabled{
  cursor:not-allowed; filter:saturate(.25) brightness(.7); opacity:.55; box-shadow:none;
}
.rom-btn:disabled::after, .rom-btn--disabled::after{ display:none; }

/* === RESSOURCEN-LEISTE ============================================================ */
.rom-resourcebar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rom-cur{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 70%, transparent), color-mix(in srgb,var(--rom-black) 70%, transparent));
  border:1px solid var(--rom-edge-2);
  box-shadow:0 0 14px -10px var(--rom-glow) inset;
}
.rom-cur__dot{ width:13px; height:13px; border-radius:3px; background:var(--rom-gold); box-shadow:0 0 8px -1px var(--rom-glow); }
.rom-cur__val{ font-variant-numeric:tabular-nums; font-size:13px; color:var(--rom-ink); }
.rom-cur__key{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rom-dim); }

/* === TABS ========================================================================= */
.rom-tabs{ display:flex; gap:8px; }
.rom-tab{
  font:600 12px/1 var(--f-body); letter-spacing:.04em; padding:9px 16px; border-radius:999px; cursor:pointer;
  color:var(--rom-dim);
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 65%, transparent), color-mix(in srgb,var(--rom-black) 65%, transparent));
  border:1px solid var(--rom-edge-2); transition:.18s;
}
.rom-tab:hover{ color:var(--rom-ink); border-color:var(--rom-edge); }
.rom-tab[aria-selected="true"], .rom-tab.is-active{
  color:var(--rom-black); font-weight:700;
  background:linear-gradient(180deg, var(--rom-gold-bright), var(--rom-gold));
  border-color:var(--rom-gold-bright);
  box-shadow:0 6px 18px -8px var(--rom-glow);
}

/* === TRENNER ====================================================================== */
.rom-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; }
.rom-divider::before, .rom-divider::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, var(--rom-edge), transparent);
}
.rom-divider__gem{ width:9px; height:9px; transform:rotate(45deg); background:var(--rom-gold);
  box-shadow:0 0 10px -1px var(--rom-glow); }

/* === ROLL-OUT SPUR A: echte Game-Klassen auf Chrome ======================== */
/* Pro Chunk erweitert. Referenziert NUR Chrome-/0.1-Tokens (eine Quelle). Laedt nach
   dem inline <style> -> gewinnt die Kaskade, ohne die Altregeln zu loeschen. */

/* Chunk 1 — Ressourcen-Leiste (Header) */
.cur{
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 72%, transparent), color-mix(in srgb,var(--rom-black) 72%, transparent));
  border:1px solid var(--rom-edge-2);
  box-shadow:0 0 14px -10px var(--rom-glow) inset;
}

/* Chunk 2 — Panels (Reliquiar-Rahmen). Nur Visual; Padding/Radius/backdrop-filter bleiben aus index.html. */
.panel{
  background:radial-gradient(120% 70% at 50% -14%, var(--rom-glow-soft), transparent 50%), linear-gradient(158deg, var(--rom-indigo-2), var(--rom-black));
  border:1px solid var(--rom-edge);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--rom-gold-bright) 30%, transparent) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 0 20px -8px color-mix(in srgb, var(--rom-accent) 22%, transparent) inset,
    0 26px 56px -30px #000;
}
.panel::before, .panel::after{ content:""; position:absolute; width:24px; height:24px; pointer-events:none; z-index:2;
  border:2px solid var(--rom-gold); filter:drop-shadow(0 0 4px var(--rom-glow-soft)); }
.panel::before{ top:7px; left:7px; border-right:0; border-bottom:0; border-top-left-radius:11px; }
.panel::after{ bottom:7px; right:7px; border-left:0; border-top:0; border-bottom-right-radius:11px; }

/* Chunk 3 — Buttons (Gold-Primaer + Slab + Ghost). Bare button trifft nur generische
   Buttons; .slot-buy/.railnav/.tab haben hoehere Spezifitaet und behalten ihren Look. */
button{ background:linear-gradient(180deg, var(--rom-indigo-2), var(--rom-black)); border:1px solid var(--rom-edge-2); }
button:hover:not(:disabled){ border-color:var(--rom-edge); box-shadow:0 0 20px -8px var(--rom-glow); }
button.primary{ color:var(--rom-black);
  background:linear-gradient(180deg, var(--rom-gold-bright), var(--rom-gold) 55%, var(--rom-gold-dim));
  border:1px solid var(--rom-gold-bright);
  box-shadow:0 0 26px -6px var(--rom-glow), 0 1px 0 rgba(255,255,255,.4) inset; }
button.ghost{ background:transparent; border-color:var(--rom-edge-2); color:var(--rom-dim); }

/* Chunk 4 — Tabs */
.tab{ background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 65%, transparent), color-mix(in srgb,var(--rom-black) 65%, transparent));
  border:1px solid var(--rom-edge-2); color:var(--rom-dim); }
.tab:hover{ color:var(--rom-ink); border-color:var(--rom-edge); }
.tab.active{ color:var(--rom-black); background:linear-gradient(180deg, var(--rom-gold-bright), var(--rom-gold));
  border-color:var(--rom-gold-bright); box-shadow:0 6px 18px -8px var(--rom-glow); }

/* Chunk 5 — Icon-/Utility-Buttons. .ghost/Reset deckt Chunk 3; .hd-nav/.slot-buy bleiben
   element-getintet (semantisch); .railnav nutzt schon var(--gold)/var(--arcane) (Token-Flip). */
.back-hub{ background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 82%, transparent), color-mix(in srgb,var(--rom-black) 82%, transparent));
  border:1px solid var(--rom-edge-2); }
.back-hub:hover{ border-color:var(--rom-edge); color:var(--rom-ink); box-shadow:0 0 16px -8px var(--rom-glow); }

/* === SPUR B — schlichter Gold-Rahmen (3px, leicht gerundet, etwas Glanz) ==== */
/* Auf die grossen .panel + die 2 Modals. Kleine UI (.quest-row/.exp-card/.arena/.begl-card)
   sind KEINE .panel -> bleiben CSS-Chrome. Riwaldy-Entscheid (2026-06-28): PNG-Filigran war
   "zu wild" -> schlichter GOLD-Rahmen mit Glanz (Metall-Gradient hell->gold->dim->hell), KEIN
   Muster, 3px, Ecken leicht gerundet. border-image ignoriert border-radius -> Gold-Ring via
   maskiertem ::after (folgt dem Radius, laesst die Panel-/Modal-Hintergruende unberuehrt).
   (panel_frame.png + render_chrome_frame.py geparkt fuer evtl. spaeteres Ornament; 940102=Portal.) */
.panel{ border:none; border-radius:9px; }
.lu-card, .hd-card{ border:none; }
.panel::before{ display:none; }                       /* alter Spur-A-Eck-Bracket bleibt weg */
/* (User 2026-07-05) goldene Kant-Umrandung (conic-Gold-Glanz) ENTFERNT — Teil des "gesamten Goldrahmens", global raus. */
.panel::after, .lu-card::after, .hd-card::after{ content:none; }

/* === SPUR B — Modal-Eck-Ornament (1 PNG -> 4 Ecken via transform-Spiegel) ==== */
/* 950102 (birefnet General freigestellt, Gold-Filigran-L). .hd-card hat overflow:hidden +
   18px-Radius -> der Clip rundet die Aussenecke; Ornament sitzt INNEN (kein Bleed). 950102
   laesst die Innenecke offen -> vertraegt sich mit dem ✕-Button oben rechts. Glow kommt aus
   CSS/Modal, NICHT aus dem PNG (kein Magenta im Asset). Slot 72px. */
.hd-card.rom-frame{ position:relative; }                 /* .hd-card ist eh relative; defensiv */
.rom-frame__ornament{
  position:absolute; inset:auto; width:72px; height:72px; pointer-events:none; z-index:2;
  background-image:url("/ui/assets/chrome/panel_corner.png");
  background-size:contain; background-repeat:no-repeat; background-position:top left;
}
.rom-frame__ornament.is-tl{ top:0; left:0; }
.rom-frame__ornament.is-tr{ top:0; right:0; transform:scaleX(-1); }
.rom-frame__ornament.is-bl{ bottom:0; left:0; transform:scaleY(-1); }
.rom-frame__ornament.is-br{ bottom:0; right:0; transform:scale(-1,-1); }   /* CSS-Eckklammern (Spur A) weichen dem Frame */

/* ============================================================================
   BLOCK C — Profil-Ecke · Top-Leiste · Inventar · Einsammeln-Belohnung · Icon-Picker.
   Token-getrieben (nur --rom-* Palette/Fonts/--r), KEINE Inline-Styles. Modals nutzen
   die bestehende .lineup-Shell (.lu-backdrop/.lu-close) mit einem .rom-panel-Card.
   ============================================================================ */

/* — PROFIL-AVATAR (Hub-HUD + Icon-Picker). Tote .rom-profile/.rom-rankbox (@deprecated) in Welle 4 entfernt. — */
.rom-avatar{
  position:relative; width:42px; height:42px; border-radius:11px; cursor:pointer; flex:none; padding:0;
  --el:var(--rom-accent);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--el) 38%, transparent), transparent 70%),
    linear-gradient(160deg, var(--rom-indigo-2), var(--rom-black));
  border:1px solid var(--rom-edge);
  box-shadow:0 0 14px -6px var(--rom-glow), 0 1px 0 rgba(255,255,255,.06) inset;
  transition:transform .12s, box-shadow .2s, border-color .2s;
}
.rom-avatar:hover{ border-color:var(--rom-gold-bright); box-shadow:0 0 20px -6px var(--rom-glow); transform:translateY(-1px); }
.rom-avatar > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }        /* Helden-Figur: voll */
.rom-avatar__glyph{ position:absolute; inset:21%; color:var(--el); }                              /* Element-Sigil: gepolstert */
.rom-avatar__glyph svg{ width:100%; height:100%; display:block; }
/* (2026-07-08) Helden-Portrait-Overlay (<id>_face.webp) auf Topbar-Avatar + Icon-Picker: Bild geladen -> heroFigure-SVG aus, Portrait (cover, Kopf oben) an; fehlt es -> SVG bleibt. */
/* (Fix 2026-07-08) width/height PFLICHT: absolut positioniertes <img> ohne width faellt auf die INTRINSISCHE Groesse (512px) zurueck -> Riesen-Avatar. padding+border-box = 6px-Lila-Rand, object-fit haelt die Figur im Content-Box. */
.av-sprite{ position:absolute; inset:0; width:100%; height:100%; padding:2px; box-sizing:border-box; object-fit:contain; object-position:center; border-radius:8px; opacity:0; z-index:1; pointer-events:none; transform:translateY(6px) scale(1.05); }   /* (User 2026-07-09) Profil-Icons füllen die Kachel: Innenrand 6→2px (~+16%) + dezenter Zoom, 6px tiefer */
.rom-avatar.has-portrait .sigil, .pick-cell.has-portrait .sigil{ opacity:0; }
.rom-avatar.has-portrait .av-sprite, .pick-cell.has-portrait .av-sprite{ opacity:1; }
.pick-cell__name{ z-index:2; }

/* — (D-1 Option B) GRÜNDER-KOSMETIK „Grundstein" — reine Zier (G4 Anti-P2W, KEINE Macht).
   founder_frame: goldener Rahmen + Void-Glow am Profil-Avatar. Nur Token, kein Inline-Hex.
   Zweiter Selektor (0,3,0) schlägt das Hub-HUD-Reliquiar `.hh-profile .rom-avatar` (0,2,0, index.html)
   spezifitäts-sicher (nicht ladeordnungs-abhängig) — der Topbar-Avatar ist der einzige .rom-avatar mit der Klasse. — */
.rom-avatar--founder,
.hh-profile .rom-avatar.rom-avatar--founder{
  border-color:var(--rom-gold-bright);
  box-shadow:0 0 18px -4px var(--rom-glow), 0 0 0 1px color-mix(in srgb, var(--rom-gold) 60%, transparent) inset, 0 1px 0 rgba(255,255,255,.08) inset;
}
/* founder_title: Text-Badge „Grundstein" neben dem Namen im Profil-Kopf (wie ein Titel-Chip). */
.pl-title{
  align-self:center; font-family:var(--f-display); font-size:var(--fs-label); letter-spacing:.05em; line-height:1;
  color:var(--rom-gold-bright); padding:3px 9px; border-radius:8px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--rom-gold) 20%, transparent), transparent);
  border:1px solid var(--rom-edge); text-shadow:0 0 10px var(--rom-glow-soft);
}

/* — Header-Icon-Button (Inventar-Beutel) — */
.icon-btn{ display:inline-grid; place-items:center; padding:8px; flex:none; }
.icon-btn svg{ width:18px; height:18px; }

/* — Einsammeln-Button: Puffer-Indikator (Punkt + sanfter Puls, wenn etwas wartet) — */
/* Kompakt (Schublade 4): kleinere Schrift + Padding, damit das laengere Label "Ressourcen sammeln"
   in die Top-Leiste passt, ohne die Header-Hoehe zu treiben (nur dieser Knopf, via #id-Spezifitaet). */
#collectBtn{ position:relative; flex:none; font-size:11px; padding:7px 12px; letter-spacing:.01em; }
#collectBtn.has-pending{ animation:rom-collect-pulse 2.6s ease-in-out infinite; }
@keyframes rom-collect-pulse{
  0%,100%{ box-shadow:0 0 26px -8px var(--rom-glow), 0 1px 0 rgba(255,255,255,.4) inset; }
  50%{ box-shadow:0 0 30px -2px var(--rom-glow), 0 1px 0 rgba(255,255,255,.55) inset; }
}
.collect-dot{ position:absolute; top:-4px; right:-4px; width:9px; height:9px; border-radius:50%;
  background:var(--rom-accent); box-shadow:0 0 8px 0 var(--rom-glow); border:1px solid var(--rom-black); pointer-events:none; }

/* — Modal-Card (in der .lineup-Shell): .rom-panel + Scroll + Close-Slot — */
/* (Spieltest-Normalisierung) Geraete-Format wie .hd-card/.lu-card: min(97vw,960px) im 20:9, Inhalt scrollt innen. */
.rom-modal{ width:min(97vw, 960px); max-width:calc(100vw - 28px); aspect-ratio:20/9; max-height:93vh; overflow:auto; position:relative; } /* max-width: die .lineup-Shell traegt 14px Padding — ohne den Abzug ragte jedes 97vw-Modal auf Mobile aus Viewport/Geraeterahmen (Modal-Groessenregel) */
.rom-modal .lu-close{ position:absolute; top:10px; right:10px; }
/* (W1 2026-07-11) Fenster-Header-Standard §0.1: Modal-Titel MITTIG als Shell-DEFAULT (die alte ID-Ausnahmeliste
   inventory/kalender/modeModal/hubChoice ist aufgeloest). Seiten-Padding haelt den Text vom ✕ (28px @ right:10px) frei.
   Dokumentierte Ausnahme (§0.6): Profil-Kopf #iconPicker .pl-head bleibt linksbuendig (Override unten). */
.rom-modal .rom-panel__title{ text-align:center; padding-left:34px; padding-right:34px; }

/* — INVENTAR-BOX — */
.inv-groups{ display:flex; flex-direction:column; gap:15px; }
.inv-group__title{ font-family:var(--f-display); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rom-gold); margin:0 0 8px; padding-bottom:5px; border-bottom:1px solid var(--rom-edge-2); }
.inv-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:7px; }
.inv-cur{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 55%, transparent), color-mix(in srgb,var(--rom-black) 55%, transparent));
  border:1px solid var(--rom-edge-2); }
.inv-cur svg{ width:22px; height:22px; flex:none; }
.inv-cur__dot{ width:16px; height:16px; border-radius:4px; flex:none; background:var(--el, var(--rom-gold)); box-shadow:0 0 8px -1px var(--rom-glow); }
.inv-cur__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.18; }
.inv-cur__val{ font-variant-numeric:tabular-nums; font-size:14px; color:var(--rom-ink); }
.inv-cur__desc{ display:block; font-size:9.5px; color:var(--rom-dim, #8f86b8); line-height:1.35; margin-top:1px; } /* (User 2026-07-03) wofuer + woher je Waehrung */
.inv-cur__key{ font-size:10px; color:var(--rom-dim); letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* — EINSAMMELN-BELOHNUNGSFENSTER — */
.reward-list{ display:flex; flex-direction:column; gap:8px; margin:6px 0 8px; }
.reward-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:11px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 60%, transparent), color-mix(in srgb,var(--rom-black) 60%, transparent));
  border:1px solid var(--rom-edge-2); animation:rom-reward-in .35s ease both; }
.reward-row svg{ width:28px; height:28px; flex:none; }
.reward-row__name{ flex:1; color:var(--rom-ink); font-size:13px; }
.reward-row__amt{ font-family:var(--f-body); font-variant-numeric:tabular-nums; font-variant-numeric:tabular-nums; font-size:16px;
  color:var(--rom-gold-bright); text-shadow:0 0 10px var(--rom-glow-soft); }
.reward-row__amt::before{ content:"+"; opacity:.65; margin-right:1px; }
.reward-empty{ text-align:center; color:var(--rom-dim); padding:16px 0 22px; font-style:italic; }
@keyframes rom-reward-in{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

/* — ICON-PICKER (Profilbild waehlen) — */
.pick-xp{ margin:2px 0 14px; }
.pick-xp__head{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:var(--rom-dim); margin-bottom:6px; }
.pick-xp__head b{ color:var(--rom-gold-bright); font-size:13px; font-variant-numeric:tabular-nums; }
.pick-xp__track{ height:8px; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid var(--rom-edge-2); overflow:hidden; }
.pick-xp__fill{ height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--rom-gold), var(--rom-gold-bright)); box-shadow:0 0 12px -2px var(--rom-glow); }
.pick-sect{ font-family:var(--f-display); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rom-gold); margin:12px 0 7px; }
/* (User 2026-07-05) FIX Kachel-Ueberlappung: aspect-ratio-Kacheln OHNE definite grid-auto-rows sprengen die
   impliziten auto-Tracks (echte heroFigure-SVGs -> Zeilen ueberlappten sich, 13 Kollisionen gemessen).
   Loesung: FESTE 64px-Spalten + grid-auto-rows:64px -> definite Tracks, 0 Ueberlappung bei jeder Breite. */
.pick-grid{ display:grid; grid-template-columns:repeat(auto-fill, 64px); grid-auto-rows:64px; justify-content:center; gap:14px 10px; }
.pick-cell{ position:relative; aspect-ratio:1; border-radius:11px; cursor:pointer; padding:7px; overflow:hidden;
  --el:var(--rom-accent); display:grid; place-items:center; transition:.15s;
  background:radial-gradient(circle at 50% 34%, color-mix(in srgb,var(--arcane-2) 60%, var(--indigo-2)), color-mix(in srgb,var(--arcane) 16%, var(--indigo-2)) 100%);   /* (User 2026-07-08) Hub-Icon-Lila wie .hh-ico */
  border:1px solid var(--rom-edge-2); }
.pick-cell:hover{ border-color:var(--rom-edge); box-shadow:0 0 16px -8px var(--rom-glow); }
.pick-cell.is-active{ border-color:var(--rom-gold-bright); box-shadow:0 0 18px -5px var(--rom-glow); }
.pick-cell svg{ width:100%; height:100%; color:var(--el); }
.pick-cell__name{ position:absolute; bottom:2px; left:0; right:0; text-align:center; font-size:8px;
  color:var(--rom-dim); text-transform:uppercase; letter-spacing:.03em; text-shadow:0 1px 2px #000; }
.btn-block{ width:100%; margin-top:4px; }   /* vollbreiter Modal-CTA (Belohnungsfenster "Weiter") */
/* (v60 User 2026-07-05) Profil-Modal: KOMPAKT (40% kleiner), MITTIG, Hub sichtbar; Kopf-Zeile Name/ID/Kopieren mit GOLD-Strichen; "Avatar" statt "Deine Helden"; Sigille entfernt. Hintergrund = Standard-Hub-Lila (.rom-panel, oben). */
#iconPicker{ place-items:start center; }   /* (Fix 2026-07-05) oben am .device-Rahmen andocken (wie Basis-.lineup) statt Fenster-zentriert -> ragte sonst unten aus dem 20:9-Rahmen */
#iconPicker .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }  /* leicht -> Hub sichtbar */
/* Hoehe an die Rahmenhoehe (min(97vw,960px)*9/20) gekoppelt, minus 2x20px -> symmetrische 20px-Raender oben+unten, unabhaengig von der Fensterhoehe. margin-top 20 = gleicher Abstand wie unten (Overlay-padding 14 + .device-margin 14 heben sich auf). */
#iconPicker .rom-modal{ width:min(94vw,640px); margin-top:20px;   /* (Chunk 3 §A) L-Band 640; DAUER_SCROLL: feste Höhe, Avatar-Grid scrollt */
  height:calc(min(97vw,960px) * 9 / 20 - 40px); max-height:calc(100vh - 48px);
  overflow:hidden; display:flex; flex-direction:column;   /* FIXE Groesse (waechst NICHT mit den Avataren) */
  /* (TEST 2026-07-05) User-Bild "Menü Hintergrund" (arkane Portal-Szene), 40% transparenter (60% Alpha) ueber dem Lila-Verlauf -> Lila scheint zu 40% durch. Leichter Scrim fuer Textlesbarkeit. Bei Gefallen -> .rom-panel-Standard. */
  /* (User 2026-07-09, 3. Iteration) Profil-Grund = EXAKT der Begleiter-/.panel-Grund (Indigo-2 -> Void + Magenta-Glow). */
  background:
    radial-gradient(120% 70% at 50% -14%, var(--rom-glow-soft), transparent 50%),
    linear-gradient(158deg, var(--rom-indigo-2), var(--rom-black)); }
#iconPicker .pl-head, #iconPicker .pick-xp, #iconPicker .pick-sect, #iconPicker .rom-modal>.muted{ flex:none; }   /* Kopf/Rang/Label bleiben fix */
#iconPicker .pick-grid{ flex:1 1 auto; min-height:0; overflow-y:auto; align-content:start; padding-right:5px; }    /* NUR die Avatarbilder scrollen */
.pl-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 10px; padding-bottom:9px;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 55%, transparent); }      /* GOLD-Strich unter Name/ID */
.pl-head h2{ margin:0; line-height:1.1; }
.pl-id{ align-self:center; font-size:11px; color:var(--rom-dim,#9a92ad); background:rgba(0,0,0,.28); border:1px solid var(--rom-edge-2); border-radius:8px; padding:2px 8px; letter-spacing:.04em; }
.pl-copy,.pl-edit{ align-self:center; border:1px solid var(--rom-edge-2); background:rgba(0,0,0,.25); color:var(--gold,#c8a24a); border-radius:8px; min-width:26px; height:26px; cursor:pointer; font-size:13px; line-height:1; padding:0 5px; }
.pl-copy:hover,.pl-edit:hover{ border-color:var(--gold,#c8a24a); color:var(--gold-bright,#e3c66b); }
#iconPicker .pick-xp{ padding-bottom:11px; margin-bottom:2px;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 55%, transparent); }      /* GOLD-Strich unter Konto-Rang, vor Avatar */
/* (2026-07-09) Missions-Modi (Tages/Monat/Wachstum/Taverne) sind jetzt Hub-Overlay-Fenster (#modeModal, s.u.) — die alten .missions-.view-Regeln entfielen mit den .view-Sektionen. */
/* Name-Eingabe (Onboarding + Aenderung) */
.name-input{ width:100%; box-sizing:border-box; margin:6px 0 12px; padding:11px 13px; border-radius:10px; border:1px solid var(--rom-edge-2); background:rgba(0,0,0,.4); color:var(--rom-ink,#ece6da); font-family:var(--f-body); font-size:16px; }
.name-input:focus{ outline:none; border-color:var(--rom-glow,#d946ef); }
.name-confirm{ width:100%; }
/* Namens-Fenster: kompakt (~60% kleiner), mittig, Hub sichtbar; Hintergrund = Standard-Hub-Lila */
#nameEntry{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }   /* (Fix 2026-07-05) im .device-Rahmen zentriert, nicht im Fenster */
#nameEntry .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }
#nameEntry .rom-modal{ width:min(88vw,380px); aspect-ratio:auto; height:auto; max-height:88vh; padding:22px 24px; text-align:center; }
#nameEntry .name-input{ text-align:center; }

/* (W2 2026-07-12) Gründer-Code einlösen — kleines, im .device-Rahmen zentriertes Modal (Muster #nameEntry, ≤20:9-Lock).
   Inhalt+Zugang sind flag-gated (main.ts): bei onlineEnabled=false wird der Öffner-Button gar nicht erst gerendert. */
#redeemCode{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
#redeemCode .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }
#redeemCode .rom-modal{ width:min(88vw,380px); aspect-ratio:auto; height:auto; max-height:88vh; padding:22px 24px; text-align:center; }
#redeemCode .name-input{ text-align:center; text-transform:uppercase; letter-spacing:.09em; font-family:var(--f-display); }
.rd-hint{ margin:0 0 2px; }
.rd-status{ min-height:16px; margin:11px 0 0; font-size:12.5px; line-height:1.35; color:var(--rom-dim); }
.rd-status.win{ color:var(--good); }
.rd-status.lose{ color:var(--bad); }
/* Profil-Kopf: Gründer-Code-Pille (flag-gated eingefügt neben ✎/⧉) */
.pl-redeem{ align-self:center; border:1px solid var(--rom-edge-2); background:rgba(0,0,0,.25); color:var(--gold,#c8a24a);
  border-radius:8px; height:26px; cursor:pointer; font-size:11px; line-height:1; padding:0 10px;
  font-family:var(--f-display); letter-spacing:.03em; white-space:nowrap; }
.pl-redeem:hover{ border-color:var(--gold,#c8a24a); color:var(--gold-bright,#e3c66b); }

/* — Begleiter-Slot in der Team-Aufstellung (per-Team-Begleiter): waehlbare Chips, aktiver = element-getoent — */
.lu-begl{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.lu-begl-label{ font-family:var(--f-display); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--rom-gold); }
.lu-begl-row{ display:flex; gap:7px; flex-wrap:wrap; }
.lu-begl-chip{ position:relative; display:flex; align-items:center; gap:6px; padding:6px 11px 6px 8px; border-radius:999px; cursor:pointer; color:var(--rom-ink);
  --el:var(--rom-accent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 65%, transparent), color-mix(in srgb,var(--rom-black) 65%, transparent));
  border:1px solid var(--rom-edge-2); transition:.15s; }
.lu-begl-chip:hover{ border-color:var(--rom-edge); box-shadow:0 0 14px -8px var(--rom-glow); }
.lu-begl-chip.active{ border-color:var(--el); box-shadow:0 0 16px -6px color-mix(in srgb, var(--el) 60%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--el) 22%, transparent), color-mix(in srgb,var(--rom-black) 65%, transparent)); }
.lu-begl-ico{ width:22px; height:22px; border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--el) 45%, var(--rom-line, var(--line))); background:color-mix(in srgb, var(--el) 16%, #0b0813); } /* (Auftrag #42) Begleiter-Icon im Chip (companions/<id>.webp) */
.lu-begl-ico-img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.lu-begl-glyph{ width:18px; height:18px; color:var(--el); display:grid; place-items:center; flex:none; }
.lu-begl-glyph svg{ width:100%; height:100%; }
.lu-begl-name{ font-size:12px; text-transform:capitalize; }
.lu-begl-on{ color:var(--el); font-weight:700; }

/* ============================================================================
   (v56, Spieltest) MONATS-LOGIN-KALENDER + FTUE-Onboarding. Token-getrieben
   (nur --rom-* Palette), KEINE Inline-Styles. Modal nutzt die .lineup-Shell.
   ============================================================================ */

/* — Kalender-Button: Claim-Punkt (wie collect-dot), wenn heute abholbar — */
#kalenderBtn{ position:relative; }
#kalenderBtn .collect-dot{ top:-2px; right:-2px; }

/* --- Kalender: passt KOMPLETT ohne Scrollen ins 20:9-Fenster (Spieltest-Fix: Claim-Button lag unter dem Fold).
   Karte = flex-Spalte, Grid 10x3 fuellt den Rest (grid-auto-rows:1fr), Button immer sichtbar. --- */
/* (v60 User 2026-07-05) Monatskalender: 30% kleiner (960->672), MITTIG, Hub sichtbar, Tagesfelder kompakt, Icon statt Wort */
#kalender{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }   /* (Fix 2026-07-05) Overlay = .device-Rahmenbox -> zentriert IM Rahmen (nicht im Fenster), sonst ragte es unten heraus */
#kalender .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }   /* leicht -> Hub sichtbar */
#kalender .rom-modal{ width:min(94vw,640px); aspect-ratio:20/9; display:flex; flex-direction:column; overflow:hidden; }   /* (Chunk 3 §A) L-Band 640; DAUER_SCROLL (feste 20:9-Höhe, Grid füllt) */

/* (Missions-Overlay 2026-07-09) Tages/Monat/Wachstum/Taverne als zentriertes Hub-Fenster (Hub sichtbar dahinter, wie Kalender) — NICHT Vollbild. Card = Profilfenster-Maße, nur die Liste scrollt.
   (User 2026-07-09) Einzel-Modi tragen wieder das menu_bg-Hintergrundbild; das Lila bleibt allein der Modi-Übersicht (#hubChoice) vorbehalten. Titel mittig, Zurück-Pfeil links (führt zur Modi-Auswahl, nicht zum Hub). */
#modeModal{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }   /* im .device-Rahmen zentriert */
#modeModal .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }   /* leicht -> Hub sichtbar */
/* (W F-2 2026-07-11) Höhe = auto (hug-content) statt fixe Rahmenhöhe: kurze Modi (Taverne) schrumpfen aufs
   Feld, lange Modi (Tages/Monat/Wachstum) capen auf Rahmen−40 und nur die innere Liste scrollt (§2e M-2). */
#modeModal .rom-modal{ width:min(92vw,576px); aspect-ratio:auto; height:auto;
  max-height:calc(min(97vw,960px) * 9 / 20 - 40px);
  display:flex; flex-direction:column; overflow:hidden; padding:16px 18px;
  background:
    linear-gradient(180deg, rgba(13,10,24,.30) 0%, rgba(13,10,24,.18) 40%, rgba(13,10,24,.42) 100%),
    url("/ui/assets/chrome/menu_bg.webp?v=6") center/cover no-repeat,
    var(--bg-fenster); }
#modeModal .mode-head{ flex:none; margin-bottom:10px; text-align:center; padding-top:2px; }   /* Titel mittig */
#modeModal .rom-panel__title{ padding:0 44px 2px; }                          /* Zentrierung = Shell-Default (W1); Platz fuer Zurueck/Schliessen an den Ecken; +2px = Strich 2px tiefer */
#modeModal .mode-sub{ display:block; margin-top:3px; font-size:12px; }
/* Zurueck-Pfeil (visuell wie im Void): oben links, gleiche Feldgröße wie das ✕ rechts (28x28); fuehrt zur Modi-Auswahl zurueck (nicht zum Hub) */
#modeModal .mode-back{ position:absolute; top:10px; left:10px; z-index:3; height:28px; width:28px; padding:0; border-radius:8px;
  border:1px solid color-mix(in srgb, var(--rom-gold) 40%, transparent); display:grid; place-items:center; cursor:pointer; color:var(--rom-gold-bright);
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 82%, transparent), color-mix(in srgb,var(--rom-black) 82%, transparent)); }
#modeModal .mode-back:hover{ border-color:var(--rom-gold-bright); box-shadow:0 0 14px -8px var(--rom-glow); }
#modeModal .mode-back svg{ display:block; }
#modeModal .mode-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#modeModal .quest-list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px; }
#modeModal .quest-milestone{ flex:none; margin-top:12px; }
#modeModal #wachstumBody{ flex:1 1 auto; min-height:0; }
#modeModal #auftragInfo{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#modeModal #auftragInfo > .quest-list{ margin-top:12px; }

/* (Andock 2026-07-09) Mehrfach-Zonen-Auswahl (z.B. Gebäude "Missionen"): kompaktes, mittiges Fenster mit vertikaler Modus-Liste; Hub bleibt sichtbar. */
#hubChoice{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
#hubChoice .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }   /* leicht -> Hub sichtbar */
#hubChoice .rom-modal{ width:min(84vw,340px); aspect-ratio:auto; height:auto; max-height:88vh; padding:20px 22px; }
#hubChoice .rom-panel__title{ margin-bottom:14px; }   /* Zentrierung = Shell-Default (W1) */
/* (Gilde Phase 3 · W1 2026-07-11) Hilfe/Beteiligung/Anfrageliste-Modal: Groessen-Klasse M (UI_STANDARDS §3),
   am .device-Rahmen verankert (§0.2/§0.3) — vorher fenster-zentriert mit 86vh, ragte 40px unter den Rahmen.
   Karte = flex-Spalte, NUR .gm-body scrollt. */
#gildeModal{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
#gildeModal .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }
/* (W F-2 2026-07-11) Höhe = auto (hug): kurze Inhalte (Anfrage-/Beteiligungs-Empty-States) schrumpfen aufs Feld
   statt eine 392px-Box für 2 Zeilen aufzuspannen; die lange Hilfe capt auf Rahmen−40, nur .gm-body scrollt. */
#gildeModal .rom-modal{ width:min(92vw,576px); aspect-ratio:auto; height:auto;
  max-height:calc(min(97vw,960px) * 9 / 20 - 40px);
  display:flex; flex-direction:column; overflow:hidden; }
#gildeModal .rom-panel__title{ flex:none; }
#gildeModal .gm-body{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
#gildeModal .gm-body > .gilde-empty{ margin:auto 0; }   /* Empty-States mittig statt oben angeklebt */
/* (W1 2026-07-11) Einsammeln-Fenster: Groessen-Klasse S (§3) — war XL-Vollrahmen (960x432) fuer 4 Zeilen.
   Im Rahmen zentriert (§0.3), nur die Belohnungsliste scrollt. */
#collectReward{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
#collectReward .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }
#collectReward .rom-modal{ width:min(88vw,380px); aspect-ratio:auto; height:auto;
  max-height:calc(min(97vw,960px) * 9 / 20 - 28px); display:flex; flex-direction:column; overflow:hidden; }
#collectReward .reward-list{ flex:1 1 auto; min-height:0; overflow-y:auto; }
/* (Verwalter 21.07., §2.12 K4) Verwalter-Ergebnis teilt das Einsammeln-Fenster (Super-Set, EINE Shell):
   unter der Belohnungsliste eine kompakte Fuss-Zone — erledigte Missionen (dim) + "Tagesbonus!"/"Monats-Pack!" (gold). */
#collectReward .verw-foot{ flex:none; text-align:center; margin:0 0 10px; }
#collectReward .verw-quests{ font-size:12.5px; color:var(--rom-dim); }
#collectReward .verw-bonus{ font-family:var(--f-display); font-size:13.5px; letter-spacing:.05em; color:var(--rom-gold-bright); margin-top:4px; }

/* (W F-2 2026-07-11) Helden-Anker-Einlösen: war XL-Vollrahmen (960x432, base .rom-modal) für ein Portrait-Pick-Grid.
   Auf Größen-Klasse M–wide (§3), am .device-Rahmen verankert (§0.3), hug-Höhe gedeckelt auf Rahmen−40 — nur .wp-picks scrollt. */
#wachstumAnchor{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
#wachstumAnchor .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }   /* leicht -> Hub sichtbar */
#wachstumAnchor .rom-modal{ width:min(94vw,640px); aspect-ratio:auto; height:auto;   /* (Chunk 3 §A) geteiltes Picker-Band L 640 (s. fodder/exp) */
  max-height:calc(min(97vw,960px) * 9 / 20 - 40px);
  display:flex; flex-direction:column; overflow:hidden; padding:16px 18px 14px; }
#wachstumAnchor .rom-panel__title{ flex:none; }
#wachstumAnchor .rom-modal > .muted{ flex:none; margin:0 0 10px; }   /* Intro fix, nur die Kachel-Liste (.wp-picks) scrollt */

/* ── (W F-3 2026-07-11) ARBEITS-MODALS — die drei .lu-card-Fenster (Teamauswahl/Futter/Streifzug) aufs
     Fenster-Modell (§2e) + EINE Shell (§2c). Sie behalten ihr Sonder-Layout (.lu-head-Kopf, Team-Slots, Pool),
     übernehmen aber das schwebende Anker-/Backdrop-/Größen-Verhalten der .rom-modal-Familie: am .device-Rahmen
     verankert (§0.3), Höhe HUGT den Inhalt (gedeckelt auf Rahmen−40), Backdrop leicht → Hub/Aufrufer scheint durch.
     Der Kopf ist schon Standard (W1: .lu-head h3 = .rom-panel__title-Anatomie — mittig, kein ◆, ✕ rechts).
     heroDetail bleibt BEGRÜNDET nahe-Vollrahmen (rich content: Portrait + 6 Ausrüstungs-Slots + 2 Popovers, §3). ── */
/* Futter-/Streifzug-Picker = reine Listen-Picker → Größen-Klasse M (§3): kompakt statt 960×432-Vollrahmen. */
#fodderPicker, #expPicker{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
#fodderPicker .lu-backdrop, #expPicker .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }   /* leicht -> Aufrufer (heroDetail/Streifzug-View) scheint durch */
/* (Chunk 3 §A) GETEILTES PICKER-BAND — Portrait-/Helden-Picker fodder/exp/wachstumAnchor teilen EIN L-Band (640).
   (Shells differ bewusst: .lu-card vs .rom-modal — daher gruppierter Selektor statt einer Klasse; Breite = die eine Wahrheit.) */
#fodderPicker .lu-card, #expPicker .lu-card{ width:min(94vw,640px); aspect-ratio:auto; height:auto;
  max-height:calc(min(97vw,960px) * 9 / 20 - 40px); }   /* hugt Inhalt, capt auf Rahmen−40; nur .lu-body scrollt */
#fodderPicker .lu-body, #expPicker .lu-body{ min-height:0; }   /* flex-Spalte: Body darf unter Inhalt schrumpfen -> scrollt statt die Karte zu sprengen */

/* Teamauswahl = inhaltsdicht (6+1 Slots + Synergie + Filter + voller Helden-Pool) → Reich-Register (§A: min(92vw,900px)
   — bewusst <960, damit ein abgedunkelter Rand bleibt → schwebt), hug-Höhe + am Rahmen verankert; nur der Helden-Pool scrollt. */
#lineup{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
#lineup .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }
#lineup .lu-card{ width:min(92vw,900px); aspect-ratio:auto; height:auto;
  max-height:calc(min(97vw,960px) * 9 / 20 - 40px); }
#lineup .lu-body{ min-height:0; }   /* .lu-team-modal .lu-pool trägt schon min-height:0 + overflow -> nur der Pool scrollt */

/* ── (Fenster-Modell §2e / Welle F-1) SCHWEBE-FENSTER-SHELL — die EINE Wahrheit für Leaf-Fenster (§0.5).
     Host trägt class="lineup rom-float"; geöffnet über openFloat() (bzw. openFreundeWindow). Am .device-Rahmen
     verankert (§0.3), Karte hugt Inhalt (Größe M), gedeckelt auf Rahmen−40; Backdrop leicht → Hub scheint durch
     (wie #iconPicker/#modeModal). Titel mittig (Shell-Default), X rechts (openModal), optional ‹ links
     (data-float-back → Modi-Auswahl des Gebäudes, §2d N-4). Generalisiert das Freunde-PoC-Muster (Welle F-0). ── */
.rom-float{ place-items:center; padding:0; top:14px; bottom:auto; height:calc(min(97vw,960px) * 9 / 20); }
.rom-float .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }
.rom-float .rom-modal{ width:min(94vw,480px); aspect-ratio:auto; height:auto;
  max-height:calc(min(97vw,960px) * 9 / 20 - 40px); display:flex; flex-direction:column; overflow:hidden; padding:16px 18px 14px;
  background:
    radial-gradient(120% 70% at 50% -14%, var(--rom-glow-soft), transparent 50%),
    linear-gradient(158deg, var(--rom-indigo-2), var(--rom-black)); }        /* Profil-/Begleiter-Grund (Kathedrale der Leere) */
.rom-float--wide .rom-modal{ width:min(94vw,640px); }                        /* (Chunk 3 §A) L-Band: Karten-Grid-Fenster (Begleiter/Erfolge) — Scroll-Mess-Test bestätigt Überlauf bei M; --wide nur bei Überlauf. */
.rom-float .rom-panel__title{ flex:none; margin:0 0 12px; padding-left:40px; padding-right:40px; }   /* mittig (Shell-Default) + Platz für ‹/✕ an den Ecken */
.rom-float__body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:2px; }   /* hugt bei Normalinhalt, scrollt NUR bei echtem Überlauf (§2e M-2) */
.rom-float__body > *:first-child{ margin-top:0; }
/* ‹-Zurück (nur bei Untermodi): oben links, gleiche Feldgröße wie das ✕ rechts (28×28) — führt zur Modi-Auswahl (nicht zum Hub) */
.rom-float__back{ position:absolute; top:10px; left:10px; z-index:3; height:28px; width:28px; padding:0; border-radius:8px;
  border:1px solid color-mix(in srgb, var(--rom-gold) 40%, transparent); display:grid; place-items:center; cursor:pointer; color:var(--rom-gold-bright);
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 82%, transparent), color-mix(in srgb,var(--rom-black) 82%, transparent)); }
.rom-float__back:hover{ border-color:var(--rom-gold-bright); box-shadow:0 0 14px -8px var(--rom-glow); }
.rom-float__back svg{ display:block; }
.rom-float__back::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(100%,40px); height:max(100%,40px); border-radius:inherit; }  /* (Welle 4 §7) Touch-Hitbox >=40px, sichtbare Groesse (28px) unveraendert */
/* Kompakt-Controls im Schwebe-Fenster (§2e M-3): Primär-CTA + Run-Button label-breit statt Vollbreiten-Slab */
.rom-float .controls{ margin-bottom:2px; }
.rom-float .controls button.primary, .rom-float .arena-btn{ flex:0 0 auto; width:auto; min-width:0; padding:9px 18px; }
.rom-float__body .quest-row{ padding:7px 11px; }                             /* Zeilen kompakt; Zeile hält den 40px-Touch-Button */
.rom-float__body .quest-claim{ min-height:40px; }

/* ── (Events, SPEC_Events.md §8) Geteiltes Live-Event-Fenster: Voll-Rahmen 960/20:9 (🔒 Fenster-Standard, wie #gildeMembershipModal).
   Band 1 (aktives Event) + Tab-Leiste sind fix; NUR .ev-scroll scrollt (nie das Fenster). ── */
#eventsModal .rom-modal{ width:min(97vw, 960px); aspect-ratio:20/9; max-height:93vh; }
#eventsModal .ev-body{ margin:0; height:100%; min-height:0; display:flex; flex-direction:column; gap:12px; position:relative; }   /* position:relative = Anker für das inset:0-Info-Overlay (.ev-info-pop) */
#eventsModal .rom-float__body{ min-height:0; overflow:hidden; }   /* scrollt tut .ev-scroll, nicht der Rahmen */
/* Band 1: aktives Event */
.ev-active{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(158deg, color-mix(in srgb,var(--rom-accent) 22%, var(--rom-indigo-2)), var(--rom-black));
  border:1px solid color-mix(in srgb,var(--rom-gold) 30%, transparent); box-shadow:0 8px 24px -16px #000 inset; }
.ev-active__main{ min-width:0; }
.ev-name{ font-family:var(--f-display); font-size:20px; color:var(--rom-gold-bright); text-shadow:0 1px 3px #000; }
.ev-cal{ font-size:12.5px; color:var(--rom-dim); margin-top:3px; }
.ev-cal b{ color:var(--rom-ink); }
/* (Waldemar 24.07.) „Deine Aufgabe" — was Event-Fortschritt gibt (measures), prominent gleich unter dem Event-Namen */
.ev-task{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; font-size:13px; }
.ev-task__k{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--rom-gold-bright); background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:2px 7px; }
.ev-task__v{ color:var(--rom-ink); }
.ev-task__w{ color:var(--rom-gold-bright); font-weight:700; font-size:11px; }
/* (27.07.) Event-Countdown in Band 1 + Rate-Up-Erklärung im Info-Overlay */
.ev-ends{ font-size:12px; color:var(--rom-dim); margin-top:3px; }
.ev-ends b{ color:var(--rom-gold-bright); }
.ev-spot-info{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; }
.ev-hort{ font-size:12px; color:var(--rom-dim); margin-top:5px; }
.ev-hort b{ color:var(--rom-gold-bright); }
/* (Delta 2 §4, SPEC_Deltas 21.07.) Spar-Rechner + Aufhol-Drip-Stand in Band 1 — kompakt, je eine Zeile */
.ev-calc{ font-size:12px; color:var(--rom-dim); margin-top:5px; }
.ev-calc b{ color:var(--rom-gold-bright); }
.ev-catchup{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--rom-dim); margin-top:4px; }
.ev-catchup b{ color:var(--rom-ink); }
.ev-catchup .cur-ic, .ev-catchup svg{ width:14px; height:14px; flex:none; }
/* (Info-Umbau, Waldemar 24.07.) Kompakter Kopf: Name + „i"-Info-Button in einer Zeile; darunter die Progress-Mini-Bar (immer sichtbar) */
.ev-head{ display:flex; align-items:center; gap:9px; }
.ev-info-btn{ flex:none; min-width:30px; height:28px; padding:0 9px; border-radius:8px; cursor:pointer; display:grid; place-items:center;
  font-family:var(--f-body); font-style:italic; font-weight:700; font-size:14px; line-height:1; transition:.15s;
  color:var(--rom-gold-bright); border:1px solid color-mix(in srgb,var(--rom-gold) 40%, transparent);
  background:radial-gradient(120% 130% at 50% 32%, color-mix(in srgb,var(--rom-accent) 40%, var(--rom-indigo-2)), var(--rom-black) 96%); }  /* Muster = .lu-info-btn (Teamauswahl), auf --rom-*-Tokens */
.ev-info-btn:hover, .ev-info-btn.is-open{ border-color:var(--rom-gold-bright); color:#fff; }
.ev-prog--head{ margin-top:8px; }
/* Info-Overlay: die GESAMTE Erklärung, am Fenster-Rahmen angedockt (deckt die .ev-body-Fläche; nur der eigene Inhalt scrollt — NIE über den 20:9-Rahmen) */
.ev-info-pop{ position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; gap:7px; padding:16px 16px 14px; border-radius:12px; overflow-y:auto;
  background:linear-gradient(158deg, color-mix(in srgb,var(--rom-accent) 24%, var(--rom-indigo-2)), var(--rom-black));
  border:1px solid color-mix(in srgb,var(--rom-gold) 34%, transparent); box-shadow:0 20px 46px -20px #000; }
.ev-info-pop[hidden]{ display:none; }
.ev-info-pop h4{ margin:0 32px 3px 2px; font-family:var(--f-display); font-size:15px; color:var(--rom-gold-bright); }   /* margin-right = Platz für das X */
.ev-info-pop .ev-task, .ev-info-pop .ev-cal, .ev-info-pop .ev-hort, .ev-info-pop .ev-calc, .ev-info-pop .ev-catchup{ margin-top:0; }   /* Abstand kommt aus dem flex-gap */
.ev-info-pop__x{ position:absolute; top:9px; right:10px; width:26px; height:26px; border-radius:7px; cursor:pointer; display:grid; place-items:center; transition:.15s;
  color:var(--rom-dim); background:color-mix(in srgb,var(--rom-black) 55%, transparent); border:1px solid color-mix(in srgb,var(--rom-gold) 24%, transparent); }
.ev-info-pop__x:hover{ border-color:var(--rom-gold-bright); color:var(--rom-ink); }
/* (Delta-1-Seam) dezenter Aufhol-Hinweis am Tagesmissions-Screen (#questEvHint, nur in Event-Wochen sichtbar) */
.quest-evhint{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--rom-dim); padding:6px 10px; margin-bottom:8px; border-radius:9px;
  background:color-mix(in srgb,var(--rom-indigo-2) 55%, transparent); border:1px dashed color-mix(in srgb,var(--rom-gold) 26%, transparent); }
.quest-evhint b{ color:var(--rom-gold-bright); }
.quest-evhint .cur-ic, .quest-evhint svg{ width:15px; height:15px; flex:none; }
.ev-spot{ flex:none; display:flex; align-items:center; gap:9px; padding:6px 10px 6px 6px; border-radius:11px;
  background:color-mix(in srgb,var(--rom-black) 40%, transparent); border:1px solid color-mix(in srgb,var(--rom-gold) 26%, transparent); }
.ev-spot__av{ width:52px; height:52px; cursor:default; position:relative; overflow:hidden; }
.ev-spot__tx{ display:flex; flex-direction:column; line-height:1.1; }
.ev-spot__k{ font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:color-mix(in srgb,var(--rom-gold) 74%, var(--rom-ink)); }
.ev-spot__n{ font-family:var(--f-display); font-size:14px; color:var(--rom-ink); }
/* Tab-Leiste */
.ev-tabs{ flex:none; display:flex; gap:8px; }
.ev-tab{ flex:1 1 0; min-height:38px; border-radius:10px; cursor:pointer; font:inherit; font-size:13.5px; color:var(--rom-dim);
  background:color-mix(in srgb,var(--rom-indigo-2) 70%, transparent); border:1px solid color-mix(in srgb,var(--rom-gold) 22%, transparent); transition:.15s; }
.ev-tab:hover{ border-color:color-mix(in srgb,var(--rom-gold) 50%, transparent); }
.ev-tab.is-active{ color:var(--rom-black); background:linear-gradient(180deg,var(--rom-gold-bright),var(--rom-gold)); border-color:var(--rom-gold); font-weight:700; }
/* Scroll-Zone (Meilensteine | Shop) */
.ev-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:2px; display:flex; flex-direction:column; gap:8px; }
/* Meilenstein-Fortschritt */
.ev-prog{ flex:none; }
.ev-prog__head{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--rom-dim); margin-bottom:5px; }
.ev-prog__track{ height:9px; border-radius:6px; overflow:hidden; background:color-mix(in srgb,var(--rom-black) 55%, transparent); border:1px solid color-mix(in srgb,var(--rom-gold) 20%, transparent); }
.ev-prog__fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--rom-gold),var(--rom-gold-bright)); transition:width .3s; }
.ev-ms__need{ color:var(--rom-dim); font-size:12px; margin-left:5px; }
.ev-ms--done{ opacity:.62; }
/* Reliktmarkt (Shop) */
.ev-shop__head{ flex:none; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ev-shop__note{ font-size:11.5px; color:var(--rom-dim); }
.ev-shop__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); grid-auto-rows:min-content; gap:10px; }
.ev-shop-card{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 8px 9px; border-radius:12px; text-align:center;
  background:linear-gradient(160deg,var(--rom-indigo-2),var(--rom-black)); border:1px solid color-mix(in srgb,var(--rom-gold) 24%, transparent); }
.ev-shop-card.sold{ opacity:.5; }
.ev-shop-card__slot{ position:relative; display:grid; place-items:center; width:46px; height:46px; }
.ev-shop-card__ic{ width:38px; height:38px; display:grid; place-items:center; }
.ev-shop-card__ic svg, .ev-shop-card__ic img{ width:100%; height:100%; object-fit:contain; }
.ev-shop-card__qty{ position:absolute; right:-6px; bottom:-4px; font-family:var(--f-display); font-size:11px; color:var(--rom-gold-bright); background:var(--rom-black); border-radius:6px; padding:0 4px; border:1px solid color-mix(in srgb,var(--rom-gold) 30%, transparent); }
.ev-shop-card__name{ font-size:12px; color:var(--rom-ink); }
.ev-shop-card__limit{ font-size:11px; color:var(--rom-dim); }
.ev-shop-card__buy{ margin-top:2px; min-height:36px; width:100%; border-radius:9px; cursor:pointer; font:inherit; color:var(--rom-gold-bright);
  background:color-mix(in srgb,var(--rom-accent) 20%, var(--rom-indigo-2)); border:1px solid color-mix(in srgb,var(--rom-gold) 34%, transparent); transition:.15s; }
.ev-shop-card__buy:hover:not(:disabled){ border-color:var(--rom-gold-bright); }
.ev-shop-card__buy:disabled{ opacity:.45; cursor:not-allowed; }
@media (max-width:720px){ /* eng: Spotlight unter den Text stapeln, Rahmen atmen lassen */
  #eventsModal .rom-modal{ aspect-ratio:auto; height:auto; }
  .ev-active{ flex-direction:column; align-items:flex-start; }
  .ev-head{ width:100%; }
  .ev-info-btn{ min-height:40px; min-width:40px; }   /* (Info-Umbau) Touch-Ziel ≥40px auf Handy */
}

/* ── Freunde reitet auf der .rom-float-Shell (oben); nur die interne Aktionszeile/Shop-Liste bleibt Freunde-spezifisch (fixe Kopfzeile, nur der Shop scrollt). ── */
#freundeModal #freundeInfo{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:10px; }
/* Aktionszeile: Herzen links, label-breiter Summon rechts (KEIN Vollbreiten-CTA über der Liste) */
.fr-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 12px; flex-wrap:wrap; flex:none;
  padding-bottom:11px; border-bottom:1px solid color-mix(in srgb, var(--rom-gold) 40%, transparent); }
.fr-herz{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--rom-ink); }
.fr-cap{ color:var(--rom-dim); }
.fr-friends{ color:var(--rom-dim); font-size:12px; }
.fr-summon{ flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; min-height:40px; font-size:13px; letter-spacing:.02em; }  /* baut auf .rom-btn--primary (Gold-Kanon) — nur label-breit + kompakt; ≥40px Touch */
.fr-summon .cur-ic{ width:14px; height:14px; }
/* kompakte Shop-Liste — NUR diese scrollt, und nur bei echtem Überlauf (§2e M-2) */
.fr-shop{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:2px; }
.fr-row{ padding:6px 10px 6px 12px; }                                       /* 66px-Zeile -> ~52px (§2e M-3), Zeile hält den 40px-Kauf-Button */
.fr-row .quest-label{ font-size:13px; line-height:1.2; }
.fr-row .quest-prog{ font-size:11px; margin-top:1px; }
.fr-row .quest-prog .cur-ic{ width:13px; height:13px; }
.fr-row .quest-claim{ padding:6px 16px; min-height:40px; }                  /* ≥40px Touch (§2e M-3 / §7); visuell weiter kompakt */
.fr-note{ flex:none; margin:0; font-size:11px; line-height:1.45; }

/* ══ (Chunk 1 §2e) KANONISCHE KOPF-BAUSTEINE — generalisieren das Freunde-.fr-head-Muster (§0.5 eine Wahrheit).
   .win-meta    = Meta+Aktion-Kopfzeile: Zähler/Ressourcen LINKS, EIN label-breiter Primär-CTA RECHTS.
   .win-actions = optionale Fuß-Aktionszeile (label-breite CTAs, rechtsbündig).
   Ersetzen <p muted>-Metazeilen + Vollbreiten-Slabs in den angefassten Fenstern (beschwoeren/gluecksrad/schicksal). ══ */
.win-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px 12px; flex-wrap:wrap; flex:none;
  margin:0 0 12px; padding-bottom:11px; border-bottom:1px solid color-mix(in srgb, var(--rom-gold) 40%, transparent); }
.win-meta__info{ display:flex; align-items:center; gap:5px 9px; flex-wrap:wrap; font-size:13px; color:var(--rom-ink); }
.win-meta__info .num{ font-variant-numeric:tabular-nums; }
.win-meta__info .muted{ color:var(--rom-dim); }
.win-meta__cta{ flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; min-height:40px; font-size:13px; letter-spacing:.02em; }   /* label-breit + ≥40px Touch (baut auf .rom-btn--primary) */
.win-meta__cta .cur-ic{ width:14px; height:14px; }
/* (Onboarding 30.07.) „i" in der Heldenuebersicht — erklaert die Fusion. Muster: der i-Knopf der Teamauswahl (.lu-info-btn). */
.roster-i{ flex:0 0 auto; margin-left:auto; width:30px; height:30px; min-height:30px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-family:var(--f-display); font-size:14px; font-weight:700;
  color:var(--rom-gold-bright); border:1px solid color-mix(in srgb, var(--rom-gold) 55%, transparent); background:rgba(8,6,14,.5); }
.roster-i:hover{ border-color:var(--rom-gold-bright); box-shadow:0 0 14px -4px var(--rom-glow); }
.roster-info{ flex:none; margin:0 0 12px; padding:12px 14px; border-radius:12px; font-size:12.5px; line-height:1.55; color:var(--rom-ink);
  border:1px solid color-mix(in srgb, var(--rom-gold) 42%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 60%, transparent), rgba(8,6,14,.62)); }
.roster-info[hidden]{ display:none; }
.roster-info h4{ margin:0 0 6px; font-family:var(--f-display); font-size:14px; color:var(--rom-gold-bright); }
.roster-info h4 ~ h4{ margin-top:13px; }   /* der Text hat jetzt mehrere Abschnitte (Fusion · Sterne · nach 10★) */
.roster-info p{ margin:0 0 7px; }
.roster-info ul{ margin:0 0 7px; padding-left:18px; }
.roster-info li{ margin:2px 0; }
.roster-info b{ color:var(--rom-gold-bright); }
/* (Korrektheits-Runde 31.07.) Bausteine der code-abgeleiteten Progressions-Texte (ui/progression.ts).
   .pg-warn traegt die Aussage, die Waldemar vermisst hat (Futter kommt ZUSAETZLICH) — sie darf nicht untergehen. */
.roster-info .pg-warn{ padding:7px 10px; border-radius:9px; border-left:2px solid var(--rom-gold-bright);
  background:color-mix(in srgb, var(--rom-gold) 9%, transparent); }
.roster-info .pg-leiter{ list-style:none; padding-left:0; }
.roster-info .pg-leiter li{ padding:3px 0 3px 11px; border-left:1px solid color-mix(in srgb, var(--rom-gold) 26%, transparent); }
.roster-info .pg-sum{ color:var(--rom-gold-bright); }
.win-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; flex:none; margin-top:2px; }
.win-actions .rom-btn, .win-actions button{ flex:0 0 auto; width:auto; min-width:0; padding:9px 18px; min-height:40px; }
.win-actions .rom-btn .cur-ic{ width:13px; height:13px; }
.win-foot{ flex:none; margin:12px 0 0; font-size:11px; line-height:1.45; color:var(--rom-dim); }
.win-foot:first-child{ margin-top:0; }

/* ══ (ERLEUCHTUNGS-BLOCK #161) KRISTALLSCHACHT — Push/Farm-Karten (der #157-Faucet). Zwei gleichwertige Aktionskarten:
   Vorstoß (neue Tiefe, Einmal-Ertrag) + Ernte (die tiefste Etage, wiederkehrend). Reuse der Fenster-Bausteine; token-getrieben. ══ */
.km-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .km-cards{ grid-template-columns:1fr; } }
.km-card{ display:flex; flex-direction:column; gap:7px; padding:12px 13px; border-radius:12px;
  border:1px solid var(--rom-edge-2); background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 70%, transparent), color-mix(in srgb,var(--rom-black) 55%, transparent)); }
.km-card--push{ border-color:color-mix(in srgb, var(--rom-gold) 42%, transparent); }
.km-card--farm{ border-color:color-mix(in srgb, var(--arcane) 38%, transparent); }
.km-card--empty{ justify-content:center; opacity:.85; }
.km-card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.km-card__tag{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--rom-gold-bright); }
.km-card--farm .km-card__tag{ color:var(--arcane-2); }
.km-card__floor{ font-size:12px; color:var(--rom-dim); } .km-card__floor .num{ color:var(--rom-ink); font-variant-numeric:tabular-nums; }
.km-card__desc{ font-size:11px; line-height:1.4; color:var(--rom-dim); flex:1; }
.km-bonus{ color:var(--good); font-weight:600; white-space:nowrap; }
.km-card__reward{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--rom-ink); }
.km-card__once{ font-size:10px; color:var(--rom-dim); }
.km-card .cost-chip{ font-size:12px; }
.km-card button.primary{ width:100%; min-height:40px; padding:9px 14px; font-size:13px; }
.km-hint{ flex:none; margin:10px 0 0; font-size:11px; }

/* ── (Chunk 1) Beschwören/Glücksrad/Schicksal: die Summon-/Zieh-Ergebnisse + Fraktions-Chips hugen im Float-Body. ── */
#seelenrufModal .summon-results{ margin-top:14px; }
#schicksalModal .roster-filter{ margin:0 0 12px; gap:6px; }

/* ── (Asset-Einbau 14.07.) Beschwörungs-Kammer (#seelenrufModal): Szenen-BG CARD-scoped mit Scrim-Gradient
   darüber (Muster 1:1 = #basarModal unten — IN die hug-Card, nicht rahmenfüllend dahinter; §0.6 Szenen-BG-
   Ausnahme). Der Scrim ist an den Enden am dichtesten (Titel oben / win-foot unten) und lässt die Mitte —
   Ritual-Kreis + Lichtschacht — durchscheinen. Reiner CSS-Zusatz, kein Markup-Touch.
   Der untere Riegel (.86/.93) ist GEMESSEN, nicht geraten: über den ausgebrannten Kerzenflammen der Szene fiel die
   11px-Fußnote (--rom-dim) sonst auf 3.7:1 Worst-Pixel-Kontrast (< AA 4.5); mit dem Riegel steht sie bei ≥ 5:1. ── */
#seelenrufModal .rom-modal{
  background:
    linear-gradient(180deg, rgba(13,10,24,.84) 0%, rgba(13,10,24,.56) 30%, rgba(13,10,24,.62) 60%, rgba(13,10,24,.86) 80%, rgba(13,10,24,.93) 100%),
    url("/ui/assets/scene/beschwoerung_bg.webp") center 42% / cover no-repeat,
    var(--void-1); }

/* ── (Chunk 1) Basar (#basarModal): Szenen-BG CARD-scoped (IN die hug-Card, NICHT rahmenfüllend dahinter —
   sonst öffnet der BG den Void wieder; §0.6 dokumentierte Szenen-BG-Ausnahme). 2-Spalten-Grid hugt die Karten. ── */
#basarModal .rom-modal{
  background:
    linear-gradient(180deg, rgba(13,10,24,.74) 0%, rgba(13,10,24,.40) 26%, rgba(13,10,24,.44) 60%, rgba(13,10,24,.82) 100%),
    url("/ui/assets/scene/basar_bg.webp") center 30% / cover no-repeat,
    var(--void); }
#basarModal .basar-grid{ margin:0; }

/* ══ (Glücksrad-Ansicht 14.07.) #gluecksradModal — Rad + Croupier + Chancen. Rahmen 20:9-GELOCKT (Muster =
   #territoriumModal), Szenen-BG card-scoped mit Scrim-Gradient (Muster = #basarModal, damit Text lesbar bleibt).
   Die Bühne skaliert über EINE Größe: --gr-s = Scheiben-Durchmesser (aus der 20:9-Rahmenhöhe abgeleitet,
   nie aus vh — sonst sprengt das Fenster den Geräterahmen). ══ */
#gluecksradModal .rom-modal{ width:min(94vw,840px); height:auto; aspect-ratio:20/9;
  max-height:calc(min(97vw,960px) * 9 / 20 - 6px); padding:14px 16px 12px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(13,10,24,.80) 0%, rgba(13,10,24,.44) 30%, rgba(13,10,24,.50) 62%, rgba(13,10,24,.86) 100%),
    url("/ui/assets/scene/gluecksrad_bg.webp") center 46% / cover no-repeat,
    var(--void-1); }
/* Body clippt NICHT (das Wappen ragt über das Scheiben-Quadrat hinaus) — gedeckelt wird am .rom-modal (overflow:hidden). */
#gluecksradModal .rom-float__body{ padding:0; min-height:0; overflow:visible; }
#gluecksradInfo{ height:100%; min-height:0; }
.gr-stage{ --gr-s:clamp(120px, calc((min(94vw,840px) * 9 / 20 - 69px) / 1.15), 272px);  /* Scheiben-Durchmesser; 1.15 = Bildhöhe/Scheibe (Wappen-Überhang) */
  --gr-rho:calc(var(--gr-s) * .28);                                                     /* Panel-Mitten-Radius = 0.56 R (am Asset gemessen) */
  display:flex; align-items:stretch; gap:12px; height:100%; min-height:0; }

/* ── Croupier: steht NEBEN dem Rad (nicht davor), bodenbündig, klebt nicht am Rand ── */
.gr-croupier{ flex:0 0 auto; align-self:flex-end; height:100%; aspect-ratio:716/1088; margin-left:4px;
  background:url("/ui/assets/scene/gluecksrad_figur.webp") center bottom / contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)); pointer-events:none; }

/* ── Das Rad: .gr-wheel ist das QUADRAT der Scheibe (Kante = Durchmesser) -> Mittelpunkt = 50%/50%,
     alles Weitere (Ring, Slot, Marker) dreht/sitzt um genau diesen Punkt. Das Bild wird darin exakt
     ausgerichtet. NACHGEMESSEN am neuen Asset (Sicht-Review 14.07., Strahlen-Kantenfit ueber 60°..300°,
     Wappen-Zone ausgespart, getrimmt; mittl. Residuum 0.5px, schwellen-stabil 64..240):
     649×719-Asset, Scheibe (323.6, 390.9) R=314.0 -> Kante S = 2R = 628.0 Bild-px
       Breite  649/628.0 = 103.34%   Hoehe 719/628.0 = 114.49%
       links   0.5 - 323.6/628.0 = -1.53%   oben  0.5 - 390.9/628.0 = -12.25%
     (Vorwerte 103.81/115.01/-1.76/-12.89 stammten aus R=312.6/cy=393.2 — Scheibenmitte sass ~1px zu tief.) ── */
.gr-wheelwrap{ flex:0 0 auto; display:flex; align-items:flex-end; justify-content:center; width:var(--gr-s); }
.gr-wheel{ position:relative; flex:none; width:var(--gr-s); height:var(--gr-s); }
.gr-wheel__img{ position:absolute; width:103.34%; height:114.49%; left:-1.53%; top:-12.25%;
  pointer-events:none; user-select:none; filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); }
/* Gewinn-Fenster auf 12 Uhr (unter dem Wappen) — steht STILL, markiert das Feld, das gelesen wird */
.gr-slot{ position:absolute; left:50%; top:50%; width:26%; height:29%; border-radius:13px;
  transform:translate(-50%,-50%) translateY(calc(var(--gr-rho) * -1));
  border:1px solid color-mix(in srgb, var(--rom-gold-bright) 60%, transparent);
  box-shadow:0 0 20px -4px var(--rom-glow), inset 0 0 16px -6px var(--rom-glow); }
/* Der feste Zeiger: sitzt unter dem Wappen-Stein auf 12 Uhr, zeigt nach INNEN. Steht AUSSERHALB von .gr-ring. */
.gr-marker{ position:absolute; left:50%; top:1%; width:0; height:0; transform:translateX(-50%);
  border-left:9px solid transparent; border-right:9px solid transparent; border-top:13px solid var(--rom-gold-bright);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.8)); }

/* ── Der Preis-Ring: DAS ist das Drehende (das Rad-Bild steht). Landung immer auf einem 45°-Vielfachen
     -> jedes Label sitzt am Ende wieder exakt in einem Panel.
     🔒 RADIAL (Waldemar 14.07.): die Labels stehen NICHT aufrecht, sie stehen in der BLICKRICHTUNG ihres
     Feldes — das Segment traegt sein Label ohne Gegenrotation (Feld-Winkel = Label-Winkel, wie am echten
     Glücksrad). Die Gegenrotation (frueher .gr-seg__in + Inline-Transform in grSpin) ist ersatzlos raus.
     Weil die Landung immer ein 45°-Vielfaches ist, steht das GELESENE Feld auf 12 Uhr am Ende bei 0°
     (aufrecht unter dem Wappen), alle anderen exakt im Winkel ihres Feldes. ── */
.gr-ring{ position:absolute; inset:0; transform:rotate(0deg); transform-origin:50% 50%; will-change:transform; }
.gr-seg{ position:absolute; left:50%; top:50%; width:23%; height:26%; display:grid; place-items:center;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--gr-rho) * -1)); }
.gr-seg__in{ display:flex; align-items:center; justify-content:center; gap:calc(var(--gr-s) * .02); }
/* Preis = EIN Stapel: grosses Ressourcen-Symbol (die 8 Innen-Panels sind aus dem Asset raus, die Flaeche
   gehoert jetzt dem Symbol) + kleine Menge, leicht UEBERLAPPEND auf dem Symbol (Stack-Zahl, kein Feld). */
.gr-prize{ position:relative; display:grid; place-items:center; }
/* Symbol: 15.5% des Scheiben-Durchmessers (passt in den 45°-Sektor: bei rho=0.56R sind 0.232·S Sehne frei),
   mit Boden 20px — auf 390px klemmt --gr-s auf sein Minimum (120px), rein proportional waere das zu klein. */
.gr-prize .cur-ic{ display:block; width:clamp(20px, calc(var(--gr-s) * .155), 44px); height:clamp(20px, calc(var(--gr-s) * .155), 44px);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.75)); }
/* Menge: ueberlappend auf der unteren rechten Symbol-Ecke (Offsets in % der Symbol-Box -> folgen dem Clamp).
   (30.07., Waldemar „sehe noch die alte Darstellung") DIE MENGE IST DER UNTERSCHIED: drei der acht Preise teilen
   sich ein Symbol (Splitter 10/25, Chaos 6/18, Diamanten 10/40) — bei 8,5 px Stack-Zahl las sich das Rad weiter als
   „derselbe Preis mehrfach". Zahl deutlich groesser (Boden 12 px statt 8,5, Faktor .046 -> .075), mit Muenz-Plakette
   (deckender Grund + goldener Rand) statt weichem Verlauf, damit sie auf dem Rad-Bild ueberhaupt Kante hat. */
.gr-prize .num{ position:absolute; right:-14%; bottom:-11%; min-width:1.5em; padding:.05em .3em; border-radius:999px; text-align:center;
  background:color-mix(in srgb, var(--rom-black) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--rom-gold-bright) 62%, transparent);
  box-shadow:0 1px 4px rgba(0,0,0,.75);
  font-family:var(--f-display); font-size:clamp(12px, calc(var(--gr-s) * .075), 19px); line-height:1.2;
  color:var(--rom-gold-bright); text-shadow:0 1px 2px rgba(0,0,0,.95); font-variant-numeric:tabular-nums; }
/* Die Chancen-Liste hat dasselbe Lese-Problem (8 Zeilen, 3 doppelte Symbole) -> Menge dort ebenfalls klar lesbar. */
.gr-odd__p b.num{ font-family:var(--f-display); font-size:13px; color:var(--rom-gold-bright); font-variant-numeric:tabular-nums; }
.gr-seg--jackpot .gr-seg__in{ filter:drop-shadow(0 0 7px var(--rom-glow)); }               /* seltenster Preis (aus CONFIG) */
/* Gewinn-Puls: animiert NUR filter (das transform gehoert dem Feld-Winkel) */
.gr-seg--win .gr-seg__in{ animation:gr-win 1.1s ease-out 2; }
@keyframes gr-win{ 0%,100%{ filter:drop-shadow(0 0 2px transparent); } 45%{ filter:drop-shadow(0 0 12px var(--rom-gold-bright)); } }

/* ── Rechte Spalte: Bestand · CTAs · Ergebnis · Chancen. Nur DIESE Spalte scrollt (Rahmen bleibt 20:9). ── */
.gr-side{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; overflow-y:auto; padding-right:2px; }
.gr-meta{ display:flex; align-items:center; gap:5px 10px; flex-wrap:wrap; flex:none; font-size:12.5px; color:var(--rom-ink);
  padding-bottom:7px; border-bottom:1px solid color-mix(in srgb, var(--rom-gold) 40%, transparent); }
.gr-meta .muted{ color:var(--rom-dim); }
.gr-meta .num{ font-variant-numeric:tabular-nums; }
.gr-cta{ display:flex; gap:8px; flex-wrap:wrap; flex:none; }
.gr-cta .rom-btn{ flex:0 0 auto; width:auto; min-width:0; padding:9px 15px; min-height:40px; font-size:13px;   /* ≥40px Touch (§7) */
  display:inline-flex; align-items:center; gap:6px; }
.gr-cta .cur-ic{ width:14px; height:14px; }
.gr-result{ flex:none; min-height:44px; display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:7px 11px; border-radius:11px; border:1px solid var(--line-2);
  background:linear-gradient(180deg, color-mix(in srgb, var(--arcane) 10%, rgba(8,6,14,.5)), rgba(8,6,14,.6)); }
.gr-result__idle{ font-size:11.5px; line-height:1.4; color:var(--rom-dim); }
.gr-result__t{ font-family:var(--f-display); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--rom-dim); }
.gr-result__v{ display:flex; align-items:center; gap:4px 10px; flex-wrap:wrap; font-size:15px; color:var(--rom-gold-bright); }
.gr-result__v .cur-ic{ width:19px; height:19px; }
.gr-result__v .num{ font-variant-numeric:tabular-nums; }

/* ══ CHANCEN-BLOCK (Ehrlichkeit; Sign-off offen) — sauber entfernbar: dieser CSS-Abschnitt + gluecksradOdds()
   in main.ts + der eine Aufruf in gluecksradShell(). 8 gleich große Felder ≠ 12,5 % je Preis. ══ */
.gr-odds{ flex:none; padding:7px 10px 6px; border-radius:11px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,6,14,.46), rgba(8,6,14,.60)); }
.gr-odds__t{ font-family:var(--f-display); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--rom-gold); margin-bottom:4px; }
.gr-odds__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.gr-odds__list li{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--rom-ink); }
.gr-odds__list .gr-odd--top{ color:var(--rom-gold-bright); }
.gr-odd__p{ display:flex; align-items:center; gap:4px; }
.gr-odd__p .cur-ic{ width:14px; height:14px; }
.gr-odd__c{ font-variant-numeric:tabular-nums; color:var(--rom-dim); }
.gr-odd--top .gr-odd__c{ color:var(--rom-gold-bright); }
.gr-odds__note{ margin:4px 0 0; font-size:9.5px; line-height:1.35; color:var(--rom-dim); }
/* ══ /CHANCEN-BLOCK ══ */

/* Schmaler Rahmen (Phone quer): die rechte Spalte kompakt, damit sie ohne Scrollen in den 20:9-Rahmen passt.
   Touch-Ziele (40px) bleiben unangetastet — gespart wird nur an Abstaenden/Schriftgraden. */
@media (max-width:900px){
  .gr-side{ gap:5px; }
  .gr-meta{ font-size:12px; padding-bottom:6px; }
  .gr-result{ min-height:38px; padding:6px 10px; }
  .gr-result__v{ font-size:14px; }
  .gr-odds{ padding:6px 9px 5px; }
  .gr-odds__t{ margin-bottom:3px; }
  .gr-odds__list{ gap:1px; }
  .gr-odds__list li{ font-size:10.5px; }
  .gr-odds__note{ margin-top:3px; font-size:9px; }
}
/* Kurzer Rahmen (Hochkant-Phone / sehr schmale Viewports): der Croupier weicht, Rad + Bedienung bleiben. */
@media (max-width:620px){ .gr-croupier{ display:none; } .gr-stage{ gap:10px; } }
@media (prefers-reduced-motion:reduce){ .gr-seg--win .gr-seg__in{ animation:none; } }

/* ══ (P1d-UI 17.07.) PROZESSION DER FRAKTIONEN ═══════════════════════════════════════════════════════════
   GALERIE (#prozessionModal): 20:9-GELOCKTE Szenen-Karte (🔒 Fenster-Standard width:min(97vw,960px), Muster =
   #gluecksradModal), BG card-scoped mit Scrim-Gradient (Basar-Muster §2.3: oben+unten dicht — Kopfzeile/Leiste —
   Mitte durchscheinend fürs Portal-Band). GRACEFUL FALLBACK: fehlt prozession_bg.webp, trägt der Scrim über
   var(--void-1) + Arkan-Radial (CSS-url()-404 = kein Broken-Image; Seam = Datei-Konvention Prompt-Doc §4).
   Die BÜHNE (.proz-stage) liegt absolut über der GANZEN Modal-Box -> %-Koordinaten == BG-Box-Koordinaten. ── */
#prozessionModal .rom-modal{ --proz-w:min(97vw,960px); width:min(97vw,960px); aspect-ratio:20/9; height:auto;
  max-height:100%; padding:12px 14px 0; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(13,10,24,.80) 0%, rgba(13,10,24,.30) 22%, rgba(13,10,24,.24) 58%, rgba(13,10,24,.86) 100%),
    radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--arcane) 9%, transparent), transparent 72%),
    url("/ui/assets/scene/prozession_bg.webp") center / cover no-repeat,
    var(--void-1); }
#prozessionModal .rom-float__body{ padding:0; overflow:hidden; min-height:0; }        /* die Bühne verlässt den Body — nichts scrollt (die Szene ist die Ansicht) */
#prozessionModal .rom-panel__title{ position:relative; z-index:4; pointer-events:none; } /* Titel über den Portalen, klick-durchlässig (Header-Standard: mittig, X→Hub) */
/* (Bug-Fix Playtest) X in die Header-Schicht heben — wie ‹ (.rom-float__back z:3) + Titel (z:4). Der Standard-X liegt
   sonst z:auto UNTER der z:1-Bühne; die Bühne ist zwar pointer-events:none (X scheint durch), aber der volle
   .proz-locked-Layer (inset:0, pointer-events:auto) im Sperr-Zustand fing den X-Klick ab → X tot. Über der Bühne ist er frei. */
#prozessionModal .lu-close{ z-index:4; }
.proz-stage{ position:absolute; inset:0; z-index:1; pointer-events:none; }             /* Bühne = Modal-Box = BG-Box (1:1-Koordinaten) */
.proz-locked{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:auto; padding:20px; text-align:center; }

/* ── Portal-Hotspot: 6 uniforme Boxen im Mittelband (~y 27–87 %); x = Portal-Mitte (PROZ_PORTAL_X, main.ts).
   Klickfläche = die ganze Box; Seiten-Sprung-Guard wie #87f (globales button:hover darf die Zentrierung nicht kapern). ── */
.proz-node{ position:absolute; left:var(--x,50%); top:57%; width:11.5%; height:60%;
  transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer;
  padding:0; border:none; background:none; box-shadow:none; color:var(--ink); font:inherit; }
.proz-stage .proz-node:hover, .proz-stage .proz-node:focus-visible{ transform:translate(-50%,-50%); box-shadow:none; z-index:20; }
.proz-node:focus{ outline:none; }
.proz-node:focus-visible{ outline:none; z-index:20; }
/* Fraktions-Glow = CSS-Schicht ÜBER dem neutralen Portal (Variante A, Prompt-Doc §1.2) — EINE Farbwahrheit:
   --el kommt aus ELEM (main.ts) und zeigt auf die tokens.css-Fraktions-Token. Spitzbogen-Näherung per radius. */
.proz-node__glow{ position:absolute; inset:0; border-radius:50% 50% 5% 5% / 32% 32% 4% 4%;
  background:radial-gradient(58% 70% at 50% 60%, color-mix(in srgb, var(--el) 46%, transparent), color-mix(in srgb, var(--el) 16%, transparent) 56%, transparent 80%);
  mix-blend-mode:screen; opacity:.8; transition:opacity .18s, filter .18s; pointer-events:none; }
.proz-node:hover .proz-node__glow, .proz-node:focus-visible .proz-node__glow{ opacity:1;
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--el) 40%, transparent)); }
.proz-node--off .proz-node__glow{ opacity:0; }                                          /* gesperrt (kein Held der Fraktion): Portal bleibt unbeleuchtet */
.proz-node--off:hover .proz-node__glow, .proz-node--off:focus-visible .proz-node__glow{ opacity:.22; }
.proz-node--done .proz-node__glow{ opacity:.55; }                                       /* vollendet: Glow weicht dem Gold-Ring */
.proz-node--done::after{ content:""; position:absolute; inset:1.5%; border-radius:50% 50% 5% 5% / 32% 32% 4% 4%;
  border:2px solid color-mix(in srgb, var(--gold-bright) 75%, transparent);
  box-shadow:0 0 14px -3px var(--gold), inset 0 0 18px -8px var(--gold-bright); pointer-events:none; }

/* ── Plaque (Name · Fortschritt · Mini-Bar) — sitzt am Portal-Fuß, klick-durchlässig (der ganze Button klickt). ── */
.proz-node__plaque{ position:absolute; left:50%; bottom:2.5%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:3px 9px 5px; border-radius:9px; white-space:nowrap;
  background:rgba(8,6,14,.88); border:1px solid color-mix(in srgb, var(--el) 52%, rgba(255,255,255,.07));
  pointer-events:none; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.proz-node__head{ display:flex; align-items:center; gap:4px; }
.proz-node__sig{ display:inline-flex; width:clamp(10px, calc(var(--proz-w) * .014), 14px); color:var(--el); }
.proz-node__sig svg{ width:100%; height:auto; }
.proz-node__n{ font-family:var(--f-display); font-size:clamp(9.5px, calc(var(--proz-w) * .0145), 12.5px); letter-spacing:.04em;
  color:var(--gold-bright); text-shadow:0 1px 3px #000; }
.proz-node__s{ font-size:clamp(8px, calc(var(--proz-w) * .0118), 10.5px); line-height:1.2; color:var(--dim); }
.proz-node__s .num{ color:var(--ink); }
.proz-node__bar{ width:100%; height:3px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.10); }
.proz-node__bar > span{ display:block; height:100%; border-radius:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--el) 80%, transparent), var(--el)); }
.proz-node--off .proz-node__n{ color:var(--dim); }
.proz-node--done .proz-node__n{ color:var(--gold-bright); }
.proz-node--done .proz-node__s{ color:var(--gold); }
.proz-node--done .proz-node__bar > span{ background:linear-gradient(90deg, var(--gold), var(--gold-bright)); }

/* ── Rosette (Meilenstein-Erzähler, oberes Drittel Mitte — Zone bleibt frei, NUR der eingelöste Lift legt den Schein) ── */
.proz-rose{ position:absolute; left:50%; top:0; width:30%; aspect-ratio:2/1; transform:translate(-50%,-18%);
  background:radial-gradient(closest-side at 50% 55%, color-mix(in srgb, var(--gold-bright) 30%, transparent), transparent 74%);
  mix-blend-mode:screen; pointer-events:none; animation:proz-rose 3.4s ease-in-out infinite alternate; }
@keyframes proz-rose{ from{ opacity:.5; } to{ opacity:.95; } }
@media (prefers-reduced-motion:reduce){ .proz-rose{ animation:none; opacity:.8; } }

/* ── Fortschritts-Leiste (Zonen-Plan ~85–100 %: Tickets · Gesamt · Meilenstein) ── */
.proz-hud{ position:absolute; left:10px; right:10px; bottom:8px; z-index:12; pointer-events:auto;
  display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; padding:7px 12px; border-radius:11px;
  background:linear-gradient(180deg, rgba(13,10,24,.82), rgba(8,6,14,.94)); border:1px solid color-mix(in srgb,var(--gold) 24%, var(--line));
  font-size:clamp(10.5px, calc(var(--proz-w) * .0135), 12.5px); color:var(--ink); }
.proz-mile{ margin-left:auto; color:var(--dim); text-align:right; }
.proz-mile--done{ color:var(--gold-bright); }
@media (max-width:640px){ .proz-hud{ left:6px; right:6px; bottom:5px; gap:4px 10px; padding:5px 9px; } }

/* ── PFAD-UNTERFENSTER (#prozessionPfadModal): normales wide-Float, Korridor-BG je Fraktion via [data-el]
   (Datei-Konvention prozession_pfad_<el>.webp; ohne data-el/Datei bleibt der Gradient-Fallback — kein Broken-Image).
   Backdrop trägt die Galerie (#86-Muster) -> der Pfad liegt optisch AUF der Prozession, nicht auf dem Hub. ── */
#prozessionPfadModal .lu-backdrop{ backdrop-filter:none;
  background:
    linear-gradient(180deg, rgba(11,8,20,.88), rgba(11,8,20,.78)),
    url("/ui/assets/scene/prozession_bg.webp") center / cover no-repeat,
    var(--void-1); }
#prozessionPfadModal .rom-modal{
  background:
    linear-gradient(180deg, rgba(13,10,24,.88) 0%, rgba(13,10,24,.60) 30%, rgba(13,10,24,.64) 62%, rgba(13,10,24,.93) 100%),
    var(--ppbg, linear-gradient(var(--void-1), var(--void-1))) center / cover no-repeat,
    var(--void-1); }
#prozessionPfadModal[data-el="feuer"] .rom-modal{ --ppbg:url("/ui/assets/scene/prozession_pfad_feuer.webp"); }
#prozessionPfadModal[data-el="natur"] .rom-modal{ --ppbg:url("/ui/assets/scene/prozession_pfad_natur.webp"); }
#prozessionPfadModal[data-el="wasser"] .rom-modal{ --ppbg:url("/ui/assets/scene/prozession_pfad_wasser.webp"); }
#prozessionPfadModal[data-el="licht"] .rom-modal{ --ppbg:url("/ui/assets/scene/prozession_pfad_licht.webp"); }
#prozessionPfadModal[data-el="schatten"] .rom-modal{ --ppbg:url("/ui/assets/scene/prozession_pfad_schatten.webp"); }
#prozessionPfadModal[data-el="verfall"] .rom-modal{ --ppbg:url("/ui/assets/scene/prozession_pfad_verfall.webp"); }
.pp-body{ display:flex; flex-direction:column; gap:8px; }
.pp-sect{ font-family:var(--f-display); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--gold); }
.pp-note{ font-family:var(--f-body, inherit); font-size:10px; letter-spacing:.02em; text-transform:none; color:var(--dim); }
.pp-rewards{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; font-size:12.5px; }
.pp-fodder{ color:var(--gold-bright); }
.pp-fighters{ display:flex; gap:6px 8px; flex-wrap:wrap; }
.pp-fighter{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--el) 14%, rgba(8,6,14,.6)), rgba(8,6,14,.72));
  border:1px solid color-mix(in srgb, var(--el) 45%, transparent); }
.pp-fighter__sig{ display:inline-flex; width:12px; color:var(--el); }
.pp-fighter__sig svg{ width:100%; height:auto; }
.pp-warn{ margin:0; padding:6px 10px; border-radius:9px; font-size:11.5px; color:var(--feuer);
  border:1px solid color-mix(in srgb, var(--feuer) 40%, transparent); background:color-mix(in srgb, var(--feuer) 9%, rgba(8,6,14,.55)); }

/* Schmaler Rahmen (Portrait ~390px -> Szene nur ~362×163): dieselbe Hausregel wie die Gilden-Szene (Zeile ~1110) —
   Namen weichen in den title-Tooltip, Plaque rückt vom Portal-Fuß hoch (die HUD-Leiste braucht die Bodenzone),
   HUD kompakt (Gesamt-Zähler weicht, Meilenstein klein). Landscape (~844×390) fällt NICHT hierunter -> volle Ansicht. */
@media (max-width:640px){
  .proz-node__n{ display:none; }
  .proz-node__bar{ display:none; }                                      /* der X/20-Text trägt den Fortschritt allein */
  .proz-node__plaque{ bottom:18%; padding:2px 6px 3px; gap:1px; }
  .proz-hud{ left:6px; right:6px; bottom:5px; gap:3px 10px; padding:4px 8px; }
  .proz-hud > span:nth-child(2){ display:none; }                        /* "Stufen gesamt" weicht aus Platzgründen */
  .proz-mile{ font-size:9px; flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* basis 0 -> wickelt nie um: HUD bleibt EINE flache Zeile, Plaques frei */
}
/* ══ /PROZESSION ══ */

/* ══ HALLE DES BUNDES (#gildeMembershipModal) — Umbau 2026-07-14 (Waldemar-Spec) ═══════════════════════
   VORHER: schmales M-Float (der alte Kommentar sagte wörtlich "480 zu schmal für 2 Spalten") -> die zwei
   Panels stapelten übereinander. JETZT: der VOLLE Standard-Rahmen, damit die Spalten nebeneinander passen.
   🔒 LOCK "Fenster nie größer als Standard": min(97vw,960px) + aspect-ratio 20/9 IST der Standard-Geräte-
   rahmen — "deutlich breiter" heißt hier auf den Rahmen HOCH, NICHT darüber hinaus. Nur die inneren Listen
   scrollen, nie das Fenster. ── */
#gildeMembershipModal .rom-modal{ width:min(97vw, 960px); aspect-ratio:20/9; max-height:93vh; }
/* (MP-3) Host auf volle Body-Höhe klemmen -> erst dadurch löst `.gilde-two{height:100%}` gegen einen
   DEFINITEN Wert auf, und die inneren Scroll-/Shrink-Zonen (Ankündigung, Mitgliederliste) greifen wirklich.
   Ohne den Klemm-Wert wuchs der Host mit dem Inhalt und schob den Gildenbasis-CTA aus dem 20:9-Rahmen
   (sichtbar geworden durch den neuen Online-Bundboss-Kurzstand). */
#gildeMembershipModal .gilde-membership{ margin:0; height:100%; min-height:0; }
#gildeMembershipModal .rom-float__body{ min-height:0; overflow:hidden; }   /* scrollen tun die Listen, nicht der Rahmen */

/* ── MITGLIED: links Mitglieder-Verwaltung (breit) · rechts hochkant die Gilden-Infos (Waldemar-Spec) ── */
#gildeMembershipModal .gilde-two{ display:grid; grid-template-columns:1fr minmax(220px, 300px); gap:14px;
  align-items:stretch; height:100%; min-height:0; }
#gildeMembershipModal .gilde-memberpanel{ order:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
#gildeMembershipModal .gilde-idpanel{ order:2; min-width:0; min-height:0; display:flex; flex-direction:column; gap:10px; }
#gildeMembershipModal .gilde-members{ flex:1 1 auto; min-height:0; overflow-y:auto; }   /* nur DIESE Liste scrollt */
/* (2026-07-16) Gildenbasis-CTA klipp-fest: Identität, Ruhm & CTA sind flex:none — der CTA (`.gilde-terr`, DOM-Reihenfolge
   VOR der Ankündigung) kann nie unter den 20:9-Rahmen rutschen. Läuft der Inhalt über, scrollt NUR die Ankündigung. */
#gildeMembershipModal .gilde-idpanel > *{ flex:none; }
#gildeMembershipModal .gilde-idpanel .gilde-anno{ flex:0 1 auto; min-height:0; overflow-y:auto; }
@media (max-width:720px){ /* eng: zurück auf gestapelt — zwei Spalten wären hier unlesbar */
  #gildeMembershipModal .rom-modal{ aspect-ratio:auto; height:auto; }
  #gildeMembershipModal .gilde-two{ grid-template-columns:1fr; height:auto; }
  #gildeMembershipModal .gilde-idpanel{ order:1; } #gildeMembershipModal .gilde-memberpanel{ order:2; }
}

/* ── OHNE GILDE: die Halle mit zwei Reitern (Beitreten | Gründen) ────────────────────────────────── */
.gilde-halle{ display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; }
.gilde-halle__body{ flex:1 1 auto; min-height:0; overflow-y:auto; }         /* nur der Reiter-Inhalt scrollt */
/* Die Reiter sitzen in der KOPFLEISTE — Gold nur hier (Hub-Anker: Gold an EINER Stelle, sonst wird es Kitsch). */
.gilde-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:none; }
.gilde-tab{ padding:9px 12px; border-radius:10px; cursor:pointer; color:var(--dim); font:inherit;
  font-family:var(--f-display); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line-2); background:rgba(8,6,14,.42); transition:color .14s, border-color .14s, box-shadow .14s; }
.gilde-tab:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
.gilde-tab.on{ color:var(--gold-bright); border-color:color-mix(in srgb, var(--gold) 65%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--arcane) 14%, rgba(8,6,14,.42)), rgba(8,6,14,.55));
  box-shadow:0 0 20px -12px var(--rom-glow) inset; }         /* Glühen von HINTEN durch den Rahmen (Hub-Anker) */
.gilde-tab:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

/* ══ (MP-4 Conquest) „Eroberung" — Zugangs-Kachel + Karten-Fenster ══════════════════════════════════════
   🔒 LOCK "Fenster nie größer als Standard": Voll-Rahmen min(97vw,960px) + aspect-ratio 20/9; NUR die Gebiets-
   Liste scrollt (.conq-list), nie das Fenster. Token-getrieben (Element-Farben via --el; kein Inline-Hex). */
/* Zugangs-Kachel im Mitglieder-Panel (spiegelt .gilde-terr — der Gildenbasis-CTA) */
.gilde-conquest{ position:relative; display:flex; align-items:center; gap:11px; width:100%; flex:none; margin-bottom:8px;
  padding:9px 12px; border-radius:10px; cursor:pointer; text-align:left; color:var(--ink); font:inherit;
  background:linear-gradient(180deg, color-mix(in srgb, var(--feuer) 12%, rgba(8,6,14,.42)), rgba(8,6,14,.5));
  border:1px solid color-mix(in srgb, var(--feuer) 32%, var(--line)); transition:border-color .14s, box-shadow .14s; }
.gilde-conquest:hover{ border-color:color-mix(in srgb, var(--feuer) 60%, transparent); box-shadow:0 0 22px -12px var(--feuer); }
.gilde-conquest:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.gilde-conquest__ic{ flex:none; width:26px; height:26px; color:var(--feuer); }
.gilde-conquest__ic svg{ width:100%; height:100%; }
.gilde-conquest__tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.gilde-conquest__t{ font-family:var(--f-display); font-size:13px; letter-spacing:.03em; color:var(--gold-bright); }
.gilde-conquest__s{ font-size:11px; color:var(--dim); }
.gilde-conquest__go{ margin-left:auto; color:var(--dim); font-size:18px; }
/* Fenster-Rahmen (Voll-Standard) + innere Scroll-Zone */
#conquestModal .rom-modal{ width:min(97vw, 960px); aspect-ratio:20/9; max-height:93vh; }
#conquestModal .rom-float__body{ min-height:0; overflow:hidden; }             /* scrollen tut die Liste, nicht der Rahmen */
#conquestModal .conquest{ margin:0; height:100%; min-height:0; }
.conq{ display:flex; flex-direction:column; height:100%; min-height:0; gap:11px; }
.conq-head{ flex:none; display:flex; flex-direction:column; gap:7px; }
.conq-score{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.conq-score__item{ display:flex; flex-direction:column; gap:2px; align-items:center; padding:8px 6px; border-radius:10px;
  background:rgba(8,6,14,.42); border:1px solid var(--line); }
.conq-score__k{ font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--dim); text-align:center; }
.conq-score__v{ font-size:17px; color:var(--gold-bright); }
.conq-sub{ font-size:11.5px; line-height:1.4; margin:0; }
.conq-sub b{ color:var(--ink); }
.conq-list{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:9px; padding-right:2px; }
.conq-empty{ text-align:center; font-size:12px; line-height:1.6; padding:20px 12px; margin:0; }
/* Gebiets-Karte */
.conq-terr{ display:flex; flex-direction:column; gap:7px; padding:10px 12px; border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--indigo-2) 60%, transparent), color-mix(in srgb, var(--void) 66%, transparent));
  border:1px solid var(--line); }
.conq-terr.is-mine{ border-color:color-mix(in srgb, var(--natur) 40%, var(--line)); }
.conq-terr__head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.conq-terr__name{ font-family:var(--f-display); font-size:14px; color:var(--ink); }
.conq-tier{ font-size:10px; letter-spacing:.04em; color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius:6px; padding:1px 6px; margin-left:4px; vertical-align:middle; }
.conq-owner{ font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:8px; }
.conq-owner--mine{ color:var(--natur); border:1px solid color-mix(in srgb, var(--natur) 45%, transparent); }
.conq-owner--enemy{ color:var(--feuer); border:1px solid color-mix(in srgb, var(--feuer) 45%, transparent); }
.conq-owner--neutral{ color:var(--dim); border:1px solid var(--line); }
.conq-terr__val{ margin-left:auto; font-size:11.5px; white-space:nowrap; }
/* Halt-Balken (control) */
.conq-ctrl{ display:flex; align-items:center; gap:9px; }
.conq-ctrl__bar{ flex:1 1 auto; height:7px; border-radius:5px; background:rgba(0,0,0,.42); border:1px solid var(--line); overflow:hidden; }
.conq-ctrl__bar i{ display:block; height:100%; border-radius:5px 0 0 5px; transition:width .35s ease; }
.conq-ctrl__n{ flex:none; font-size:11px; white-space:nowrap; }
/* Slot-Reihe */
.conq-slots{ display:flex; flex-direction:column; gap:5px; }
.conq-slot{ display:flex; align-items:center; gap:8px; padding:6px 9px; border-radius:9px; background:rgba(8,6,14,.4); border:1px solid var(--line); }
.conq-slot.is-cd{ opacity:.6; }
.conq-slot__ix{ flex:none; font-size:11px; width:22px; }
.conq-slot__st{ flex:none; font-size:11px; padding:1px 8px; border-radius:7px; }
.conq-slot__st--ghost{ color:var(--dim); border:1px solid var(--line); }
.conq-slot__st--held{ color:var(--ink); border:1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.conq-slot__st--cd{ color:var(--dim); border:1px dashed var(--line); }
.conq-defs{ display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; min-width:0; }
.conq-def{ display:inline-grid; place-items:center; width:16px; height:16px; color:var(--el, var(--gold)); }
.conq-def svg{ width:100%; height:100%; }
.conq-btn{ margin-left:auto; flex:none; min-height:34px; padding:5px 14px; border-radius:9px; cursor:pointer; font:inherit; font-size:12px;
  color:var(--ink); border:1px solid var(--line); background:rgba(8,6,14,.5); transition:border-color .12s, box-shadow .12s; }
.conq-btn:hover:not(:disabled){ box-shadow:0 0 18px -10px var(--rom-glow); }
.conq-btn:disabled{ opacity:.45; cursor:not-allowed; }
.conq-btn--atk{ color:var(--feuer); border-color:color-mix(in srgb, var(--feuer) 45%, transparent); }
.conq-btn--garr{ width:100%; margin:2px 0 0; min-height:40px; color:var(--natur); border-color:color-mix(in srgb, var(--natur) 45%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--natur) 16%, transparent), rgba(8,6,14,.3)); }
.conq-terr__foot{ display:flex; }
@media (max-width:720px){
  #conquestModal .rom-modal{ aspect-ratio:auto; height:auto; max-height:93vh; }
  .conq-btn, .conq-btn--atk{ min-height:40px; }        /* Touch-Ziel ≥40px (Mobil-Lock) */
  .conq-slot{ flex-wrap:wrap; }
}

/* ── Reiter „Beitreten": Suche · Trenner · Vorschläge ─────────────────────────────────────────────── */
.gilde-join{ display:flex; flex-direction:column; gap:9px; }
.gilde-such-lbl,.gilde-f-lbl{ font-family:var(--f-display); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-bright); }
.gilde-such-row{ display:flex; gap:8px; align-items:center; }
.gilde-such-input{ flex:1 1 auto; min-width:0; padding:9px 11px; border-radius:9px; color:var(--ink); font:inherit;
  border:1px solid var(--line-2); background:rgba(8,6,14,.5); }
.gilde-such-input:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
.gilde-such-btn{ flex:none; min-height:40px; padding:0 16px; border-radius:9px; cursor:pointer; font:inherit; color:var(--ink);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); background:rgba(8,6,14,.55); }
.gilde-such-btn:hover{ color:var(--gold-bright); box-shadow:0 0 20px -12px var(--rom-glow); }
.gilde-suchfehler{ margin:0; font-size:12px; }
.gilde-trenner{ height:1px; margin:3px 0 1px; background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); flex:none; }
.gilde-vor-head{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--f-display); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-bright); }
.gilde-vor-list{ display:flex; flex-direction:column; gap:7px; }
.gilde-leer{ margin:6px 0; padding:14px 12px; border-radius:10px; text-align:center; font-size:12.5px; line-height:1.5;
  border:1px dashed var(--line-2); background:rgba(8,6,14,.3); }

/* Eine Gilden-Zeile: Wappen · Name+Daten · Beitreten */
.gilde-row{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px;
  border:1px solid var(--line-2); background:rgba(8,6,14,.42); }
.gilde-row__crest{ flex:none; width:38px; height:38px; display:grid; place-items:center; }
.gilde-row__crest img,.gilde-row__crest .crest-ic{ width:100%; height:100%; object-fit:contain; }
.gilde-row__tx{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.gilde-row__name{ font-family:var(--f-display); font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gilde-row__sub{ font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gilde-row__join{ flex:none; min-height:40px; padding:0 14px; border-radius:9px; cursor:pointer; font:inherit; color:var(--gold-bright);
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent); background:rgba(8,6,14,.55); }
.gilde-row__join:hover:not(:disabled){ box-shadow:0 0 22px -12px var(--rom-glow); }
.gilde-row__join:disabled{ opacity:.45; cursor:not-allowed; color:var(--dim); }
.gilde-treffer{ margin-top:2px; }

/* ── Reiter „Gründen": Name · Wappen-Slot · Erstellen-Feld (Knopf + Preis zusammen) ───────────────── */
.gilde-found{ display:flex; flex-direction:column; gap:9px; }
.gilde-name-input{ align-self:stretch; width:min(100%, 340px); padding:9px 11px; border-radius:9px; color:var(--ink); font:inherit;
  border:1px solid var(--line-2); background:rgba(8,6,14,.5); }
.gilde-name-input:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:1px; }
.gilde-f-wappen{ display:flex; align-items:center; gap:12px; }
/* Der Slot IST der Auslöser für die Wappen-Wahl. Leer = ein Fragezeichen — sichtbar unfertig, damit die
   "Wähle ein Wappen aus"-Meldung nicht aus dem Nichts kommt. */
.gilde-wappen-slot{ flex:none; width:56px; height:56px; padding:0; display:grid; place-items:center; border-radius:12px; cursor:pointer;
  border:1px dashed color-mix(in srgb, var(--gold) 40%, transparent); background:rgba(8,6,14,.5); }/* padding:0 -> UA-Button-Padding schob das Wappen aus der Mitte (2026-07-15) */
.gilde-wappen-slot:hover{ box-shadow:0 0 24px -12px var(--rom-glow); }
.gilde-wappen-slot:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.gilde-wappen-slot.on{ border-style:solid; border-color:color-mix(in srgb, var(--gold) 65%, transparent); }
.gilde-wappen-slot img,.gilde-wappen-slot .crest-ic{ width:44px; height:44px; object-fit:contain; }
.gilde-wappen-leer{ font-family:var(--f-display); font-size:24px; color:var(--gold-dim); }
/* Knopf + Preis GEMEINSAM in einem Feld (Waldemar-Spec) */
.gilde-f-create{ margin-top:3px; padding:11px 12px; border-radius:12px; display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--line-2); background:linear-gradient(180deg, color-mix(in srgb, var(--arcane) 9%, rgba(8,6,14,.42)), rgba(8,6,14,.52)); }
.gilde-f-note{ margin:0; font-size:11.5px; }

/* Wappen-Wahl als eigenes Fenster */
#wappenModal .rom-modal{ width:min(92vw, 560px); aspect-ratio:auto; height:auto; max-height:88vh; padding:20px 22px; }
#wappenModal .gilde-wappen-picker{ display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:9px; margin-top:12px; }
.gilde-wappen-pick{ aspect-ratio:1; display:grid; place-items:center; border-radius:11px; cursor:pointer; padding:6px;
  border:1px solid var(--line-2); background:rgba(8,6,14,.45); }
.gilde-wappen-pick:hover{ border-color:color-mix(in srgb, var(--gold) 50%, transparent); box-shadow:0 0 22px -12px var(--rom-glow); }
.gilde-wappen-pick:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.gilde-wappen-pick.on{ border-color:var(--gold-bright); box-shadow:0 0 26px -10px var(--rom-glow); }
.gilde-wappen-pick img,.gilde-wappen-pick .crest-ic{ width:100%; height:100%; object-fit:contain; }

/* ── (Gilde-Umbau 12.07.) Territorium-Zugang aus der Halle: label-breiter Basis-Button (Gold-Filigran, Magenta-Glow bei Fokus/Dot). ── */
.gilde-terr{ position:relative; display:flex; align-items:center; gap:11px; width:100%; margin-top:4px;
  padding:11px 13px; border-radius:12px; cursor:pointer; text-align:left; color:var(--ink);
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, color-mix(in srgb, var(--arcane) 11%, rgba(8,6,14,.42)), rgba(8,6,14,.52)); }
.gilde-terr:hover{ border-color:color-mix(in srgb, var(--gold) 55%, transparent); box-shadow:0 0 22px -12px var(--rom-glow); }
.gilde-terr:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.gilde-terr__ic{ flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; color:var(--gold-bright);
  border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); background:rgba(8,6,14,.45); }
.gilde-terr__ic svg{ width:20px; height:20px; }
.gilde-terr__tx{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.gilde-terr__t{ font-family:var(--f-display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-bright); }
.gilde-terr__s{ font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gilde-terr__go{ flex:none; font-size:22px; color:var(--gold); line-height:1; padding-right:2px; }
.gilde-terr .collect-dot{ top:8px; right:8px; }

/* ── (Gilden-Szene 14.07.) GILDENBASIS = HOTSPOT-KARTE (Muster = Hub .hubnode): die 6 Bauten + 3 Aktivitäten sitzen als Knoten
   AUF der Szene (gilde_map.webp, 1536×688 ≈ 2.233 : Rahmen 20/9 = 2.222). Die BÜHNE (#territoriumMap) liegt absolut über der
   GANZEN Modal-Box — also exakt über der Hintergrund-Box: --x/--y in Prozent == Bild-Prozent, bei JEDER Fenstergröße (kein
   Header-/Padding-Versatz, kein Drift zwischen Desktop und 390px). Register + Kalibrier-Modus: GILDE_NODES in ui/main.ts.
   BG card-scoped mit GRACEFUL FALLBACK: fehlt das Bild, greift der Scrim über --void-1 + Arkan-Radial — CSS-url()-404 zeigt
   KEIN Broken-Image (§0.6/§2.3). Rahmen bleibt 20:9-gelockt, NICHTS scrollt (die Karte ist die Ansicht). ── */
/* (#85 2026-07-15) Gildenbasis = VOLLBILD-Szene: fuellt den ganzen Geraeterahmen, KEIN Hub dahinter
   (war ein 840px-Fenster, zentriert, mit blurry Hub-Backdrop — „minimiertes Fenster mit Hub im Hintergrund"). */
#territoriumModal.lineup{ padding:0; }                                                  /* randlos bis an die Rahmenkante */
#territoriumModal .lu-backdrop{ background:var(--void-1); backdrop-filter:none; }        /* kein Hub-Durchscheinen mehr */
#territoriumModal .rom-modal{ --gsc-w:min(100vw,960px); width:min(100vw,960px); max-width:none; height:100%; aspect-ratio:auto;
  max-height:100%; padding:12px 14px 0; overflow:hidden; border:0; border-radius:0;
  background:
    linear-gradient(180deg, rgba(13,10,24,.72) 0%, rgba(13,10,24,.26) 28%, rgba(13,10,24,.30) 62%, rgba(13,10,24,.78) 100%),
    radial-gradient(78% 60% at 50% 40%, color-mix(in srgb, var(--arcane) 10%, transparent), transparent 72%),
    url("/ui/assets/scene/gilde_map.webp") center / cover no-repeat,
    var(--void-1); }
#territoriumModal .rom-float__body{ padding:0; overflow:hidden; min-height:0; }        /* die Bühne verlässt den Body (absolut zur .rom-modal) — nichts scrollt */
/* (#86 2026-07-15) Die Gildenbasis-Sub-Fenster (Bundboss/Bauten/Bundshop/Bundkrieg) liegen optisch AUF der
   Gildenbasis-Szene, nicht auf dem durchscheinenden Hub: ihr Backdrop trägt gilde_map + dunklen Scrim
   (die Modal-Karte hebt sich davon ab). So bleibt die Basis der Hintergrund, auch wenn das Territorium-Float schließt. */
#bundbossModal .lu-backdrop, #bundshopModal .lu-backdrop, #bundkriegModal .lu-backdrop{
  backdrop-filter:none;
  background:
    linear-gradient(180deg, rgba(11,8,20,.86), rgba(11,8,20,.74)),
    url("/ui/assets/scene/gilde_map.webp") center / cover no-repeat,
    var(--void-1); }
#territoriumModal .rom-panel__title{ position:relative; z-index:4; pointer-events:none; } /* Titel über den Knoten, aber klick-durchlässig */
.gildenbasis{ position:absolute; inset:0; z-index:1; pointer-events:none; }             /* Bühne = Modal-Box = BG-Box (1:1-Koordinaten) */

/* (#88 2026-07-15, Waldemar) AUSBAU-ÜBERSICHT = Vollbild-LANDKARTE (gilde_ausbau.webp) — dieselbe Mechanik wie die
   Gildenbasis (Silhouette-Hotspots + Namensschilder), aber die 6 Bauten; Klick -> Fuß-Panel (Detail + Ausbauen). */
#gildenGebaeudeModal.lineup{ padding:0; }
#gildenGebaeudeModal .lu-backdrop{ background:var(--void-1); backdrop-filter:none; }
#gildenGebaeudeModal .rom-modal{ --gsc-w:min(100vw,960px); width:min(100vw,960px); max-width:none; height:100%; aspect-ratio:auto;
  max-height:100%; padding:12px 14px 0; overflow:hidden; border:0; border-radius:0;
  background:
    linear-gradient(180deg, rgba(13,10,24,.66) 0%, rgba(13,10,24,.20) 30%, rgba(13,10,24,.34) 60%, rgba(13,10,24,.86) 100%),
    url("/ui/assets/scene/gilde_ausbau.webp") center / cover no-repeat,
    var(--void-1); }
#gildenGebaeudeModal .rom-float__body{ padding:0; overflow:hidden; min-height:0; }
#gildenGebaeudeModal .rom-panel__title{ position:relative; z-index:4; pointer-events:none; }
.gg-stage{ position:absolute; inset:0; z-index:1; pointer-events:none; }                /* Bühne = Modal-Box (1:1-Koordinaten) */
/* Seiten-Sprung-Guard (wie .gildenbasis, #87f): das globale button:hover darf die Zentrier-Transform NICHT kapern. */
.gg-stage .gsc-node:not(.gsc-node--dock):hover,
.gg-stage .gsc-node:not(.gsc-node--dock):focus-visible{ transform:translate(-50%,-50%); box-shadow:none; z-index:20; }
.gg-locked{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:auto; padding:20px; text-align:center; }
/* gewähltes Gebäude: Schild + Silhouette dauerhaft hervorgehoben (Panel zeigt es). */
.gsc-label.gsc-label--sel{ border-color:var(--gold-bright); color:#fff; background:rgba(8,6,14,.30); }
.gsc-node--sel .gsc-node__ic{ background:radial-gradient(ellipse at 50% 56%, color-mix(in srgb, var(--gold-bright) 12%, transparent), transparent 66%);
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--gold-bright) 42%, transparent)); }
/* Fuß-Panel: Baumaterial · Detail des gewählten Gebäudes · Ausbauen */
.gg-panel{ position:absolute; left:10px; right:10px; bottom:8px; z-index:12; pointer-events:auto;
  display:flex; align-items:center; gap:14px; padding:8px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(13,10,24,.80), rgba(8,6,14,.94)); border:1px solid color-mix(in srgb,var(--gold) 24%, var(--line)); }
.gg-panel--empty{ justify-content:space-between; }
.gg-panel__mat{ flex:none; font-size:12px; white-space:nowrap; }
.gg-panel__hint{ flex:1 1 auto; text-align:right; color:var(--dim); font-size:11.5px; }
.gg-panel__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gg-panel__head{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.gg-panel__n{ font-family:var(--f-display); font-size:13px; color:var(--gold-bright); }
.gg-panel__lvl{ font-size:11px; color:var(--dim); }
.gg-panel__bonus{ font-size:10.5px; color:var(--natur); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gg-panel__zweck{ display:block; font-size:9.5px; opacity:.82; line-height:1.3; margin-top:2px; max-width:340px; }   /* (27.07.) Gebäude-Zweck/Ziel — wrappt, kürzer als der Bonus */
.gg-panel__btn{ flex:none; }
@media (max-width:640px){ .gg-panel{ left:6px; right:6px; bottom:5px; gap:8px; padding:6px 9px; } .gg-panel__bonus{ display:none; } }

/* (#87b 2026-07-15, Waldemar) Der Hotspot ist die GANZE Gebäude-BOX, kein runder Kreis: --x/--y = MITTE, --w/--h = Box-Größe
   (% der Szene). Beim Anwählen VERRUTSCHT nichts — die Box bleibt starr auf dem Gebäude (kein transform-Lift), nur die
   Leucht-Zone wird heller. Das Label sitzt absolut in der Box-Mitte (verändert die Box-Geometrie NICHT -> kein Springen). */
.gsc-node{ position:absolute; left:var(--x,50%); top:var(--y,50%); width:var(--w,8%); height:var(--h,14%);
  transform:translate(-50%,-50%);
  pointer-events:none; padding:0; border:none; background:none; box-shadow:none; color:var(--ink); font:inherit; }
/* (#87f 2026-07-15, Waldemar) SEITEN-SPRUNG-FIX — DIE eigentliche Ursache: das globale
   button:hover:not(:disabled){ transform:translateY(-1px); box-shadow:… } (index.html, Spez. 0,2,1) überschrieb
   die Zentrier-Transform der Box (.gsc-node hat KEINE höhere Spez.) -> der Knoten sprang um die halbe Boxbreite
   ZUR SEITE + bekam einen rechteckigen Kasten-Schatten. Fix wie bei den Hub-Knoten (.hub-grid .hubnode:hover):
   mit .gildenbasis-Präfix (Spez. 0,4,0 > 0,2,1) die Zentrierung halten und den Button-Schatten killen. */
.gildenbasis .gsc-node:not(.gsc-node--dock):hover,
.gildenbasis .gsc-node:not(.gsc-node--dock):focus-visible{ transform:translate(-50%,-50%); box-shadow:none; z-index:20; }
.gsc-node:hover{ z-index:20; }
.gsc-node:focus{ outline:none; }
.gsc-node:focus-visible{ outline:none; z-index:20; }                                   /* KEIN rechteckiger Gold-Rahmen mehr — das Gebäude selbst leuchtet (unten) */
/* (#87c) Leucht-Zone = das GEBÄUDE selbst: die Box wird per clip-path grob auf die Gebäude-Silhouette beschnitten
   (--clip aus GILDE_CLIP; ohne clip = abgerundetes Rechteck als Fallback). Beim Anwählen erscheint NICHTS Rechteckiges/
   Verschobenes — die Kontur leuchtet in ihrer eigenen Form auf (drop-shadow folgt der clip-Form, box-shadow/outline nicht). */
/* (#87d 2026-07-15, Waldemar) Das HIT-FELD folgt der Silhouette, nicht dem Rechteck: die Klick-/Hover-Zone sitzt auf der
   clip-path-beschnittenen Leucht-Zone (clip-path beschneidet AUCH das Hit-Testing). Die Box (.gsc-node) ist pointer-events:none,
   nur diese Kontur ist pointer-events:auto -> Hover/Klick lösen NUR über dem Gebäude aus, nicht in der leeren Umgebung. */
.gsc-node__ic{ position:absolute; inset:0; display:block; border-radius:14px; clip-path:var(--clip, none);
  pointer-events:auto; cursor:pointer; background:none;
  transition:background .16s, filter .16s; }
.gsc-node__ic svg{ display:none; }                                                     /* kein Marker-Glyph über dem Gebäude */
/* (#87e/#87g 2026-07-15, Waldemar) Hover/Fokus = DEZENTE, enge Hervorhebung, auf ~50% gedämpft (Silhouette ist grob/
   scharfkantig -> weniger Leuchten fällt weniger auf). Schwacher Flächen-Tint + schmaler Rand-Schein. */
.gsc-node:hover .gsc-node__ic, .gsc-node:focus-visible .gsc-node__ic{
  background:radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--gold-bright) 8%, transparent), transparent 64%);
  filter:drop-shadow(0 0 2px color-mix(in srgb, var(--gold-bright) 24%, transparent)); }
.gsc-node--locked .gsc-node__ic{ background:none; filter:none; }                        /* gesperrt: keine Einlade-Aura */
.gsc-node__t .collect-dot{ position:absolute; top:-5px; right:-5px; }
/* Label-Pille: DECKENDER Scrim (.92) wie die Hub-Labels — mittig auf dem Gebäude, klick-durchlässig (der ganze Button klickt). */
.gsc-node__t{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; padding:2px 8px; border-radius:8px; white-space:nowrap;
  background:rgba(8,6,14,.92); border:1px solid color-mix(in srgb,var(--gold) 34%, rgba(255,255,255,.06));
  box-shadow:0 5px 14px -8px #000; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.gsc-node__n{ font-family:var(--f-display); font-size:clamp(9px, calc(var(--gsc-w) * .0145), 12px); letter-spacing:.03em;
  line-height:1.2; color:var(--gold-bright); text-shadow:0 1px 3px #000; }
.gsc-node__s{ font-size:clamp(8px, calc(var(--gsc-w) * .0122), 10.5px); line-height:1.25; color:var(--dim); }
.gsc-node__s .num{ color:var(--ink); }
/* Gesperrt = sichtbar, aber matt (Hub-Regel showWhenLocked: anklickbar, das Ziel-Fenster erklärt die Sperre). */
.gsc-node--locked .gsc-node__n{ color:var(--dim); }
.gsc-node--locked .gsc-node__s{ color:var(--gold); }

/* (#87g 2026-07-15, Waldemar) Namensschild-Layer — EIGENE, frei gesetzte Position (GILDE_LABEL), entkoppelt von der
   Silhouette. NUR der Name (kein Untertitel), TRANSPARENTER Hintergrund mit Rahmen, klick-durchlässig (die Silhouette klickt). */
.gsc-label{ position:absolute; left:var(--lx,50%); top:var(--ly,50%); transform:translate(-50%,-50%); z-index:11;
  pointer-events:auto; cursor:pointer; padding:2px 10px; border-radius:8px; white-space:nowrap;
  background:transparent; border:1px solid color-mix(in srgb,var(--gold) 46%, rgba(255,255,255,.08));
  font-family:var(--f-display); font-size:clamp(10px, calc(var(--gsc-w) * .016), 13px); letter-spacing:.03em;
  color:var(--gold-bright); text-shadow:0 1px 4px #000, 0 0 7px #000, 0 0 2px #000; }
.gsc-label--locked{ color:var(--dim); border-color:var(--line); }
.gsc-label .collect-dot{ position:absolute; top:-5px; right:-5px; }
.gsc-label .gsc-lbl__ro{ margin-left:6px; font-size:9px; font-variant-numeric:tabular-nums; color:var(--gold); }
.gsc--kalib .gsc-label{ pointer-events:auto; cursor:grab; touch-action:none; }
.gsc--kalib .gsc-label:active{ cursor:grabbing; }

/* Dock: Knoten OHNE Karten-Koordinate (heute: kaserne) — bleiben voll erreichbar, statt verloren zu gehen. */
.gsc-dock{ position:absolute; right:10px; top:42px; z-index:12; pointer-events:auto;
  display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:6px 7px; border-radius:11px;
  background:rgba(8,6,14,.88); border:1px dashed color-mix(in srgb,var(--gold) 45%, transparent); }
.gsc-dock__h{ font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); text-align:center; }
.gsc-node--dock{ position:static; width:auto; height:auto; transform:none; display:flex; flex-direction:row; align-items:center; gap:6px; pointer-events:auto; }
.gsc-node--dock:hover{ transform:translateY(-1px); }
.gsc-node--dock .gsc-node__ic{ position:static; inset:auto; width:22px; height:22px; border-radius:7px; flex:none; }
.gsc-node--dock .gsc-node__t{ position:static; transform:none; align-items:flex-start; }

/* Status-Leiste (unten RECHTS — nicht über die volle Breite: die linke untere Ecke gehört der Szene/Feuerschale):
   Wappen · Stufe · Ruhm-Bar · Bossrang/Beitrag/Bund · Trophäen-Slots */
/* (#89 2026-07-15, Waldemar) Fußzeile: VOLL-BREITE, aufgeräumte Status-Leiste (war rechts-halb, unbalanciert) —
   Wappen+Name+Stufe links · Ruhm-Balken mittig (flex) · Boss/Beitrag/Bund-Stats + Trophäen rechts. */
.gsc-hud{ position:absolute; left:10px; right:10px; bottom:8px; z-index:10; pointer-events:auto; width:auto;
  display:flex; align-items:center; gap:12px; padding:6px 12px; border-radius:12px;
  background:linear-gradient(180deg, rgba(13,10,24,.78), rgba(8,6,14,.92)); border:1px solid color-mix(in srgb,var(--gold) 22%, var(--line)); }
.gsc-hud--empty{ left:10px; width:auto; justify-content:center; text-align:center; font-size:11.5px; }
.gsc-crest{ flex:none; width:26px; height:28px; display:grid; place-items:center; }
.gsc-crest .crest-ic{ width:100%; height:100%; object-fit:contain; }
.gsc-crest .crest-glyph{ font-size:18px; line-height:1; }
.gsc-hud__name{ flex:none; max-width:26%; font-family:var(--f-display); font-size:12px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gsc-hud__ruhm{ flex:1 1 auto; min-width:70px; display:flex; flex-direction:column; gap:2px; }
.gsc-hud__ruhmhead{ display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--dim); }
.gsc-hud .gilde-ruhm-bar{ display:block; height:6px; }
.gsc-hud .gilde-ruhm-fill{ display:block; }
.gsc-stats{ flex:none; display:flex; gap:5px; }
.gsc-stat{ font-size:9.5px; color:var(--dim); padding:3px 7px; border-radius:8px; background:rgba(8,6,14,.55); border:1px solid var(--line); }
.gsc-stat .num{ font-size:11.5px; color:var(--ink); }
.gsc-troph{ flex:none; display:flex; gap:4px; }
.gsc-slot{ font-size:9.5px; color:var(--dim); padding:3px 7px; border-radius:7px; border:1px dashed var(--line-2); background:rgba(8,6,14,.32); }

/* ── KALIBRIER-MODUS (Dev; NUR via window.gildeKalibrieren() — keine Spur im normalen Spielfluss) ── */
.gsc-kal{ position:absolute; left:10px; top:42px; z-index:14; pointer-events:auto; display:flex; flex-direction:column; gap:5px;
  width:158px; padding:7px 8px; border-radius:11px; background:rgba(8,6,14,.94); border:1px solid var(--gold); }
.gsc-kal__t{ font-family:var(--f-display); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-bright); }
.gsc-kal__hint{ font-size:9.5px; line-height:1.35; color:var(--dim); }
.gsc-kal__b{ font-size:10.5px; min-height:26px; padding:4px 8px; border-radius:8px; cursor:pointer;
  color:var(--ink); background:rgba(20,14,36,.92); border:1px solid var(--line-2); }
.gsc-kal__b:hover{ border-color:var(--gold-bright); }
.gsc-kal__ro{ font-size:9px; font-variant-numeric:tabular-nums; color:var(--gold-bright); padding:1px 5px; border-radius:6px;
  background:rgba(8,6,14,.92); border:1px solid var(--line-2); }
.gsc--kalib .gsc-node{ cursor:grab; touch-action:none; transition:none; pointer-events:auto; }   /* Kalibrieren: ganze Box greifbar (1:1 dem Zeiger) */
.gsc--kalib .gsc-node:active{ cursor:grabbing; }
.gsc--kalib .gsc-node__ic{ clip-path:none; outline:1px dashed color-mix(in srgb,var(--gold-bright) 70%, transparent); outline-offset:2px; }   /* Kalibrieren: volles Rechteck zeigen (das positioniert man) */
.gsc--grid::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:repeating-linear-gradient(to right, rgba(255,255,255,.16) 0 1px, transparent 1px 10%),
                   repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 1px, transparent 1px 10%); }

/* Schmaler Rahmen (Portrait ~390px -> Szene nur ~362×163): NEUN Label-Pillen passen dort nicht nebeneinander (gemessen: 8 Überlappungen).
   Darum Karten-Modus wie in IH: NUR die Marker (Glyph + Sperr-/Sammel-Zustand), Namen über title/Tooltip; Touch-Ziel bleibt ≥40px (::after).
   Im Kalibrier-Modus bleiben die Pillen sichtbar (dort wird gearbeitet, nicht gespielt). Landscape (≈844×390) fällt NICHT hierunter -> volle Labels. */
@media (max-width:640px){
  .gsc-node:not(.gsc-node--dock) .gsc-node__t{ display:none; }
  .gsc--kalib .gsc-node .gsc-node__t{ display:flex; }
  .gsc-node{ gap:2px; }
  .gsc-node__t{ padding:1px 5px; }
  .gsc-hud{ left:6px; right:6px; bottom:5px; width:auto; gap:7px; padding:4px 8px; }    /* (#89) voll-breit auch mobil */
  .gsc-hud--empty{ left:6px; width:auto; }
  .gsc-troph{ display:none; }                                                          /* (#89) nur Trophäen aus Platzgründen aus; Name+Stats bleiben */
  .gsc-dock{ top:38px; right:6px; padding:5px 6px; }
  .gsc-kal{ top:38px; left:6px; width:132px; }
}

/* ── Inventar-Redesign 2026-07-08: Quadrat-Slots (Icon + Anzahl, KEIN Text) auf menu_bg-Hintergrund (wie Profilbild-Dialog); Klick -> Detail-Popup; keine Filter. ── */
#inventory{ place-items:start center; }
#inventory .lu-backdrop{ background:rgba(13,10,24,.30); backdrop-filter:blur(2px); }   /* leicht -> Hub sichtbar */
#inventory .rom-modal{ width:min(94vw,640px); margin-top:20px; aspect-ratio:auto;   /* (Chunk 3 §A) L-Band 640; DAUER_SCROLL: feste Höhe, Icon-Grid scrollt */
  height:calc(min(97vw,960px) * 9 / 20 - 40px); max-height:calc(100vh - 48px);
  overflow:hidden; display:flex; flex-direction:column;
  background:
    linear-gradient(180deg, rgba(13,10,24,.36) 0%, rgba(13,10,24,.20) 40%, rgba(13,10,24,.48) 100%),
    url("/ui/assets/chrome/menu_bg.webp?v=6") center/cover no-repeat,
    var(--bg-fenster); }
#inventory .rom-panel__title{ flex:none; }
/* (W1 2026-07-11) Titel-Zentrierung ist jetzt Shell-Default (.rom-modal .rom-panel__title, s.o.) — die alte ID-Liste inventory/kalender entfiel. */
/* (User 2026-07-09) Profil-Kopf weicht BEWUSST ab (UI_STANDARDS §0.6): linksbündig, KEIN Strich unter dem Namen, Name-Text vertikal auf Höhe der übrigen Kopf-Symbole (✎/ID/⧉) */
#iconPicker .pl-head{ justify-content:flex-start; align-items:center; border-bottom:none; padding-bottom:0; margin-bottom:14px; }
#iconPicker .pl-head .rom-panel__title{ text-align:left; border-bottom:none; padding:0; line-height:1; text-shadow:none; }
.inv-grid2{ flex:1 1 auto; min-height:0; overflow-y:auto; align-content:start;
  display:grid; grid-template-columns:repeat(auto-fill, 76px); justify-content:start; gap:12px; padding:10px 8px 6px; }
.inv-slot{ position:relative; width:76px; height:76px; border-radius:14px; padding:0; cursor:pointer; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 22%, color-mix(in srgb,var(--indigo-2) 90%, #000), color-mix(in srgb,var(--void) 86%, #000));
  border:2px solid color-mix(in srgb,var(--gold) 46%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--gold-bright) 22%, transparent) inset, 0 6px 14px -8px #000;
  transition:transform .14s, border-color .14s, box-shadow .14s; }
.inv-slot:hover{ border-color:var(--gold-bright); transform:translateY(-2px); box-shadow:0 0 16px -6px var(--arcane), 0 6px 14px -8px #000; }
.inv-slot .cur-ic{ width:52px; height:52px; }
.inv-slot .inv-cur__dot{ width:38px; height:38px; }
.inv-slot__n{ position:absolute; right:4px; bottom:4px; font-family:var(--f-body); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:700; line-height:1.3;
  color:var(--gold-bright); font-variant-numeric:tabular-nums; text-shadow:0 1px 2px #000;
  background:linear-gradient(180deg, rgba(8,6,14,.72), rgba(8,6,14,.88)); padding:0 5px; border-radius:7px; }
.inv-detail-layer{ position:absolute; inset:0; z-index:20; display:grid; place-items:center; border-radius:inherit;
  background:rgba(8,6,14,.55); backdrop-filter:blur(2px); }
.inv-detail-layer[hidden]{ display:none; }
.inv-detail{ width:min(82%,300px); padding:18px 20px 16px; border-radius:15px; text-align:center;
  background:linear-gradient(180deg, var(--indigo-2), var(--void));
  border:2px solid color-mix(in srgb,var(--gold) 50%, transparent);
  box-shadow:0 14px 32px -12px #000, 0 1px 0 color-mix(in srgb,var(--gold-bright) 24%, transparent) inset; }
.inv-detail .cur-ic{ width:64px; height:64px; }
.inv-detail .inv-cur__dot{ width:48px; height:48px; }
.inv-detail__name{ font-family:var(--f-display); font-size:18px; color:var(--gold-bright); margin:9px 0 2px; }
.inv-detail__n{ font-size:12px; color:var(--dim); margin-bottom:9px; }
.inv-detail__desc{ font-size:12.5px; color:var(--ink); line-height:1.42; }
.inv-detail__x{ margin-top:15px; padding:7px 20px; border-radius:9px; cursor:pointer; font-family:var(--f-display); font-size:12.5px;
  color:var(--gold-bright); background:rgba(0,0,0,.3); border:1px solid color-mix(in srgb,var(--gold) 45%, transparent); }
.inv-detail__x:hover{ border-color:var(--gold-bright); color:#fff; }
/* (User 2026-07-08) Icon GROSS oben, Anzahl KLEIN darunter — Zellgroesse unveraendert (Grid 10x1fr bestimmt sie) */
.kal-rw{ display:flex; flex-direction:column; align-items:center; gap:0; min-width:0; }
.kal-ico{ display:inline-flex; }
.kal-ico svg{ width:26px; height:26px; }
.kal-cell.multi .kal-ico svg{ width:20px; height:20px; }
.kal-n{ font-size:10px; font-weight:600; color:var(--rom-ink); line-height:1.1; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px #000; }
.kal-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:6px; }
.kal-head{ flex:none; display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:var(--rom-dim); }
.kal-head b{ color:var(--rom-gold-bright); font-variant-numeric:tabular-nums; }
.kal-grid{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(10, 1fr); grid-auto-rows:1fr; gap:5px; }
.kal-cell{ position:relative; min-height:0; border-radius:8px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; padding:2px; cursor:default;   /* row: 2-Ressourcen-Tage nebeneinander (je .kal-rw = Icon ueber Zahl) */
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 55%, transparent), color-mix(in srgb,var(--rom-black) 55%, transparent));
  border:1px solid var(--rom-edge-2); }
.kal-cell.multi{ gap:4px; }
.kal-cell.claimed{ opacity:.55; border-color:color-mix(in srgb,var(--rom-gold) 45%, transparent); }
/* (User 2026-07-09) Häkchen in der Ecke entfernt — das Ausgrauen (opacity:.55) genügt als "abgeholt"-Signal */
.kal-cell.next{ cursor:pointer; border-color:var(--rom-gold-bright); box-shadow:0 0 14px -4px var(--rom-glow);
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-gold) 16%, transparent), color-mix(in srgb,var(--rom-black) 60%, transparent)); }
.kal-cell.next:hover{ box-shadow:0 0 18px -3px var(--rom-glow); }
.kal-claim{ flex:none; margin-top:2px; padding:8px 14px; }

/* — FTUE-Overlay (Neubau 30.07.): ECHTER Klick-Lockout als LOCH-STANZE.
     Der Host selbst ist klick-durchlaessig; die Sperre sind die vier .ftue-mask-Rechtecke rund um das Ziel
     (jedes pointer-events:auto). Ueber dem Ziel liegt NICHTS -> es bleibt klickbar, ohne z-index-Kampf mit
     dem .device-Stacking-Context (isolation:isolate). Der alte Scrim war reine Optik: er sah gesperrt aus
     (pointer-events:none) und war es nicht.
     z-index 74 = ueber allen Fenstern (.lineup 64, #lineup/#gildeModal 70), unter der Kampf-Buehne (75);
     .ftue--over hebt NUR die Ergebnis-Karten-Fuehrung darueber (ohne Abdunklung). — */
.ftue{ position:fixed; inset:0; z-index:74; pointer-events:none; }
.ftue[hidden]{ display:none; }
.ftue--over{ z-index:78; }
.ftue-mask{ position:absolute; pointer-events:auto; cursor:not-allowed; background:rgba(6,4,12,.62); }
/* Leucht-Ring um das Loch — ersetzt den alten Puls AM Ziel (der brauchte position:relative auf fremden Elementen) */
.ftue-ring{ position:absolute; pointer-events:none; border-radius:13px;
  box-shadow:0 0 0 2px var(--rom-gold-bright), 0 0 26px -2px var(--rom-glow);
  animation:rom-ftue-pulse 1.6s ease-in-out infinite; }
/* Der Pfeil sitzt AM ZIEL (Waldemar: „Pfeil zeigt auf den Button"), nicht mehr an der Textkarte */
.ftue-point{ position:absolute; transform:translate(-50%,-100%); font-size:21px; line-height:1; pointer-events:none;
  color:var(--rom-gold-bright); text-shadow:0 2px 6px #000; animation:rom-ftue-bob 1.2s ease-in-out infinite; }
.ftue-point.below{ transform:translate(-50%,0); animation-name:rom-ftue-bob-up; }
/* Textkarte: klein und fest UNTEN mittig (Waldemar: „Textfenster ist ZU GROSS. Text mittig UNTEN halten.").
   --top nur, wenn das Ziel selbst unten sitzt — sonst verdeckte der Text genau den Knopf, auf den er zeigt.
   (Waldemar 31.07. „textblock Hintergrund in den typischen Lila — für besseren Kontrast")
   VORHER: linear-gradient(indigo-2 -> void), also DUNKLER als praktisch jeder Untergrund, auf dem die Blase liegt.
     Gemessen war das ihr eigentliches Problem: als FLÄCHE hob sie sich vom abgedunkelten Hintergrund nur 1,11:1 ab
     (Text-Lesbarkeit war nie das Thema) — sie las sich als Loch, nicht als Karte.
   JETZT: var(--bg-fenster) — das GELOCKTE „unser helles Lila" (tokens.css, Waldemar 14.07.), derselbe Ton, den
     .rom-panel für JEDES Fenster nutzt. Kein neuer Hexwert; die Blase ist jetzt sichtbar ein kleines Fenster.
   Weil die Fläche nun so hell ist wie die Seite dahinter, übernimmt sie die TRENNUNG von .rom-panel: Goldkante +
     inneres Gold-Highlight + 1px schwarzer Ring. Genau die Kombination trennt dort helles Lila von hellem Lila.
   GEMESSEN (WCAG 2.1, im Browser an den aufgelösten color(srgb …)-Stops, nicht geschätzt):
     • FLÄCHE gegen den abgedunkelten Untergrund   1,11:1 -> 2,24:1   (der Punkt, um den es geht: verdoppelt)
     • Fließtext --ink auf der Blase              13,37:1 -> 6,56:1  (Rand 11,01:1) — AA ✓
     • Gold-Hervorhebungen --gold-bright           9,94:1 -> 4,88:1  (Rand 8,18:1) — AA ✓ (4,5 Schwelle)
   ⚠ EHRLICH: die TEXT-Kontraste SINKEN. Das ist der Preis einer hellen Fläche und war nie das Problem (die alte
     Blase war beim Text bestens lesbar — sie war als KARTE unsichtbar). Beide Werte bleiben über AA und sind
     exakt die, die .rom-panel im ganzen Spiel fährt: auf --bg-fenster gilt überall --ink + --gold-bright.
     Wer hier nachjustiert, justiert damit den Ton JEDES Fensters mit — dann bitte in tokens.css, nicht hier. */
.ftue-bubble{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); pointer-events:none;
  max-width:min(88vw, 390px); padding:8px 15px; border-radius:11px; text-align:center;
  font:600 12.5px/1.45 var(--f-body); color:var(--rom-ink);
  background:var(--bg-fenster);
  border:1px solid var(--rom-gold-bright);
  box-shadow:0 1px 0 color-mix(in srgb, var(--rom-gold-bright) 30%, transparent) inset,
    0 0 0 1px rgba(0,0,0,.55), 0 14px 34px -12px #000, 0 0 22px -8px var(--rom-glow); }
.ftue-bubble--top{ bottom:auto; top:18px; }
.ftue-bubble b{ color:var(--rom-gold-bright); }
@keyframes rom-ftue-bob{ 0%,100%{ transform:translate(-50%,-100%); } 50%{ transform:translate(-50%,calc(-100% - 5px)); } }
@keyframes rom-ftue-bob-up{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,5px); } }
/* Ziel-Hervorhebung: NUR noch eine Aufhellung — kein position/z-index-Eingriff in fremdes Layout mehr. */
.ftue-target{ filter:brightness(1.14) saturate(1.06); }
@keyframes rom-ftue-pulse{ 0%,100%{ box-shadow:0 0 0 2px var(--rom-gold-bright), 0 0 20px -4px var(--rom-glow); }
  50%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--rom-gold-bright) 70%, transparent), 0 0 30px 0 var(--rom-glow); } }
@media (prefers-reduced-motion: reduce){ .ftue-point, .ftue-ring{ animation:none; } }
/* (Fix-Runde 30.07., Prüfer „Lockout-Leck"/B3+B4) Solange das Onboarding läuft (body.ftue-live, gesetzt in
   renderFtue), verschwinden ALLE Fixed-Widgets über z-index 74 komplett: sie blieben sonst DURCH die Maske
   klickbar (#devToggle z 2147483000 mit Zeitsprung/Cheats, #teleUi „✎ Notiz" = window.prompt, #devOnlineBtn,
   PWA-Install) — und #devToggle lag auf Handy-Breite lagegleich über dem Einstellungs-Zahnrad, wodurch der
   Abschluss-Schritt via ftueCovered NIE erschien. !important schlägt die per-JS gesetzten Inline-/Style-Regeln. */
body.ftue-live #devToggle, body.ftue-live #devPanel, body.ftue-live #devOnlineBtn,
body.ftue-live #teleUi, body.ftue-live #pwaInstall, body.ftue-live .pwa-hint{ display:none !important; }

/* ── (Bauten-Zusammenfassung 14.07.) Kachel-Wahl der 6 Gilden-Bauten — Hub-Muster: Symbol, Name ZENTRAL
   darunter, Stufe als dritte Zeile. Erbt .hub-choice/.hub-choice__btn--tile; nur das Nötige ergänzt. ── */
/* (#88 2026-07-15) #bautenWahl-Zwischenfenster entfernt (Bauten-Knoten -> Ausbau-Übersicht direkt) */
.gb-wahl{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin-top:12px; }
.gb-kachel{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 10px 11px; }
.gb-kachel__ic{ width:52px; height:52px; display:grid; place-items:center; font-size:26px; line-height:1;
  border-radius:12px; color:var(--gold-bright);
  border:1px solid color-mix(in srgb, var(--gold) 38%, transparent); background:rgba(8,6,14,.45); }
.gb-kachel:hover:not(:disabled) .gb-kachel__ic{ box-shadow:0 0 26px -12px var(--rom-glow); }  /* Glühen von hinten (Hub-Anker) */
.gb-kachel__lvl{ font-size:11.5px; color:var(--dim); }
.gb-kachel:disabled{ opacity:.5; cursor:not-allowed; }

/* ── (#120/4) „DAS TRIBUNAL" — 3-Spieler-Team-PvP-Fenster (Tabs Team/Gegner/Rangliste auf der .rom-float-Shell).
     Nur die innere Liste (.trib-list) scrollt (Fenster-Standard-Lock: nie größer als der Geräterahmen);
     Gegner-Zeilen reiten auf .arena-opp-row/.aor-*, die Rangliste auf .arena-ladder/.al-row (eine Wahrheit).
     (#147) Die RUHMESHALLE (#ruhmeshalleModal) reitet auf DENSELBEN Klassen (.trib-body/.trib-tabs/.trib-tab/
     .trib-pad/.trib-list/.trib-actions + .arena-ladder/.al-row/.aor-ki) — bewusst KEIN Parallel-CSS. ── */
/* (#147) Ruhmeshalle: Tab-Leiste FIX, NUR die Tafel-Liste (.trib-list) scrollt (Fenster-Standard-Lock
   „nur innere Liste scrollt"; Muster = #eventsModal-Body). Ohne das scrollte der ganze __body samt Tabs. */
#ruhmeshalleModal .rom-float__body{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.trib-body{ display:flex; flex-direction:column; gap:10px; min-height:0; flex:1 1 auto; }
.trib-pad{ padding:10px 4px; }
.trib-tabs{ display:flex; gap:6px; flex:none; }
.trib-tab{ flex:1; min-height:40px; padding:7px 10px; border-radius:9px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--rom-gold) 32%, transparent); background:transparent;
  color:var(--rom-dim); font-family:var(--f-display); font-size:12px; letter-spacing:.5px; }
.trib-tab.active{ color:var(--rom-gold-bright); border-color:var(--rom-gold-bright);
  background:color-mix(in srgb, var(--rom-gold) 10%, transparent); }
.trib-head{ display:flex; align-items:center; justify-content:space-between; gap:6px 14px; flex-wrap:wrap; flex:none; }
.trib-title{ font-family:var(--f-display); font-size:15px; letter-spacing:.4px; color:var(--rom-ink); }
.trib-stats{ display:inline-flex; align-items:center; gap:12px; font-size:12.5px; color:var(--rom-ink); flex-wrap:wrap; }
.trib-elo-num{ color:var(--gold-bright); }
.trib-energy{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; font-size:12px;
  border:1px solid color-mix(in srgb, var(--rom-gold) 38%, transparent); background:rgba(8,6,14,.45); color:var(--rom-ink); }
.trib-matchactive{ font-size:12px; color:var(--gold-bright); }
.trib-code{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12px; flex:none; }
.trib-list{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:2px; } /* NUR diese Liste scrollt (§2e M-2) */
.trib-member{ display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:11px;
  border:1px solid color-mix(in srgb, var(--rom-gold) 24%, transparent); background:rgba(10,8,18,.45); }
.trib-member.me{ border-color:var(--rom-gold); background:color-mix(in srgb, var(--rom-gold) 8%, transparent); }
.trib-rownum{ flex:none; font-family:var(--f-display); font-size:11px; letter-spacing:.5px; color:var(--rom-dim); width:52px; }
.trib-member.me .trib-rownum{ color:var(--rom-gold-bright); }
.trib-minfo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.trib-mname{ font-size:13px; color:var(--rom-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trib-crown{ color:var(--gold-bright); }
.trib-mrow{ font-size:11.5px; }
.trib-missing{ color:var(--rom-accent); }
.trib-macts{ flex:none; display:inline-flex; gap:5px; }
.trib-mini{ min-width:30px; min-height:30px; padding:2px 7px; border-radius:8px; cursor:pointer; font-size:13px;
  border:1px solid color-mix(in srgb, var(--rom-gold) 36%, transparent); color:var(--rom-gold-bright);
  background:linear-gradient(180deg, color-mix(in srgb, var(--rom-indigo-2) 82%, transparent), color-mix(in srgb, var(--rom-black) 82%, transparent)); }
.trib-mini:hover{ border-color:var(--rom-gold-bright); }
.trib-mini{ position:relative; }
.trib-mini::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(100%,40px); height:max(100%,40px); border-radius:inherit; } /* Touch-Hitbox ≥40px (Welle 4 §7) */
.trib-actions{ display:flex; justify-content:space-between; gap:8px; flex:none; }
.trib-leave{ color:var(--rom-accent); }
.trib-join{ display:flex; flex-direction:column; gap:12px; padding:6px 2px; }
.trib-form{ display:flex; gap:8px; }
.trib-input{ flex:1 1 auto; min-width:0; min-height:40px; padding:8px 12px; border-radius:10px; font-size:13px;
  border:1px solid color-mix(in srgb, var(--rom-gold) 32%, transparent); background:rgba(8,6,14,.55); color:var(--rom-ink); }
.trib-input:focus{ outline:none; border-color:var(--rom-gold-bright); }
/* Ergebnis-Karte (#tribunalResult): 2:1-Kopf + Duell-Zeilen (inkl. Timeout-Text) + Elo-Bewegung. Reward-Zeile bewusst leer (#79). */
.trib-resfoe{ text-align:center; margin:-6px 0 10px; }
.trib-duels{ display:flex; flex-direction:column; gap:7px; margin:4px 0 10px; }
.trib-duel{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--rom-gold) 24%, transparent); background:rgba(10,8,18,.45); font-size:13px; }
.trib-duel__n{ font-family:var(--f-display); font-size:11.5px; letter-spacing:.5px; color:var(--rom-dim); }
.trib-duel__res{ margin-left:auto; font-family:var(--f-display); font-size:12px; letter-spacing:.6px; }
.trib-duel.win .trib-duel__res{ color:var(--gold-bright); }
.trib-duel.lose .trib-duel__res{ color:var(--rom-accent); }
.trib-duel__to{ flex-basis:100%; font-size:11.5px; }
.trib-elo{ text-align:center; font-size:13px; color:var(--rom-ink); padding:4px 0 2px; }

/* M2 MONETARISIERUNG-UI (24.07.) — VIP, Abo, Fonds, Euro-Shop, First-Recharge.
   Reine Praesentation ueber den Tokens (tokens.css). Alle Fenster erben Rahmen/20:9/Scroll aus .rom-modal (openFloat-Shell).
   Anti-Dark-Pattern: Euro-Preis (.eur-chip) auf jeder Echtgeld-Kachel; inerte Kanaele als .vip-kommt/.abo-inert markiert. */
.eur-chip{ display:inline-flex; align-items:center; font-family:var(--f-display); font-size:12.5px; font-variant-numeric:tabular-nums;
  color:var(--rom-gold-bright); background:color-mix(in srgb,var(--rom-gold) 12%, transparent); border:1px solid color-mix(in srgb,var(--rom-gold) 40%, transparent);
  border-radius:8px; padding:3px 8px; letter-spacing:.02em; white-space:nowrap; }
/* (#171 TEST-MODUS) Banner „kein echtes Geld" — an jeder Kauf-Fläche, NUR wenn monetTestActive() (dev-only). Warn-Farbe, nicht Gold (kein Echtgeld-Signal). */
.monet-test-banner{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--f-display); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:#ffd8a8; background:color-mix(in srgb,#c2410c 26%, transparent); border:1px dashed color-mix(in srgb,#f97316 62%, transparent);
  border-radius:10px; padding:7px 10px; text-align:center; }

/* VIP-Fenster */
.vip-body{ display:flex; flex-direction:column; gap:12px; }
.vip-head{ display:flex; flex-direction:column; gap:7px; padding:11px 13px; border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 60%, transparent), color-mix(in srgb,var(--rom-black) 55%, transparent)); border:1px solid var(--rom-edge-2); }
.vip-head__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.vip-badge{ font-family:var(--f-display); font-size:15px; letter-spacing:.06em; color:var(--rom-gold-bright); }
.vip-badge b{ font-size:18px; }
.vip-head__pts{ font-size:12px; color:var(--rom-dim); }
.vip-head__pts b{ color:var(--rom-ink); }
.vip-bar{ height:9px; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid var(--rom-edge-2); overflow:hidden; }
.vip-bar__fill{ height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--rom-gold),var(--rom-gold-bright)); box-shadow:0 0 12px -2px var(--rom-glow); }
.vip-note{ font-size:10.5px; color:var(--rom-dim); }
.vip-sect{ font-family:var(--f-display); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rom-gold); margin:2px 0 -2px; }
.vip-perks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px; }
.vip-perk{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 10px; border-radius:9px;
  background:color-mix(in srgb,var(--rom-indigo-2) 45%, transparent); border:1px solid var(--rom-edge-2); }
.vip-perk__l{ font-size:11.5px; color:var(--rom-ink); }
.vip-perk__v{ font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--rom-gold-bright); }
.vip-perk--kommt{ opacity:.62; }
.vip-kommt,.abo-inert{ font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--rom-dim);
  border:1px solid var(--rom-edge-2); border-radius:5px; padding:1px 4px; margin-left:3px; }
.vip-steps{ display:flex; flex-direction:column; gap:5px; }
.vip-step{ display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:9px;
  background:color-mix(in srgb,var(--rom-black) 40%, transparent); border:1px solid var(--rom-edge-2); }
.vip-step.is-reached{ border-color:color-mix(in srgb,var(--rom-gold) 45%, var(--rom-edge-2)); }
.vip-step__lv{ font-family:var(--f-display); font-size:12px; color:var(--rom-gold); width:56px; flex:none; }
.vip-step__mid{ flex:1; min-width:0; }
.vip-step__rew{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.vip-step__ok{ font-size:11px; color:var(--rom-gold-bright); }
.vip-step__due{ font-size:11px; color:var(--rom-ink); }
.vip-step__req{ font-size:11px; color:var(--rom-dim); font-variant-numeric:tabular-nums; }

/* Abo-Karten */
.abo-body,.fonds-body,.shop-body,.fr-body{ display:flex; flex-direction:column; gap:12px; }
.abo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:11px; }
.abo-card{ display:flex; flex-direction:column; gap:8px; padding:11px 12px; border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 55%, transparent), color-mix(in srgb,var(--rom-black) 55%, transparent)); border:1px solid var(--rom-edge-2); }
.abo-card.is-active{ border-color:color-mix(in srgb,var(--rom-gold) 45%, var(--rom-edge-2)); }
.abo-card__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.abo-card__name{ font-family:var(--f-display); font-size:14px; color:var(--rom-gold-bright); }
.abo-line{ display:flex; align-items:center; gap:8px; font-size:11.5px; }
.abo-line__k{ width:56px; flex:none; color:var(--rom-dim); text-transform:uppercase; font-size:9.5px; letter-spacing:.08em; }
.abo-line__v{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.abo-privs{ font-size:11px; color:var(--rom-ink); line-height:1.5; }
.abo-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.abo-rest{ font-size:10.5px; color:var(--rom-dim); }
.abo-rest b{ color:var(--rom-ink); }
.abo-buy{ border:1px solid color-mix(in srgb,var(--rom-gold) 40%, transparent); background:color-mix(in srgb,var(--rom-gold) 10%, transparent);
  color:var(--rom-gold-bright); border-radius:9px; padding:5px 10px; font-size:12px; cursor:pointer; min-height:40px; } /* ≥40px Touch (§7) */
.abo-buy:disabled{ opacity:.5; cursor:default; color:var(--rom-dim); }
.abo-claim{ min-height:40px; } /* ≥40px Touch (§7) */

/* Chronik-Fonds */
.fonds-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fonds-head__name{ font-family:var(--f-display); font-size:15px; color:var(--rom-gold-bright); }
.fonds-lead,.fr-lead{ font-size:11.5px; color:var(--rom-dim); line-height:1.5; margin:0; }
.fonds-ladder{ display:flex; flex-direction:column; gap:5px; }
.fonds-row--done{ opacity:.6; }
.fonds-ok{ font-size:11px; color:var(--rom-gold-bright); }
.fonds-due{ font-size:11px; color:var(--rom-accent); }
.fonds-req{ font-size:11px; color:var(--rom-dim); }
.fonds-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Euro-Shop */
.shop-links{ display:flex; flex-wrap:wrap; gap:7px; }
.shop-link{ border:1px solid var(--rom-edge-2); background:color-mix(in srgb,var(--rom-indigo-2) 45%, transparent);
  color:var(--rom-ink); border-radius:9px; padding:6px 11px; font-size:12px; cursor:pointer; min-height:40px; } /* ≥40px Touch (§7) */
.shop-link--hot{ border-color:color-mix(in srgb,var(--rom-gold) 55%, transparent); color:var(--rom-gold-bright); }
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:9px; }
.shop-card{ display:flex; flex-direction:column; gap:6px; padding:10px 11px; border-radius:11px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--rom-indigo-2) 55%, transparent), color-mix(in srgb,var(--rom-black) 55%, transparent)); border:1px solid var(--rom-edge-2); }
.shop-card.is-maxed{ opacity:.6; }
.shop-card__head{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.shop-card__name{ font-size:12.5px; color:var(--rom-gold-bright); }
.shop-card__grants{ display:inline-flex; flex-wrap:wrap; gap:4px; min-height:20px; }
.shop-hint{ font-size:10px; color:var(--rom-dim); line-height:1.4; }
.shop-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:2px; }
.shop-card__lim{ font-size:10.5px; color:var(--rom-dim); font-variant-numeric:tabular-nums; }
.shop-sect{ font-family:var(--f-display); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rom-gold); }
.shop-hist{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.shop-hist__row{ font-size:11px; color:var(--rom-ink); }

/* Event-Pakete (im Event-Fenster) */
.ev-packs{ margin-top:12px; border-top:1px solid var(--rom-edge-2); padding-top:10px; }
.ev-packs__head{ font-family:var(--f-display); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--rom-gold); margin-bottom:7px; }
.ev-packs__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:9px; }

/* First-Recharge */
.fr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:11px; }
.fr-cell{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 9px; border-radius:12px; cursor:pointer;
  background:radial-gradient(circle at 50% 28%, color-mix(in srgb,var(--el,var(--rom-accent)) 22%, transparent), transparent 70%), color-mix(in srgb,var(--rom-black) 45%, transparent);
  border:1px solid var(--rom-edge-2); transition:.15s; }
.fr-cell:hover{ border-color:var(--rom-gold-bright); box-shadow:0 0 16px -6px var(--rom-glow); }
.fr-cell__av{ width:64px; height:64px; }
.fr-cell__n{ font-size:12.5px; color:var(--rom-ink); text-align:center; }
.fr-cell__cl{ display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--rom-dim); text-align:center; }
.fr-cell__cl svg{ width:12px; height:12px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   MODUS-ONBOARDING (🔒 Waldemar 31.07., Punkt 2) — kurzer Erklaer-Block beim ERSTEN Oeffnen eines frisch
   freigeschalteten Modus. Nutzt die Standard-Modal-Shell (.lineup/.rom-panel/.lu-close aus openModal) und
   braucht darum nur einen eigenen Layer + Innenleben. z-index 72 = ueber den Modus-Fenstern (.lineup 64 /
   #lineup 70), unter dem Onboarding-Overlay (.ftue 74).
   🔒 Fenster-Regel: NIE groesser als der 20:9-Rahmen — .rom-modal bringt die Deckelung mit; hier wird nur
   die Ressourcen-Liste innen scrollbar gemacht, das Fenster selbst waechst nie mit.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */
.lineup--intro{ z-index:72; }
.lineup--intro .rom-modal{ max-width:min(94vw,560px); }
.mi-eyebrow{ font-family:var(--f-display); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rom-gold); text-align:center; margin-bottom:3px; }
.mi-title{ text-align:center; margin:0 0 2px; }
.mi-home{ text-align:center; font-size:11px; color:var(--rom-dim); margin-bottom:9px; }
.mi-text{ font-size:12.5px; line-height:1.55; color:var(--rom-ink); margin:0 0 12px; }
.mi-reshead{ font-family:var(--f-display); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rom-gold); margin-bottom:6px; }
.mi-reslist{ display:flex; flex-direction:column; gap:6px; max-height:34vh; overflow-y:auto; }
.mi-res{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 8px; align-items:center;
  padding:6px 9px; border-radius:9px; border:1px solid var(--rom-edge-2);
  background:color-mix(in srgb,var(--rom-black) 42%, transparent); }
.mi-res .cur-ic{ grid-row:1 / span 2; width:20px; height:20px; }
.mi-res__n{ font-size:12px; color:var(--rom-ink); display:inline-flex; align-items:center; gap:6px; }
.mi-res__z{ font-size:10.5px; color:var(--rom-dim); line-height:1.4; }
.mi-neu{ font-style:normal; font-family:var(--f-display); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:1px 5px; border-radius:5px; color:var(--rom-black); background:var(--rom-gold); }
.mi-actions{ display:flex; justify-content:center; margin-top:14px; }
.mi-actions .rom-btn{ min-width:150px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   BESCHWOER-SZENE der EINZEL-Beschwoerung (🔒 Waldemar 31.07., Punkt 4) — Vollfigur (_full.webp) +
   Lichtstoss + Stern-fuer-Stern. NUR bei 1x; 10x bleibt die Kachel-Liste (.sr-grid).
   Layer 80: ueber allem Spielbaren (Modus-Fenster 64/70, .ftue 74/78), unter der Rang-Feier (90).
   🔒 Fenster-Regel: die Szene lebt im 20:9-Rahmen (.srv__card), nicht im ganzen Browserfenster.
   UEBERSPRINGEN: `.skip` (per Klick gesetzt) zieht jede Dauer/Verzoegerung auf ~0 -> sofort das Endbild.
   REDUCED MOTION: gar keine Animation; alle Teile stehen sofort im Endzustand.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */
.sreveal{ position:fixed; inset:0; z-index:80; display:grid; place-items:start center; padding:14px; }
.sreveal[hidden]{ display:none; }
.srv__bd{ position:absolute; inset:0; background:rgba(5,3,11,.86); backdrop-filter:blur(5px); cursor:pointer; }
/* ⚠ LAYOUT-ENTSCHEIDUNG, im Browser GEMESSEN (31.07.): der erste Wurf war ein Spalten-Flex (Figur oben,
   Text darunter). Im 20:9-Rahmen (gemessen 543×244) blieben der Figur dadurch 102 px Hoehe — und weil
   `max-height:100%` eines Bildes in einer flex-abgeleiteten Box keine definite Hoehe findet, wurde sie
   399 px hoch und lief unter den Karten-Rand (dieselbe Falle, die .hd-art mit grid-template-rows:minmax(0,1fr)
   dokumentiert). Jetzt: die Figur bekommt die GANZE Karte (position:absolute, inset:0), der Text liegt als
   Band darueber. Das ist im 20:9-Format ohnehin die richtige Anordnung — breit und flach. */
.srv__card{ position:relative; z-index:1; width:min(97vw,960px); aspect-ratio:20/9; max-height:94vh;
  overflow:hidden; cursor:pointer; }
/* Lichtstoss + Strahlenkranz, beide element-getoent (--el setzt openSummonReveal am Host). */
.srv__burst, .srv__rays{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); pointer-events:none; }
.srv__burst{ width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--el,var(--rom-gold)) 62%, #fff) 0%, color-mix(in srgb,var(--el,var(--rom-gold)) 26%, transparent) 42%, transparent 68%);
  animation:srv-burst 1.05s ease-out both; }
.srv__rays{ width:96%; aspect-ratio:1; opacity:0;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--el,var(--rom-gold)) 30%, transparent) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask-image:radial-gradient(circle, transparent 22%, #000 44%, transparent 74%);
  mask-image:radial-gradient(circle, transparent 22%, #000 44%, transparent 74%);
  animation:srv-rays 6s linear infinite, srv-rays-in .9s ease-out .1s both; }
/* grid-template-rows:minmax(0,1fr) = die definite Hoehe, gegen die `max-height` des Bildes rechnen kann
   (identische Kur wie .hd-art — ohne sie waechst die Zeile mit dem Bild statt umgekehrt). */
.srv__art{ position:absolute; inset:0; z-index:1; display:grid; grid-template-rows:minmax(0,1fr); place-items:center; }
.srv__art .sigil{ position:relative; z-index:1; width:16%; height:auto; aspect-ratio:54/60; }
.srv__fig{ position:relative; z-index:2; max-width:40%; max-height:97%; object-fit:contain; object-position:center bottom;
  opacity:0; filter:drop-shadow(0 16px 34px rgba(4,2,10,.75)); animation:srv-fig .75s cubic-bezier(.16,.84,.32,1) .18s both; }
.srv__art.has-portrait .sigil{ display:none; }
/* Text-Band UEBER der Figur: Verlauf statt Balken, damit die Figur nicht abgeschnitten wirkt. */
.srv__info{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:26px 14px 10px;
  background:linear-gradient(to top, rgba(5,3,11,.92) 26%, rgba(5,3,11,.6) 62%, transparent); }
.srv__stars{ display:flex; gap:4px; font-size:17px; line-height:1; color:var(--rom-gold);
  text-shadow:0 0 12px color-mix(in srgb,var(--rom-gold) 70%, transparent); }
.srv__star{ opacity:0; animation:srv-star .34s cubic-bezier(.2,1.5,.4,1) both; }
.srv__name{ font-family:var(--f-display); font-size:19px; letter-spacing:.5px; line-height:1.15;
  color:var(--rom-gold-bright); opacity:0; animation:srv-txt .5s ease .42s both; }
.srv__chips{ display:flex; gap:8px; opacity:0; animation:srv-txt .5s ease .52s both; }
.srv__chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--rom-dim);
  padding:3px 9px; border-radius:999px; border:1px solid var(--rom-edge-2);
  background:color-mix(in srgb,var(--rom-black) 50%, transparent); }
.srv__chip svg{ width:12px; height:12px; }
.srv__badge{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:4;
  font-family:var(--f-display); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 10px; border-radius:6px; color:var(--rom-black); background:var(--rom-gold);
  opacity:0; animation:srv-txt .4s ease .62s both; }
.sreveal.dupe .srv__badge{ background:var(--rom-dim); color:var(--rom-ink); }
.sreveal.five .srv__name{ text-shadow:0 0 22px color-mix(in srgb,var(--rom-gold) 80%, transparent); }
.srv__go{ margin-top:5px; min-width:150px; opacity:0; animation:srv-txt .4s ease .72s both; }
@keyframes srv-burst{ 0%{ transform:translate(-50%,-50%) scale(.15); opacity:0; } 22%{ opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1); opacity:.28; } }
@keyframes srv-rays-in{ from{ opacity:0; } to{ opacity:.55; } }
@keyframes srv-rays{ from{ rotate:0deg; } to{ rotate:360deg; } }
@keyframes srv-fig{ from{ opacity:0; transform:translateY(26px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes srv-star{ from{ opacity:0; transform:scale(2.4); } to{ opacity:1; transform:none; } }
@keyframes srv-txt{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
/* Klick auf die Szene = „zeig mir sofort das Ende" (der Spieler, der 50x zieht). Kein Warten, kein Ausblenden. */
.sreveal.skip *{ animation-duration:.01s !important; animation-delay:0s !important; animation-iteration-count:1 !important; }
@media (prefers-reduced-motion: reduce){
  .sreveal *{ animation:none !important; }
  .srv__fig, .srv__star, .srv__name, .srv__chips, .srv__badge, .srv__go{ opacity:1 !important; transform:none !important; }
  .srv__burst{ opacity:.28; }
  .srv__rays{ opacity:.5; }
}
/* Effekt-Schalter in der Fusszeile des Beschwoer-Fensters (renderControls beschriftet ihn + setzt .on). */
.win-fx{ margin-left:6px; padding:2px 9px; border-radius:999px; cursor:pointer; font-family:var(--f-body); font-size:10px;
  letter-spacing:.04em; color:var(--rom-dim); background:transparent; border:1px solid var(--rom-edge-2); }
.win-fx:hover{ border-color:var(--rom-gold); color:var(--rom-ink); }
.win-fx.on{ color:var(--rom-gold-bright); border-color:color-mix(in srgb,var(--rom-gold) 55%, transparent); }