/* JIJI BAMBAM — dunkles Arcade-Layout, drei Spalten.
   Farben aus der McGrinsey Arcade: Nachtblau, Rot, Neon-Cyan. */

/* Die Ansicht faerbt ALLES, nicht nur die Karte. Vorher hingen die
   Seitenspalten an festen Nachtblau-Werten, dann sass man im Pergament
   und hatte trotzdem dunkle Menues am Rand. Jetzt gibt es genau einen
   Satz Variablen, und jede Ansicht setzt ihn komplett neu. */

:root, body[data-theme="neon"]{
  --bg:#080d18; --panel:#0e1729; --panel2:#131f38; --panel3:#1d2c4a;
  --tief:#0b1120; --line:#22345c;
  --txt:#e3e8f2; --mut:#7f90ae; --dim:#4a5a78; --les:#b3c4dd;
  --gelb:#ffd83d; --cyan:#5ff7ff; --rot:#ff5f6d; --lila:#b465ff; --gruen:#79e34c;
  --gutTxt:#c9e8b8; --schlechtTxt:#f2c0c5;
  --schleier:rgba(4,8,18,.9);
  --papier:none;
}

/* Altes Pergament, das angefangen hat zu leben. Kein Blatt Papier als
   Hintergrundbild, sondern Faserung aus uebereinandergelegten
   Verlaeufen: kostet nichts und skaliert mit jeder Aufloesung. */
body[data-theme="pergament"]{
  --bg:#c9b68b; --panel:#e2d3aa; --panel2:#ecdfbe; --panel3:#f5ecd4;
  --tief:#d8c69c; --line:#a98d55;
  --txt:#33291a; --mut:#6f5f42; --dim:#9a8963; --les:#4c3f28;
  --gelb:#8a6a24; --cyan:#6b4a12; --rot:#8c3f2a; --lila:#7a5b3a; --gruen:#5d6b34;
  --gutTxt:#3f5320; --schlechtTxt:#7a2d1c;
  --schleier:rgba(201,182,139,.92);
  --papier:
    radial-gradient(ellipse at 18% 12%, rgba(120,92,44,.10), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(120,92,44,.09), transparent 52%),
    repeating-linear-gradient(94deg, rgba(150,120,70,.045) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(3deg, rgba(150,120,70,.035) 0 3px, transparent 3px 7px);
}

body[data-theme="nacht"]{
  --bg:#000; --panel:#040404; --panel2:#0a0a0a; --panel3:#181818;
  --tief:#000; --line:#4a4a4a;
  --txt:#fff; --mut:#a8a8a8; --dim:#5a5a5a; --les:#d2d2d2;
  --gelb:#fff; --cyan:#fff; --rot:#fff; --lila:#fff; --gruen:#fff;
  --gutTxt:#fff; --schlechtTxt:#fff;
  --schleier:rgba(0,0,0,.92);
  --papier:none;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--bg); color:var(--txt);
  font-family:'Segoe UI',system-ui,sans-serif;
  height:100vh; overflow:hidden;
}
/* Faserung des Papiers ueber allem, ohne Klicks zu schlucken */
body::before{
  content:''; position:fixed; inset:0; z-index:99; pointer-events:none;
  background:var(--papier); mix-blend-mode:multiply; opacity:.9;
}
body[data-theme="neon"]::before,
body[data-theme="nacht"]::before{display:none}

/* ============================================================
   IN-GAME-HUD
   Kein Seitenlayout mehr. Die Welt fuellt den Schirm, alles andere
   schwebt als Glas darueber: eine Kugel links oben, aus der die
   Blaetter ausfahren, und Schubladen, die von der Seite hereinfahren.
   ============================================================ */

#karte{
  position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0;
  background:var(--bg); image-rendering:pixelated; cursor:grab;
}
#hud{position:fixed; inset:0; z-index:10; pointer-events:none}
#hud > *{pointer-events:auto}

/* Das Glas. Ein Rezept, drei Ansichten. */
:root, body[data-theme="neon"]{
  --glas:rgba(9,17,34,.60); --glas2:rgba(16,28,52,.72);
  --glasrand:rgba(95,247,255,.30); --glanz:rgba(255,255,255,.10); --unschaerfe:18px;
}
body[data-theme="pergament"]{
  --glas:rgba(240,229,198,.80); --glas2:rgba(247,238,214,.88);
  --glasrand:rgba(138,106,36,.45); --glanz:rgba(255,255,255,.45); --unschaerfe:14px;
}
body[data-theme="nacht"]{
  --glas:rgba(0,0,0,.74); --glas2:rgba(10,10,10,.85);
  --glasrand:rgba(255,255,255,.55); --glanz:rgba(255,255,255,.07); --unschaerfe:10px;
}

.glas{
  background:var(--glas);
  -webkit-backdrop-filter:blur(var(--unschaerfe)) saturate(1.2);
  backdrop-filter:blur(var(--unschaerfe)) saturate(1.2);
  border:1px solid var(--glasrand);
  box-shadow:0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 var(--glanz);
}

/* ---- Die Kugel ---- */
.orb{
  position:fixed; left:16px; top:88px; z-index:40;
  width:64px; height:64px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid var(--glasrand);
  background:
    radial-gradient(circle at 34% 28%, var(--glanz), transparent 42%),
    radial-gradient(circle at 62% 74%, color-mix(in srgb, var(--cyan) 40%, transparent), transparent 55%),
    var(--glas2);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:0 6px 26px rgba(0,0,0,.45), inset 0 2px 6px var(--glanz),
             0 0 0 6px color-mix(in srgb, var(--cyan) 8%, transparent);
  transition:transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s;
}
.orb:hover{transform:scale(1.06)}
.orb:active{transform:scale(.96)}
body.orbauf .orb{
  transform:rotate(45deg) scale(1.04);
  box-shadow:0 6px 30px rgba(0,0,0,.5), inset 0 2px 6px var(--glanz),
             0 0 0 10px color-mix(in srgb, var(--cyan) 14%, transparent);
}
.orb-kern{
  position:absolute; inset:16px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--cyan), transparent 68%);
  opacity:.85; animation:orbAtmen 4.5s ease-in-out infinite;
}
.orb-ring{
  position:absolute; inset:6px; border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--cyan) 55%, transparent);
  animation:orbDreh 22s linear infinite;
}
@keyframes orbAtmen{0%,100%{transform:scale(.86); opacity:.6}50%{transform:scale(1.06); opacity:.95}}
@keyframes orbDreh{to{transform:rotate(360deg)}}

/* ---- Die Blaetter, die ausfahren ---- */
.orbmenu{position:fixed; left:48px; top:120px; width:0; height:0; z-index:39}
.orbblatt{
  position:absolute; width:52px; height:52px; margin:-26px 0 0 -26px;
  border-radius:50%; cursor:pointer; padding:0; font-family:inherit;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:var(--glas2); border:1px solid var(--glasrand); color:var(--txt);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:0 4px 18px rgba(0,0,0,.4), inset 0 1px 0 var(--glanz);
  opacity:0; transform:translate(0,0) scale(.3); pointer-events:none;
  transition:transform .34s cubic-bezier(.2,.9,.25,1.2), opacity .22s;
}
body.orbauf .orbblatt{opacity:1; pointer-events:auto}
.orbblatt:hover{border-color:var(--gelb); background:var(--panel3)}
.orbblatt.an{border-color:var(--gelb); box-shadow:0 0 0 3px color-mix(in srgb, var(--gelb) 30%, transparent)}
.orbblatt em{
  position:absolute; left:60px; white-space:nowrap; font-style:normal; font-size:11px;
  letter-spacing:2px; text-transform:uppercase; color:var(--txt);
  background:var(--glas); border:1px solid var(--glasrand); padding:3px 9px; border-radius:12px;
  opacity:0; transform:translateX(-6px); transition:opacity .18s, transform .18s; pointer-events:none;
}
.orbblatt:hover em{opacity:1; transform:translateX(0)}

