/* ══════════════════════════════════════════════════════════════
   RETRY 2.0 — GAMING · Design Tokens
   Dieselbe Sprache wie das Hauptsystem — laut gesprochen.

   Kein einziger Farbwert weicht vom Hauptsystem ab. Was dazukommt,
   sind die --g-*-Tokens: Form (gekappte Ecken), Glut (Glühen +
   Kantenfarbe + Markerfarbe) und Versal-Tracking.

   Der Unterschied zum Hauptsystem ist nicht die Palette —
   es ist die Lautstärke, mit der sie gesprochen wird.

   Gesetzt: Licht TIEF · Glut MITTEL · Schrift VERSAL · Bewegung VOLL
   ══════════════════════════════════════════════════════════════ */

/* Die vier Achsen stehen am <html>-Tag. Sie sind Entscheidungen,
   keine Regler — im Interface gibt es dafür keine Umschalter. */
/* <html data-depth="deep" data-glow="mid" data-case="upper" data-motion="full"> */

:root{
  /* ── Text · echt neutral, kein Farbstich ──────────────────── */
  --r2-text-hi:  #F6F6F4;
  --r2-text:     #D3D4CF;
  --r2-text-mid: #9D9E98;
  --r2-text-low: #6F706A;

  /* ── Akzent · Waldgrün. Im Gaming-Modus ist die GANZE Rampe
        nutzbar, nicht nur die vier semantischen Tokens. ─────── */
  --r2-moss-900: #143020;
  --r2-moss-800: #1A4028;
  --r2-moss-700: #235532;
  --r2-moss-600: #2E6E41;
  --r2-moss-500: #3D8B52;
  --r2-moss-400: #4FA967;
  --r2-moss-300: #68C481;
  --r2-moss-200: #93DCA8;
  --r2-moss-100: #C2EFCF;

  /* ── Holz · die warme Gegenstimme. Der einzige Zweitakzent —
        nie eine kühle Farbe daneben stellen. ───────────────── */
  --r2-wood-500: #8A6C43;
  --r2-wood-300: #D4B489;
  --r2-wood-100: #EBD9BC;

  /* ── Status ───────────────────────────────────────────────── */
  --r2-ok:    #68C481;
  --r2-warn:  #D4B489;
  --r2-error: #D4776B;

  /* ── Radien · nur noch für Kleinteile (Tasten, Code, Inputs).
        Alles Größere trägt die Fase, nicht den Radius. ──────── */
  --r2-r-1: 8px;  --r2-r-2: 12px;  --r2-r-3: 16px;  --r2-r-4: 22px;
  --r2-r-full: 999px;

  /* ── Schatten · tiefer als im Hauptsystem ─────────────────── */
  --r2-shadow-1: 0 2px 4px rgba(0,0,0,.50);
  --r2-shadow-2: 0 4px 10px rgba(0,0,0,.52), 0 16px 40px rgba(0,0,0,.42);
  --r2-shadow-3: 0 10px 24px rgba(0,0,0,.56), 0 40px 96px rgba(0,0,0,.50);
  --r2-bevel:    inset 0 1px 0 rgba(255,255,255,.07);
  --r2-bevel-hi: inset 0 1px 0 rgba(255,255,255,.16);

  /* ── Bewegung · unverändert. Fünf Dauern, fünf Kurven ─────── */
  --r2-d1: 120ms; --r2-d2: 200ms; --r2-d3: 320ms; --r2-d4: 520ms; --r2-d5: 760ms;
  --r2-ease:   cubic-bezier(.22,.61,.24,1);
  --r2-in:     cubic-bezier(.55,0,.85,.36);
  --r2-both:   cubic-bezier(.65,0,.24,1);
  --r2-spring: cubic-bezier(.34,1.56,.44,1);
  --r2-snap:   cubic-bezier(.2,0,0,1);

  /* ── Abstände · 4px-Raster ────────────────────────────────── */
  --r2-s1:4px; --r2-s2:8px;  --r2-s3:12px; --r2-s4:16px; --r2-s5:24px;
  --r2-s6:32px; --r2-s7:48px; --r2-s8:64px; --r2-s9:96px; --r2-s10:128px;

  /* ── Typo ─────────────────────────────────────────────────── */
  --r2-font:  'Sora', system-ui, -apple-system, sans-serif;
  --r2-mono:  'Geist Mono', ui-monospace, monospace;
  --r2-serif: 'Newsreader', Georgia, serif;

  /* ══ FORM · gekappte Ecken, das Markenzeichen ══════════════
     Die „-in"-Variante ist 1px kleiner und bildet die Füllung.
     clip-path würde jeden echten Rahmen an der Schräge abschneiden;
     zwei Ebenen geben auch der Diagonale ihre Hairline.          */
  --g-clip-lg:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  --g-clip-lg-in:polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 21px 100%, 0 calc(100% - 21px));
  --g-clip-md:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --g-clip-md-in:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  --g-clip-sm:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --g-clip-sm-in:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));

  /* Kerbe — gehört ausschließlich der Navigationsleiste.
     Zwei Stufen pro Seite, symmetrisch, beide Enden auf derselben
     Linie: ab bei 20% und 35%, auf bei 75% und 90%. Jede Stufe
     fällt 6px, jede Rampe läuft 20px — eine Steigung für alle vier,
     sonst liest sich die Kante als Zufall statt als Form. */
  --g-navbar:polygon(
    0 0, 100% 0,
    100% calc(100% - 12px),
    calc(90% + 20px) calc(100% - 12px),
    90%  calc(100% - 6px),
    calc(75% + 20px) calc(100% - 6px),
    75%  100%,
    calc(35% + 20px) 100%,
    35%  calc(100% - 6px),
    calc(20% + 20px) calc(100% - 6px),
    20%  calc(100% - 12px),
    0    calc(100% - 12px)
  );

  /* Hexagon — Rang-Pips, Freischaltungs-Abzeichen und die drei
     angeschnittenen Flächen im Hintergrund. Eine Form pro Rolle;
     dass der Hintergrund dieselbe führt, ist der Punkt. */
  --g-hex:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  /* ══ GLUT · aus den Alphas weiter unten zusammengesetzt ═════
     Jeder Schatten ist ein Paar: tiefer schwarzer Drop PLUS
     farbige Glut. Nie nur eins von beidem.                     */
  --g-glow-1: 0 0 14px rgba(79,169,103,var(--g-a1));
  --g-glow-2: 0 0 26px rgba(79,169,103,var(--g-a2));
  --g-glow-3: 0 0 42px rgba(79,169,103,var(--g-a3));
  --g-inset:  inset 0 0 22px rgba(79,169,103,calc(var(--g-a1) * .55));
  --g-tglow:  0 0 14px rgba(194,239,207,calc(var(--g-a1) * 1.15)),
              0 0 32px rgba(79,169,103,var(--g-a2));
  /* Für geclippte Flächen: box-shadow wird an der Schräge mit
     weggeschnitten, drop-shadow folgt der Silhouette. */
  --g-drop:   drop-shadow(0 2px 4px rgba(0,0,0,.50)) drop-shadow(0 14px 34px rgba(0,0,0,.40));
  --g-drop-hi:drop-shadow(0 4px 8px rgba(0,0,0,.52)) drop-shadow(0 22px 50px rgba(0,0,0,.46));
  --g-drop-glow: drop-shadow(0 0 9px rgba(79,169,103,var(--g-a2)));
}

