/* Shandalar Rising — Visual identity (M15.V1, P-D Palette-Überarbeitung). DESIGN §Interfaces "Visual identity (theme.css)".
   Die eine Quelle für Farbe, Fläche, Schrift, Radius, Abstand, Schatten und Bewegung —
   und für das Knopf-System. Jede Seite lädt diese Datei VOR styles.css; jedes andere
   Stylesheet (styles.css, world.css, title.css, duel-ux.css …) liest nur die Tokens hier
   (var(--…)), statt eigene Farben zu erfinden.

   Look (P-D): ruhiges, tiefes Nachtblau-Grau statt leuchtendem Blau; Flächen sind Glas
   (durchscheinend, weichgezeichnet, Licht-Kante oben). EIN warmer Akzent je Welt, nur für
   die nächste Handlung: Klassisch = gedämpftes Bernstein-Gold, Avatar = Türkis
   (<html data-welt>). Gold als Belohnung (Sterne, Ringe) bleibt davon getrennt.
   Knöpfe: flache Füllung; Zeigen = eine Stufe heller, Drücken = eine Stufe dunkler und
   1 px tiefer, ohne Glühen; Fokus = klarer 2-px-Ring; gesperrt = flach und blass.
   Schrift: Eczar (Titel, Kartennamen) und Nunito (alles, was gelesen wird). Beide OFL,
   selbst gehostet unter assets/fonts/ (kein CDN zur Laufzeit).
   Kontrast: Text auf Grund ≥ 4.5:1 (Test tests/theme_palette.test.js liest diese Datei). */