/* ---- Schubladen ---- */
.laden{position:fixed; left:0; top:0; bottom:0; width:0; z-index:25}
.lade{
  position:fixed; left:0; top:0; bottom:0; width:400px; padding-left:88px;
  display:flex; flex-direction:column;
  background:var(--glas);
  -webkit-backdrop-filter:blur(var(--unschaerfe)) saturate(1.2);
  backdrop-filter:blur(var(--unschaerfe)) saturate(1.2);
  border-right:1px solid var(--glasrand);
  box-shadow:14px 0 50px rgba(0,0,0,.4), inset -1px 0 0 var(--glanz);
  transform:translateX(-102%);
  transition:transform .34s cubic-bezier(.2,.85,.2,1);
}
.lade.auf{transform:translateX(0)}
.lade.breit{width:452px}
.lade header{
  display:flex; align-items:center; gap:10px; padding:16px 16px 10px 0;
  border-bottom:1px solid var(--glasrand); margin-right:16px;
}
.lade header b{flex:1; font-size:12px; letter-spacing:4px; color:var(--cyan)}
.lade-zu{
  background:none; border:1px solid var(--glasrand); color:var(--cyan);
  width:24px; height:24px; border-radius:6px; cursor:pointer; font-family:inherit; font-size:12px;
}
.lade-zu:hover{background:var(--glasrand)}
.lade-inhalt{flex:1; overflow-y:auto; padding:12px 16px 20px 0; display:flex; flex-direction:column; gap:12px}
.lade-inhalt.fuellt{padding-bottom:12px}
.lade-inhalt::-webkit-scrollbar{width:6px}
.lade-inhalt::-webkit-scrollbar-thumb{background:var(--glasrand); border-radius:3px}

/* Im Glas brauchen die Bloecke keinen eigenen Kasten mehr */
.block{background:transparent; border:none; border-radius:0; padding:0}
.block + .block{padding-top:12px; border-top:1px solid var(--glasrand)}
.block.wachsend{flex:1; min-height:120px; display:flex; flex-direction:column}
.block h2{font-size:11px; letter-spacing:3px; color:var(--cyan); text-transform:uppercase; margin-bottom:9px}
.mini{font-size:11px; color:var(--les); line-height:1.55; margin-top:8px}

/* ---- Kopfzeile und Transportleiste ---- */
.kopf{
  position:fixed; right:14px; top:14px; z-index:30; display:flex; gap:16px;
  padding:8px 16px; border-radius:14px;
  background:var(--glas); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:0 6px 26px rgba(0,0,0,.3), inset 0 1px 0 var(--glanz);
}
.kz{display:flex; flex-direction:column; line-height:1.15}
.kz i{font-style:normal; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--mut)}
.kz b{font-size:14px; font-family:ui-monospace,Menlo,monospace; color:var(--gelb)}

.transport{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:30;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center;
  max-width:calc(100vw - 40px); padding:7px 12px; border-radius:22px;
  background:var(--glas); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 var(--glanz);
  transition:opacity .25s;
}
.trenner{width:1px; height:18px; background:var(--glasrand); margin:0 3px}
.rollen{
  position:fixed; left:16px; bottom:16px; z-index:28; display:flex; gap:10px; flex-wrap:wrap;
  max-width:38vw; padding:6px 12px; border-radius:12px;
  background:var(--glas); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
}
.rolle{font-size:11px; color:var(--mut); display:flex; align-items:center; gap:5px}
.rolle i{width:9px; height:9px; border-radius:2px; display:inline-block}
.rolle b{color:var(--txt)}

/* Ruhe: ohne Eingabe blenden die Leisten weg, dann ist nur noch Welt da */
body.ruhig .transport,
body.ruhig .rollen,
body.ruhig .kopf{opacity:0}
body.ruhig .transport{pointer-events:none}