/* ── LICHT · gesetzt auf TIEF ─────────────────────────────────
   Der Akzent wandert mit der Helligkeit: wird der Untergrund
   heller, sinkt sonst der Kontrast zur Akzentfläche und dieselbe
   Farbe wirkt verwaschen. Die anderen beiden Stufen bleiben im
   System, falls je eine hellere Fläche gebraucht wird.          */
:root[data-depth="deep"]{
  --r2-canvas:#0A0A0A; --r2-s-1:#111110; --r2-s-2:#171716; --r2-s-3:#1F201E; --r2-s-4:#292A27;
  --r2-line-soft:rgba(255,255,255,.055); --r2-line:rgba(255,255,255,.10); --r2-line-strong:rgba(255,255,255,.18);
  --r2-acc-fill:#2E6E41; --r2-acc-fill-hi:#357B49; --r2-acc-soft:#1D4A2B;
  --r2-acc-line:#3D8B52; --r2-acc-text:#68C481; --r2-acc-bright:#93DCA8;
}
:root[data-depth="base"]{
  --r2-canvas:#0F0F0E; --r2-s-1:#161615; --r2-s-2:#1D1E1C; --r2-s-3:#262724; --r2-s-4:#31322E;
  --r2-line-soft:rgba(255,255,255,.075); --r2-line:rgba(255,255,255,.14); --r2-line-strong:rgba(255,255,255,.23);
  --r2-acc-fill:#357F4A; --r2-acc-fill-hi:#3F9257; --r2-acc-soft:#225633;
  --r2-acc-line:#4FA967; --r2-acc-text:#7FD094; --r2-acc-bright:#A8E4B9;
}
:root[data-depth="open"]{
  --r2-canvas:#151514; --r2-s-1:#1D1E1C; --r2-s-2:#262724; --r2-s-3:#31322E; --r2-s-4:#3C3D38;
  --r2-line-soft:rgba(255,255,255,.095); --r2-line:rgba(255,255,255,.17); --r2-line-strong:rgba(255,255,255,.27);
  --r2-acc-fill:#3D8B52; --r2-acc-fill-hi:#48A160; --r2-acc-soft:#28633C;
  --r2-acc-line:#68C481; --r2-acc-text:#93DCA8; --r2-acc-bright:#C2EFCF;
}

/* ── GLUT · gesetzt auf MITTEL ────────────────────────────────
   Steuert vier Dinge gleichzeitig, weil sie zusammengehören:
   Stärke des Glühens, Farbe der Panel-Kanten, Farbe der Marker
   und über --g-gridop die Deckkraft der Hintergrund-Hexagone.
   Nie einzeln anfassen — sonst reißt der Zusammenhang.
   „off" ist die Disziplin von Retry 2.0 in Gaming-Form,
   „full" leuchtet an jeder Kante.                              */