/* ---------------- Schriften (OFL, variabel: eine Datei je Familie) ---------------- */
@font-face {
  font-family: 'Eczar'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/fonts/eczar-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('assets/fonts/nunito-var.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* ---- Schrift ---- */
  --font-display: 'Eczar', 'Georgia', serif;                       /* Titel, Namen, Zahlen-Überschriften */
  --font-ui: 'Nunito', 'Segoe UI', system-ui, sans-serif;          /* Lesetext, Knöpfe, Hinweise */
  --font-text: var(--font-ui);                                     /* Alt-Name (styles.css vor M15) */
  --fs-2xs: .6875rem;  /* 11 px @ root 16 */
  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .875rem;    /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-3xl: 2.75rem;   /* 44 */
  --fs-hero: clamp(3rem, 8vmin, 6.5rem);
  --fw-regular: 500; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900;

  /* ---- Farbe: Grund (ruhiges Nachtblau-Grau, von tief nach hell) ---- */
  --c-bg-0: #070a12;
  --c-bg-1: #0d1220;
  --c-bg-2: #141b2d;
  --c-bg-3: #1c2540;
  /* Text auf Grund/Glas — Kontrast auf --c-bg-1: text 16.5:1, text-2 10.5:1, text-3 6.5:1 */
  --c-text: #eef1f7;
  --c-text-2: #b9c2d6;
  --c-text-3: #8f99b2;
  --c-ink: #0b0f1e;                     /* dunkle Schrift auf hellen Flächen */
  /* Linien */
  --c-line: rgba(176, 192, 225, .14);
  --c-line-strong: rgba(196, 210, 240, .26);
  --c-highlight: rgba(255, 255, 255, .09);   /* Licht-Kante oben an Glas */

  /* ---- Akzent: die Farbe der nächsten Handlung (je Welt, siehe unten) ----
     Klassisch: gedämpftes Bernstein. Kontrast Schrift --accent-ink: auf accent 10:1,
     auf accent-lo 7.2:1 (gedrückter Zustand). */
  --accent: #e9b949;
  --accent-hi: #f4d687;                  /* Zeigen (hover) */
  --accent-lo: #cf9a2e;                  /* Drücken (active) */
  --accent-deep: #7d5a1a;                /* "Lippe" unter dem Hauptknopf */
  --accent-ink: #1d1404;                 /* Schrift auf Akzent */
  --accent-glow: rgba(233, 185, 73, .30);
  --accent-soft: rgba(233, 185, 73, .14);
  --accent-2: #8fb4ff;                   /* Zweitfarbe (Info, Auswahl-Ringe) — kühl, nie eine Handlung */

  /* ---- Gold = Belohnung, Sterne, Ringe (weltunabhängig) ---- */
  --c-gold: #e6bd55;
  --c-gold-hi: #f2d68a;

  /* ---- Bedeutung ---- */
  --c-success: #5fd394;
  --c-success-soft: rgba(95, 211, 148, .14);
  --c-warn: #e8b04d;
  --c-danger: #e0655d;                   /* Rahmen, Ränder */
  --c-danger-hi: #ea8a82;
  --c-danger-solid: #a93a33;             /* Füllung beim Zeigen; Weiß darauf 6.3:1 */
  --c-danger-deep: #7f2a25;              /* Füllung beim Drücken */
  --c-danger-text: #f2b8b2;              /* Schrift auf Gefahr-Tönung — 10:1 */
  --c-danger-soft: rgba(224, 101, 93, .14);
  --c-info: #7fb8f0;

  /* ---- Mana-Farben (Plaketten, Punkte; nie auf Kunst) — unverändert, erkennbar ---- */
  --mana-W: #f6efd2; --mana-U: #5fb0ff; --mana-B: #9a8fb0; --mana-R: #ff6b4a; --mana-G: #48c774; --mana-C: #c3c7d1;

  /* ---- Flächen: Glas ---- */
  --surface-1: rgba(20, 27, 46, .62);    /* leichtes Glas (Chips, Leisten) */
  --surface-2: rgba(16, 22, 40, .82);    /* Tafeln, Plaketten */
  --surface-3: rgba(11, 15, 30, .94);    /* Dialoge — fast deckend */
  --surface-raised: rgba(40, 50, 84, .55);
  --glass: linear-gradient(180deg, rgba(36, 46, 82, .72) 0%, rgba(16, 22, 42, .84) 100%);
  --glass-strong: linear-gradient(180deg, rgba(30, 40, 76, .95) 0%, rgba(11, 15, 32, .97) 100%);
  --glass-blur: blur(14px) saturate(120%);
  --scrim: rgba(4, 6, 12, .72);          /* Abdunklung hinter Dialogen */

  /* ---- Radius ---- */
  --r-xs: .375rem; --r-sm: .5rem; --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-pill: 999px;
  --r-btn: .875rem;

  /* ---- Abstand (4-px-Raster @ root 16) ---- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;

  /* ---- Schatten / Tiefe ---- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --sh-2: 0 6px 18px rgba(0, 0, 0, .40), 0 2px 4px rgba(0, 0, 0, .25);
  --sh-3: 0 18px 48px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .30);
  --sh-edge: inset 0 1px 0 var(--c-highlight);           /* Licht-Kante oben */
  --sh-panel: var(--sh-edge), 0 0 0 1px var(--c-line), var(--sh-2);
  --sh-dialog: var(--sh-edge), 0 0 0 1px var(--c-line-strong), var(--sh-3);
  --text-shadow: 0 1px 2px rgba(0, 0, 0, .65);

  /* ---- Fokus: klarer 2-px-Ring mit 2 px Abstand (alle Arten) ---- */
  --focus-ring: 0 0 0 2px var(--c-bg-0), 0 0 0 4px var(--accent-hi);

  /* ---- Bewegung: Zustände ≤ 120 ms ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
  --dur-1: .12s; --dur-2: .2s; --dur-3: .35s;

  /* ---- Knöpfe ---- */
  --btn-h: 2.75rem;          /* 44 px @ root 16 — Kinderfinger/-maus */
  --btn-h-sm: 2.25rem;       /* 36 px — Kopfleiste */
  --btn-h-lg: 3.5rem;        /* 56 px — Titel, Dialoge */
  --btn-lip: .1875rem;       /* Weg des Hauptknopfs beim Drücken (3 px) */

  /* ---- Alt-Namen (vor M15) — zeigen auf die neuen Tokens ---- */
  --gold: var(--c-gold);
  --stage-edge: var(--c-bg-0);
  --stage-core: var(--c-bg-2);
}

/* Avatar-Welt: Türkis als der eine warme-kühle Akzent (Wasser/Luft). Gleiche Stufen wie
   Klassisch: Zeigen eine Stufe heller, Drücken eine dunkler. Schrift #04211e auf #2fbfae 7.4:1. */
:root[data-welt="avatar"] {
  --accent: #2fbfae;
  --accent-hi: #7ddfd3;
  --accent-lo: #1e9e8f;
  --accent-deep: #11665d;
  --accent-ink: #04211e;
  --accent-glow: rgba(47, 191, 174, .30);
  --accent-soft: rgba(47, 191, 174, .14);
}

/* ---------------- Grund ---------------- */
html { background: var(--c-bg-0); }
body {
  font-family: var(--font-ui); font-weight: var(--fw-regular);
  color: var(--c-text);
  background:
    radial-gradient(70rem 40rem at 50% -12%, var(--accent-soft), transparent 70%),
    radial-gradient(ellipse 110% 85% at 50% 38%, var(--c-bg-3) 0%, var(--c-bg-1) 55%, var(--c-bg-0) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
/* Eczar hat hohe Ober-/Unterlängen — Überschriften rücken enger. */
:where(h1, h2, h3) { line-height: 1.15; }
::selection { background: var(--accent-soft); }

/* Schlanke Bildlaufleisten in Glas (Deck, Sammlung, Aufträge, Log). */
* { scrollbar-width: thin; scrollbar-color: rgba(176, 192, 225, .28) transparent; }

/* ---------------- Glas-Tafel (Klasse für neue Markup; Bestand nutzt die Tokens) ---------------- */
.panel {
  background: var(--glass); backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg); box-shadow: var(--sh-panel);
}

/* =====================================================================
   Knopf-System. Vier Arten: primär (Akzent, die EINE nächste Handlung),
   sekundär (neutral, Glas), leise (nur Text), Gefahr (rot getönt).

   Zwei Schichten, damit jede Art nur Werte setzt und die Zustände überall
   gleich aussehen:
   1. Art: setzt die Variablen --b-* (Füllung je Zustand, Rand, Schrift,
      Tiefe). Reihenfolge: sekundär < primär < leise < Gefahr (die spätere
      Art gewinnt, wenn ein Knopf auf mehreren Listen steht).
   2. Zustand: zeigen (hover) = eine Stufe heller, +1 px angehoben;
      drücken (active) = eine Stufe dunkler, 3 px tiefer, Tiefenkante weg;
      fokussiert = Ring; gesperrt = flach, blass, ohne Schatten.
   Alle Regeln über :where() — Spezifität 0: Layout-Regeln (Breite, Höhe)
   in styles.css/world.css/title.css gewinnen immer.
   Klassen für neues Markup: .btn + .btn-primary|.btn-secondary|.btn-quiet|
   .btn-danger, Größen .btn-sm|.btn-lg. Bestehende ids/Klassen (von JS
   gemalt) stehen in den Listen.
   ===================================================================== */
:where(.btn, .btn-primary, .btn-secondary, .btn-quiet, .btn-danger,
  .title-btn, #btn-title-quick, .title-world,
  .action-bar button, #win-overlay .win-buttons button, #btn-main, #btn-undo, button.ghost, button.danger, #btn-take, #btn-concede, #btn-log,
  #btn-start, #btn-start-back, #btn-newgame-yes, #btn-newgame-no,
  #btn-missions-close, #btn-chest-close, #btn-finale-new, #btn-finale-close,
  #btn-challenge, #btn-challenge-later,
  .world-collection, #btn-newgame-world, .collection-back, #btn-sound, .lang-btn,
  .deck-suggest, .land-stepper button) {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--btn-h); padding: 0 1.25rem; box-sizing: border-box;
  font-family: var(--font-ui); font-size: var(--fs-md); font-weight: var(--fw-heavy);
  line-height: 1.15; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  border-radius: var(--r-btn); border: 1px solid var(--b-edge); cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
  /* Standardwerte = sekundär; jede Art unten überschreibt sie (gleiche Spezifität, später gewinnt). */
  --b-fill: rgba(255, 255, 255, .07); --b-fill-hover: rgba(255, 255, 255, .13); --b-fill-press: rgba(0, 0, 0, .24);
  --b-edge: rgba(196, 210, 240, .20); --b-edge-hover: rgba(220, 230, 255, .36);
  --b-ink: var(--c-text); --b-ink-hover: var(--c-text);
  --b-depth: rgba(0, 0, 0, .35); --b-hl: rgba(255, 255, 255, .10); --b-glow: 0 4px 12px rgba(0, 0, 0, .22);
  --b-press-sh: inset 0 2px 5px rgba(0, 0, 0, .35); --b-lift: -1px; --b-sink: var(--btn-lip);
  background: var(--b-fill); color: var(--b-ink);
  box-shadow: inset 0 1px 0 var(--b-hl), 0 var(--btn-lip) 0 var(--b-depth), var(--b-glow);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
    background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}

/* Das hidden-Attribut bleibt die Wahrheit: die display-Regel oben schlägt sonst
   das UA-Versteck (Spezifität 0,1,0 > :where). */
:where(button, a)[hidden] { display: none; }

/* ---- Art 1: sekundär (neutral, Glas) — der Standard ---- */
:where(.btn, .btn-secondary, .title-world,
  .action-bar button, #win-overlay .win-buttons button,
  #btn-start-back, #btn-newgame-no, #btn-missions-close, #btn-finale-close, #btn-challenge-later,
  .world-collection, #btn-newgame-world, .collection-back, #btn-sound, .land-stepper button) {
  --b-fill: rgba(255, 255, 255, .07);
  --b-fill-hover: rgba(255, 255, 255, .13);
  --b-fill-press: rgba(0, 0, 0, .24);
  --b-edge: rgba(196, 210, 240, .20);
  --b-edge-hover: rgba(220, 230, 255, .36);
  --b-ink: var(--c-text);
  --b-ink-hover: var(--c-text);
  --b-depth: rgba(0, 0, 0, .35);
  --b-hl: rgba(255, 255, 255, .10);
  --b-glow: 0 4px 12px rgba(0, 0, 0, .22);
  --b-press-sh: inset 0 2px 5px rgba(0, 0, 0, .35);
  --b-lift: -1px;
}

/* ---- Art 2: primär — Akzent mit Lippe, die eine nächste Handlung ---- */
:where(.btn-primary, .title-btn.primary, .action-bar button.primary, #btn-main,
  #win-overlay .win-buttons button.primary, #btn-take, #btn-start, #btn-newgame-yes,
  #btn-chest-close, #btn-finale-new, #btn-challenge, .deck-suggest) {
  --b-fill: var(--accent);
  --b-fill-hover: var(--accent-hi);
  --b-fill-press: var(--accent-lo);
  --b-edge: transparent;
  --b-edge-hover: transparent;
  --b-ink: var(--accent-ink);
  --b-ink-hover: var(--accent-ink);
  --b-depth: var(--accent-deep);
  --b-hl: rgba(255, 255, 255, .38);
  --b-glow: 0 .4rem 1rem -.4rem var(--accent-glow);
  --b-press-sh: inset 0 2px 4px rgba(0, 0, 0, .22);
  --b-lift: -1px;
}

/* ---- Art 3: leise — nur Text, Fläche erst beim Zeigen ---- */
:where(.btn-quiet, #btn-title-quick, #btn-undo, button.ghost, #btn-log) {
  --b-fill: transparent;
  --b-fill-hover: rgba(255, 255, 255, .07);
  --b-fill-press: rgba(255, 255, 255, .12);
  --b-edge: transparent;
  --b-edge-hover: transparent;
  --b-ink: var(--c-text-2);
  --b-ink-hover: var(--c-text);
  --b-depth: transparent;
  --b-hl: transparent;
  --b-glow: none;
  --b-press-sh: none;
  --b-lift: 0px;
  --b-sink: 0px;
  font-weight: var(--fw-bold);
}

/* ---- Art 4: Gefahr — rot getönt, voll rot erst beim Zeigen ---- */
:where(.btn-danger, button.danger, #btn-concede, .action-bar button.burn-warn) {
  --b-fill: var(--c-danger-soft);
  --b-fill-hover: var(--c-danger-solid);
  --b-fill-press: var(--c-danger-deep);
  --b-edge: rgba(224, 101, 93, .45);
  --b-edge-hover: var(--c-danger-solid);
  --b-ink: var(--c-danger-text);
  --b-ink-hover: #ffffff;
  --b-depth: rgba(0, 0, 0, .35);
  --b-hl: rgba(255, 255, 255, .08);
  --b-glow: none;
  --b-press-sh: inset 0 2px 5px rgba(0, 0, 0, .35);
  --b-lift: -1px;
}

/* ---- Zustände (für alle Arten gleich) ---- */
/* Zeigen: eine Stufe heller, ein Hauch Hebung. Spezifität (0,2,0) schlägt die Arten. */
:where(.btn, .btn-primary, .btn-secondary, .btn-quiet, .btn-danger, .title-btn,
  .action-bar button, #win-overlay .win-buttons button, #btn-main, #btn-undo, button.ghost, button.danger, #btn-take, #btn-concede,
  #btn-start, #btn-start-back, #btn-newgame-yes, #btn-newgame-no,
  #btn-missions-close, #btn-chest-close, #btn-finale-new, #btn-finale-close,
  #btn-challenge, #btn-challenge-later,
  .world-collection, #btn-newgame-world, .collection-back, #btn-sound,
  .deck-suggest, .land-stepper button, .title-world,
  #btn-title-quick, #btn-undo, button.ghost, #btn-log):hover:not(:disabled) {
  background: var(--b-fill-hover);
  border-color: var(--b-edge-hover);
  color: var(--b-ink-hover);
  transform: translateY(var(--b-lift));
  box-shadow: inset 0 1px 0 var(--b-hl), 0 calc(var(--btn-lip) + 1px) 0 var(--b-depth), var(--b-glow);
}
/* Drücken: eine Stufe dunkler, 3 px tiefer, die Tiefenkante fällt weg. */
:where(.btn, .btn-primary, .btn-secondary, .btn-quiet, .btn-danger, .title-btn,
  .action-bar button, #win-overlay .win-buttons button, #btn-main, #btn-undo, button.ghost, button.danger, #btn-take, #btn-concede,
  #btn-start, #btn-start-back, #btn-newgame-yes, #btn-newgame-no,
  #btn-missions-close, #btn-chest-close, #btn-finale-new, #btn-finale-close,
  #btn-challenge, #btn-challenge-later,
  .world-collection, #btn-newgame-world, .collection-back, #btn-sound,
  .deck-suggest, .land-stepper button, .title-world,
  #btn-title-quick, #btn-undo, button.ghost, #btn-log):active:not(:disabled) {
  background: var(--b-fill-press);
  color: var(--b-ink);
  transform: translateY(var(--b-sink));
  box-shadow: var(--b-press-sh);
}
/* Gesperrt: flach, blass, ohne Schatten und ohne Hebung. */
:where(.btn, .btn-primary, .btn-secondary, .btn-quiet, .btn-danger, .title-btn,
  .action-bar button, #win-overlay .win-buttons button, #btn-main, #btn-undo, button.ghost, button.danger, #btn-take, #btn-concede,
  #btn-start, #btn-start-back, #btn-newgame-yes, #btn-newgame-no,
  #btn-missions-close, #btn-chest-close, #btn-finale-new, #btn-finale-close,
  #btn-challenge, #btn-challenge-later, #btn-sound,
  .deck-suggest, .land-stepper button):disabled {
  cursor: not-allowed; transform: none; filter: saturate(.3); opacity: .42;
  box-shadow: none; text-shadow: none;
}
/* Fokus (Tastatur): klarer Ring; (0,2,0) und nach den Zuständen, damit er auch beim Zeigen bleibt. */
:where(button, a, [role="button"], .choice-card, .card):focus-visible:not(:disabled) {
  outline: none; box-shadow: var(--focus-ring);
}

/* ---- Größen ---- */
:where(.btn-sm, .world-collection, #btn-newgame-world, .collection-back, #btn-sound, .lang-btn) {
  min-height: var(--btn-h-sm); padding: 0 .875rem; font-size: var(--fs-sm); border-radius: var(--r-md);
}
:where(.btn-lg, .title-btn.primary, #btn-newgame-yes, #btn-newgame-no, #btn-start, #btn-start-back) {
  min-height: var(--btn-h-lg); padding: 0 2rem; font-size: var(--fs-lg); border-radius: var(--r-lg);
}

/* ---- Segment-Schalter (DE | EN): eine Glas-Kapsel, das aktive Segment im Akzent ---- */
:where(#lang-toggle) {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md);
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--c-line);
}
:where(.lang-btn) {
  min-height: calc(var(--btn-h-sm) - 6px); min-width: 2.5rem; padding: 0 .625rem;
  color: var(--c-text-2); background: transparent; border-color: transparent; border-radius: calc(var(--r-md) - 3px);
  font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: .06em; box-shadow: none;
}
:where(.lang-btn):hover { color: var(--c-text); background: rgba(255, 255, 255, .08); }
:where(.lang-btn.active) {
  color: var(--accent-ink); background: var(--accent); box-shadow: none;
}