.hinweis{
  position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:34;
  background:var(--glas2); border:1px solid var(--cyan); color:var(--cyan);
  font-size:12px; padding:7px 16px; border-radius:16px;
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.hinweis.an{opacity:1}

@media(max-width:760px){
  .lade{width:100vw; padding-left:80px}
  .lade.breit{width:100vw}
  .kopf{gap:10px; padding:6px 10px}
  .kz b{font-size:12px}
}

/* ============================================================
   OVERLAYS UEBER DER KARTE
   Joypad-Leiste, Steckbrief und Zoom-Anzeige liegen auf der Karte,
   muessen also mit dem Thema mitgehen. Nachtblau auf Pergament war
   nicht lesbar und sah aus wie aus einem anderen Spiel.
   ============================================================ */

.zenbar,
.agentkarte,
.zoomanzeige{
  --ov-bg:rgba(8,13,24,.88);
  --ov-rand:rgba(95,247,255,.38);
  --ov-txt:var(--mut);
  --ov-akz:var(--cyan);
  --ov-taste:rgba(95,247,255,.12);
}
body[data-theme="pergament"] .zenbar,
body[data-theme="pergament"] .agentkarte,
body[data-theme="pergament"] .zoomanzeige{
  --ov-bg:rgba(243,233,206,.95);
  --ov-rand:#8a6a24;
  --ov-txt:#4c3f28;
  --ov-akz:#6b4a12;
  --ov-taste:rgba(138,106,36,.16);
}
body[data-theme="nacht"] .zenbar,
body[data-theme="nacht"] .agentkarte,
body[data-theme="nacht"] .zoomanzeige{
  --ov-bg:rgba(0,0,0,.92);
  --ov-rand:#fff;
  --ov-txt:#c8c8c8;
  --ov-akz:#fff;
  --ov-taste:rgba(255,255,255,.14);
}

/* Hinweisleiste zu den Pad-Tasten. Liegt unten mittig auf der Karte.
   Die Positionierung stand frueher im Zen-Block und ist beim Umbau
   mit verschwunden: dadurch lag sie als Block ueber der Seitenspalte. */
.zenbar{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:35; display:none; gap:18px; flex-wrap:wrap; justify-content:center;
  max-width:calc(100% - 32px);
  padding:8px 18px; font-size:12px; line-height:1.5;
  pointer-events:none;
  background:var(--ov-bg);
  border:1px solid var(--ov-rand);
  color:var(--ov-txt);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.zenbar.zeigen{display:flex}
.zenbar span{white-space:nowrap}
body.zen.ruhig .zenbar{opacity:0; transition:opacity .25s}
.zenbar b{
  background:var(--ov-taste);
  color:var(--ov-akz);
  border:1px solid var(--ov-rand);
  text-shadow:none;
}
body[data-theme="pergament"] .zenbar b{font-weight:700}

.zoomanzeige{
  position:fixed; right:14px; top:72px; z-index:36;
  padding:5px 12px; font-size:12px;
  background:var(--ov-bg); border:1px solid var(--ov-rand); color:var(--ov-akz);
  font-family:ui-monospace,Menlo,monospace;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.zoomanzeige.an{opacity:1}

/* ---- Steckbrief eines Menschen ---- */
.agentkarte{
  position:fixed; right:14px; bottom:72px; z-index:38; width:250px;
  padding:12px 14px; font-size:12px;
  background:var(--ov-bg); border:1px solid var(--ov-rand); color:var(--ov-txt);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow:0 6px 26px rgba(0,0,0,.3);
}
.agentkarte[hidden]{display:none}
.ak-kopf{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.ak-kopf b{color:var(--ov-akz); font-size:13px; letter-spacing:1px}
.ak-zu{
  background:none; border:1px solid var(--ov-rand); color:var(--ov-akz);
  border-radius:4px; width:20px; height:20px; cursor:pointer; line-height:1;
  font-family:inherit; font-size:11px;
}
.ak-zu:hover{background:var(--ov-taste)}
.ak-zeile{display:flex; justify-content:space-between; padding:2px 0}
.ak-zeile b{color:var(--ov-akz); font-family:ui-monospace,Menlo,monospace}
.ak-trenner{
  margin:9px 0 5px; padding-top:7px; border-top:1px solid var(--ov-rand);
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--ov-akz);
}
.ab{display:flex; align-items:center; gap:7px; margin:3px 0; position:relative}
.ab span{width:78px; flex:none}
.ab i{height:6px; border-radius:3px; display:block; min-width:2px}
.ab b{margin-left:auto; font-family:ui-monospace,Menlo,monospace; color:var(--ov-txt)}
.ak-fuss{margin-top:8px; font-size:10px; line-height:1.4; opacity:.8}


/* ============================================================
   AGENT-FENSTER. Liegt als Overlay ueber der Karte, damit es auch
   im Vollbild ohne Seitenmenues erreichbar bleibt.
   ============================================================ */
.agentpanel{
  position:fixed; right:14px; top:82px; z-index:45; width:330px;
  max-height:calc(100vh - 120px); display:none; flex-direction:column;
  padding:12px 14px; font-size:12px;
  background:var(--ov-bg); border:1px solid var(--ov-rand); color:var(--ov-txt);
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.agentpanel.an{display:flex}
.agentpanel{
  --ov-bg:rgba(8,13,24,.95); --ov-rand:rgba(95,247,255,.42);
  --ov-txt:#c2d0e6; --ov-akz:var(--cyan); --ov-taste:rgba(95,247,255,.12);
}
body[data-theme="pergament"] .agentpanel{
  --ov-bg:rgba(243,233,206,.97); --ov-rand:#8a6a24;
  --ov-txt:#3c3220; --ov-akz:#6b4a12; --ov-taste:rgba(138,106,36,.16);
}
body[data-theme="nacht"] .agentpanel{
  --ov-bg:rgba(0,0,0,.96); --ov-rand:#fff;
  --ov-txt:#d0d0d0; --ov-akz:#fff; --ov-taste:rgba(255,255,255,.14);
}

.ag-kopf{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.ag-kopf b{color:var(--ov-akz); letter-spacing:2px; font-size:12px}
.ag-status{
  margin-left:auto; font-size:10px; padding:2px 8px; border-radius:9px;
  background:var(--ov-taste); color:var(--ov-akz);
}
.ag-status.denkt{animation:agPuls 1s ease-in-out infinite}
.ag-status.hoert{background:rgba(121,227,76,.18); color:#79e34c}
.ag-status.spricht{background:rgba(180,101,255,.18); color:#b465ff}
.ag-status.fehler{background:rgba(255,95,109,.2); color:#ff5f6d}
@keyframes agPuls{0%,100%{opacity:.5}50%{opacity:1}}
.ag-zu{
  background:none; border:1px solid var(--ov-rand); color:var(--ov-akz);
  width:20px; height:20px; border-radius:4px; cursor:pointer; font-size:11px;
  line-height:1; font-family:inherit;
}

.ag-reihe{display:flex; align-items:center; gap:8px; margin:5px 0}
.ag-reihe label{width:66px; flex:none; color:var(--ov-txt); opacity:.85}
.ag-reihe select{
  flex:1; background:var(--ov-taste); color:var(--ov-txt);
  border:1px solid var(--ov-rand); border-radius:5px; padding:4px 7px;
  font-size:11px; font-family:inherit;
}
.ag-hinweis{font-size:10px; opacity:.75; line-height:1.4; margin:0 0 6px 74px}
.ag-knopf{
  background:var(--ov-taste); color:var(--ov-akz); border:1px solid var(--ov-rand);
  border-radius:5px; padding:4px 9px; cursor:pointer; font-size:11px; font-family:inherit;
}
.ag-knopf:hover{background:var(--ov-akz); color:var(--ov-bg)}

.ag-verlauf{
  flex:1; min-height:110px; max-height:38vh; overflow-y:auto;
  margin:8px 0 4px; padding:8px; display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--ov-rand); border-radius:6px;
}
.ag-zeile{line-height:1.45; padding:4px 7px; border-radius:5px}
.ag-du{background:var(--ov-taste); align-self:flex-end; max-width:88%}
.ag-agent{border-left:2px solid var(--ov-akz); padding-left:8px}
.ag-system{font-size:10px; opacity:.6; font-family:ui-monospace,Menlo,monospace}
.ag-zwischen{min-height:14px; font-size:11px; opacity:.6; font-style:italic; margin-bottom:4px}

.ag-eingabe{display:flex; gap:6px}
.ag-eingabe input{
  flex:1; background:var(--ov-taste); color:var(--ov-txt);
  border:1px solid var(--ov-rand); border-radius:5px; padding:6px 9px;
  font-size:12px; font-family:inherit;
}
.ag-eingabe input::placeholder{color:var(--ov-txt); opacity:.5}
.ag-send{padding:6px 12px}

.ag-schnell{display:flex; flex-wrap:wrap; gap:4px; margin-top:7px}
.ag-schnell button{
  background:none; border:1px solid var(--ov-rand); color:var(--ov-txt);
  border-radius:11px; padding:3px 9px; cursor:pointer; font-size:10px; font-family:inherit;
}
.ag-schnell button:hover{background:var(--ov-taste); color:var(--ov-akz)}
.ag-fuss{margin-top:7px; font-size:9px; opacity:.55; line-height:1.4}

/* Gedaechtnis-Leiste im Agent-Fenster */
.ag-gedaechtnis{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:8px; padding-top:7px; border-top:1px solid var(--ov-rand);
}
.ag-gedtxt{flex:1; min-width:130px; font-size:10px; opacity:.75}
.ag-mini{
  background:none; border:1px solid var(--ov-rand); color:var(--ov-txt);
  border-radius:4px; padding:2px 7px; cursor:pointer; font-size:10px; font-family:inherit;
}
.ag-mini:hover{background:var(--ov-taste); color:var(--ov-akz)}
.ag-mini.gefahr:hover{background:rgba(255,95,109,.25); color:#ff8b95; border-color:#ff5f6d}

/* ============================================================
   BEWUSSTSEINSLANDKARTE
   Die Klassen gab es im Quelltext, aber nie im Stylesheet: darum
   klebten Name und Zahl aneinander und der Balken war unsichtbar.
   ============================================================ */
.bmkarte{display:flex; flex-direction:column; gap:2px; margin-top:2px}
.bm{display:flex; align-items:center; gap:7px; font-size:11px}
.bm span{width:86px; flex:none; color:var(--ov-txt,var(--mut)); opacity:.9}
.bm i{height:5px; border-radius:3px; display:block; min-width:2px; flex:0 0 auto}
.bm b{margin-left:auto; font-family:ui-monospace,Menlo,monospace}
.bmwerte{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:7px; padding-top:6px;
  border-top:1px solid var(--ov-rand,var(--line)); font-size:10px;
}
.bmwerte b{color:var(--ov-akz,var(--cyan)); font-family:ui-monospace,Menlo,monospace}

.bwdrei{display:flex; gap:9px; flex-wrap:wrap; margin-top:6px; font-size:10px; color:var(--mut)}
.bwdrei span.an{color:var(--cyan)}
.bwdrei b{font-family:ui-monospace,Menlo,monospace; color:var(--txt)}
.bwdef{font-size:11px; color:var(--les); line-height:1.5; margin-bottom:7px}

/* ============================================================
   STECKBRIEF: Gesicht, Eingriffe, Patenschaft
   ============================================================ */
.agentkarte{width:292px; max-height:calc(100vh - 150px); overflow-y:auto}
.ak-face{
  width:52px; height:52px; flex:none; image-rendering:pixelated;
  border:1px solid var(--ov-rand); border-radius:6px; background:rgba(0,0,0,.15);
}
.ak-titel{flex:1; min-width:0; line-height:1.3}
.ak-titel b{display:block; font-size:13px; color:var(--ov-akz); letter-spacing:.5px}
.ak-titel span{display:block; font-size:10px; opacity:.75}
.ak-block{margin-top:8px}
.ak-int{font-size:11px; line-height:1.5; opacity:.9}
.ak-gott{display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:2px}
.gt{
  display:flex; align-items:center; gap:5px; text-align:left; cursor:pointer;
  background:var(--ov-taste); border:1px solid var(--ov-rand); color:var(--ov-txt);
  border-radius:5px; padding:4px 6px; font-size:10px; font-family:inherit; line-height:1.2;
}
.gt i{font-style:normal; font-size:12px}
.gt:hover{background:var(--ov-akz); color:var(--ov-bg)}
.gt.gefahr{border-color:#a33}
.gt.gefahr:hover{background:#a33; color:#fff}
.ak-rolle{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:11px}
.ak-rolle select{
  flex:1; background:var(--ov-taste); color:var(--ov-txt);
  border:1px solid var(--ov-rand); border-radius:5px; padding:3px 6px;
  font-size:11px; font-family:inherit;
}
.ak-pate{
  width:100%; margin-top:9px; cursor:pointer; font-family:inherit; font-size:11px;
  background:var(--ov-taste); border:1px solid var(--ov-rand); color:var(--ov-akz);
  border-radius:6px; padding:6px 8px;
}
.ak-pate:hover{background:var(--ov-akz); color:var(--ov-bg)}
.ak-pate.an{background:var(--ov-akz); color:var(--ov-bg); font-weight:600}
.ak-leben .lb{
  font-size:10px; line-height:1.4; padding:3px 6px; margin-top:3px;
  border-left:2px solid var(--ov-rand); opacity:.9;
}
.ak-leben .lb span{display:block; opacity:.6; letter-spacing:1px}

/* ============================================================
   VOELKER, KULTURACHSEN, KATASTROPHEN, PATENKINDER
   Alle drei waren vorher ungestylte Browser-Knoepfe, also weiss.
   ============================================================ */
.volk,.praegung,.kat,.patenzeile{
  display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--tief); border:1px solid var(--line); color:var(--txt);
  border-radius:8px; padding:7px 9px; margin-bottom:5px;
}
.volk:hover,.praegung:hover,.kat:hover,.patenzeile:hover{
  border-color:var(--gelb); background:var(--panel3);
}
.volk.an,.praegung.an{border-color:var(--gelb); background:var(--panel3); box-shadow:inset 3px 0 0 var(--gelb)}
.volk b,.praegung b{display:block; font-size:12px}
.volk span,.praegung span{display:block; font-size:11px; color:var(--les); line-height:1.45; margin-top:2px}
.volk i{
  display:block; font-style:normal; font-size:10px; margin-top:4px;
  color:var(--mut); font-family:ui-monospace,Menlo,monospace;
}

.kachsen{margin-top:10px; padding-top:9px; border-top:1px solid var(--line)}
.kachsen-kopf,.kw-kopf,.katgruppe{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan); margin:0 0 7px;
}
.kachse{margin-bottom:9px}
.ka-kopf{display:flex; justify-content:space-between; align-items:baseline; font-size:11px}
.ka-kopf b{color:var(--gelb); font-family:ui-monospace,Menlo,monospace}
.kachse input{width:100%; accent-color:var(--lila); margin:1px 0}
.ka-enden{display:flex; justify-content:space-between; font-size:10px; color:var(--mut)}
.ka-wirkung{font-size:10px; color:var(--les); line-height:1.45; margin-top:2px; display:none}
.kachse:hover .ka-wirkung{display:block}

.kwirkung{margin-top:10px; padding-top:9px; border-top:1px solid var(--line)}
.kw{display:flex; justify-content:space-between; font-size:11px; padding:1px 0}
.kw span{color:var(--mut)}
.kw b{font-family:ui-monospace,Menlo,monospace}
.kw.gut b{color:var(--gruen)}
.kw.schlecht b{color:var(--rot)}

.katkopf{display:flex; gap:6px; margin-bottom:8px}
.katkopf .b{flex:1; padding:5px 8px; text-align:center}
.katstaerke{display:flex; align-items:center; gap:7px; font-size:11px; margin-bottom:10px}
.katstaerke span{color:var(--mut)}
.katstaerke input{flex:1; accent-color:var(--rot)}
.katstaerke b{font-family:ui-monospace,Menlo,monospace; color:var(--gelb); width:34px; text-align:right}
.katgruppe{margin:11px 0 6px}
.katnetz{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.kat{
  display:flex; align-items:center; gap:5px; padding:5px 6px; margin:0;
  font-size:10px; line-height:1.2; border-radius:6px;
}
.kat i{font-style:normal; font-size:13px; flex:none}
.kat span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kat.an{border-color:var(--rot); background:var(--panel3); box-shadow:0 0 0 1px var(--rot) inset}
#aussetzen.an{background:var(--gelb); color:#141a10; border-color:var(--gelb)}
body.zielt #karte{cursor:crosshair}

.patenzeile{display:flex; align-items:center; gap:8px; padding:5px 7px}
.pz-face{width:30px; height:30px; image-rendering:pixelated; border-radius:4px; flex:none}
.pz-text{flex:1; min-width:0; line-height:1.25}
.pz-text b{display:block; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pz-text span{display:block; font-size:10px; color:var(--mut)}
.pz-zustand{width:40px; flex:none; display:flex; flex-direction:column; gap:2px}
.pz-zustand i{display:block; height:4px; border-radius:2px; min-width:2px}
.pz-zustand i.laune{background:var(--gelb)}
.pz-zustand i.gesund{background:var(--gruen)}

.ahnenbox{
  position:fixed; right:16px; bottom:16px; z-index:70; width:330px;
  max-height:70vh; overflow-y:auto; padding:12px 14px; font-size:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  color:var(--txt); box-shadow:0 10px 40px rgba(0,0,0,.45);
  --ov-rand:var(--line); --ov-akz:var(--cyan); --ov-taste:var(--panel3); --ov-bg:var(--panel);
}
.ahnenbox[hidden]{display:none}
.ahn{border-top:1px solid var(--line); padding:7px 0}
.ahn b{color:var(--gelb)}
.ahn > span{display:block; font-size:10px; color:var(--mut); margin-top:2px}
.ahnleben div{font-size:10px; line-height:1.4; margin-top:3px; padding-left:7px; border-left:2px solid var(--line)}
.ahnleben span{color:var(--mut); margin-right:5px}

.version{
  position:fixed; right:8px; bottom:6px; z-index:120; pointer-events:none;
  font-family:ui-monospace,Menlo,monospace; font-size:10px;
  color:var(--mut); opacity:.55;
}

/* ---- How-to in drei Tiefen ---- */
.ht-reiter{display:flex; gap:5px; margin-bottom:10px}
.ht-tab{
  flex:1; cursor:pointer; font-family:inherit; font-size:11px; padding:6px 4px;
  background:var(--tief); border:1px solid var(--line); color:var(--mut); border-radius:8px;
}
.ht-tab.an{background:var(--gelb); color:#141a10; border-color:var(--gelb); font-weight:600}
.ht-hinweis{font-size:11px; color:var(--mut); font-style:italic; margin-bottom:9px}
.ht-text p{font-size:12px; line-height:1.6; color:var(--les); margin-bottom:8px}
.ht-kopf{
  font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan);
  margin:14px 0 7px; padding-top:9px; border-top:1px solid var(--line);
}
.ht-gruppe{font-size:10px; letter-spacing:2px; color:var(--rot); margin:11px 0 5px}
.ht-zeile{display:flex; gap:9px; align-items:flex-start; padding:5px 0}
.ht-zeile i{font-style:normal; font-size:15px; width:20px; flex:none; text-align:center}
.ht-zeile b{display:block; font-size:12px}
.ht-zeile span{display:block; font-size:11px; line-height:1.5; color:var(--les); margin-top:2px}

/* Auswahlfelder im Glas */
.lade select{
  width:100%; background:var(--tief); color:var(--txt); border:1px solid var(--line);
  border-radius:6px; padding:5px 8px; font-size:11px; font-family:inherit;
}

/* ============================================================
   BAUTEILE IM GLAS
   Beim Umbau auf das HUD ist der halbe Komponentenblock mit
   verschwunden: Fader, Knoepfe, Zahlen und Chronik standen ohne
   Stil da, darum das Buero-Blau. Hier kommen sie zurueck, aber
   nicht wie vorher, sondern aus demselben Glas wie der Rest.
   ============================================================ */

/* ---- Kristall-Fader ----
   Der Standard-Fader des Browsers ist ein blauer Balken aus einem
   Formular. Hier ist er eine Schiene aus mattem Glas mit einem
   leuchtenden Splitter darauf. Die gefuellte Seite entsteht ueber
   einen sehr breiten Schatten am Griff, der von der Schiene
   abgeschnitten wird: kein zweites Element, kein Javascript. */
.lade input[type=range],
input.pslider, .kachse input[type=range], #katStaerke{
  -webkit-appearance:none; appearance:none;
  width:100%; height:20px; margin:4px 0; background:transparent; cursor:pointer;
}
.lade input[type=range]::-webkit-slider-runnable-track,
input.pslider::-webkit-slider-runnable-track,
#katStaerke::-webkit-slider-runnable-track{
  height:8px; border-radius:5px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03)),
    var(--tief);
  border:1px solid var(--glasrand);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.12);
}
.lade input[type=range]::-webkit-slider-thumb,
input.pslider::-webkit-slider-thumb,
#katStaerke::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:-5px; border-radius:5px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 38%, transparent 62%),
    var(--cyan);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--cyan) 70%, transparent),
    0 1px 3px rgba(0,0,0,.6),
    -420px 0 0 410px color-mix(in srgb, var(--cyan) 30%, transparent);
  transition:transform .12s, box-shadow .2s;
}
.lade input[type=range]:hover::-webkit-slider-thumb,
input.pslider:hover::-webkit-slider-thumb{transform:scale(1.15)}
.lade input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
/* Firefox kennt die Schatten-Fuellung nicht, bekommt darum echte Teile */
.lade input[type=range]::-moz-range-track{
  height:8px; border-radius:5px; background:var(--tief); border:1px solid var(--glasrand);
}
.lade input[type=range]::-moz-range-progress{
  height:8px; border-radius:5px; background:color-mix(in srgb, var(--cyan) 55%, transparent);
}
.lade input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:5px; border:1px solid rgba(255,255,255,.7);
  background:var(--cyan); box-shadow:0 0 9px color-mix(in srgb, var(--cyan) 70%, transparent);
}
/* Umweltregler in Bernstein, Kulturachsen in Violett: man sieht am
   Leuchten, in welcher Gruppe man gerade dreht. */
.grp-umwelt input.pslider::-webkit-slider-thumb{
  background:linear-gradient(160deg, rgba(255,255,255,.95), transparent 62%), var(--gelb);
  box-shadow:0 0 10px color-mix(in srgb, var(--gelb) 70%, transparent), 0 1px 3px rgba(0,0,0,.6),
             -420px 0 0 410px color-mix(in srgb, var(--gelb) 28%, transparent);
}
.kachse input[type=range]::-webkit-slider-thumb{
  background:linear-gradient(160deg, rgba(255,255,255,.95), transparent 62%), var(--lila);
  box-shadow:0 0 10px color-mix(in srgb, var(--lila) 70%, transparent), 0 1px 3px rgba(0,0,0,.6),
             -420px 0 0 410px color-mix(in srgb, var(--lila) 28%, transparent);
}
#katStaerke::-webkit-slider-thumb{
  background:linear-gradient(160deg, rgba(255,255,255,.95), transparent 62%), var(--rot);
  box-shadow:0 0 10px color-mix(in srgb, var(--rot) 70%, transparent), 0 1px 3px rgba(0,0,0,.6),
             -420px 0 0 410px color-mix(in srgb, var(--rot) 26%, transparent);
}