:root[data-glow="off"]{
  --g-a1:0; --g-a2:0; --g-a3:0;
  --g-edge:var(--r2-line); --g-edge-hi:var(--r2-line-strong);
  --g-mark:var(--r2-text-low); --g-gridop:.20;
}
:root[data-glow="mid"]{
  --g-a1:.15; --g-a2:.26; --g-a3:.38;
  --g-edge:color-mix(in srgb, var(--r2-acc-line) 30%, var(--r2-line-strong));
  --g-edge-hi:var(--r2-acc-line);
  --g-mark:var(--r2-acc-line); --g-gridop:.55;
}
:root[data-glow="full"]{
  --g-a1:.28; --g-a2:.46; --g-a3:.68;
  --g-edge:color-mix(in srgb, var(--r2-acc-line) 62%, var(--r2-line-strong));
  --g-edge-hi:var(--r2-acc-text);
  --g-mark:var(--r2-acc-text); --g-gridop:1;
}

/* ── SCHRIFT · gesetzt auf VERSAL ─────────────────────────────
   Versal braucht POSITIVES Tracking, gemischt NEGATIVES. Beide
   Sätze kippen nur zusammen um, nie einzeln — sonst zerfasert
   die Schrift. "mixed" bleibt als Ausweg für Flächen, auf denen
   Versalien nicht tragen (lange Fließtexte, dichte Tabellen).   */
:root[data-case="upper"]{
  --g-uc:uppercase; --g-trd:.006em; --g-trh:.05em; --g-tru:.13em; --g-lhd:.94;
}
:root[data-case="mixed"]{
  --g-uc:none; --g-trd:-.052em; --g-trh:-.042em; --g-tru:-.02em; --g-lhd:.9;
}

/* ── BEWEGUNG · gesetzt auf VOLL ──────────────────────────────
   Die vier Dauerläufer: Puls, Ticker, Radar, Equalizer. Keiner
   sitzt im Lesefluss, der Hintergrund ist keiner davon.
   "calm" ist der Ausweg — schaltet alles ab, was von allein
   läuft. Interaktionen antworten weiter, Stille heißt nicht tot. */
:root[data-motion="calm"] .pulse,
:root[data-motion="calm"] .hud-dot,
:root[data-motion="calm"] .tag--ok .d,
:root[data-motion="calm"] .bars i,
:root[data-motion="calm"] .radar::before,
:root[data-motion="calm"] .ping::after,
:root[data-motion="calm"] .sk::after{ animation:none; }

/* ── Reduzierte Bewegung · Pflicht, nicht optional ─────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════════
   RESET & GRUNDTYPOGRAFIE
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--r2-font);
  font-size:15.5px; line-height:1.62; font-weight:400; letter-spacing:-.006em;
  color:var(--r2-text);
  background:var(--r2-canvas);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Sora geht nur bis 800 und wird darüber unruhig — 700 plus weite
   Sperrung wirkt schwerer als 800 ohne. */
h1,h2,h3,h4{ color:var(--r2-text-hi); font-weight:700; margin:0;
  text-transform:var(--g-uc);
  transition:letter-spacing var(--r2-d3) var(--r2-ease); }
h1{ font-size:clamp(2.6rem,7vw,5rem); line-height:var(--g-lhd); letter-spacing:var(--g-trd);
  text-shadow:var(--g-tglow); }
h2{ font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.08; letter-spacing:var(--g-trh);
  text-shadow:var(--g-tglow); }
h3{ font-size:1.0625rem; line-height:1.34; letter-spacing:var(--g-trh); font-weight:700; }
h4{ font-size:.9375rem; line-height:1.4;  letter-spacing:var(--g-trh); }
p{ margin:0 0 var(--r2-s4); max-width:78ch; }
a{ color:var(--r2-acc-text); text-decoration:none;
  transition:color var(--r2-d1) var(--r2-ease), text-shadow var(--r2-d2) var(--r2-ease); }
a:hover{ color:var(--r2-acc-bright); text-shadow:var(--g-glow-1); }
strong{ color:var(--r2-text-hi); font-weight:600; }
em{ font-style:normal; color:var(--r2-acc-text); }   /* Betonung über Farbe, nicht Kursiv */
code{ font-family:var(--r2-mono); font-size:.84em; color:var(--r2-text-hi);
  background:var(--r2-s-2); border:1px solid var(--r2-line-soft);
  padding:1px 5px; border-radius:5px; letter-spacing:0; }