/* ---- Symbole: eigene Linien-Icons (SVG-Masken, currentColor) — Text bleibt Text ---- */
:where(.ico)::before, :where(#btn-missions, #btn-collection, #btn-deck, #btn-newgame-world, .collection-back, #btn-backToWorld)::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#btn-missions { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 11h7M9 15h7M9 7h3'/%3E%3C/svg%3E"); }
#btn-collection { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='11' height='15' rx='2'/%3E%3Cpath d='M17 4.5l3.2 1.1-4 13.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
#btn-deck { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='16' rx='2'/%3E%3Cpath d='M4 7v12a2 2 0 0 0 2 2h10' stroke-linecap='round'/%3E%3C/svg%3E"); }
#btn-newgame-world { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 4v4.5h4.5'/%3E%3C/svg%3E"); }
.collection-back, #btn-backToWorld { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }

/* ---------------- Kopfleiste (alle Seiten): eine Glasleiste ---------------- */
:where(#topbar) {
  background: linear-gradient(180deg, rgba(14, 19, 36, .88), rgba(9, 13, 26, .74));
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .35);
}

/* ---------------- Bewegung zurücknehmen, wenn gewünscht ---------------- */
@media (prefers-reduced-motion: reduce) {
  :where(button, a) { transition: none !important; }
}