/* ---- Vorlagen und Reglerzeilen ---- */
.brand h1{font-size:22px; letter-spacing:2px; color:var(--gelb); line-height:1;
  text-shadow:0 0 22px color-mix(in srgb, var(--gelb) 45%, transparent)}
.brand h1 span{display:block; color:var(--rot); letter-spacing:5px; font-size:18px}
.brand p{font-size:11px; color:var(--mut); margin-top:7px; line-height:1.5}

.grouphead{margin:14px 0 8px; padding-top:9px; border-top:1px solid var(--glasrand)}
.grouphead:first-child{border-top:none; margin-top:0; padding-top:0}
.grouphead b{font-size:10px; letter-spacing:3px; color:var(--rot);
  text-shadow:0 0 14px color-mix(in srgb, var(--rot) 50%, transparent)}
.grouphead span{display:block; font-size:11px; color:var(--les); line-height:1.5; margin-top:3px}

.prow{padding:6px 9px; border-radius:9px; border:1px solid transparent; transition:background .2s, border-color .2s}
.prow:hover{background:var(--glanz)}
.prow.fokus{
  border-color:var(--cyan); background:color-mix(in srgb, var(--cyan) 9%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--cyan) 25%, transparent), inset 0 1px 0 var(--glanz);
}
.ptop{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.pname{font-size:12px}
.pval{
  font-size:12px; color:var(--gelb); font-family:ui-monospace,Menlo,monospace;
  text-shadow:0 0 12px color-mix(in srgb, var(--gelb) 60%, transparent);
}
.pwirk{font-size:11px; color:var(--les); line-height:1.5; display:none; margin-top:2px}
.prow.fokus .pwirk, .prow:hover .pwirk{display:block}

/* ---- Knoepfe ---- */
.b{
  background:var(--glas2); color:var(--txt); border:1px solid var(--glasrand);
  border-radius:14px; padding:6px 13px; cursor:pointer; font-size:12px; font-family:inherit;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 var(--glanz), 0 2px 8px rgba(0,0,0,.25);
  transition:background .18s, border-color .18s, transform .12s;
}
.b:hover{border-color:var(--cyan); background:color-mix(in srgb, var(--cyan) 18%, var(--glas2)); color:var(--txt)}
.b:active{transform:scale(.96)}
.b.prim{
  background:linear-gradient(180deg, color-mix(in srgb, var(--gelb) 85%, transparent), color-mix(in srgb, var(--gelb) 60%, transparent));
  color:#141a10; border-color:var(--gelb); font-weight:600;
  box-shadow:0 0 18px color-mix(in srgb, var(--gelb) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.6);
}
.tempo{
  font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--cyan);
  min-width:44px; text-align:center;
  text-shadow:0 0 12px color-mix(in srgb, var(--cyan) 60%, transparent);
}