::selection{ background:var(--r2-acc-soft); color:#fff; }
:focus-visible{ outline:none; }   /* wird pro Komponente als Glut gesetzt */
/* Generischer Fallback: ueberall dort, wo keine eigene Komponenten-Glut
   existiert, bleibt der Fokus trotzdem sichtbar. Spezifischere Regeln
   (z.B. .btn:focus-visible) gewinnen wie ueblich per Kaskade. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--r2-acc-bright);
  outline-offset: 2px;
}

/* Die Hintergrund-Ebene (weiter unten) liegt bei z-index 0, Modals
   und Overlays im Bestand bei 1000–10060 — der eigentliche Seiten-
   inhalt braucht dazwischen eine eigene Stapelebene.
   header bekommt bewusst eine höhere Stufe als main/footer: header
   und main bilden durch ihr explizites z-index sonst gleichrangige,
   eigene Stapelkontexte — bei Gleichstand entscheidet die Dokument-
   reihenfolge, und main (später im Markup) würde komplett über
   header malen. Damit wäre jedes z-index innerhalb von .Top
   (Dropdowns bis 10060) gefangen und nie mehr gegen den Inhalt von
   main sichtbar. Mit header > main/footer bleibt .Top samt seinen
   Panels immer über dem Seiteninhalt. */
main, footer{ position:relative; z-index:2; }
header{ position:relative; z-index:3; }

/* ══════════════════════════════════════════════════════════════
   HINTERGRUND · Licht und drei Hexagone
   Markup in templates/_hintergrund.html. Eine Ebene, zwei Zutaten:
   ein neutraler Lichtabfall von oben und drei große, angeschnittene
   Hexagone. Sonst nichts — kein Raster, keine Lichtfelder, keine
   Scanlines, keine Vignette, kein Korn.

   Er bewegt sich nicht. Nie. Das ist der Grund, warum die alte
   Sechs-Ebenen-Fassung ersetzt wurde: animiertes blur(80px) plus
   scale() rastert die riesige weichgezeichnete Textur in jedem
   Frame neu, vollflächige mix-blend-mode-Ebenen lassen sich nicht
   cachen — die GPU lief dauerhaft, auch im Leerlauf.

   Der Lichtabfall ist weiß, nicht grün: die Fläche bleibt grau,
   die Hexagone tragen die Farbe.
   ══════════════════════════════════════════════════════════════ */

/* Die Basisfarbe sitzt bewusst NICHT hier, sondern auf dem body —
   so bleibt die Ebene durchsichtig und kann nichts verdecken. */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:linear-gradient(180deg,
    rgba(255,255,255,.050) 0%,  rgba(255,255,255,.034) 14%,
    rgba(255,255,255,.021) 28%, rgba(255,255,255,.012) 42%,
    rgba(255,255,255,.005) 55%, rgba(255,255,255,0) 68%); }

/* Höhe = Breite × 1.155. Ein spitzes Sechseck ist um 2/√3 höher
   als breit — mit gleichen Werten kippt die Form.

   Sichtbarkeit hängt am Glut-Regler, aber gedämpft: bei „off"
   bleiben 40 % stehen. Ein Glow darf dort ganz verschwinden,
   diese drei nicht — sie sind das Einzige, was die Fläche trägt. */
.bg-hex{ position:absolute; display:block; clip-path:var(--g-hex);
  opacity:calc(.40 + .60 * var(--g-gridop));
  transition:opacity var(--r2-d4) var(--r2-ease); }

/* Der Verlauf läuft in allen dreien gleich (146°, dunkel oben
   links → hell unten rechts). Sonst wirkt das Licht, als käme es
   aus drei Richtungen. Nur die Deckkraft staffelt: einer führt,
   zwei begleiten. Alle drei sind über einen Rand hinaus
   angeschnitten — eine ganze Form in der Mitte wäre ein Motiv. */
.bg-hex-1{ width:40vw; height:46.2vw; right:-13vw; top:6vh;
  background:linear-gradient(146deg,
    rgba(79,169,103,.07) 0%,   rgba(79,169,103,.15) 30%,
    rgba(104,196,129,.26) 62%, rgba(147,220,168,.34) 100%); }
.bg-hex-2{ width:26vw; height:30vw; left:-9vw; bottom:-10vh;
  background:linear-gradient(146deg,
    rgba(79,169,103,.04) 0%,   rgba(79,169,103,.09) 30%,
    rgba(104,196,129,.16) 62%, rgba(147,220,168,.21) 100%); }
.bg-hex-3{ width:15vw; height:17.3vw; left:33vw; top:-11vh;
  background:linear-gradient(146deg,
    rgba(79,169,103,.03) 0%,   rgba(79,169,103,.06) 30%,
    rgba(104,196,129,.11) 62%, rgba(147,220,168,.14) 100%); }

/* ══════════════════════════════════════════════════════════════
   SIGNATUR 6 · Slash vor jedem Mikro-Label
   Prüfen, ob der Slash im Bestand schon da ist, bevor dieses
   Rezept auf eine bestehende Klasse angehängt wird (Kapitel 5.1).
   ══════════════════════════════════════════════════════════════ */
.micro{ font-family:var(--r2-mono); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--r2-text-mid);
  display:inline-flex; align-items:center; gap:.55em; }
.micro::before{ content:"/"; color:var(--g-mark); font-weight:600; flex:none;
  text-shadow:var(--g-glow-1);
  transition:color var(--r2-d3) var(--r2-ease), text-shadow var(--r2-d3) var(--r2-ease); }
.micro--bare{ display:block; }
.micro--bare::before{ content:none; }   /* wenn der Slash stört */
.micro--acc{ color:var(--r2-acc-text); }

/* ══════════════════════════════════════════════════════════════
   SIGNATUR 7 · Rauten statt Punkte — die einzige Punktform im
   System: Listenpunkte, Puls, Tag-Punkte, Marker.
   ══════════════════════════════════════════════════════════════ */
.dl{ list-style:none; margin:0; padding:0; }
.dl li{ position:relative; padding-left:21px; margin-bottom:var(--r2-s2);
  font-size:.8125rem; color:var(--r2-text-mid); }
