/* ==========================================================================
   Design-Grundlagen für Gildenseite und Leitungsbereich
   Stil: klassisches Fantasy-MMO – dunkler Stein, Pergament, gealtertes Gold,
   Horde-Rot. Alle Texturen und Ornamente sind selbst gebaute SVGs (keine
   fremden Grafiken), Schriften sind frei (SIL OFL) und werden lokal geladen.
   Farben anpassen: nur die Variablen in :root ändern.
   Das vorherige, moderne Design liegt in design-archiv/.
   ========================================================================== */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('/fonts/cinzel-decorative/cinzel-decorative-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('/fonts/cinzel-decorative/cinzel-decorative-latin-ext-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Metamorphous';
  src: url('/fonts/metamorphous/metamorphous-latin-400-normal.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Metamorphous';
  src: url('/fonts/metamorphous/metamorphous-latin-ext-400-normal.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus SC';
  src: url('/fonts/marcellus-sc/marcellus-sc-latin-400-normal.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus SC';
  src: url('/fonts/marcellus-sc/marcellus-sc-latin-ext-400-normal.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  src: url('/fonts/alegreya/alegreya-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  src: url('/fonts/alegreya/alegreya-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* Grundfarben (im Leitungsbereich unter Einstellungen → Design änderbar) */
  --gold: #c9a34e;
  --crimson: #9b1c1c;

  --gold-bright: color-mix(in srgb, var(--gold) 60%, #fff3c8);
  --gold-deep: color-mix(in srgb, var(--gold) 55%, #1a0f00);
  --gold-soft: color-mix(in srgb, var(--gold) 16%, transparent);
  --crimson-bright: color-mix(in srgb, var(--crimson) 72%, #ff7a4a);
  --crimson-deep: color-mix(in srgb, var(--crimson) 60%, #000);
  --crimson-soft: color-mix(in srgb, var(--crimson) 24%, transparent);

  /* Stein & Leder */
  --bg: #0c0806;
  --bg-2: #120c08;
  --surface: rgba(26, 18, 12, 0.95);
  --surface-solid: #1a120c;
  --surface-2: #231910;
  --surface-3: #2e2116;
  --well: #0a0604;
  --line: color-mix(in srgb, var(--gold) 30%, transparent);
  --line-strong: color-mix(in srgb, var(--gold) 58%, transparent);
  --line-neutral: rgba(214, 170, 96, 0.13);
  --bronze: #6e5426;

  --text: #efe3c6;
  --text-dim: #c0ad89;
  --text-faint: #8b7a5c;

  /* Pergament */
  --parch: #dbc596;
  --parch-ink: #2e1d0e;
  --parch-ink-dim: #5b4127;
  --parch-red: #7e1a10;

  --ok: #5fbf6a;
  --warn: #e3a63c;
  --bad: #e0574f;
  --info: #6aa8e0;

  /* Schwierigkeitsgrade (Qualitätsfarben) */
  --diff-n: #1eff00;
  --diff-h: #a335ee;
  --diff-m: #ff8000;

  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.85), 0 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 14px 40px -14px color-mix(in srgb, var(--gold) 35%, transparent);

  --font-title: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-display: 'Marcellus SC', 'Cinzel', Georgia, serif;
  --font-quest: 'Metamorphous', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Alegreya', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  /* große Zahlen: Cinzel-Ziffern (die Null ist hier klar vom O zu unterscheiden) */
  --font-num: 'Cinzel Decorative', 'Cinzel', Georgia, serif;

  /* ---------- Texturen ---------- */
  /* Selbst erzeugte, nahtlos kachelbare Bilder (periodisches Rauschen, siehe
     public/img/tex). Die Kanten passen pixelgenau aneinander – keine sichtbaren Nähte. */
  --tex-stone: url('/img/tex/stone.webp');
  --tex-stone-size: 1024px;
  --tex-parch: url('/img/tex/parchment.webp');
  --tex-parch-size: 768px;

  /* ---------- Ornamente ---------- */
  /* Goldrahmen mit Eck-Rauten (9-Slice, Slice 18) */
  --frame-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='54' height='54' viewBox='0 0 54 54'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7e09a'/%3E%3Cstop offset='.45' stop-color='%23c79c46'/%3E%3Cstop offset='1' stop-color='%23715019'/%3E%3C/linearGradient%3E%3Cg id='c'%3E%3Cpath d='M1.6 16V6.6l5-5H16' fill='none' stroke='url(%23g)' stroke-width='2.4'/%3E%3Cpath d='M7.4 2.2l5.2 5.2-5.2 5.2-5.2-5.2z' fill='url(%23g)' stroke='%23231708' stroke-width='1'/%3E%3Ccircle cx='7.4' cy='7.4' r='1.4' fill='%23fff4c8'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M16 1.6h22M52.4 16v22M38 52.4H16M1.6 38V16' stroke='%23a98236' stroke-width='2.2'/%3E%3Cpath d='M5.6 5.6h42.8v42.8H5.6z' fill='none' stroke='%23000' stroke-opacity='.7'/%3E%3Cpath d='M4.4 4.4h45.2v45.2H4.4z' fill='none' stroke='%23e9c879' stroke-opacity='.28' stroke-width='.8'/%3E%3Cuse xlink:href='%23c'/%3E%3Cuse xlink:href='%23c' transform='matrix(-1 0 0 1 54 0)'/%3E%3Cuse xlink:href='%23c' transform='matrix(1 0 0 -1 0 54)'/%3E%3Cuse xlink:href='%23c' transform='matrix(-1 0 0 -1 54 54)'/%3E%3C/svg%3E");
  /* verzierter Trenner mit Ranken und Raute */
  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='320' height='28' viewBox='0 0 320 28'%3E%3Cdefs%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23c9a34e' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d9b45e'/%3E%3C/linearGradient%3E%3Cg id='h' fill='none' stroke='%23d9b45e' stroke-width='1.3'%3E%3Cpath d='M6 14h116' stroke='url(%23l)'/%3E%3Cpath d='M122 14c7 0 9-8 16-8 4 0 5 3 3 5'/%3E%3Cpath d='M122 14c7 0 9 8 16 8 4 0 5-3 3-5'/%3E%3Ccircle cx='115' cy='14' r='1.8' fill='%23d9b45e' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cuse xlink:href='%23h'/%3E%3Cuse xlink:href='%23h' transform='matrix(-1 0 0 1 320 0)'/%3E%3Cpath d='M160 3l11 11-11 11-11-11z' fill='%23c9a34e' stroke='%23231708' stroke-width='1.2'/%3E%3Cpath d='M160 8.5l5.5 5.5-5.5 5.5-5.5-5.5z' fill='%239b1c1c'/%3E%3C/svg%3E");
}

/* Klassenfarben */
.c-warrior { --cls: #c69b6d; } .c-paladin { --cls: #f48cba; } .c-hunter { --cls: #aad372; }
.c-rogue { --cls: #fff468; } .c-priest { --cls: #ffffff; } .c-deathknight { --cls: #c41e3a; }
.c-shaman { --cls: #0070dd; } .c-mage { --cls: #3fc7eb; } .c-warlock { --cls: #8788ee; }
.c-monk { --cls: #00ff98; } .c-druid { --cls: #ff7c0a; } .c-demonhunter { --cls: #a330c9; }
.c-evoker { --cls: #33937f; }
.cls-text { color: var(--cls, var(--text)); }
/* Schamanen-Blau ist auf dunklem Stein schwer lesbar – etwas aufhellen */
.c-shaman .cls-text, .cls-text.c-shaman { color: color-mix(in srgb, var(--cls) 70%, #9cc8ff); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--bg);
}
/* Eine durchgehende Steinwand hinter der ganzen Seite: feststehend, damit
   Abschnitte beim Scrollen nicht wie aneinandergesetzte Teile wirken */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 110% 90% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.6) 100%),
    var(--tex-stone);
  background-size: auto, var(--tex-stone-size);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: #fff1c4; text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 55%, transparent); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--crimson) 70%, transparent); color: #fff6dc; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 400; }
p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bildlaufleisten im Stil der Oberfläche */
* { scrollbar-width: thin; scrollbar-color: var(--bronze) var(--well); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--well); box-shadow: inset 0 0 4px #000; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #4d3a1c, #8a6a30, #4d3a1c); border: 2px solid var(--well); border-radius: 2px; }

.display { font-family: var(--font-display); letter-spacing: 0.03em; }
.title { font-family: var(--font-title); font-weight: 700; letter-spacing: 0.02em; }
.quest { font-family: var(--font-quest); }
.gold-text {
  background: linear-gradient(180deg, #fff4cc 0%, #f3d27a 30%, var(--gold) 58%, #8c6522 82%, #c79a45 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.6));
}
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
.num, .table td, .fact strong { font-variant-numeric: lining-nums tabular-nums; }

/* Verzierter Trenner */
.ornament {
  display: block;
  width: min(320px, 80%);
  height: 28px;
  margin: 14px auto;
  background: var(--divider) center / contain no-repeat;
}
.ornament > * { display: none; }

/* ---------- Knöpfe ---------- */
.btn {
  --btn-bg: linear-gradient(180deg, #3d2e1e 0%, #2a1d12 48%, #1c130b 52%, #2b1f14 100%);
  --btn-fg: var(--gold-bright);
  --btn-line: var(--bronze);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 3px;
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow: 0 1px 1px #000, 0 0 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 165, 0.22),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 3px 6px rgba(0, 0, 0, 0.55);
  transition: filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s;
}
.btn:hover { filter: brightness(1.2); border-color: var(--gold); color: var(--btn-fg); text-shadow: 0 1px 1px #000, 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.85); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.btn svg { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1px 0 #000); }
.btn-primary {
  --btn-bg: linear-gradient(180deg, color-mix(in srgb, var(--crimson) 70%, #ff7a50) 0%, var(--crimson) 46%, var(--crimson-deep) 54%, color-mix(in srgb, var(--crimson) 85%, #ff6a3a) 100%);
  --btn-fg: #ffe39a;
  --btn-line: color-mix(in srgb, var(--gold) 85%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 170, 0.45),
    inset 0 -2px 3px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.6);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 210, 170, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 18px color-mix(in srgb, var(--crimson-bright) 55%, transparent); }
.btn-ghost { --btn-bg: rgba(10, 6, 3, 0.45); --btn-line: var(--line); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
.btn-danger { --btn-bg: linear-gradient(180deg, #4a1510, #2a0b08); --btn-fg: #ffb3a8; --btn-line: #7d2a20; }
.btn-discord { --btn-bg: linear-gradient(180deg, #7a85f7 0%, #5865f2 48%, #4450c9 52%, #5662e8 100%); --btn-fg: #fff; --btn-line: #a3abff; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn-icon { width: 36px; min-height: 36px; padding: 0; }

/* ---------- Formulare ---------- */
.field { display: grid; gap: 6px; }
.field > span, .label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.input, .select, .textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 2px;
  border: 1px solid #4b3920;
  background: linear-gradient(180deg, #070403, #120c08);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 220, 150, 0.06);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); font-style: italic; }
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: #6e5426; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 10px color-mix(in srgb, var(--gold) 35%, transparent);
}
.select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5h10L10 13z' fill='%23c9a34e' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #070403, #120c08);
  background-repeat: no-repeat;
  background-position: right 10px center, 0 0;
  background-size: 16px, auto;
}
.select option { background: var(--surface-solid); }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--crimson); }

/* ---------- Rahmen, Karten & Plaketten ---------- */
/* Goldrahmen als Überlagerung – funktioniert auch über Tabellen hinweg */
.framed, .card { position: relative; isolation: isolate; }
.framed::after, .card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 13px solid transparent;
  border-image: var(--frame-gold) 18 / 13px stretch;
}
.card {
  background-color: var(--surface-solid);
  background-image:
    linear-gradient(180deg, rgba(255, 214, 140, 0.05), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.35)),
    /* Tafeln etwas ruhiger als die Wand dahinter, damit Text gut lesbar bleibt */
    linear-gradient(rgba(20, 13, 8, 0.42), rgba(20, 13, 8, 0.42)),
    var(--tex-stone);
  background-size: auto, auto, var(--tex-stone-size);
  border-radius: 2px;
  box-shadow: var(--shadow), inset 0 0 50px rgba(0, 0, 0, 0.55);
}
.card-gold { box-shadow: var(--shadow-gold), var(--shadow), inset 0 0 50px rgba(0, 0, 0, 0.55); }

/* Pergament: lokale Farben, damit Bausteine darin automatisch passen */
.parchment {
  --text: var(--parch-ink);
  --text-dim: var(--parch-ink-dim);
  --text-faint: #7a6043;
  --gold-bright: var(--parch-red);
  --line-neutral: rgba(90, 55, 20, 0.22);
  --line: rgba(110, 70, 25, 0.4);
  color: var(--parch-ink);
  background-color: var(--parch);
  background-image:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(120, 70, 20, 0.38) 100%),
    var(--tex-parch);
  background-size: auto, var(--tex-parch-size);
  box-shadow: inset 0 0 26px rgba(92, 50, 12, 0.55), inset 0 0 3px rgba(60, 30, 5, 0.6), var(--shadow);
}
.parchment a { color: var(--parch-red); font-weight: 600; }
.parchment a:hover { color: #a3271a; text-shadow: none; }
.parchment .muted { color: var(--parch-ink-dim); }
.parchment ::selection { background: rgba(126, 26, 16, 0.3); color: inherit; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 23px;
  padding: 0 9px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #2c2116, #1a120b);
  color: var(--text-dim);
  border: 1px solid #4b3920;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.chip-gold { color: #f6d98b; border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: linear-gradient(180deg, #3a2a14, #22170b); }
.chip-ok { color: #9be39f; border-color: color-mix(in srgb, var(--ok) 45%, #000); background: linear-gradient(180deg, #1f2c17, #121a0d); }
.chip-warn { color: #f6cd85; border-color: color-mix(in srgb, var(--warn) 45%, #000); background: linear-gradient(180deg, #33250f, #1d1408); }
.chip-bad { color: #ffaaa0; border-color: color-mix(in srgb, var(--bad) 45%, #000); background: linear-gradient(180deg, #3a1410, #200a08); }
.chip-info { color: #b2d3f5; border-color: color-mix(in srgb, var(--info) 45%, #000); background: linear-gradient(180deg, #17222f, #0d141c); }
.parchment .chip { background: rgba(255, 245, 220, 0.35); border-color: rgba(90, 55, 20, 0.45); color: var(--parch-ink); box-shadow: none; }
.parchment .chip-ok { color: #2f6a1d; }
.parchment .chip-bad { color: #8e1d12; }
.parchment .chip-gold { color: var(--parch-red); }
.dot { width: 8px; height: 8px; transform: rotate(45deg); background: var(--cls, var(--gold)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); flex: none; }

/* Charakterbild / Initiale im Goldring */
.avatar {
  --size: 36px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cls, var(--gold)) 50%, #000), #0b0705 78%);
  box-shadow: 0 0 0 1px #000, 0 0 0 3px color-mix(in srgb, var(--cls, var(--gold)) 45%, #8a6a30), 0 0 0 4px #000, 0 2px 6px 4px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display);
  font-size: calc(var(--size) * 0.46);
  color: #fff3d6;
  text-shadow: 0 1px 1px #000;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Rollen-Symbole */
.role-icon { width: 18px; height: 18px; flex: none; opacity: 0.95; }

/* ---------- Dialoge & Meldungen ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(10, 5, 2, 0.6), rgba(0, 0, 0, 0.88));
  animation: fade-in 0.18s ease;
}
.modal {
  position: relative;
  isolation: isolate;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 30px 30px 28px;
  background-color: var(--surface-solid);
  background-image: linear-gradient(180deg, rgba(255, 214, 140, 0.05), transparent 30%), var(--tex-stone);
  background-size: auto, var(--tex-stone-size);
  border: 13px solid transparent;
  border-image: var(--frame-gold) 18 / 13px stretch;
  background-clip: padding-box;
  box-shadow: 0 40px 120px -20px #000;
  animation: pop-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.modal-wide { width: min(780px, 100%); }
.modal h2 { font-family: var(--font-quest); font-size: 24px; margin-bottom: 14px; color: var(--gold-bright); text-shadow: 0 2px 0 #000; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.prose { white-space: pre-wrap; color: var(--text-dim); line-height: 1.7; }

.toasts {
  position: fixed;
  z-index: 200;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  padding: 12px 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2a1f14, #17100a);
  border: 1px solid var(--bronze);
  border-left: 4px solid var(--gold);
  box-shadow: 0 0 0 1px #000, var(--shadow);
  font-size: 15px;
  animation: slide-in 0.25s ease;
}
.toast-error { border-left-color: var(--bad); }
.toast-ok { border-left-color: var(--ok); }

.empty {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
  font-style: italic;
  color: var(--text-faint);
  border: 1px dashed var(--line);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
}

.skeleton {
  background: linear-gradient(90deg, rgba(201, 163, 78, 0.04) 25%, rgba(201, 163, 78, 0.12) 37%, rgba(201, 163, 78, 0.04) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 2px;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}