/* ---- Zahlen, Balken, Chronik ---- */
.stats{display:grid; grid-template-columns:1fr 1fr; gap:6px 10px}
.stats div{display:flex; justify-content:space-between; align-items:baseline; font-size:11px; gap:8px}
.stats span{color:var(--mut)}
.stats b{color:var(--txt); font-family:ui-monospace,Menlo,monospace; font-size:12px}

.era{margin:11px 0 9px}
.erabar{height:6px; background:var(--tief); border-radius:4px; overflow:hidden; border:1px solid var(--glasrand)}
.erabar i{display:block; height:100%; width:0; background:var(--cyan); transition:width .3s;
  box-shadow:0 0 10px var(--cyan)}
.era span{display:block; font-size:11px; color:var(--les); margin-top:4px}

.meter{display:flex; align-items:center; gap:7px; margin:6px 0; font-size:11px}
.meter>span{color:var(--mut); width:80px; flex:none}
.mbar{flex:1; min-width:0; height:8px; background:var(--tief); border-radius:5px; overflow:hidden; border:1px solid var(--glasrand)}
.mbar i{display:block; height:100%; width:0; transition:width .3s; box-shadow:0 0 8px currentColor}
.meter>b{width:26px; text-align:right; font-family:ui-monospace,Menlo,monospace; color:var(--txt); flex:none}

#kurve{width:100%; height:auto; border-radius:8px; border:1px solid var(--glasrand); display:block}

.log{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:3px; min-height:120px}
.logrow{
  font-size:11px; line-height:1.45; color:var(--mut); padding:5px 8px;
  border-left:2px solid var(--dim); background:var(--glanz); border-radius:0 6px 6px 0;
}
.logrow span{display:block; font-size:10px; color:var(--dim); letter-spacing:1px}
.logrow.gut{border-left-color:var(--gruen); color:var(--gutTxt)}
.logrow.schlecht{border-left-color:var(--rot); color:var(--schlechtTxt)}
.logrow.start{border-left-color:var(--gelb); color:var(--gelb)}