.dl li::before{ content:''; position:absolute; left:3px; top:.56em;
  width:7px; height:7px; transform:rotate(45deg);
  border:1px solid color-mix(in srgb, var(--g-mark) 72%, transparent);
  background:color-mix(in srgb, var(--g-mark) 22%, transparent);
  box-shadow:0 0 10px rgba(79,169,103,var(--g-a2));
  transition:border-color var(--r2-d3) var(--r2-ease), box-shadow var(--r2-d3) var(--r2-ease); }

/* Minimal und sicher – Glyphe (◆) bleibt aus Template/JS, nur
   Farbe und Glut wechseln (Kapitel 5.2). */
.punkte-diamant, .ddf-leben-diamant{
  color:var(--g-mark);
  font-size:.6em;
  text-shadow:var(--g-glow-1);
}

/* Listenpunkte (Startseite, Lobby, Dialoge) */
.spiel-karte ul, .dialog-liste, .aenderungen-liste{ list-style:none; margin:0; padding:0; }
.spiel-karte li, .dialog-liste li, .aenderungen-liste li{
  position:relative; padding-left:21px; margin-bottom:var(--r2-s2);
  font-size:.8125rem; color:var(--r2-text-mid);
}
.spiel-karte li::before, .dialog-liste li::before, .aenderungen-liste li::before{
  content:''; position:absolute; left:3px; top:.56em;
  width:7px; height:7px; transform:rotate(45deg);
  border:1px solid color-mix(in srgb, var(--g-mark) 72%, transparent);
  background:color-mix(in srgb, var(--g-mark) 22%, transparent);
  box-shadow:0 0 10px rgba(79,169,103,var(--g-a2));
}

/* ══════════════════════════════════════════════════════════════
   KARTE / PANEL · Zwei Ebenen, Fase, Eckklammern (Kapitel 5.3)
   ══════════════════════════════════════════════════════════════ */
.g-card{
  position:relative; isolation:isolate;
  background:var(--g-edge);
  clip-path:var(--g-clip-lg);
  padding:var(--r2-s5);
  filter:var(--g-drop);
  transition:background var(--r2-d2) var(--r2-ease),
             transform var(--r2-d3) var(--r2-ease),
             filter var(--r2-d3) var(--r2-ease);
}
.g-card::before{
  content:''; position:absolute; inset:1px; z-index:-2;
  clip-path:var(--g-clip-lg-in);
  background:
    linear-gradient(90deg, var(--r2-acc-line), transparent 58%) 0 0/100% 2px no-repeat,
    linear-gradient(180deg, rgba(79,169,103,calc(var(--g-a1) * .30)), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 38%),
    var(--r2-s-1);
}
.g-card::after{                       /* Eckklammern */
  content:''; position:absolute; inset:7px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(var(--r2-acc-line),var(--r2-acc-line)) 0 0/17px 2px no-repeat,
    linear-gradient(var(--r2-acc-line),var(--r2-acc-line)) 0 0/2px 17px no-repeat,
    linear-gradient(var(--r2-acc-line),var(--r2-acc-line)) 100% 100%/17px 2px no-repeat,
    linear-gradient(var(--r2-acc-line),var(--r2-acc-line)) 100% 100%/2px 17px no-repeat;
  opacity:calc(.28 + var(--g-a1));
  transition:opacity var(--r2-d2) var(--r2-ease);
}
@media (hover:hover){
  .g-card--hover:hover{ background:var(--g-edge-hi); transform:translateY(-3px);
    filter:var(--g-drop-hi) var(--g-drop-glow); }
  .g-card--hover:hover::after{ opacity:1; }
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS · sechs Stufen (Kapitel 5.4 / components.md „Buttons")
   Von laut nach leise: Boost → Primär → Kontur → Holz → Neutral
   → Eingelassen. Eine Boost-Aktion pro Bildschirm, sonst keine.
   ══════════════════════════════════════════════════════════════ */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  font-family:var(--r2-font); font-size:.75rem; font-weight:700;
  text-transform:var(--g-uc); letter-spacing:var(--g-tru);
  height:44px; padding:0 var(--r2-s5);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--r2-s2);
  background:var(--r2-line-strong); clip-path:var(--g-clip-sm);
  color:var(--r2-text-hi); cursor:pointer; white-space:nowrap; border:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition:background var(--r2-d1) var(--r2-ease), transform var(--r2-d1) var(--r2-ease),
             filter var(--r2-d2) var(--r2-ease), color var(--r2-d1) var(--r2-ease),
             letter-spacing var(--r2-d3) var(--r2-ease);
}
/* ::before = Füllung, ::after = Licht-Sweep. Beide auf z-index:-1;
   das spätere Pseudoelement liegt oben, deshalb ist der Sweep ::after. */
.btn::before{ content:''; position:absolute; inset:1px; z-index:-1;
  clip-path:var(--g-clip-sm-in);
  background:linear-gradient(160deg, var(--r2-s-3), var(--r2-s-2));
  transition:background var(--r2-d1) var(--r2-ease); }
.btn::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:46%; z-index:-1;
  background:linear-gradient(104deg, transparent, rgba(255,255,255,.16) 48%, transparent);
  transform:translateX(-180%); }