/* M22.4 Routenkarte (world.css, ui/routescenery.js): die Südpol-Landschaft als gemalte Tokens.
   Ein Bild, kein Thema: gleich in hell und dunkel. Schrift dunkel mit hellem Rand. */
:root {
  --route-sky-top: #9fd3ec;
  --route-sky-bot: #eef8fd;
  --route-aurora: rgba(120, 232, 206, .32);
  --route-aurora-2: rgba(164, 152, 255, .26);
  --route-glacier: #dcedf7;
  --route-glacier-edge: #a6cbe0;
  --route-snow: #ffffff;
  --route-snow-edge: #d3e6f1;
  --route-sea: #7fbcd9;
  --route-floe: #f4fbff;
  --route-floe-edge: #9ccde3;
  --route-berg: #f7fcff;
  --route-berg-shade: #b4d9ea;
  --route-igloo: #fbfeff;
  --route-igloo-door: #3d6f8c;
  --route-penguin: #1d2b3a;
  --route-penguin-belly: #f6f8fb;
  --route-seal: #7b8c9a;
  --route-ship: #5a3b2a;
  --route-sail: #d9473a;
  --route-flake: #ffffff;
  --route-track: #4b6f8c;
  --route-track-bed: rgba(255, 255, 255, .72);
  --route-disc: #fffdf6;
  --route-ink: #14263a;
  --route-halo: #ffffff;
  --route-done: #c9efd5;
  --route-done-ink: #1f6b43;
  --route-lock-disc: #d8dee7;
  --route-lock-edge: #7d8796;
  --route-lock-ink: #3e4756;
  /* M30.4 Karte A: Berge, Boden, Insel, Tempel (routescenery.js, kyoshiSzenerie). */
  --route-fels: #9bb3a3;
  --route-fels-shade: #6c8677;
  --route-boden: #b7d98f;
  --route-insel: #9fcc74;
  --route-insel-edge: #6f9a4f;
  --route-welle: #ffffff;
  --route-tempel: #f5ecd7;
  --route-tempel-dach: #b8473c;
  /* M30.5 Karte B: Stadtberge, Terrassen, Rohrpost, Tal, Fluss, Bäume (routescenery.js, omashuSzenerie). */
  --route-stein: #c9b99c;
  --route-stein-schatten: #8f7d64;
  --route-stadt-dach: #c0644a;
  --route-rohr: #d9a441;
  --route-tal: #a9d18b;
  --route-tal-edge: #6f9f55;
  --route-fluss: #8ec9e8;
  --route-baum: #3f7a4a;
  --route-baum-stamm: #6b4f35;
  /* M30.6 Karte C: Plateau, Canyon mit Rand und Grund, Baumhaus-Holz (routescenery.js kluftSzenerie). */
  --route-kluft-plateau: #c8a878;
  --route-kluft-tiefe: #5b4636;
  --route-kluft-rand: #e2c9a0;
  --route-kluft-grund: #7d6248;
  --route-holz: #8a6540;
  --route-holz-haus: #e0c08a;
  /* M30.7 Karte D: Eiswände, Schnee, Kanäle, Brücken, Mond (routescenery.js, nordpolSzenerie). */
  --route-eis: #e4f3fb;
  --route-eis-rand: #9cc7e0;
  --route-schnee-boden: #f4f8fb;
  --route-kanal: #5f9fc9;
  --route-holz: #8a6a4a;
  --route-mond: #fff6d6;
}

