:root{
  --bg:#050407;--bg2:#0c090e;--panel:#151117;--panel2:#211820;--ink:#f4eee8;--muted:#a99ca7;
  --red:#c81435;--red2:#ff4666;--gold:#d4a65d;--green:#58ca8b;--line:rgba(255,255,255,.11);
  /* Wegfarbe des Bretts. EIN Token fuer Linie UND Perlen - zwei getrennte waren
     am 16.08.2026 genau der Fehlermodus, der als "gruene Punkte auf goldener
     Linie" eine Woche unbemerkt live stand. Soll die Linie dunkler sein als die
     Perlen, dann ABGELEITET (color-mix), nicht als zweite freie Farbe.
     Nicht mit --gold (#d4a65d) zusammenlegen: das ist ein anderer, dunklerer
     Ton und traegt bereits acht andere Bedeutungen im Brett. Begruendung und
     Messwerte stehen bei .path-beads in board-2026.css. */
  --weg:#ffd89a;
  --safe-top:max(12px,env(safe-area-inset-top));--safe-bottom:max(10px,env(safe-area-inset-bottom));
  --shadow:0 24px 80px rgba(0,0,0,.68);--radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% -10%,rgba(119,12,36,.35),transparent 30%),linear-gradient(180deg,#09060a,#050407 70%)}
button,input,select{font:inherit}.hidden{display:none!important}button{cursor:pointer}.no-scroll{overflow:hidden}
.screen-noise{position:fixed;inset:0;pointer-events:none;z-index:500;opacity:.055;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.08) 4px);mix-blend-mode:screen}
.btn{min-height:54px;border:0;border-radius:15px;padding:13px 16px;font-weight:950;letter-spacing:.01em;color:#fff}
.btn-primary{background:linear-gradient(135deg,#961026,var(--red2));box-shadow:0 15px 36px rgba(199,21,53,.29)}
.btn-secondary{background:#1b161c;border:1px solid var(--line)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.16);color:#ddd3dc}
.btn:disabled{opacity:.38;cursor:default}.icon-btn{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(18,14,19,.85);color:#fff;display:grid;place-items:center;font-size:1.2rem}
.label{font-size:.65rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--muted)}
.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.19em;font-weight:900;color:#e9b16f}
.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.sheet,.modal{position:fixed;z-index:300}.sheet{left:0;right:0;bottom:0;max-height:92dvh;overflow:auto;border-radius:24px 24px 0 0;border:1px solid var(--line);border-bottom:0;background:linear-gradient(180deg,#1a141a,#09070a);box-shadow:0 -24px 70px rgba(0,0,0,.7);padding:10px 15px calc(18px + var(--safe-bottom));animation:sheetUp .32s cubic-bezier(.2,.8,.2,1)}
.sheet-handle{width:45px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);margin:2px auto 12px}
.modal{inset:0;display:grid;place-items:center;background:rgba(0,0,0,.78);backdrop-filter:blur(9px);padding:18px}
.modal-card{width:min(100%,430px);max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:25px;background:radial-gradient(circle at top,rgba(146,18,46,.3),transparent 42%),linear-gradient(160deg,#1d161c,#080608);box-shadow:var(--shadow);padding:22px 18px}
.toast{position:fixed;z-index:520;left:50%;bottom:calc(96px + var(--safe-bottom));transform:translateX(-50%);width:min(90%,410px);padding:11px 13px;border-radius:13px;background:#eee4da;color:#170b0f;font-size:.75rem;font-weight:900;text-align:center;box-shadow:0 14px 45px rgba(0,0,0,.5);animation:toastIn .25s ease}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media(min-width:700px){body{display:flex;justify-content:center}.app-shell{width:min(100%,560px);box-shadow:0 0 80px rgba(0,0,0,.65)}}
/* Fusszeile mit dem Altershinweis auf index.html und multiplayer.html.
   Lag bis 10.08.2026 in css/recht.css. Die Datei wird nicht mehr ausgeliefert,
   der Altershinweis bleibt aber stehen — ohne diese Regeln waere er ungestylt. */
.recht-fuss{margin:22px 14px calc(6px + var(--safe-bottom));padding-top:14px;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;font-size:.68rem;line-height:1.5;color:#8f838d;text-align:center}
.recht-fuss .recht-alter{width:100%;color:#8f838d}
.recht-fuss .recht-alter b{color:#e0d3dd;font-weight:900}

/* Figurenbeschreibung bei der Auswahl (24.08.2026). Steht HIER und nicht in
   home.css/multiplayer.css, weil beide Seiten dieselbe Anzeige bekommen und
   base.css die einzige Datei ist, die index.html UND multiplayer.html laden.
   Zweiter Grund, der schwerer wiegt: home.css und multiplayer.css tragen einen
   Cache-Buster (?v=07010), der laut sw.js an DREI Stellen gleichzeitig
   gepflegt werden muss (HTML, APP_FILES, Datei). base.css hat keinen — eine
   Regel hier kostet keine Buchfuehrung. */
.rollen-zeile{grid-column:1/-1;margin:0;font-size:.875rem;line-height:1.45;color:var(--muted)}
.rollen-zeile b{color:#e0d3dd;font-weight:850}
/* Das Rollenmenue im Setup wechselt bei jedem Wechsel den Text, und
   renderEditors ersetzt dabei das gesamte innerHTML. Ohne reservierte Hoehe
   springen alle Karten darunter, sobald eine Beschreibung eine Zeile kuerzer
   ist als die vorige.
   3 x 1.45em = 4.35em = 61 px. Der Wert ist am 24.08.2026 im Browser an allen
   SECHS Beschreibungen gemessen, nicht gerechnet: bei 390 px Fensterbreite
   (Zeilenbreite 296) brauchen Archivar und Gorehound drei Zeilen und die
   anderen vier zwei; bei 360 px (Zeilenbreite 266) sind es drei Zeilen fuer
   Archivar, Skeptiker und Gorehound. Das Maximum ist auf BEIDEN Breiten 61 px
   — hier stand zuerst 3.9em (55 px) aus einer Schaetzung, und damit haette es
   bei jeder dreizeiligen Rolle weiter gesprungen. Wer die Texte in
   data/game-data.json verlaengert, misst diesen Wert neu. */
.player-editor .rollen-zeile{min-height:4.35em}
/* Am eigenen Handy ist der Leseabstand kuerzer als am Tisch: die Lobby darf
   eine Spur kleiner sein als das Setup, das herumgereicht wird. */
.mp-form .rollen-zeile,#roleChangeCard .rollen-zeile{font-size:.8125rem}
#createRoleInfo .rollen-zeile,#lobbyRoleInfo .rollen-zeile{min-height:4.35em}

/* Der Knopf zum Blatt. Bewusst kein .btn: das ist der Primaerakzent (rot,
   54 px), und pro Sicht darf genau EINE Aktion so aussehen — hier ist das
   „Partie starten" bzw. „Raum erstellen". */
.rollen-knopf{width:100%;min-height:44px;margin:0 0 10px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;background:transparent;color:#cfc1c9;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.rollen-knopf:not(:disabled):hover{border-color:rgba(255,255,255,.3);color:var(--ink)}
.rollen-knopf:disabled{opacity:.38;cursor:default}
/* In der Lobby steht der Knopf UNTER dem Menue und braucht den Abstand oben. */
.mp-form .rollen-knopf{margin:2px 0 0}

.rollen-blatt-liste{display:grid;gap:9px;margin:12px 0 16px}
.rollen-blatt-zeile{display:grid;grid-template-columns:44px 1fr;gap:11px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.rollen-blatt-zeile img{width:44px;height:50px;object-fit:contain;filter:drop-shadow(0 5px 8px #000)}
.rollen-blatt-zeile b{display:block;font-size:.82rem;margin-bottom:4px}
.rollen-blatt-zeile small{display:block;color:var(--muted);font-size:.75rem;line-height:1.4;margin-top:3px}
.rollen-marke{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--gold)}

/* Anleitung (app-21) - EINE Form fuer die Startseite und fuer das Spielmenue
   beider Modi. Sie steht hier und nicht in home.css oder game.css, weil
   base.css die einzige Datei ist, die index.html UND game.html UND
   multiplayer-game.html gemeinsam laden - dieselbe Begruendung, aus der die
   .rollen-blatt-* Klassen ein paar Zeilen hoeher hier liegen. Zwei Kopien
   waeren genau der Doppelbestand, den js/anleitung.js aufloest.
   Kein position, kein z-index: die Anleitung liegt im Fluss ihres Wirts und
   kann strukturell nichts ueberlagern. */
.anleitung-block{margin:0 0 18px}
.anleitung-block:last-child{margin-bottom:0}
.anleitung-block>.label{display:block;margin-bottom:8px}
.anleitung-hinweis{margin:0 0 10px;color:var(--muted);font-size:.72rem;line-height:1.45}
.anleitung-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.anleitung-liste.kompakt{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}
.anleitung-zeile{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.anleitung-zeile.ohne-marke{grid-template-columns:1fr}
.anleitung-liste.kompakt .anleitung-zeile{padding:7px 10px}
/* font-style:normal, weil die Marke ein <i> ist: das Element traegt die
   Bedeutung "Marke", nicht "kursiv". */
.anleitung-marke{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--gold);font-size:.85rem;font-weight:900;font-style:normal;line-height:1}
.anleitung-zeile b{display:block;font-size:.78rem}
.anleitung-zeile small{display:block;color:var(--muted);font-size:.68rem;line-height:1.45}
.anleitung-zeile b+small{margin-top:3px}
/* Der Rueckweg ins Spielmenue. Sekundaer und nicht primaer: die Anleitung hat
   keine Hauptaktion, und zwei rote Knoepfe auf einer Flaeche gibt es im
   Projekt nirgends. */
.anleitung-zurueck{width:100%;margin-top:16px}