.btn:hover{ background:var(--r2-acc-line); transform:translateY(-2px);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(79,169,103,var(--g-a2))); }
.btn:hover::before{ background:linear-gradient(160deg, var(--r2-s-4), var(--r2-s-3)); }
.btn:hover::after{ transform:translateX(340%); transition:transform 640ms var(--r2-ease); }
.btn:active{ transform:translateY(0) scale(.975); transition-duration:60ms; }
.btn:focus-visible{ background:var(--r2-acc-text);
  filter:drop-shadow(0 0 0 2px var(--r2-canvas)) drop-shadow(0 0 12px rgba(104,196,129,.7)); }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn .ico{ display:inline-flex; transition:transform var(--r2-d2) var(--r2-spring); }
.btn:hover .ico{ transform:translateX(4px); }
.btn--sm{ height:34px; padding:0 var(--r2-s4); font-size:11px; }
.btn--lg{ height:54px; padding:0 var(--r2-s6); font-size:.8125rem; }
.btn--wide{ width:100%; }

/* Boost — die lauteste Aktion. Helle Fläche, dunkle Schrift, volle Glut. */
.btn--boost{ background:var(--r2-acc-bright); color:#08150C;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(104,196,129,var(--g-a2))); }
.btn--boost::before{ background:linear-gradient(140deg, var(--r2-acc-bright), var(--r2-acc-text) 72%); }
.btn--boost::after{ background:linear-gradient(104deg, transparent, rgba(255,255,255,.44) 48%, transparent); }
.btn--boost:hover{ background:var(--r2-moss-100);
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(147,220,168,var(--g-a3))); }
.btn--boost:hover::before{ background:linear-gradient(140deg, var(--r2-moss-100), var(--r2-acc-bright) 72%); }

/* Primär — Akzentfläche mit Verlauf über zwei Stufen */
.btn--primary{ background:var(--r2-acc-line); color:#EAF7EE;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 9px rgba(79,169,103,var(--g-a1))); }
.btn--primary::before{
  background:linear-gradient(140deg, var(--r2-acc-fill-hi), var(--r2-acc-fill) 58%, var(--r2-moss-800)); }
.btn--primary::after{ background:linear-gradient(104deg, transparent, rgba(255,255,255,.26) 48%, transparent); }
.btn--primary:hover{ background:var(--r2-acc-text);
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(79,169,103,var(--g-a3))); }
.btn--primary:hover::before{
  background:linear-gradient(140deg, var(--r2-acc-text), var(--r2-acc-fill-hi) 62%, var(--r2-moss-700)); }

/* Kontur — Akzent nur als Linie und Schrift */
.btn--outline{ background:var(--r2-acc-line); color:var(--r2-acc-text); }
.btn--outline::before{ background:var(--r2-canvas); }
.btn--outline:hover{ background:var(--r2-acc-text); color:var(--r2-acc-bright); }
.btn--outline:hover::before{ background:var(--r2-moss-900); }