/* ---------------- M26.D1: Dialog-Rahmen (ui/dialog.js) ----------------
   Z-Stufen als Tokens: Fenster in der Welt und am Tisch steigen von unten nach oben.
   Bestehende Fenster setzen ihre z-index noch selbst; die Migration (D2–D5) nimmt sie hierher. */
:root {
  --z-panel: 4;        /* Tafeln (Herausforderung, Region) */
  --z-choice: 60;      /* Wahlkästen am Tisch, Belohnungs- und Packfenster */
  --z-dialog: 70;      /* modale Fenster (Route, Zonen-Ansicht, Finale) */
  --z-confirm: 90;     /* Ja/Nein-Rückfragen — über jedem Fenster */
  --z-toast: 95;       /* Meldungen, die alles überdecken dürfen */
}

/* Scrim + zentriertes Feld. Gleiche Optik wie das Belohnungsfenster (world.css .reward-dialog). */
.sr-dialog {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 1rem; background: var(--scrim);
}
.sr-dialog--confirm { z-index: var(--z-confirm); }
.sr-dialog--toast { z-index: var(--z-toast); }
.sr-dialog[hidden] { display: none; }
.sr-dialog.is-leaving { opacity: 0; transition: opacity var(--dur-3) ease; }

.sr-dialog-panel {
  position: relative; box-sizing: border-box;
  width: max-content; max-width: min(64rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: 1.25rem 1.5rem 1rem;
  background: var(--glass-strong);
  border: 1px solid color-mix(in srgb, var(--c-gold) 50%, transparent); border-radius: var(--r-xl);
  box-shadow: var(--sh-dialog), 0 0 3rem -.5rem rgba(246, 196, 83, .35);
  animation: sr-dialog-fade .2s var(--ease-out);
}
.sr-dialog-panel.is-busy { cursor: progress; }
@keyframes sr-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sr-dialog-panel { animation: none; }
}
.sr-dialog-panel > * { flex-shrink: 0; }

.sr-dialog-title {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-heavy); line-height: 1.15;
  color: var(--c-gold-hi); margin: 0; text-align: center; text-wrap: balance;
  text-shadow: 0 0 1.5rem rgba(246, 196, 83, .4), 0 2px 4px rgba(0, 0, 0, .8);
}
.sr-dialog-body {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--fs-md); color: var(--c-text-2); text-align: center;
}
.sr-dialog-body p { margin: 0; }
.sr-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.sr-dialog-x {
  position: absolute; top: .5rem; right: .5rem; width: var(--btn-h-sm); min-height: var(--btn-h-sm); padding: 0;
}