/* ---- Abschlussbild ---- */
.ende{
  position:fixed; inset:0; z-index:60; background:var(--schleier);
  display:none; align-items:center; justify-content:center; padding:20px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.ende.an{display:flex}
.endekarte{
  background:var(--glas2); border:1px solid var(--gelb); border-radius:18px;
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  box-shadow:0 20px 70px rgba(0,0,0,.6), inset 0 1px 0 var(--glanz);
  padding:26px 30px; max-width:480px; width:100%; text-align:center;
  max-height:92vh; overflow-y:auto;
}
.endekarte h2{font-size:26px; letter-spacing:5px; color:var(--gelb);
  text-shadow:0 0 28px color-mix(in srgb, var(--gelb) 50%, transparent)}
.endekarte p{color:var(--mut); font-size:12px; line-height:1.6; margin:8px 0 14px}
.punkte{margin:8px 0 16px}
.punkte span{display:block; font-size:10px; letter-spacing:3px; color:var(--mut)}
.punkte b{font-size:40px; color:var(--cyan); font-family:ui-monospace,Menlo,monospace;
  text-shadow:0 0 30px color-mix(in srgb, var(--cyan) 60%, transparent)}
.endeliste{display:flex; flex-direction:column; gap:4px; text-align:left; margin-bottom:18px}
.endeliste div{display:flex; justify-content:space-between; font-size:12px;
  border-bottom:1px solid var(--glasrand); padding-bottom:3px}
.endeliste span{color:var(--mut)}
.endeliste b{font-family:ui-monospace,Menlo,monospace}
.endebtns{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}

/* ---- Balken im Steckbrief brauchen eine Bahn ----
   Vorher lag die Prozentbreite direkt am Balken, also bezog sie sich
   auf die ganze Karte: bei 82 Prozent sprengte er sie nach rechts
   aus dem Bild. Jetzt sitzt der Balken in einer Bahn fester Breite. */
.ab .bahn, .bm .bahn{
  flex:1; min-width:0; height:6px; border-radius:4px; overflow:hidden;
  background:var(--tief); border:1px solid var(--glasrand);
}
.ab i, .bm i{height:100%; display:block; min-width:2px; border-radius:0; box-shadow:0 0 6px currentColor}
.ab span, .bm span{width:74px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ab b, .bm b{width:26px; flex:none; text-align:right; margin-left:0}

/* ---- Eigener Griff fuer die Regler, weil man sie staendig braucht ---- */
.reglergriff{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:26;
  width:30px; padding:16px 0; cursor:pointer; font-family:inherit;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--cyan); background:var(--glas); border:1px solid var(--glasrand); border-left:none;
  border-radius:0 12px 12px 0;
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:6px 0 24px rgba(0,0,0,.35), inset 0 1px 0 var(--glanz);
  transition:transform .3s cubic-bezier(.2,.85,.2,1), background .2s;
}
.reglergriff:hover{background:var(--glas2)}
body.reglerauf .reglergriff{transform:translateY(-50%) translateX(452px)}

/* ============================================================
   ALIEN FUTURE DIGGER
   Die Transportleiste und die Kugel sind das, was man staendig
   ansieht. Beide bekommen echtes Glas: geschliffene Kanten,
   Lichtkante oben, Brechung an den Raendern, Leuchten statt Fuellung.
   ============================================================ */

.transport{
  gap:4px; padding:9px 16px; border-radius:0;
  clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  background:
    linear-gradient(180deg, var(--glanz), transparent 42%),
    radial-gradient(120% 180% at 50% -40%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 60%),
    var(--glas2);
  border:1px solid var(--glasrand);
  box-shadow:
    0 10px 44px rgba(0,0,0,.5),
    inset 0 1px 0 var(--glanz),
    inset 0 -14px 26px -14px color-mix(in srgb, var(--cyan) 40%, transparent);
}
/* Energiekante, die langsam durchlaeuft */
.transport::before{
  content:''; position:absolute; left:22px; right:22px; top:1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:.65; animation:kanteWandern 6s ease-in-out infinite;
}
@keyframes kanteWandern{0%,100%{transform:scaleX(.35) translateX(-90%)}50%{transform:scaleX(.35) translateX(90%)}}

.transport .b{
  border-radius:9px; padding:6px 11px; min-width:38px; text-align:center;
  background:linear-gradient(180deg, var(--glanz), transparent 60%), var(--glas);
  border:1px solid color-mix(in srgb, var(--glasrand) 70%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz), 0 1px 4px rgba(0,0,0,.3);
  text-shadow:0 0 10px color-mix(in srgb, var(--cyan) 35%, transparent);
}
.transport .b:hover{
  border-color:var(--cyan);
  background:linear-gradient(180deg, var(--glanz), transparent 60%), color-mix(in srgb, var(--cyan) 20%, var(--glas));
  box-shadow:0 0 16px color-mix(in srgb, var(--cyan) 45%, transparent), inset 0 1px 0 var(--glanz);
}
.transport .b.prim{
  clip-path:polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  border-radius:0; padding:6px 18px; letter-spacing:1px;
}
.transport .trenner{
  width:1px; height:20px; margin:0 5px;
  background:linear-gradient(180deg, transparent, var(--glasrand), transparent);
}

/* Die Kopfzeile im selben Schliff */
.kopf{
  border-radius:0;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background:linear-gradient(180deg, var(--glanz), transparent 45%), var(--glas2);
  box-shadow:0 8px 30px rgba(0,0,0,.4), inset 0 1px 0 var(--glanz);
}
.kz b{text-shadow:0 0 14px color-mix(in srgb, var(--gelb) 45%, transparent)}

.rollen{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  background:linear-gradient(180deg, var(--glanz), transparent 50%), var(--glas);
}

/* ---- Die Kugel als fluessiges Glas ---- */
.orb{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.85), rgba(255,255,255,.18) 18%, transparent 34%),
    radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--lila) 55%, transparent), transparent 52%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--cyan) 45%, transparent), transparent 68%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.28), transparent 55%),
    var(--glas2);
  box-shadow:
    0 10px 34px rgba(0,0,0,.55),
    inset 0 3px 10px rgba(255,255,255,.55),
    inset 0 -10px 20px -6px color-mix(in srgb, var(--lila) 55%, transparent),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 34px color-mix(in srgb, var(--cyan) 30%, transparent);
}
/* Brechungsrand: ein zweiter Ring, der leicht versetzt liegt */
.orb::after{
  content:''; position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 210deg,
    transparent 0deg,
    color-mix(in srgb, var(--cyan) 55%, transparent) 40deg,
    transparent 110deg,
    color-mix(in srgb, var(--lila) 50%, transparent) 190deg,
    transparent 260deg);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 66%);
  mask:radial-gradient(circle, transparent 62%, #000 66%);
  opacity:.9; animation:orbDreh 14s linear infinite;
}
.orb-kern{
  inset:14px;
  background:
    radial-gradient(circle at 42% 36%, rgba(255,255,255,.9), transparent 40%),
    radial-gradient(circle at 55% 60%, var(--cyan), transparent 72%);
  filter:blur(.4px);
}
.orb-ring{
  inset:5px; border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 0 14px color-mix(in srgb, var(--cyan) 45%, transparent);
}

/* Die Blaetter aus demselben Glas, mit Brechungskante */
.orbblatt{
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.55), transparent 40%),
    var(--glas2);
  box-shadow:
    0 6px 22px rgba(0,0,0,.45),
    inset 0 2px 6px rgba(255,255,255,.4),
    0 0 0 1px rgba(255,255,255,.12);
}
.orbblatt:hover{
  box-shadow:0 6px 26px rgba(0,0,0,.5), inset 0 2px 8px rgba(255,255,255,.55),
             0 0 22px color-mix(in srgb, var(--gelb) 45%, transparent);
}

/* Die Schubladen bekommen eine geschliffene Aussenkante */
.lade{
  border-radius:0 22px 22px 0;
  background:
    linear-gradient(100deg, var(--glanz), transparent 30%),
    radial-gradient(80% 40% at 0% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%),
    var(--glas);
  box-shadow:18px 0 60px rgba(0,0,0,.45), inset -1px 0 0 var(--glanz),
             inset 0 1px 0 var(--glanz);
}
.lade::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:1px; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--cyan), transparent); opacity:.55;
}
.lade header b{text-shadow:0 0 16px color-mix(in srgb, var(--cyan) 55%, transparent)}

/* ============================================================
   ERKLAERFENSTER
   Erscheint erst, wenn die Maus wirklich stehen bleibt, und laesst
   sich betreten, damit man den Weg ins Wiki auch anklicken kann.
   ============================================================ */