/* Holz — die warme Gegenstimme. Belohnung, Freischaltung. */
.btn--wood{ background:var(--r2-wood-100); color:#1A1206;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(212,180,137,calc(var(--g-a2) * .8))); }
.btn--wood::before{ background:linear-gradient(140deg, var(--r2-wood-300), #A88657 78%); }
.btn--wood:hover{ background:#F3E6CF; }
.btn--wood:hover::before{ background:linear-gradient(140deg, var(--r2-wood-100), var(--r2-wood-300) 78%); }

/* Eingelassen — die leiseste Stufe, aber mit sichtbarer Kante.
   Eine transparente Fase lässt sich nicht sauber umranden. */
.btn--quiet{ background:var(--r2-line); color:var(--r2-text-mid); filter:none; }
.btn--quiet::before{ background:var(--r2-canvas); }
.btn--quiet:hover{ background:var(--r2-line-strong); color:var(--r2-text-hi); filter:none; }
.btn--quiet:hover::before{ background:var(--r2-s-2); }

/* Gefahr */
.btn--danger{ background:rgba(212,119,107,.55); color:var(--r2-error); }
.btn--danger::before{ background:var(--r2-canvas); }
.btn--danger:hover{ background:var(--r2-error); color:#1A0906;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(212,119,107,.45)); }
.btn--danger:hover::before{ background:linear-gradient(140deg, var(--r2-error), #A9544B 78%); }

/* Farbkante links — 4px Akzentrand */
.btn--strip{ padding-left:calc(var(--r2-s5) + 6px); }
.btn--strip::before{ background:linear-gradient(90deg, var(--r2-acc-line) 0 4px, var(--r2-s-2) 4px); }
.btn--strip:hover::before{ background:linear-gradient(90deg, var(--r2-acc-text) 0 4px, var(--r2-s-3) 4px); }

/* Ripple und Kick */
.ripple{ position:absolute; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,.34), rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0); animation:rip 620ms var(--r2-ease) forwards; }
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* Der Kick · Stauchen und zurückschnellen. NUR bei Bestätigung,
   nie beim Drücken — sonst wird aus Wucht Zappeln. */
@keyframes g-punch{
  0%{ transform:scale(1); } 20%{ transform:scale(.93); }
  52%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
.kick{ animation:g-punch 380ms var(--r2-both); }

/* ── Fokus und Press · wiederverwendbare Muster (Schritt 8) ──────────
   Ein rechteckiger outline zeichnet über jede gekappte Ecke ein Quadrat.
   Auf gefasten Flächen tritt deshalb Glut an seine Stelle. Der generische
   outline-Fallback weiter oben bleibt stehen und fängt alles ab, was
   keine eigene Regel bekommt.

   Diese Klassen gehören NICHT ins Markup — viele Elemente werden von JS
   erzeugt. Sie sind Vorlagen: Bestandsselektoren hängen sich per Komma
   an oder schreiben die Deklarationen ab. */

/* Konstruktion A · die Fläche IST die Kante, der Fokus hellt sie auf. */
.g-focus:focus-visible{
  outline:none;
  background:var(--r2-acc-text);
  filter:var(--g-drop-hi) drop-shadow(0 0 14px rgba(104,196,129,.7));
}
/* Konstruktion B · beide Pseudoelemente belegt, die Kante liegt innen. */
.g-focus-inset:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--r2-acc-text);
  filter:var(--g-drop-hi) drop-shadow(0 0 14px rgba(104,196,129,.7));
}
/* Press · die Antwort auf jede Berührung. Der Kick (.kick) bleibt der
   Bestätigung vorbehalten, sonst wird aus Wucht Zappeln. */
.g-press:active{ transform:translateY(0) scale(.975); transition-duration:60ms; }

/* Halten zum Bestätigen — für alles Endgültige. */
.hold{ position:relative; overflow:hidden; }
.hold .fillbar{ position:absolute; inset:0; z-index:-1; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, var(--r2-error), #E08E82);
  transition:transform var(--r2-d2) var(--r2-ease); }
.hold.arm .fillbar{ transform:scaleX(1); transition:transform 900ms linear; }

/* ══════════════════════════════════════════════════════════════
   EINGABEN (Kapitel 5.5)
   ══════════════════════════════════════════════════════════════ */
.field{ margin-bottom:var(--r2-s4); position:relative; }
.flabel{ position:absolute; left:14px; top:13px; font-size:.8125rem; color:var(--r2-text-low);
  pointer-events:none; transform-origin:left top;
  transition:transform var(--r2-d2) var(--r2-both), color var(--r2-d2) var(--r2-ease); }
.input{ width:100%; height:48px; padding:18px 14px 4px; font-family:var(--r2-font);
  font-size:.8125rem; font-weight:500; color:var(--r2-text-hi); background:var(--r2-canvas);
  border:1px solid var(--r2-line); border-radius:var(--r2-r-1); outline:none;
  box-shadow:inset 0 0 18px rgba(0,0,0,.4);   /* eingelassen, nicht aufgesetzt */
  transition:border-color var(--r2-d2) var(--r2-ease), background var(--r2-d2) var(--r2-ease),
             box-shadow var(--r2-d2) var(--r2-ease); }
.input:hover{ border-color:var(--r2-line-strong); }
.input:focus{ border-color:var(--r2-acc-line); background:var(--r2-s-1);
  box-shadow:0 0 0 3px rgba(61,139,82,.22), var(--g-glow-1), inset 0 0 18px rgba(79,169,103,.06); }
.input:focus ~ .flabel,
.input:not(:placeholder-shown) ~ .flabel{ transform:translateY(-9px) scale(.76); color:var(--r2-acc-text); }
.field.err .input{ border-color:var(--r2-error); box-shadow:0 0 0 3px rgba(212,119,107,.20);
  animation:shake 380ms var(--r2-both); }
@keyframes shake{ 0%,100%{transform:translateX(0)} 22%{transform:translateX(-6px)}
  44%{transform:translateX(5px)} 66%{transform:translateX(-3px)} 88%{transform:translateX(2px)} }
.hint{ font-size:.75rem; color:var(--r2-text-low); margin-top:5px; height:14px; opacity:0;
  transform:translateY(-3px);
  transition:opacity var(--r2-d2) var(--r2-ease), transform var(--r2-d2) var(--r2-ease); }
.field.err .hint{ opacity:1; transform:none; color:var(--r2-error); }

/* ══════════════════════════════════════════════════════════════
   MODALS & OVERLAYS (Kapitel 5.6)
   ══════════════════════════════════════════════════════════════ */
.g-backdrop{
  position:fixed; inset:0;
  background:color-mix(in srgb, var(--r2-canvas) 82%, transparent);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
}
/* Karte: Zwei-Ebenen wie .g-card, aber tieferer Schatten und ohne Hover */
.g-modal{
  position:relative; isolation:isolate;
  background:var(--g-edge); clip-path:var(--g-clip-lg);
  padding:var(--r2-s5) var(--r2-s6);
  filter:var(--g-drop-hi) var(--g-drop-glow);
  animation:g-modal-in var(--r2-d4) var(--r2-ease);
}
.g-modal::before{
  content:''; position:absolute; inset:1px; z-index:-1;
  clip-path:var(--g-clip-lg-in);
  background:
    linear-gradient(90deg, var(--r2-acc-line), transparent 58%) 0 0/100% 2px no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 40%),
    var(--r2-s-1);
}
@keyframes g-modal-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:none; }
}
/* lobby.html benutzt echte <dialog>-Elemente mit showModal(); der
   Schleier ist dort ::backdrop, nicht .g-backdrop. */
dialog.custom-modal::backdrop{
  background:color-mix(in srgb, var(--r2-canvas) 82%, transparent);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
}

/* ══════════════════════════════════════════════════════════════
   FLASH-TOASTS (Kapitel 5.7)
   ══════════════════════════════════════════════════════════════ */
.flash-toast{
  position:relative; overflow:hidden;
  min-height:48px; padding:13px 46px 13px 18px;
  background:var(--g-edge); clip-path:var(--g-clip-sm);
  color:var(--r2-text); pointer-events:auto;
  filter:var(--g-drop-hi);
  transition:opacity var(--r2-d2) var(--r2-ease), transform var(--r2-d2) var(--r2-ease);
}
.flash-toast::before{                       /* Füllung + 4px Akzentrand links */
  content:''; position:absolute; inset:1px; z-index:-1;
  clip-path:var(--g-clip-sm-in);
  background:linear-gradient(90deg, var(--flash-accent, var(--r2-acc-line)) 0 4px, var(--r2-s-1) 4px);
}
.flash-toast.is-removing{ opacity:0; transform:translateX(14px); }
.flash-toast.success{ --flash-accent:var(--r2-acc-text); }
.flash-toast.error,
.flash-toast.danger { --flash-accent:var(--r2-error); }
/* ohne Kategorie = info → --r2-acc-line (Default oben) */

/* ══════════════════════════════════════════════════════════════
   HUD-CHROM · Warnschraffur, Hexagon, Tastenkürzel, Signale, Tabelle
   ══════════════════════════════════════════════════════════════ */
.hazard{ display:block;
  background:repeating-linear-gradient(-45deg, var(--r2-acc-line) 0 3px, transparent 3px 8px); }
/* Hexagon — nur Rang-Pips und Freischaltungs-Abzeichen */
.hexmark{ width:14px; height:16px; flex:none; clip-path:var(--g-hex);
  background:var(--g-mark); opacity:.8; }

.key{ display:inline-flex; align-items:center; justify-content:center;
  min-width:29px; height:29px; padding:0 9px;
  font-family:var(--r2-mono); font-size:11px; font-weight:500; letter-spacing:.06em;
  color:var(--r2-text-hi); background:linear-gradient(180deg, var(--r2-s-4), var(--r2-s-3));
  border:1px solid var(--r2-line); border-radius:6px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.55);  /* 3px Sockel */
  transition:transform var(--r2-d1) var(--r2-ease), box-shadow var(--r2-d1) var(--r2-ease),
             color var(--r2-d1) var(--r2-ease); }