.tip{
  position:fixed; z-index:200; max-width:280px; padding:9px 12px; border-radius:12px;
  font-size:11px; line-height:1.5; color:var(--txt); pointer-events:auto;
  background:var(--glas2); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 var(--glanz);
  opacity:0; transform:translateY(-4px); transition:opacity .14s, transform .14s;
}
.tip.an{opacity:1; transform:translateY(0)}
.tip b{
  display:block; color:var(--cyan); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:3px; text-shadow:0 0 12px color-mix(in srgb, var(--cyan) 55%, transparent);
}
.tip span{display:block; color:var(--les)}
.tip-mehr{
  margin-top:8px; width:100%; cursor:pointer; font-family:inherit; font-size:10px;
  letter-spacing:1px; padding:5px 8px; border-radius:8px;
  background:color-mix(in srgb, var(--gelb) 18%, transparent);
  border:1px solid var(--gelb); color:var(--gelb);
}
.tip-mehr:hover{background:var(--gelb); color:#141a10}

/* ---- Zoomsaeule, immer sichtbar ---- */
.zoomsaeule{
  position:fixed; right:14px; top:78px; z-index:31;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 7px; border-radius:14px;
  background:var(--glas); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:0 6px 24px rgba(0,0,0,.35), inset 0 1px 0 var(--glanz);
}
.zb{
  width:36px; height:32px; cursor:pointer; font-family:inherit; font-size:12px;
  border-radius:9px; color:var(--txt);
  background:linear-gradient(180deg, var(--glanz), transparent 60%), var(--glas2);
  border:1px solid color-mix(in srgb, var(--glasrand) 70%, transparent);
}
.zb:hover{border-color:var(--cyan); box-shadow:0 0 14px color-mix(in srgb, var(--cyan) 45%, transparent)}
.zpad{
  font-size:9px; letter-spacing:2px; color:var(--mut); font-family:ui-monospace,Menlo,monospace;
}
body.ruhig .zoomsaeule{opacity:.35}

/* ============================================================
   WIKI WIKI
   ============================================================ */
.wiki{
  position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--schleier);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.wiki[hidden]{display:none}
.wiki-karte{
  width:min(1000px, 100%); height:min(760px, 100%); display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden;
  background:var(--glas2); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(26px) saturate(1.2); backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 var(--glanz);
}
.wiki-karte header{
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--glasrand);
}
.wiki-karte header b{
  font-size:13px; letter-spacing:5px; color:var(--cyan);
  text-shadow:0 0 18px color-mix(in srgb, var(--cyan) 55%, transparent);
}
.wiki-suche{
  flex:1; max-width:280px; background:var(--tief); color:var(--txt);
  border:1px solid var(--glasrand); border-radius:10px; padding:6px 12px;
  font-size:12px; font-family:inherit;
}
.wiki-tiefen{display:flex; gap:4px; margin-left:auto}
.wiki-tiefe{
  cursor:pointer; font-family:inherit; font-size:10px; letter-spacing:1px; padding:5px 10px;
  border-radius:9px; background:var(--tief); border:1px solid var(--glasrand); color:var(--mut);
}
.wiki-tiefe.an{background:var(--gelb); color:#141a10; border-color:var(--gelb); font-weight:600}
.wiki-zu{
  width:26px; height:26px; border-radius:8px; cursor:pointer; font-family:inherit;
  background:none; border:1px solid var(--glasrand); color:var(--cyan);
}
.wiki-koerper{flex:1; display:flex; min-height:0}
.wiki-liste{
  width:230px; flex:none; overflow-y:auto; padding:12px 8px 20px;
  border-right:1px solid var(--glasrand);
}
.wiki-gruppe{
  font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--rot);
  margin:12px 8px 5px;
}
.wiki-eintrag{
  display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  font-size:12px; padding:6px 9px; border-radius:8px; margin-bottom:2px;
  background:none; border:1px solid transparent; color:var(--les);
}
.wiki-eintrag:hover{background:var(--glanz); color:var(--txt)}
.wiki-eintrag.an{background:color-mix(in srgb, var(--cyan) 16%, transparent); border-color:var(--cyan); color:var(--txt)}
.wiki-text{flex:1; overflow-y:auto; padding:18px 24px 30px}
.wiki-text h3{font-size:17px; color:var(--gelb); margin-bottom:12px; letter-spacing:1px}
.wiki-text h4{font-size:11px; letter-spacing:2px; color:var(--rot); margin:18px 0 8px; text-transform:uppercase}
.wiki-text p{font-size:13px; line-height:1.7; color:var(--les); margin-bottom:11px}
.wiki-jetzt{
  font-size:14px !important; color:var(--txt) !important; padding:12px 14px; border-radius:12px;
  background:var(--glanz); border-left:3px solid var(--cyan);
}
.wiki-alle{margin-top:16px; border-top:1px solid var(--glasrand); padding-top:12px}
.wiki-tiefezeile{display:flex; gap:12px; margin-bottom:9px}
.wiki-tiefezeile span{
  width:88px; flex:none; font-size:10px; letter-spacing:1px; color:var(--mut); text-transform:uppercase;
  padding-top:2px;
}
.wiki-tiefezeile p{margin:0; font-size:12px}
.wiki-tab{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:12px}
.wiki-tab th{
  text-align:left; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--mut);
  padding:5px 6px; border-bottom:1px solid var(--glasrand);
}
.wiki-tab td{padding:6px; border-bottom:1px solid var(--glanz); vertical-align:top}
.wiki-tab td span{display:block; font-size:11px; color:var(--mut); line-height:1.45; margin-top:2px}
.wiki-cl{margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--glasrand)}
.wiki-cl b{color:var(--gelb); font-family:ui-monospace,Menlo,monospace; font-size:14px}
.wiki-cl span{color:var(--mut); font-size:11px; margin-left:8px}
.wiki-cl i{display:block; font-style:normal; color:var(--cyan); font-size:12px; letter-spacing:1px; margin:4px 0 6px}
.wiki-cl ul{margin-left:18px}
.wiki-cl li{font-size:12px; line-height:1.6; color:var(--les); margin-bottom:3px}
.wiki-karte footer{
  padding:8px 18px; border-top:1px solid var(--glasrand);
  font-size:10px; color:var(--mut); font-family:ui-monospace,Menlo,monospace;
}
@media(max-width:760px){ .wiki-liste{width:150px} .wiki-tiefen{display:none} }

/* ============================================================
   EIN STIL FUER ALLES
   Die Vorlagen waren beim Wiederherstellen durchgerutscht und standen
   als weisse Browser-Knoepfe da. Ab hier teilen sich ALLE Listen in
   allen Schubladen genau eine Regel: Vorlagen, Voelker, Praegungen,
   Katastrophen, Patenkinder. Wer eine neue Liste baut, haengt sich
   hier an und bekommt den Stil geschenkt.
   ============================================================ */
.preset, .volk, .praegung, .kat, .patenzeile, .gt, .ht-tab, .wiki-eintrag, .zb, .b{
  -webkit-appearance:none; appearance:none;
}
.preset, .volk, .praegung, .kat, .patenzeile{
  display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  color:var(--txt); margin-bottom:5px; padding:8px 10px; border-radius:10px;
  background:linear-gradient(180deg, var(--glanz), transparent 55%), var(--tief);
  border:1px solid var(--glasrand);
  box-shadow:inset 0 1px 0 var(--glanz);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.preset:hover, .volk:hover, .praegung:hover, .kat:hover, .patenzeile:hover{
  border-color:var(--cyan);
  background:linear-gradient(180deg, var(--glanz), transparent 55%),
             color-mix(in srgb, var(--cyan) 14%, var(--tief));
  box-shadow:inset 0 1px 0 var(--glanz), 0 0 18px color-mix(in srgb, var(--cyan) 30%, transparent);
}
.preset.an, .volk.an, .praegung.an, .kat.an{
  border-color:var(--gelb);
  box-shadow:inset 3px 0 0 var(--gelb), 0 0 20px color-mix(in srgb, var(--gelb) 28%, transparent);
}
.preset b, .volk b, .praegung b{
  display:block; font-size:12px; color:var(--txt); margin-bottom:2px; letter-spacing:.3px;
}
.preset span, .volk span, .praegung span{
  display:block; font-size:11px; color:var(--les); line-height:1.45;
}

/* ---- Transportleiste: EIN Knopftyp, Unterschiede nur ueber Licht ----
   Vorher war Pause dunkelgruen gefuellt, die Tempozahl hellblau und der
   Rest grau. Drei Farbwelten in einer Leiste. Jetzt haben alle dasselbe
   Glas, und wichtig ist, was leuchtet. */
.transport{gap:3px; padding:8px 20px; flex-wrap:nowrap; overflow:visible}
.transport .b{
  min-width:36px; height:32px; padding:0 10px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-size:12px; color:var(--txt);
  background:linear-gradient(180deg, var(--glanz), transparent 58%), var(--glas2);
  border:1px solid color-mix(in srgb, var(--glasrand) 65%, transparent);
  box-shadow:inset 0 1px 0 var(--glanz);
  text-shadow:none;
}
.transport .b:hover{
  color:var(--txt); border-color:var(--cyan);
  background:linear-gradient(180deg, var(--glanz), transparent 58%),
             color-mix(in srgb, var(--cyan) 18%, var(--glas2));
  box-shadow:inset 0 1px 0 var(--glanz), 0 0 16px color-mix(in srgb, var(--cyan) 45%, transparent);
}
.transport .b.prim{
  clip-path:none; border-radius:10px; padding:0 14px; font-weight:600; letter-spacing:.5px;
  color:var(--gelb);
  background:linear-gradient(180deg, var(--glanz), transparent 58%),
             color-mix(in srgb, var(--gelb) 16%, var(--glas2));
  border-color:var(--gelb);
  box-shadow:inset 0 1px 0 var(--glanz), 0 0 20px color-mix(in srgb, var(--gelb) 35%, transparent);
  text-shadow:0 0 14px color-mix(in srgb, var(--gelb) 60%, transparent);
}
.transport .b.prim:hover{
  background:linear-gradient(180deg, var(--glanz), transparent 58%),
             color-mix(in srgb, var(--gelb) 32%, var(--glas2));
}
.transport .tempo{
  min-width:38px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--txt); opacity:.85;
  text-shadow:0 0 12px color-mix(in srgb, var(--cyan) 40%, transparent);
}
@media(max-width:1080px){
  .transport{flex-wrap:wrap; max-width:calc(100vw - 30px)}
  .transport .b{min-width:32px; height:29px; padding:0 8px; font-size:11px}
}