.key:active,.key.down{ transform:translateY(3px); color:var(--r2-acc-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 rgba(0,0,0,.5), var(--g-glow-1); }

.tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--r2-mono);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px;
  border:1px solid var(--r2-line); color:var(--r2-text-mid);
  background:var(--r2-s-2); clip-path:var(--g-clip-sm); }
.tag .d{ width:5px; height:5px; background:currentColor; transform:rotate(45deg); flex:none; }
.tag--ok{ color:var(--r2-acc-text); border-color:var(--r2-acc-line);
  background:rgba(61,139,82,.16); box-shadow:var(--g-glow-1); }
.tag--ok .d{ animation:blink 2.6s var(--r2-ease) infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.30} }
.tag--solid{ color:#08150C; background:var(--r2-acc-text); border-color:var(--r2-acc-bright);
  box-shadow:var(--g-glow-2); }
.tag--wood{ color:var(--r2-wood-300); border-color:var(--r2-wood-500); background:rgba(138,108,67,.20); }
.tag--warn{ color:var(--r2-warn); border-color:rgba(212,180,137,.42); background:rgba(138,108,67,.16); }
.tag--err{ color:var(--r2-error); border-color:rgba(212,119,107,.42); background:rgba(212,119,107,.12); }

table{ width:100%; border-collapse:collapse; font-size:.8125rem; }
th{ text-align:left; font-weight:500; padding:0 0 var(--r2-s3); border-bottom:1px solid var(--r2-line);
  font-family:var(--r2-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--r2-text-mid); }
td{ padding:var(--r2-s3) 0; border-bottom:1px solid var(--r2-line-soft); color:var(--r2-text);
  position:relative; }
td:first-child{ color:var(--r2-text-hi); font-weight:500; }
td.num{ font-family:var(--r2-mono); font-variant-numeric:tabular-nums; text-align:right; }
tbody tr{ transition:background var(--r2-d1) var(--r2-ease); }
/* Derselbe linke Akzentrand wie an Menüpunkten und Toasts */
tbody tr td:first-child::before{ content:''; position:absolute; left:-12px; top:5px; bottom:5px;
  width:3px; background:var(--r2-acc-line); box-shadow:var(--g-glow-1);
  transform:scaleY(0); transform-origin:center;
  transition:transform var(--r2-d2) var(--r2-both); }
tbody tr:hover{ background:var(--r2-s-1); }
tbody tr:hover td:first-child::before{ transform:scaleY(1); }