/* Der Titel der Schublade lag unter den drei Arcade-Knoepfen oben links */
.lade header{padding:74px 16px 10px 0}

/* ============================================================
   DER GLASRAND
   Wir schauen durch ein Artefakt in die Welt. Aussen sitzt der
   geschliffene Rand der Kugel, dort docken die Menues an. Reine
   Optik, faengt keine Klicks, kostet nichts.
   ============================================================ */
#glasrand{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:
    radial-gradient(130% 105% at 50% 50%, transparent 52%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.7) 100%),
    radial-gradient(115% 92% at 18% 6%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 46%),
    radial-gradient(115% 92% at 86% 96%, color-mix(in srgb, var(--lila) 12%, transparent), transparent 46%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cyan) 26%, transparent),
    inset 0 0 34px color-mix(in srgb, var(--cyan) 16%, transparent),
    inset 0 0 120px rgba(0,0,0,.35);
}
#glasrand::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 9%),
    linear-gradient(270deg, color-mix(in srgb, var(--lila) 20%, transparent), transparent 9%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 7%),
    linear-gradient(0deg, rgba(255,255,255,.07), transparent 7%);
  mix-blend-mode:screen; opacity:.85;
}
body[data-theme="pergament"] #glasrand{
  background:
    radial-gradient(128% 104% at 50% 50%, transparent 54%, rgba(90,68,32,.22) 86%, rgba(70,52,26,.4) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120,92,44,.35),
    inset 0 0 40px rgba(120,92,44,.18);
}
body[data-theme="pergament"] #glasrand::before{opacity:.35; mix-blend-mode:multiply}
body[data-theme="nacht"] #glasrand{
  background:radial-gradient(130% 105% at 50% 50%, transparent 56%, rgba(0,0,0,.6) 88%, #000 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 30px rgba(255,255,255,.08);
}
body[data-theme="nacht"] #glasrand::before{opacity:.4}

/* ---- Meilenstein: feiern, nicht beenden ---- */
.meilenstein{
  position:fixed; left:50%; top:14%; transform:translate(-50%, -20px); z-index:120;
  opacity:0; pointer-events:none; transition:opacity .35s, transform .35s;
}
.meilenstein.an{opacity:1; transform:translate(-50%, 0); pointer-events:auto}
.ms-karte{
  width:min(380px, 90vw); padding:22px 26px; text-align:center; border-radius:20px;
  background:var(--glas2); border:1px solid var(--gelb);
  -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 var(--glanz),
             0 0 60px color-mix(in srgb, var(--gelb) 25%, transparent);
}
.ms-stern{font-size:34px; color:var(--gelb); line-height:1;
  text-shadow:0 0 30px color-mix(in srgb, var(--gelb) 70%, transparent);
  animation:msPuls 2.4s ease-in-out infinite}
@keyframes msPuls{0%,100%{transform:scale(1); opacity:.9}50%{transform:scale(1.12); opacity:1}}
.ms-karte h3{font-size:19px; letter-spacing:3px; color:var(--gelb); margin:8px 0 2px}
.ms-jahr{font-family:ui-monospace,Menlo,monospace; color:var(--cyan); font-size:13px; margin-bottom:8px !important}
.ms-karte p{font-size:12px; line-height:1.6; color:var(--les); margin-bottom:12px}
.ms-zahlen{display:grid; grid-template-columns:1fr 1fr; gap:7px 14px; margin-bottom:16px; text-align:left}
.ms-zahlen div{display:flex; flex-direction:column}
.ms-zahlen span{font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut)}
.ms-zahlen b{font-size:15px; font-family:ui-monospace,Menlo,monospace; color:var(--txt)}
.ms-weiter{width:100%}

/* ---- Schubladen enden ueber den Leisten ----
   Die unterste Chronikzeile lag unter der Rollenlegende und der
   Transportleiste. Statt die Leisten zu verschieben endet die
   Schublade jetzt darueber, und die Legende weicht zur Seite. */
.lade{bottom:84px; border-radius:0 22px 22px 0}
.lade-inhalt{padding-bottom:14px}
body.ladeauf .rollen{transform:translateX(408px)}
body.ladeauf.reglerauf .rollen{transform:translateX(460px)}
.rollen{transition:transform .34s cubic-bezier(.2,.85,.2,1), opacity .25s; max-width:34vw}
@media(max-width:1080px){
  body.ladeauf .rollen{opacity:0; pointer-events:none; transform:none}
}

/* Chronikzeilen kompakter: das Jahr stand als eigene Zeile darueber und
   hat jeden Eintrag doppelt so hoch gemacht. Jetzt laeuft es voran. */
.logrow{padding:4px 8px; line-height:1.4}
.logrow span{
  display:inline; float:left; margin-right:7px; letter-spacing:.5px;
  font-family:ui-monospace,Menlo,monospace; opacity:.75;
}
.logrow::after{content:''; display:block; clear:both}

/* ============================================================
   JOYPAD: Zeiger, Modusanzeige, Ring
   ============================================================ */
.padzeiger{
  position:fixed; left:0; top:0; z-index:210; pointer-events:none;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  transition:transform .04s linear;
}
.padzeiger::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--cyan);
  box-shadow:0 0 14px color-mix(in srgb, var(--cyan) 70%, transparent),
             inset 0 0 8px color-mix(in srgb, var(--cyan) 40%, transparent);
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.5), transparent 55%);
}
.padzeiger::after{
  content:''; position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px;
  border-radius:50%; background:#fff; box-shadow:0 0 8px #fff;
}
.padzeiger.klick::before{transform:scale(.7); border-color:var(--gelb);
  box-shadow:0 0 22px color-mix(in srgb, var(--gelb) 80%, transparent)}

.padmodus{
  position:fixed; right:14px; bottom:76px; z-index:32; max-width:230px;
  padding:8px 13px; border-radius:12px; line-height:1.35;
  background:var(--glas); border:1px solid var(--glasrand);
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
  box-shadow:0 6px 24px rgba(0,0,0,.35), inset 0 1px 0 var(--glanz);
}
.padmodus b{display:block; font-size:12px; color:var(--cyan); letter-spacing:1px}
.padmodus span{display:block; font-size:10px; color:var(--les); margin-top:2px}
.padmodus i{display:block; font-style:normal; font-size:9px; color:var(--mut); margin-top:4px}
body.ruhig .padmodus{opacity:.35}

.padring{
  position:fixed; left:50%; top:50%; z-index:220; width:0; height:0; pointer-events:none;
}
.pr-teil{
  position:absolute; width:88px; margin:-34px 0 0 -44px; padding:7px 4px;
  text-align:center; border-radius:12px;
  background:var(--glas2); border:1px solid var(--glasrand); color:var(--txt);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 6px 22px rgba(0,0,0,.45), inset 0 1px 0 var(--glanz);
  transition:box-shadow .12s, border-color .12s;
}
.pr-teil i{display:block; font-style:normal; font-size:18px; line-height:1.1}
.pr-teil span{display:block; font-size:10px; letter-spacing:.5px; margin-top:2px}
.pr-teil.an{
  border-color:var(--gelb); color:var(--gelb);
  box-shadow:0 0 26px color-mix(in srgb, var(--gelb) 55%, transparent), inset 0 1px 0 var(--glanz);
}
.pr-mitte{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:9px; letter-spacing:2px; color:var(--mut); text-transform:uppercase;
  white-space:nowrap;
}

/* ---- Mehrere Voelker auf einer Karte ---- */
.zivwahl{display:flex; align-items:center; gap:9px; font-size:11px; margin-bottom:10px}
.zivwahl span{color:var(--mut)}
.zivwahl input{flex:1; accent-color:var(--gruen)}
.zivwahl b{width:20px; text-align:right; font-family:ui-monospace,Menlo,monospace; color:var(--gelb)}
.zivliste{display:flex; flex-direction:column; gap:5px}
.zivzeile{
  display:flex; align-items:flex-start; gap:8px; padding:6px 8px; border-radius:8px;
  background:var(--glanz); border:1px solid var(--glasrand); font-size:11px;
}
.zivzeile.tot{opacity:.45}
.zivzeile i{width:10px; height:10px; border-radius:3px; flex:none; margin-top:3px}
.zivzeile b{display:block; font-size:12px}
.zivzeile span{display:block; color:var(--mut); line-height:1.4}
.zivzeile em{display:block; font-style:normal; color:var(--les); margin-top:2px; font-size:10px}