/* ====================================================================
   Kernfeld - dunkles "AI OS" wie das Trading-Dashboard: Monospace,
   feine Linien, kleine Großbuchstaben-Labels, Neon auf Nachtblau.
   ==================================================================== */

:root {
  --bg: #0a0c0f;
  --bg2: #0d1014;
  --panel: rgba(15, 19, 23, .88);
  --panel-solid: #0f1317;
  --line: #1c2229;
  --line2: #262e37;
  --text: #d9d6cf;
  --dim: #7d8691;
  --mute: #4b535d;
  --cyan: #6edce8;
  --teal: #3fd6c0;
  --violet: #a07cf0;
  --blue: #6f86ff;
  --accent: #f0883e;
  --accent2: #ffb27a;
  --up: #5fd38d;
  --down: #ef6461;
  --yellow: #e6c35c;
  --hc: rgba(110, 220, 232, .6);
  --team1: #6f86ff;
  --team2: #ef6461;
  --team3: #5fd38d;
  --team4: #e6c35c;
  --mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
b { font-weight: 600; }
code, kbd { font-family: var(--mono); }
kbd { border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; font-size: 10.5px; color: var(--accent); background: var(--bg2); }
h1 { font-size: 20px; font-weight: 500; margin: 4px 0 12px; letter-spacing: .02em; }

.label {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 10px; font-weight: 600;
}
.label::before { content: "▸ "; color: var(--accent); }
.dim { color: var(--dim); }
.small { font-size: 11.5px; }
.mt { margin-top: 14px; }
.up { color: var(--up); }
.down { color: var(--down); }
.accent { color: var(--accent); }
.r { text-align: right; }

/* ------------------------------ Hintergrund ------------------------------ */
canvas.bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.scan {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 58%, rgba(3, 5, 8, .45) 100%);
}
.page > header, .page > main { position: relative; z-index: 1; }
/* Kopfleiste über dem Inhalt: ihr Aufklappfeld (Ton) muss darüber liegen */
.page > .topbar { position: sticky; z-index: 20; }

/* ------------------------------ Kopfleiste ------------------------------ */
/* Links die Marke als oranger, schräg abgeschnittener Reiter mit
   Leuchtschiene (wie das Blatt im Zugang), daneben das nummerierte Menü der
   Seite, rechts Live-Status, laufende Partie, Spieler und Abmelden.
   .brand und .dot braucht die Kopfzeile im Spiel. */
.topbar {
  position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: stretch;
  background: rgba(9, 11, 14, .94); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(240, 136, 62, .12);
  backdrop-filter: blur(6px);
}
.kopf-marke {
  flex: none; display: flex; align-items: center; padding: 0 42px 0 22px; white-space: nowrap;
  color: #140b04; font-size: 13px; font-weight: 700; letter-spacing: .24em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  background:
    repeating-linear-gradient(-60deg, rgba(20, 11, 4, .08) 0 1px, transparent 1px 10px),
    linear-gradient(160deg, #ff9d58, var(--accent) 55%, #d26a2a);
}
.kopf-marke:hover { color: #000; }
.kopf-marke .marke-zeichen { width: 15px; height: 15px; margin-right: 12px; flex: none; }
.kopf-schiene {
  flex: none; width: 24px; margin-left: -12px;
  clip-path: polygon(20px 0, 24px 0, 4px 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(240, 136, 62, .9), rgba(240, 136, 62, .25));
}
.kopf-unter { display: flex; align-items: center; margin-left: 16px; color: var(--dim); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.kopf-nav { display: flex; align-items: stretch; margin-left: 12px; }
.kopf-nav a, .kopf-nav button {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 0 16px; white-space: nowrap;
  background: none; border: 0; cursor: pointer; color: var(--dim);
  font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.kopf-nav span { color: var(--mute); font-size: 10px; }
.kopf-nav :is(a, button):hover { color: var(--text); }
.kopf-nav :is(a, button):hover span { color: var(--accent); }
.kopf-nav :is(a, button):focus-visible { outline: 1px solid var(--accent); outline-offset: -8px; }
.kopf-nav [aria-current="page"] { color: #fff; }
.kopf-nav [aria-current="page"] span { color: var(--accent); }
.kopf-nav [aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  background: var(--accent); transform: skewX(-35deg); box-shadow: 0 0 10px rgba(240, 136, 62, .7);
}
.kopf-rest { flex: 1; min-width: 12px; }
.kopf-rechts { display: flex; align-items: center; gap: 12px; padding-right: 18px; }
/* Ton-Knopf in Zugang und Lobby: Aufklappfeld wie das Menü im Spiel */
.kopf-ton { position: relative; display: flex; }
.kopf-ton .ton-aus, .kopf-ton.stumm .ton-an { display: none; }
.kopf-ton.stumm .ton-aus { display: inline; }
.kopf-ton.stumm .slider { opacity: .4; }
#ton-knopf[aria-expanded="true"] { color: var(--accent); }
.kopf-live {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--line2); color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.kopf-live i { width: 7px; height: 7px; background: var(--mute); transform: rotate(45deg); }
.kopf-live.ok { border-color: rgba(95, 211, 141, .35); background: rgba(95, 211, 141, .06); color: var(--up); }
.kopf-live.ok i { background: var(--up); box-shadow: 0 0 8px var(--up); animation: puls 1.8s ease-in-out infinite; }
.kopf-live.warn { border-color: rgba(230, 195, 92, .4); color: var(--yellow); }
.kopf-live.warn i { background: var(--yellow); }
@keyframes puls { 50% { opacity: .35; } }
/* Eigene Partie läuft: von überall zurück ins Spiel */
.kopf-partie {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; max-width: 34vw; white-space: nowrap;
  border: 1px solid rgba(240, 136, 62, .6); background: rgba(240, 136, 62, .1); color: var(--accent2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 14px rgba(240, 136, 62, .12);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.kopf-partie:hover { color: #fff; background: rgba(240, 136, 62, .18); }
.kopf-partie i { flex: none; width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px var(--accent); animation: puls 1.8s ease-in-out infinite; }
.kopf-partie b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.kopf-spieler {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 10px; min-width: 0;
  background: var(--panel-solid); border: 1px solid var(--line2);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.kopf-raute { flex: none; width: 18px; height: 18px; margin: 0 3px; display: grid; place-items: center; transform: rotate(45deg); border: 1.5px solid var(--accent); box-shadow: 0 0 10px rgba(240, 136, 62, .35); }
.kopf-raute b { transform: rotate(-45deg); color: var(--accent2); font-size: 10.5px; font-weight: 700; }
.kopf-spieler-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.kopf-spieler-text b { color: var(--teal); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-spieler-text small { color: var(--dim); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.brand { color: var(--accent); font-weight: 700; letter-spacing: .2em; text-shadow: 0 0 12px rgba(240, 136, 62, .45); }
.brand:hover { color: #fff; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); margin-right: 6px; vertical-align: 1px; }
.dot.ok { background: var(--up); box-shadow: 0 0 8px var(--up); }
.dot.warn { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.dot.err { background: var(--down); box-shadow: 0 0 8px var(--down); }
form.inline { display: inline; margin: 0; }
/* Schmaler: erst die Zusatzzeile des Spielers weg, dann wandert das Menü in
   eine eigene Zeile unter Marke und Spieler. */
@media (max-width: 1180px) {
  .kopf-spieler-text small { display: none; }
}
@media (max-width: 900px) {
  .topbar { height: auto; flex-wrap: wrap; }
  .kopf-marke { min-height: 52px; }
  .kopf-rechts { min-height: 52px; padding-right: 12px; gap: 8px; }
  .kopf-nav { order: 5; width: 100%; margin: 0; border-top: 1px solid var(--line); overflow-x: auto; }
  .kopf-nav a, .kopf-nav button { flex: 1 0 auto; justify-content: center; height: 44px; padding: 0 12px; }
  .kopf-partie { max-width: 46vw; }
}
@media (max-width: 560px) {
  .kopf-unter, .kopf-spieler-text, .kopf-live b, .kopf-partie b { display: none; }
  .kopf-marke { padding: 0 34px 0 14px; letter-spacing: .18em; }
  .kopf-nav span { display: none; }
}

/* ------------------------------ Bausteine ------------------------------ */
.btn {
  font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--panel-solid); color: var(--text); border: 1px solid var(--line2);
  padding: 9px 14px; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { border-color: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(240, 136, 62, .18); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn.primary { background: var(--accent); color: #140b04; border-color: var(--accent); box-shadow: 0 0 14px rgba(240, 136, 62, .3); }
.btn.primary:not(:disabled):hover { background: #ff9d58; border-color: #ff9d58; color: #140b04; box-shadow: 0 0 22px rgba(240, 136, 62, .5); }
.btn.danger { border-color: #5a2a2a; color: var(--down); }
.btn.danger:hover { background: #2a1414; border-color: var(--down); box-shadow: 0 0 12px rgba(239, 100, 97, .2); }
.btn.small { padding: 5px 8px; font-size: 10px; }
.btn.full { width: 100%; }
/* Kantig: abgeschnittene Ecken wie im Zugang */
.btn.kante { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
/* Nur ein Symbol (Abmelden in der Kopfleiste); aria-label trägt den Namen */
.btn.icon { width: 40px; height: 40px; padding: 0; color: var(--dim); }
.btn.icon:hover { color: #fff; }
.btn.icon svg { width: 17px; height: 17px; }
/* Drücken: der Knopf gibt nach und wird dunkler, vom Druckpunkt aus breitet
   sich eine Raute aus (knopf.js setzt .knopf-welle). Beim Warten auf den
   Server (aria-busy) blinken rechts drei Blöcke (.knopf-lader). */
.btn:active:not(:disabled, [aria-busy="true"]) { transform: translateY(2px) scale(.98); transition-duration: .04s; background-color: #080a0d; }
.btn.primary:active:not(:disabled, [aria-busy="true"]) { background: #d9712f; border-color: #d9712f; box-shadow: inset 0 3px 8px rgba(20, 11, 4, .35), 0 0 6px rgba(240, 136, 62, .3); }
.btn.danger:active:not(:disabled, [aria-busy="true"]) { background: #1d0f0f; }
.btn[aria-busy="true"] { cursor: progress; }
.knopf-welle {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none;
  border: 2px solid rgba(240, 136, 62, .9); transform: rotate(45deg) scale(0);
  animation: knopf-welle 520ms cubic-bezier(.2, .8, .2, 1) forwards;
}
.btn.primary .knopf-welle { border-color: rgba(255, 255, 255, .85); }
.btn.danger .knopf-welle { border-color: rgba(239, 100, 97, .9); }
.btn.ready-on .knopf-welle { border-color: rgba(95, 211, 141, .9); }
@keyframes knopf-welle { to { transform: rotate(45deg) scale(14); opacity: 0; border-width: 1px; } }
/* Pfeil im Knopf rückt beim Zeigen in seine Richtung vor */
.pfeil { display: inline-block; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.btn:hover .pfeil { transform: translateX(4px); }
.btn:hover .pfeil.zurueck { transform: translateX(-4px); }
.btn:hover .pfeil.runter { transform: translateY(3px); }
.knopf-lader { position: absolute; right: 16px; top: 50%; translate: 0 -50%; display: none; gap: 4px; }
.btn[aria-busy="true"] .knopf-lader { display: flex; }
.knopf-lader b { width: 5px; height: 5px; background: currentColor; animation: knopf-lader 900ms ease-in-out infinite; }
.knopf-lader b:nth-child(2) { animation-delay: 150ms; }
.knopf-lader b:nth-child(3) { animation-delay: 300ms; }
@keyframes knopf-lader { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

input, select {
  width: 100%; background: var(--bg2); color: var(--text); border: 1px solid var(--line2);
  border-radius: 3px; padding: 8px 10px; font: 13px var(--mono); margin-top: 4px;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(240, 136, 62, .25); }
label { display: block; color: var(--dim); font-size: 11.5px; }
.stack { display: grid; gap: 12px; }
.row-end { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 16px; flex-wrap: wrap; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px; margin-bottom: 16px; position: relative; }
/* HUD-Ecken: kleine Winkel oben links und unten rechts */
.hud::before, .hud::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.hud::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.hud::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.msg { padding: 9px 12px; border-radius: 3px; border: 1px solid; margin: 0 0 14px; }
.msg.ok { border-color: #224a33; color: var(--up); background: #0e1d15; }
.msg.err { border-color: #5a2a2a; color: #ff9a97; background: #1d0f0f; }
.msg.warn { border-color: #5a4a22; color: var(--yellow); background: #1c180c; }
.pill { display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 1px 7px; border: 1px solid var(--line2); border-radius: 10px; color: var(--dim); }
.pill.ok { color: var(--up); border-color: #224a33; }
.pill.warn { color: var(--yellow); border-color: #5a4a22; }
.pill.run { color: var(--accent); border-color: #1d4a5a; }
/* KI-Zeichen neben Spielernamen (Spieler-Leiste im Spiel) */
.ai-tag { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); border: 1px solid #3b2d63; border-radius: 8px; padding: 0 5px; font-weight: 400; }

/* ------------------------------ Anmeldung ------------------------------ */
/* Anmelden, Konto anlegen und Passwort vergessen in einer Karte (Vorlage:
   Stammbaum). data-zugang sagt, welche Seite offen ist; beim Wechsel fährt
   das orange Blatt einmal quer darüber. Mitten im Weg deckt es die ganze
   Karte ab - genau dann tauschen die Seiten. „Passwort vergessen“ liegt wie
   die Anmeldung links: .vonlinks schiebt das Blatt rechts hinaus und wischt
   es von links über die ganze Karte wieder herein, zurück läuft dieselbe
   Bewegung rückwärts (.nachlinks). Maße in cqw = % der Kartenbreite. Ab
   768 px liegt das Blatt in Ruhe auf der freien Hälfte, schmaler wartet es
   neben der Karte und oben steht ein oranger Kopf. */
body.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px 56px; }

/* Rahmen trägt die HUD-Ecken (die Karte selbst schneidet ab) */
.zugang-rahmen {
  position: relative; width: 100%; max-width: 1000px;
  border: 1px solid var(--line2); border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
}
.zugang-rahmen.hud::before, .zugang-rahmen.hud::after { z-index: 3; width: 18px; height: 18px; }
.zugang {
  --dauer: 700ms;
  --schraege: 12cqw;
  container-type: inline-size;
  position: relative; display: grid; overflow: hidden; border-radius: 3px;
  background:
    linear-gradient(rgba(110, 220, 232, .028) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(110, 220, 232, .028) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(12, 15, 19, .94);
}
.zugang-seite { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; }
.zugang:not([data-zugang="anmelden"]) [data-seite="anmelden"],
.zugang:not([data-zugang="registrieren"]) [data-seite="registrieren"],
.zugang:not([data-zugang="passwort"]) [data-seite="passwort"] { visibility: hidden; }
.zugang-inhalt { flex: 1; display: flex; flex-direction: column; padding: 26px 22px 32px; }
/* Felder nicht über die ganze Spalte */
.zugang-inhalt > * { width: 100%; max-width: 380px; margin-inline: auto; }
.zugang h1 { font-size: 26px; font-weight: 500; color: #fff; margin-block: 4px 8px; letter-spacing: .02em; outline: none; }
.zugang-intro { color: var(--dim); margin-block: 0 24px; }
.zugang form { display: grid; gap: 12px; }
/* feste Zeilenhöhe: bei "normal" schneidet das Feld den Unterstrich ab */
.zugang input { padding: 10px 12px; font-size: 14px; line-height: 20px; margin-top: 6px; }
.zugang .btn.full { min-height: 46px; margin-top: 4px; font-size: 11.5px; letter-spacing: .14em; }
.zugang .msg { margin-block: 0 18px; }
.zugang-fuss { margin-block: 16px 0; text-align: center; font-size: 11.5px; color: var(--dim); }
.zugang-fuss a { color: var(--accent); border-bottom: 1px solid rgba(240, 136, 62, .35); }
.zugang-fuss a:hover { color: #fff; border-color: #fff; }
/* Nach dem Code: neuen anfordern oder andere Adresse - kleine Formulare, die wie Links aussehen */
.zugang-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.zugang-wahl form { margin: 0; }
.textknopf { padding: 0; background: none; border: 0; border-bottom: 1px solid rgba(240, 136, 62, .35); color: var(--accent); font: inherit; cursor: pointer; }
.textknopf:hover { color: #fff; border-color: #fff; }
.textknopf:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.textknopf[aria-busy="true"] { opacity: .5; pointer-events: none; }
.hilfe { margin: 6px 0 0; font-size: 11px; color: var(--mute); }

/* Schmal: oranger Kopf mit schräger Unterkante statt des Blatts */
.zugang-kopf {
  padding: 20px 22px 36px; color: #140b04;
  background:
    repeating-linear-gradient(-60deg, rgba(20, 11, 4, .07) 0 1px, transparent 1px 10px),
    linear-gradient(160deg, #ff9d58, var(--accent) 55%, #dc7130);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
}
.zugang-kopf p { margin: 0; }
.zugang-kopf .zugang-kopf-titel { font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.zugang-kopf p + p { margin-top: 4px; font-size: 12px; }
.zugang-kopf a { color: #140b04; font-weight: 700; border-bottom: 1px solid currentColor; }

/* Das Blatt: Parallelogramm, doppelt so breit wie eine Hälfte plus Schräge.
   Die Fläche ist beschnitten, der Leuchtrand (drop-shadow) nicht. */
.zugang-blatt, .zugang-schienen {
  --rechts-ruht: 100cqw;
  --links-ruht: calc(-100cqw - 2 * var(--schraege));
  position: absolute; inset-block: 0; left: 0; z-index: 1;
  width: calc(100cqw + 2 * var(--schraege));
  transform: translateX(var(--rechts-ruht));
  pointer-events: none;
}
.zugang-flaeche {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, calc(100% - var(--schraege)) 0, 100% 100%, var(--schraege) 100%);
  background:
    repeating-linear-gradient(-60deg, rgba(20, 11, 4, .07) 0 1px, transparent 1px 10px),
    radial-gradient(ellipse 60% 70% at 70% 30%, rgba(255, 200, 150, .35), transparent 70%),
    linear-gradient(160deg, #ff9d58 0%, var(--accent) 45%, #d26a2a 100%);
}
/* Schienen: dünne Leisten parallel zu den Schrägen, laufen beim Wechsel nach */
.zugang-schienen i {
  position: absolute; inset-block: 0; width: calc(var(--schraege) + 3px);
  clip-path: polygon(0 0, 3px 0, 100% 100%, calc(100% - 3px) 100%);
  background: linear-gradient(to bottom, rgba(240, 136, 62, .9), rgba(240, 136, 62, .25));
}
.zugang-schienen i:first-child { left: -13px; }
.zugang-schienen i:last-child { left: calc(100cqw + var(--schraege) + 10px); }

.zugang-text {
  position: absolute; inset-block: 0; width: calc(50cqw - var(--schraege));
  display: none; flex-direction: column; justify-content: center; gap: 14px;
  padding: 0 clamp(28px, 5cqw, 56px); color: #140b04; pointer-events: auto;
}
.zugang-text:is([data-text="anmelden"], [data-text="passwort"]) { left: var(--schraege); }
.zugang-text[data-text="registrieren"] { left: calc(50cqw + 2 * var(--schraege)); }
.zugang-text p { margin: 0; }
/* HUD-Winkel um den Text */
.zugang-text::before, .zugang-text::after { content: ""; position: absolute; width: 20px; height: 20px; }
.zugang-text::before { top: 34px; left: clamp(28px, 5cqw, 56px); border-top: 2px solid rgba(20, 11, 4, .55); border-left: 2px solid rgba(20, 11, 4, .55); }
.zugang-text::after { bottom: 34px; right: clamp(28px, 5cqw, 56px); border-bottom: 2px solid rgba(20, 11, 4, .55); border-right: 2px solid rgba(20, 11, 4, .55); }
.zugang-marke { display: flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .72; }
.zugang-marke .marke-zeichen { width: 13px; height: 13px; flex: none; }
.zugang-titel { font-size: clamp(24px, 3.7cqw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; }
.zugang-sub { max-width: 32ch; font-size: 13px; line-height: 1.55; opacity: .85; }
.zugang-frage { margin-top: 12px !important; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.zugang-status { display: flex; align-items: center; gap: 8px; margin-top: 18px !important; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.zugang-status i { width: 7px; height: 7px; background: #140b04; transform: rotate(45deg); }
/* Gleich groß wie der Knopf im Formular: volle Spaltenbreite, gleiche Höhe und Schrift */
.btn.dunkel {
  width: 100%; max-width: 380px; min-height: 46px; padding: 0 18px; font-size: 11.5px; letter-spacing: .14em;
  background: #140b04; color: var(--accent2); border-color: #140b04;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn.dunkel:hover { background: #000; color: #fff; border-color: #000; box-shadow: inset 0 0 0 1px rgba(255, 178, 122, .55), inset 0 0 18px rgba(240, 136, 62, .3); }

.zugang[data-zugang="registrieren"] :is(.zugang-blatt, .zugang-schienen) { transform: translateX(var(--links-ruht)); }
.zugang:not([data-zugang="anmelden"]) [data-text="anmelden"],
.zugang:not([data-zugang="registrieren"]) [data-text="registrieren"],
.zugang:not([data-zugang="passwort"]) [data-text="passwort"] { opacity: 0; visibility: hidden; }
.zugang.bewegt .zugang-seite { transition: visibility 0s linear calc(var(--dauer) / 2); }
.zugang.bewegt .zugang-blatt { transition: transform var(--dauer) cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.zugang.bewegt .zugang-schienen { transition: transform calc(var(--dauer) + 60ms) cubic-bezier(.65, 0, .35, 1) 30ms; will-change: transform; }
.zugang.bewegt .zugang-text { transition: opacity 250ms ease calc(var(--dauer) * .55), visibility 0s; }
.zugang.bewegt:not([data-zugang="anmelden"]) [data-text="anmelden"],
.zugang.bewegt:not([data-zugang="registrieren"]) [data-text="registrieren"],
.zugang.bewegt:not([data-zugang="passwort"]) [data-text="passwort"] { transition: opacity 200ms ease, visibility 0s linear var(--dauer); }
/* Wischen zu „Passwort vergessen“ und zurück: rechts hinaus, von links über alles herein */
.zugang:is(.vonlinks, .nachlinks) { --dauer: 1000ms; }
.zugang.bewegt:is(.vonlinks, .nachlinks) .zugang-blatt { transition: none; animation: zugang-vonlinks var(--dauer) both; }
.zugang.bewegt:is(.vonlinks, .nachlinks) .zugang-schienen { transition: none; animation: zugang-vonlinks calc(var(--dauer) + 60ms) 30ms both; }
.zugang.bewegt.nachlinks :is(.zugang-blatt, .zugang-schienen) { animation-direction: reverse; }
@keyframes zugang-vonlinks {
  0% { transform: translateX(var(--rechts-ruht)); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
  25% { transform: translateX(100cqw); }
  25.01% { transform: translateX(calc(-100cqw - 2 * var(--schraege))); animation-timing-function: linear; }
  50% { transform: translateX(calc(-1 * var(--schraege))); animation-timing-function: cubic-bezier(0, 0, .35, 1); }
  100% { transform: translateX(var(--rechts-ruht)); }
}

/* Schmal bestimmt nur die offene Seite die Höhe; zugang.js tauscht
   data-hoehe, wenn das Blatt alles verdeckt. */
@media (max-width: 767px) {
  .zugang:not([data-hoehe="anmelden"]) [data-seite="anmelden"],
  .zugang:not([data-hoehe="registrieren"]) [data-seite="registrieren"],
  .zugang:not([data-hoehe="passwort"]) [data-seite="passwort"] { position: absolute; inset-inline: 0; top: 0; }
  .zugang-schienen { display: none; }
}
@media (min-width: 768px) {
  /* Eine Größe für alle Seiten und Schritte: so hoch, wie das Fenster
     erlaubt, höchstens 680 px. Reicht es nicht, scrollt der Inhalt in der
     Karte - die Karte selbst wächst nie. */
  .auth-main { padding-block: 32px; }
  .zugang { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); height: clamp(560px, calc(100dvh - 120px), 680px); }
  .zugang-seite { min-height: 0; }
  .zugang-seite[data-seite="registrieren"] { grid-column: 2; }
  .zugang-inhalt {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mute) transparent;
    justify-content: safe center; padding: 24px clamp(28px, 5cqw, 52px);
  }
  .zugang-kopf { display: none; }
  .zugang-text { display: flex; }
  .zugang-blatt { filter: drop-shadow(0 0 28px rgba(240, 136, 62, .35)); }
  :is(.zugang-blatt, .zugang-schienen) { --schraege: 9cqw; --rechts-ruht: 50cqw; --links-ruht: calc(-50cqw - 2 * var(--schraege)); }
}

/* Schritte der Registrierung: schräge Segmente wie das Blatt */
.schritte { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.schritte span { width: 30px; height: 4px; background: var(--line2); transform: skewX(-35deg); }
.schritte span.an { background: var(--accent); box-shadow: 0 0 8px rgba(240, 136, 62, .6); }
.schritte span.fertig { background: var(--up); box-shadow: 0 0 6px rgba(95, 211, 141, .5); }
.schritte b { margin-left: 8px; font-weight: 600; }

/* Code aus der E-Mail: das echte Feld liegt unsichtbar über einer Leiste,
   jedes Zeichen springt in ein eigenes Kästchen (so viele, wie getippt
   sind). Lehnt der Server ab, ist die Leiste rot (.fehler). Sehr lange
   Eingaben (.lang) bleiben ein gewöhnliches Feld. */
.codefeld { position: relative; margin-top: 6px; }
.codefeld-kaesten {
  position: relative; display: none; gap: 4px; align-items: center; height: 48px; padding: 0 6px; overflow: hidden;
  border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2);
  transition: border-color .15s, box-shadow .2s;
}
.codefeld.bereit:not(.lang) .codefeld-kaesten { display: flex; }
.codefeld.bereit:not(.lang) .codefeld-eingabe {
  position: absolute; inset: 0; z-index: 1; height: 100%; margin: 0;
  opacity: 0; font-size: 16px; caret-color: transparent; cursor: text;
}
.codefeld:focus-within .codefeld-kaesten { border-color: rgba(240, 136, 62, .6); box-shadow: 0 0 0 1px rgba(240, 136, 62, .2); }
.codefeld.leer:not(:focus-within) .codefeld-kaesten::before { content: "Code eingeben, etwa K7QM-X2PD"; padding-left: 6px; color: var(--mute); font-size: 13px; }
.codefeld.leer:not(:focus-within) .codefeld-kasten { display: none; }
.codefeld-kasten {
  --i: 0;
  flex: 0 1 30px; min-width: 14px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .035); border-bottom: 2px solid var(--line2);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  font-size: 17px; font-weight: 600; color: #fff;
  transition: border-color .15s, background-color .25s, color .25s;
  transition-delay: calc(var(--i) * 45ms);
}
.codefeld-kasten.leer { background: transparent; }
.codefeld-kasten.aktiv { border-bottom-color: var(--accent); background: rgba(240, 136, 62, .08); }
.codefeld-kasten.aktiv:empty::after { content: ""; width: 2px; height: 20px; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: code-marke 1s steps(1) infinite; }
.codefeld-zeichen { display: inline-block; animation: code-zeichen 300ms cubic-bezier(.34, 1.56, .64, 1); }
.codefeld.fehler .codefeld-kaesten { border-color: rgba(239, 100, 97, .65); box-shadow: 0 0 0 1px rgba(239, 100, 97, .2); }
.codefeld.fehler .codefeld-kasten:not(.leer) { border-bottom-color: var(--down); color: #ff9a97; }
.codefeld.fehler .codefeld-kasten.aktiv:empty::after { background: var(--down); box-shadow: 0 0 8px var(--down); }
.codefeld.lang { overflow: hidden; border-radius: 3px; }
.codefeld.lang .codefeld-eingabe { margin: 0; height: 48px; font-size: 18px; letter-spacing: .18em; color: #fff; }
.codefeld.lang.fehler .codefeld-eingabe { border-color: rgba(239, 100, 97, .7); color: #ff9a97; }
@keyframes code-marke { 50% { opacity: 0; } }
@keyframes code-zeichen { from { opacity: 0; transform: translateY(10px) scale(.4); filter: blur(3px); } }

/* Knöpfe im Zugang: Pfeile, Lader und Welle siehe Bausteine */
.btn.dunkel:active:not(:disabled, [aria-busy="true"]) { background: #2a1608; }

/* Schritt 2: Code geschickt, Regeln haken sich beim Tippen ab (Rauten wie Kristall) */
.codeok-zeile { display: flex; align-items: center; gap: 10px; margin-block: 0 14px; color: var(--up); font-size: 12px; }
.codeok { width: 18px; height: 18px; display: grid; place-items: center; flex: none; background: var(--up); color: #07140c; font-size: 11px; font-weight: 700; box-shadow: 0 0 10px rgba(95, 211, 141, .6); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.regeln { list-style: none; margin: 0; padding: 10px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px 14px; font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-left: 2px solid var(--line2); background: rgba(5, 9, 17, .45); }
.regeln li { display: flex; align-items: center; gap: 10px; transition: color .2s; }
.regeln li i { width: 9px; height: 9px; flex: none; margin: 0 1px; border: 1px solid var(--mute); transform: rotate(45deg); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.regeln li.erfuellt { color: var(--up); }
.regeln li.erfuellt i { background: var(--up); border-color: var(--up); box-shadow: 0 0 8px rgba(95, 211, 141, .7); }

/* Wechsel der Schritte: der alte gleitet hinaus, der neue herein */
/* Passwort vergessen: beim Wechsel stehen alter und neuer Schritt auf einem Band nebeneinander (zugang.js bewegt es) */
.schritt-band { display: flex; flex: 1 1 auto; contain: inline-size; }
.schritt-band > * { flex: 0 0 100%; min-width: 0; }
.schritt-da .codeok { animation: codeok 480ms cubic-bezier(.34, 1.56, .64, 1) both; }
.schritt-weg { animation: schritt-weg 220ms ease-in forwards; }
.schritt-neu { animation: schritt-neu 380ms cubic-bezier(.2, .8, .2, 1); }
.schritt-neu .codeok { animation: codeok 480ms cubic-bezier(.34, 1.56, .64, 1) 200ms both; }
@keyframes schritt-weg { to { opacity: 0; transform: translateX(-24px); } }
@keyframes schritt-neu { from { opacity: 0; transform: translateX(24px); } }
@keyframes codeok { from { transform: scale(0) rotate(-90deg); } }

/* Hinweis oben in der Mitte, verschwindet nach 5 s von selbst (ohne JS) */
.zugang-toast {
  position: fixed; top: 56px; left: 50%; z-index: 60; width: min(460px, calc(100vw - 32px)); translate: -50% 0;
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; pointer-events: none;
  border: 1px solid #5a2a2a; border-left: 3px solid var(--down); border-radius: 3px;
  background: rgba(29, 15, 15, .95); color: #ffb3b1;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 20px rgba(239, 100, 97, .15);
  animation: toast-rein 350ms cubic-bezier(.2, .8, .2, 1), toast-raus 400ms ease 5s forwards;
}
.zugang-toast b { color: var(--down); font-weight: 700; }
.zugang-toast.ok { border-color: #24563a; border-left-color: var(--up); background: rgba(13, 32, 22, .95); color: #b6f0cd; box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 20px rgba(95, 211, 141, .15); }
.zugang-toast.ok b { color: var(--up); }
@keyframes toast-rein { from { opacity: 0; transform: translateY(-14px); } }
@keyframes toast-raus { to { opacity: 0; visibility: hidden; transform: translateY(-8px); } }

/* ------------------------------ Lobby ------------------------------ */
/* Leitstand im Stil des Zugangs. Oben Begrüßung und Bilanz, darunter links
   die Einsatz-Karte und die Partien, rechts Rangliste und Verlauf. Die
   Einsatz-Karte ist gebaut wie die Anmeldekarte: links das orange Blatt mit
   dem nächsten Schritt, rechts die dunkle Arbeitsfläche. Sie hat drei
   Zustände: Neue Partie (#neu, im Template), Warteraum und Partie läuft
   (lobby.js in #active). Orange heißt immer „dein nächster Zug“.
   Alle Maße hängen an --px (nach Fensterbreite, im Vollbild auch nach der
   Höhe, 0,8 bis 1,35 px). Ab 1101 × 600 px füllt die Lobby genau das
   Fenster, nur Listen scrollen in ihrem Feld; schmaler scrollt die Seite. */
.pagewrap { max-width: 1280px; margin: 0 auto; padding: 24px 20px 60px; }
.pagewrap.lobby {
  --px: clamp(1px, calc(.616px + .0288vw), 1.35px);
  /* Rand rundum gleich breit */
  max-width: none; padding: calc(20 * var(--px));
  font-size: calc(13 * var(--px));
}
.mute { color: var(--mute); }
/* Bausteine innerhalb der Lobby mitwachsen lassen */
.lobby .label { font-size: calc(10.5 * var(--px)); margin-bottom: 0; }
.lobby .label b { color: var(--text); font-weight: 600; margin-left: calc(4 * var(--px)); }
.lobby label, .lobby .small { font-size: calc(11.5 * var(--px)); }
.lobby .btn { font-size: calc(11 * var(--px)); padding: calc(9 * var(--px)) calc(14 * var(--px)); }
.lobby input, .lobby select { font-size: calc(13 * var(--px)); padding: calc(8 * var(--px)) calc(10 * var(--px)); line-height: 1.4; }
.lobby kbd { font-size: calc(10.5 * var(--px)); }
.lobby .msg { padding: calc(9 * var(--px)) calc(12 * var(--px)); margin: 0; }
.lobby .panel { padding: calc(18 * var(--px)) calc(20 * var(--px)); margin: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(10 * var(--px)) calc(20 * var(--px)); margin-bottom: calc(12 * var(--px)); }
.panel-head .mute { font-size: calc(10.5 * var(--px)); }
/* Kurz aufleuchten, wenn das Menü dorthin springt */
.lobby .blinkt { animation: blinkt 1s ease; }
@keyframes blinkt { 25% { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(240, 136, 62, .45), 0 0 26px rgba(240, 136, 62, .25); } }

/* Kopf: Begrüßung und Bilanz */
.lobby-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(18 * var(--px)) calc(40 * var(--px)); margin-bottom: calc(20 * var(--px)); }
.lobby-head > div:first-child { min-width: 0; }
.lobby-head h1 { font-size: calc(30 * var(--px)); font-weight: 500; line-height: 1.15; margin: calc(8 * var(--px)) 0 0; color: #fff; overflow-wrap: anywhere; }
.lobby-head h1 .accent { text-shadow: 0 0 18px rgba(240, 136, 62, .45); }
.live-line { display: flex; align-items: center; gap: calc(8 * var(--px)); margin: calc(8 * var(--px)) 0 0; color: var(--dim); font-size: calc(11.5 * var(--px)); }
.live-line::before { content: ""; flex: none; width: calc(6 * var(--px)); height: calc(6 * var(--px)); background: var(--up); transform: rotate(45deg); }
.tiles {
  display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - calc(14 * var(--px))) 0, 100% calc(14 * var(--px)), 100% 100%, calc(14 * var(--px)) 100%, 0 calc(100% - calc(14 * var(--px))));
}
.tiles > div { flex: 1 0 auto; min-width: calc(112 * var(--px)); padding: calc(12 * var(--px)) calc(18 * var(--px)); background: rgba(13, 16, 20, .94); display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.tiles .big small { font-size: calc(15 * var(--px)); color: var(--dim); font-weight: 600; }
.tile-l { font-size: calc(10 * var(--px)); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.lobby .big { font-size: calc(28 * var(--px)); font-weight: 600; line-height: 1.1; }
.big.up { text-shadow: 0 0 12px rgba(95, 211, 141, .4); }
.big.down { text-shadow: 0 0 12px rgba(239, 100, 97, .4); }
.big.cyan { color: var(--cyan); text-shadow: 0 0 12px rgba(110, 220, 232, .4); }
/* Quote als schräge Segmente (wie die Schritte der Registrierung) */
.segmente { display: flex; gap: calc(3 * var(--px)); padding-left: 2px; }
.segmente i { width: calc(10 * var(--px)); height: calc(4 * var(--px)); background: var(--line2); transform: skewX(-35deg); }
.segmente i.an { background: var(--up); box-shadow: 0 0 6px var(--up); }

.lobby-cols { display: grid; gap: calc(20 * var(--px)); align-items: start; grid-template-columns: minmax(0, 1fr); }
.lobby-main { container: haupt / inline-size; min-width: 0; display: flex; flex-direction: column; gap: calc(20 * var(--px)); }
.lobby-side { min-width: 0; display: flex; flex-direction: column; gap: calc(20 * var(--px)); }
#active:empty { display: none; }
@media (min-width: 1101px) {
  .lobby-cols { grid-template-columns: minmax(0, 1fr) calc(390 * var(--px)); gap: calc(24 * var(--px)); }
}

/* ---- Einsatz-Karte ---- */
.einsatz {
  --schraege: calc(56 * var(--px));
  position: relative; display: flex; min-height: calc(370 * var(--px));
  border: 1px solid var(--line2);
  background:
    linear-gradient(rgba(110, 220, 232, .028) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(110, 220, 232, .028) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(12, 15, 19, .94);
  box-shadow: 0 calc(24 * var(--px)) calc(70 * var(--px)) rgba(0, 0, 0, .5);
}
.einsatz::before, .einsatz::after { content: ""; position: absolute; z-index: 3; width: calc(18 * var(--px)); height: calc(18 * var(--px)); pointer-events: none; }
.einsatz::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.einsatz::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--violet); border-right: 1px solid var(--violet); }
.einsatz-blatt, .einsatz-schiene { --blatt-b: clamp(calc(270 * var(--px)), 36cqw, calc(390 * var(--px))); }
.einsatz-blatt {
  position: relative; z-index: 1; flex: 0 0 var(--blatt-b); box-sizing: border-box; min-width: 0;
  padding: calc(28 * var(--px)) calc(var(--schraege) + calc(18 * var(--px))) calc(24 * var(--px)) calc(30 * var(--px));
  display: flex; flex-direction: column; gap: calc(12 * var(--px)); color: #140b04;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--schraege)) 100%, 0 100%);
  background:
    repeating-linear-gradient(-60deg, rgba(20, 11, 4, .07) 0 1px, transparent 1px 10px),
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255, 200, 150, .35), transparent 70%),
    linear-gradient(160deg, #ff9d58 0%, var(--accent) 45%, #d26a2a 100%);
}
/* Leuchtschiene parallel zur Schräge */
.einsatz-schiene {
  position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--blatt-b) - var(--schraege) + calc(8 * var(--px))); width: calc(var(--schraege) + 4px);
  clip-path: polygon(calc(100% - 4px) 0, 100% 0, 4px 100%, 0 100%); pointer-events: none;
  background: linear-gradient(to bottom, rgba(240, 136, 62, .9), rgba(240, 136, 62, .2));
}
.einsatz-flaeche { flex: 1 1 0; min-width: 0; box-sizing: border-box; padding: calc(22 * var(--px)) calc(24 * var(--px)) calc(20 * var(--px)) calc(16 * var(--px)); display: flex; flex-direction: column; gap: calc(14 * var(--px)); }
.flaeche-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(10 * var(--px)) calc(16 * var(--px)); }
.flaeche-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--px)); }
.lobby .flaeche-werkzeug label { display: inline-flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(11 * var(--px)); }
.lobby .flaeche-werkzeug select { width: auto; margin: 0; min-height: calc(36 * var(--px)); padding: calc(4 * var(--px)) calc(8 * var(--px)); font-size: calc(11.5 * var(--px)); color: #c9b6ff; border-color: #3b2d63; }
.lobby .flaeche-werkzeug .btn { min-height: calc(36 * var(--px)); font-size: calc(10.5 * var(--px)); letter-spacing: .12em; }
.btn.leise { background: transparent; border-style: dashed; border-color: #3b2d63; color: #c9b6ff; }
.btn.leise:hover { border-color: var(--violet); color: #fff; box-shadow: 0 0 12px rgba(160, 124, 240, .2); }
.btn .plus { color: var(--violet); font-size: 1.3em; line-height: 0; }
.flaeche-hinweis { margin: 0; color: var(--dim); font-size: calc(11 * var(--px)); }
.flaeche-text { margin: 0; color: var(--dim); font-size: calc(12 * var(--px)); line-height: 1.6; max-width: 60ch; }
/* Neue Partie oder Warteraum erscheinen: das Blatt gleitet herein */
.einsatz.kommt .einsatz-blatt { animation: blatt-rein 520ms cubic-bezier(.2, .8, .2, 1); }
.einsatz.kommt .einsatz-flaeche { animation: flaeche-rein 520ms ease 120ms both; }
@keyframes blatt-rein { from { transform: translateX(calc(-40 * var(--px))); opacity: 0; } }
@keyframes flaeche-rein { from { opacity: 0; } }

/* Inhalt des Blatts: dunkle Schrift auf Orange */
.blatt-winkel { width: calc(20 * var(--px)); height: calc(20 * var(--px)); flex: none; border-top: 2px solid rgba(20, 11, 4, .55); border-left: 2px solid rgba(20, 11, 4, .55); }
.blatt-marke { margin: 0; display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(10.5 * var(--px)); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .75; }
.blatt-marke .puls { width: calc(8 * var(--px)); height: calc(8 * var(--px)); flex: none; background: #140b04; transform: rotate(45deg); animation: puls 1.8s ease-in-out infinite; }
.blatt-titel { margin: 0; font-size: calc(27 * var(--px)); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: #140b04; overflow-wrap: anywhere; }
.blatt-titel.gross { font-size: calc(34 * var(--px)); }
.blatt-text { margin: 0; max-width: 30ch; font-size: calc(12.5 * var(--px)); line-height: 1.55; opacity: .85; }
.blatt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--px)) calc(12 * var(--px)); }
.blatt-pill { padding: calc(2 * var(--px)) calc(9 * var(--px)); border: 1.5px solid #140b04; font-size: calc(10 * var(--px)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.blatt-rolle { font-size: calc(10.5 * var(--px)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.blatt-liste { list-style: none; margin: calc(2 * var(--px)) 0 0; padding: 0; display: grid; gap: calc(4 * var(--px)); font-size: calc(12.5 * var(--px)); }
.blatt-liste li { display: flex; align-items: center; gap: calc(10 * var(--px)); }
.blatt-liste li::before { content: ""; flex: none; width: calc(6 * var(--px)); height: calc(6 * var(--px)); background: #140b04; transform: rotate(45deg); }
.blatt-stand { display: flex; flex-direction: column; gap: calc(6 * var(--px)); margin-top: calc(4 * var(--px)); }
.blatt-werte { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)) calc(18 * var(--px)); font-size: calc(10.5 * var(--px)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.blatt-segmente { display: flex; flex-wrap: wrap; gap: calc(5 * var(--px)); padding-left: calc(3 * var(--px)); }
.blatt-segmente i { width: calc(24 * var(--px)); height: calc(6 * var(--px)); box-sizing: border-box; border: 1.5px solid #140b04; transform: skewX(-35deg); }
.blatt-segmente i.an { background: #140b04; }
.blatt-status { margin: 0; font-size: calc(12 * var(--px)); font-weight: 600; }
.blatt-fuss { margin-top: auto; display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.blatt-frage { margin: 0; font-size: calc(10.5 * var(--px)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.blatt-info { margin: 0; display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(10.5 * var(--px)); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.blatt-info::before { content: ""; flex: none; width: calc(7 * var(--px)); height: calc(7 * var(--px)); background: #140b04; transform: rotate(45deg); }
.blatt-link {
  align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer;
  color: #140b04; font: 700 calc(11 * var(--px))/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 3px;
}
.blatt-link:hover { color: #000; text-decoration-thickness: 2px; }
.blatt-link:disabled { opacity: .5; cursor: default; }
.lobby .btn.dunkel { max-width: none; min-height: calc(48 * var(--px)); padding: 0 calc(18 * var(--px)); font-size: calc(12 * var(--px)); letter-spacing: .16em; }
.btn.dunkel:disabled { opacity: .55; }
/* Bereit gemeldet: Rahmen statt Fläche, zum Zurücknehmen */
.btn.dunkel.an { background: transparent; color: #140b04; border: 1.5px solid #140b04; }
.btn.dunkel.an:hover { background: rgba(20, 11, 4, .1); color: #000; box-shadow: none; }

/* Schmal: Blatt oben mit schräger Unterkante, Fläche darunter */
@container haupt (max-width: 640px) {
  .einsatz { flex-direction: column; }
  .einsatz-blatt { flex-basis: auto; padding: calc(24 * var(--px)) calc(22 * var(--px)) calc(40 * var(--px)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(22 * var(--px))), 0 100%); }
  .einsatz-schiene { display: none; }
  .einsatz-flaeche { padding: calc(16 * var(--px)) calc(18 * var(--px)) calc(20 * var(--px)); }
}

/* ---- Neue Partie: Karte und Waffenruhe als Knöpfe (Radios darunter) ---- */
.create fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#create-fields { flex: 1; display: flex; flex-direction: column; gap: calc(16 * var(--px)); }
#create-fields input[name="name"] { margin-top: calc(6 * var(--px)); min-height: calc(44 * var(--px)); font-size: calc(14 * var(--px)); }
.chips-l { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: calc(11.5 * var(--px)); }
.chips-o { display: grid; gap: calc(8 * var(--px)); margin-top: calc(6 * var(--px)); }
.chips-o.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips-o.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chips p { margin: calc(6 * var(--px)) 0 0; font-size: calc(11 * var(--px)); }
.lobby .chip { position: relative; color: var(--dim); font-size: calc(12 * var(--px)); cursor: pointer; }
.lobby .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; pointer-events: none; }
.chip span {
  position: relative; min-height: calc(44 * var(--px)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: calc(4 * var(--px)) 2px;
  border: 1px solid var(--line2); background: var(--bg2); font-weight: 700; letter-spacing: .06em; text-align: center;
  clip-path: polygon(0 0, calc(100% - calc(9 * var(--px))) 0, 100% calc(9 * var(--px)), 100% 100%, 0 100%);
  transition: border-color .15s, background-color .15s, color .15s, transform .12s;
}
.c3 .chip span { min-height: calc(52 * var(--px)); font-size: calc(11.5 * var(--px)); letter-spacing: .12em; text-transform: uppercase; }
.chip small { font-size: calc(10 * var(--px)); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); }
.chip:hover span { border-color: var(--mute); color: var(--text); }
.chip:active span { transform: translateY(1px) scale(.98); }
.chip input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 2px; }
.chip input:checked + span { border-color: var(--accent); background: rgba(240, 136, 62, .08); color: #fff; box-shadow: inset 0 0 10px rgba(240, 136, 62, .1); }
/* Raute oben links markiert die Wahl */
.chip input:checked + span::before { content: ""; position: absolute; top: calc(7 * var(--px)); left: calc(8 * var(--px)); width: calc(6 * var(--px)); height: calc(6 * var(--px)); background: var(--accent); transform: rotate(45deg); }
.ruhe .chip input:checked + span { border-color: rgba(95, 211, 141, .5); background: rgba(95, 211, 141, .06); color: var(--up); text-shadow: 0 0 8px rgba(95, 211, 141, .7); box-shadow: inset 0 0 8px rgba(95, 211, 141, .1); }
.ruhe .chip input:checked + span::before { background: var(--up); }
#create-fields:disabled { opacity: .45; }
#create-fields:disabled .chip { cursor: default; }
.lobby .btn.tall { margin-top: auto; min-height: calc(48 * var(--px)); font-size: calc(12 * var(--px)); letter-spacing: .16em; }

/* ---- Warteraum: Plätze (4 je Reihe, schmal 2) ---- */
.slots { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(calc(108 * var(--px)), 1fr); gap: calc(10 * var(--px)); }
@container haupt (min-width: 641px) and (max-width: 760px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container haupt (max-width: 460px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: calc(5 * var(--px)); padding: calc(10 * var(--px)) calc(12 * var(--px)) calc(10 * var(--px)) calc(14 * var(--px));
  border: 1px solid var(--line2); background: rgba(7, 12, 22, .7);
  clip-path: polygon(0 0, calc(100% - calc(12 * var(--px))) 0, 100% calc(12 * var(--px)), 100% 100%, 0 100%);
}
/* Teamfarbe als schräger Balken oben links */
.slot::before { content: ""; position: absolute; top: 0; left: calc(8 * var(--px)); width: calc(34 * var(--px)); height: calc(4 * var(--px)); background: var(--mute); transform: skewX(-35deg); }
.slot.t1::before { background: var(--team1); box-shadow: 0 0 8px var(--team1); }
.slot.t2::before { background: var(--team2); box-shadow: 0 0 8px var(--team2); }
.slot.t3::before { background: var(--team3); box-shadow: 0 0 8px var(--team3); }
.slot.t4::before { background: var(--team4); box-shadow: 0 0 8px var(--team4); }
.slot.me { border-color: rgba(240, 136, 62, .6); background: rgba(240, 136, 62, .06); }
.slot.bot { border-color: #3b2d63; background: rgba(160, 124, 240, .05); }
.slot.free { align-items: center; justify-content: center; gap: calc(4 * var(--px)); border-style: dashed; background: rgba(5, 9, 17, .35); }
.slot.free::before { display: none; }
.slot.free span { color: var(--mute); font-size: calc(10 * var(--px)); letter-spacing: .14em; text-transform: uppercase; }
.slot.free b { color: var(--dim); font-size: calc(11 * var(--px)); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.slot-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: calc(18 * var(--px)); margin-top: calc(4 * var(--px)); font-size: calc(9.5 * var(--px)); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.slot-top .wait { color: var(--yellow); }
.slot-top .violet, .slot-ctl .violet { color: var(--violet); }
.slot-name { font-size: calc(14.5 * var(--px)); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.bot .slot-name { color: #c9b6ff; text-shadow: 0 0 8px rgba(160, 124, 240, .5); }
.slot-name .host { color: var(--accent); }
.slot-sub { font-size: calc(10.5 * var(--px)); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-ctl { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--px)); }
.lobby .slot-ctl select { width: auto; max-width: 100%; margin: 0; padding: calc(2 * var(--px)) calc(4 * var(--px)); font-size: calc(10 * var(--px)); cursor: pointer; }
.slot-ctl select.lvl { color: var(--violet); border-color: #3b2d63; }
.slot-ctl select.team { color: var(--dim); }
.slot-ctl .tag { font-size: calc(10 * var(--px)); color: var(--dim); }
.slot .x { margin-left: auto; width: calc(24 * var(--px)); height: calc(24 * var(--px)); display: grid; place-items: center; padding: 0; border: 1px solid #3b2d63; background: none; color: var(--violet); cursor: pointer; font: calc(12 * var(--px))/1 var(--mono); }
.slot .x:hover { border-color: var(--down); color: var(--down); }
select.team.t1, .tag.t1 { color: var(--team1); }
select.team.t2, .tag.t2 { color: var(--team2); }
select.team.t3, .tag.t3 { color: var(--team3); }
select.team.t4, .tag.t4 { color: var(--team4); }
.tag { font-size: calc(9.5 * var(--px)); font-weight: 600; letter-spacing: .06em; }

/* Partie läuft: Mitspieler auf der Fläche */
.laeuft-spieler { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); }
.laeuft-spieler span { padding: calc(4 * var(--px)) calc(10 * var(--px)); border: 1px solid var(--line2); font-size: calc(11.5 * var(--px)); color: var(--text); }
.laeuft-spieler span.ki { border-color: #3b2d63; color: #c9b6ff; }

/* ---- Partien: Filter und Karten (breit zwei nebeneinander) ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.tabs button {
  position: relative; min-height: calc(34 * var(--px)); padding: 0 calc(12 * var(--px)); border: 0; background: none; color: var(--dim); cursor: pointer;
  font: 600 calc(10.5 * var(--px))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.tabs button span { font-weight: 400; color: var(--dim); }
.tabs button:hover { color: var(--text); }
.tabs button:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
.tabs button[aria-pressed="true"] { color: #fff; }
.tabs button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: calc(10 * var(--px)); right: calc(10 * var(--px)); bottom: calc(3 * var(--px)); height: calc(3 * var(--px));
  background: var(--accent); transform: skewX(-35deg); box-shadow: 0 0 8px rgba(240, 136, 62, .6);
}
/* Liste scrollt in ihrem Feld; die Leiste hat festen Platz, damit nichts springt */
.matches {
  display: grid; gap: calc(10 * var(--px)); align-items: start; align-content: start;
  max-height: max(calc(420 * var(--px)), 55vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--mute) rgba(38, 46, 55, .35); padding-right: calc(4 * var(--px));
}
@container haupt (min-width: 880px) { .matches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.matches .empty { grid-column: 1 / -1; margin: 0; padding: calc(18 * var(--px)) 0; text-align: center; }
.match {
  min-width: 0; display: flex; flex-direction: column; gap: calc(8 * var(--px)); padding: calc(12 * var(--px)) calc(14 * var(--px));
  border: 1px solid var(--line2); background: rgba(7, 12, 22, .7);
  clip-path: polygon(0 0, calc(100% - calc(12 * var(--px))) 0, 100% calc(12 * var(--px)), 100% 100%, 0 100%);
}
.match.mine { border-color: rgba(240, 136, 62, .55); background: rgba(240, 136, 62, .04); }
.match.done { opacity: .7; }
.match-kopf { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--px)); min-height: calc(34 * var(--px)); }
.match-titel { display: flex; align-items: center; gap: calc(10 * var(--px)); min-width: 0; }
.match-titel b { font-size: calc(14.5 * var(--px)); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match .meta { font-size: calc(11 * var(--px)); color: var(--dim); }
.match-sitze { display: flex; align-items: center; gap: calc(10 * var(--px)); min-width: 0; }
.lobby .match .btn { flex: none; min-height: calc(34 * var(--px)); padding: 0 calc(14 * var(--px)); font-size: calc(10.5 * var(--px)); letter-spacing: .14em; }
.to-room, .match-info { flex: none; font-size: calc(10.5 * var(--px)); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.to-room { color: var(--accent); }
.to-room:hover { color: #fff; }
.match-info.ok { color: var(--up); }
/* Belegte Plätze als Rauten: Mensch, KI, frei (nur Lobby; .pips im Spiel ist die Spielerleiste) */
.match .pips { flex: none; display: flex; gap: calc(5 * var(--px)); padding-left: 2px; }
.match .pips i { width: calc(7 * var(--px)); height: calc(7 * var(--px)); box-sizing: border-box; border: 1px dashed var(--mute); transform: rotate(45deg); }
.match .pips i.h { border: 0; background: var(--text); }
.match .pips i.b { border: 0; background: var(--violet); box-shadow: 0 0 6px rgba(160, 124, 240, .7); }
.sitze { min-width: 0; font-size: calc(11 * var(--px)); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitze .ki { color: #c9b6ff; }
.sitze .bereit { color: var(--up); }
.sitze .host::before { content: "◆ "; color: var(--accent); }
.sitze .frei { color: var(--dim); }
/* Marken: schräg gestellte Status-Etiketten */
.marke {
  flex: none; display: inline-block; padding: 1px calc(10 * var(--px)); border: 1px solid currentColor; transform: skewX(-12deg);
  font-size: calc(9.5 * var(--px)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.marke.lauf { color: var(--accent); background: rgba(240, 136, 62, .06); }
.marke.ok { color: var(--up); }
.marke.sieg { color: var(--up); background: rgba(95, 211, 141, .08); }
.marke.niederlage { color: var(--down); background: rgba(239, 100, 97, .08); }
.marke.warn { color: var(--yellow); background: rgba(230, 195, 92, .06); }
.marke.ki { color: var(--violet); background: rgba(160, 124, 240, .08); }

/* ---- Rangliste ---- */
.ranks { display: flex; flex-direction: column; }
.rang {
  display: grid; grid-template-columns: calc(30 * var(--px)) minmax(0, 1fr) calc(86 * var(--px)) calc(56 * var(--px)); align-items: center; gap: calc(10 * var(--px));
  min-height: calc(32 * var(--px)); padding: 0 calc(8 * var(--px)); border-bottom: 1px solid rgba(28, 34, 41, .8); font-size: calc(12.5 * var(--px));
}
.rang:last-child { border-bottom: 0; }
.rang-nr { font-size: calc(12 * var(--px)); font-weight: 600; color: var(--dim); }
.rang.first .rang-nr { color: var(--accent); text-shadow: 0 0 8px rgba(240, 136, 62, .7); }
.rang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang.me { background: rgba(240, 136, 62, .07); }
.rang.me .rang-name { color: var(--accent); }
.rang .segmente { gap: 2px; }
.rang .segmente i { width: calc(6 * var(--px)); height: calc(4 * var(--px)); box-shadow: none; }
.rang-sn { text-align: right; font-size: calc(11.5 * var(--px)); white-space: nowrap; }

/* ---- Verlauf ---- */
.history { list-style: none; padding: 0 calc(4 * var(--px)) 0 0; margin: 0; display: flex; flex-direction: column; gap: calc(8 * var(--px)); max-height: max(calc(380 * var(--px)), 50vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mute) transparent; }
.history li {
  flex: none; display: grid; grid-template-columns: calc(100 * var(--px)) minmax(0, 1fr); gap: calc(12 * var(--px)); align-items: start; padding: calc(8 * var(--px)) calc(10 * var(--px));
  background: rgba(7, 12, 22, .55); clip-path: polygon(0 0, calc(100% - calc(10 * var(--px))) 0, 100% calc(10 * var(--px)), 100% 100%, 0 100%);
}
/* Ergebnis senkrecht mittig in der Kachel */
.history .marke { justify-self: start; align-self: center; }
.h-top { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--px)); }
.h-top b { min-width: 0; font-size: calc(12.5 * var(--px)); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-top span { flex: none; font-size: calc(10.5 * var(--px)); color: var(--dim); }
.h-sub { font-size: calc(10.5 * var(--px)); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-sub .ki { color: var(--violet); }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-track { background: rgba(38, 46, 55, .35); border-radius: 4px; }
.scroll::-webkit-scrollbar-thumb { background: var(--mute); border-radius: 4px; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ---- Steuerung: Fenster über der Lobby (Menü 04) ---- */
.steuerung {
  width: min(calc(600 * var(--px)), calc(100vw - 32px)); max-height: calc(100vh - 64px); box-sizing: border-box; padding: calc(22 * var(--px)) calc(24 * var(--px));
  color: var(--text); background: rgba(12, 15, 19, .98); border: 1px solid var(--line2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.steuerung[open] { animation: steuerung-rein 260ms cubic-bezier(.2, .8, .2, 1); }
.steuerung::backdrop { background: rgba(4, 6, 12, .6); backdrop-filter: blur(2px); }
@keyframes steuerung-rein { from { opacity: 0; transform: translateY(12px); } }
.steuerung .panel-head { margin-bottom: calc(16 * var(--px)); }
.keys { list-style: none; padding: 0; margin: 0; display: grid; gap: calc(10 * var(--px)); color: var(--dim); line-height: 1.7; font-size: calc(12 * var(--px)); }

/* Fenster füllen, ohne dass die Seite scrollt: Kopf oben, die Spalten
   teilen sich die restliche Höhe; nur Partien, Rangliste und Verlauf
   scrollen in ihrem Feld. --px richtet sich hier auch nach der Höhe. */
@media (min-width: 1101px) and (min-height: 600px) {
  body.lobby-page { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body.lobby-page > .topbar { flex: none; }
  .pagewrap.lobby {
    --px: clamp(.8px, min(calc(.616px + .0288vw), calc(.3px + .0778vh)), 1.35px);
    flex: 1; min-height: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  }
  .lobby-head { flex: none; flex-wrap: nowrap; margin-bottom: calc(18 * var(--px)); }
  .lobby-head > div:first-child { flex: 1 1 auto; }
  .lobby-head h1, .live-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tiles { flex: none; flex-wrap: nowrap; }
  .lobby-cols { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .lobby-main, .lobby-side { min-height: 0; }
  .einsatz, #active { flex: none; }
  .lobby-cols .fill { flex: 1 1 0; min-height: calc(90 * var(--px)); display: flex; flex-direction: column; }
  .lobby-cols .shrink { flex: 0 1 auto; min-height: calc(90 * var(--px)); display: flex; flex-direction: column; }
  .fill > .scroll, .shrink > .scroll {
    flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--mute) rgba(38, 46, 55, .35);
  }
}

/* ------------------------------ Spiel ------------------------------ */
/* HUD im Stil der Lobby: oben die Leiste (Laufzeit, Werte als Kacheln,
   Statistik und Menü), unten das Dock mit Karte, Auswahl und Befehlen.
   Die Höhe des Docks ist einstellbar: game.js setzt --dock, alles darüber
   (Untätig-Knopf, Bauplatz-Hinweis, Meldungen, Bildecke) richtet sich danach.
   --px = 1px, damit Lobby-Bausteine (Reiter, Tasten) auch hier passen. */
body.game { --top: 48px; --dock: 210px; --px: 1px; overflow: hidden; user-select: none; -webkit-user-select: none; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; cursor: default; }
/* Scanlines nur auf Wunsch (Menü › Anzeige), sonst bleibt nur die Vignette */
body.game.mit-scan .scan {
  background:
    repeating-linear-gradient(0deg, rgba(150, 220, 235, .022) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 75% at 50% 50%, transparent 58%, rgba(3, 5, 8, .45) 100%);
}
.corners i { position: fixed; width: 22px; height: 22px; z-index: 25; pointer-events: none; filter: drop-shadow(0 0 4px rgba(240, 136, 62, .5)); }
.corners i:nth-child(1) { top: calc(var(--top) + 8px); left: 8px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.corners i:nth-child(2) { bottom: calc(var(--dock) + 8px); right: 8px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

/* Kopfzeile: links die Laufzeit, Mitte die Werte, rechts Statistik und Menü */
.g-top {
  position: fixed; top: 0; left: 0; right: 0; height: var(--top); z-index: 35;
  display: flex; align-items: center; gap: 16px; padding: 0 16px; box-sizing: border-box;
  background: rgba(10, 12, 15, .9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.g-left, .g-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
.g-right { justify-content: flex-end; gap: 8px; }
.g-time { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); }
.g-time b { font-size: 16px; font-weight: 500; color: #fff; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.g-watch { color: var(--cyan); border-color: #1d4a5a; }

/* Werte als Kacheln wie die Bilanz der Lobby; klickbare öffnen ein Feld */
.g-tiles { flex: none; display: flex; gap: 1px; height: 38px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; }
.g-wrap { position: relative; display: flex; gap: 1px; }
.tile {
  position: relative; display: flex; align-items: center; gap: 10px; height: 38px; box-sizing: border-box;
  padding: 0 12px 0 14px; margin: 0; border: 0; background: rgba(13, 16, 20, .96); color: var(--text); font: inherit; text-align: left;
}
button.tile { cursor: pointer; }
button.tile:hover { background: #141a20; }
button.tile[aria-expanded="true"] { background: rgba(240, 136, 62, .12); box-shadow: inset 0 0 0 1px rgba(240, 136, 62, .7); }
button.tile:focus-visible, .g-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.tile.first { border-radius: 3px 0 0 3px; }
.tile.last, .tile.peace { border-radius: 0 3px 3px 0; }
.tv { display: flex; flex-direction: column; line-height: 1.1; min-width: 3.4em; }
.tv.mid { align-items: center; min-width: 0; }
.tv b { font-size: 16px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.tv b em { font-style: normal; color: var(--dim); font-weight: 500; }
.tv small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ic { flex: none; display: inline-block; }
.ic.k { width: 9px; height: 9px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 10px var(--cyan); }
.ic.e { width: 10px; height: 10px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.ic.p { width: 8px; height: 8px; border: 1.5px solid var(--accent); border-radius: 2px; box-shadow: 0 0 8px rgba(240, 136, 62, .6); }
.chev { flex: none; fill: none; stroke: var(--mute); stroke-width: 1.3; }
.tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line2); }
.tbar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
#t-pop.full b, #t-pop.full em { color: var(--down); }
#t-pop.full .tbar i { background: var(--down); box-shadow: 0 0 6px var(--down); }
.age-n { color: var(--cyan); font-weight: 700; text-shadow: 0 0 10px rgba(110, 220, 232, .7); }
.age-n[data-age="2"] { color: var(--violet); text-shadow: 0 0 10px rgba(160, 124, 240, .8); }
.age-n[data-age="3"] { color: #ff6fb1; text-shadow: 0 0 10px rgba(255, 111, 177, .85); }
.tile.peace { color: var(--up); background: rgba(15, 30, 22, .96); }
.tile.peace b { color: var(--up); text-shadow: 0 0 8px rgba(95, 211, 141, .7); }
.tile.peace small { color: #6f9c80; }
.tile.peace .tbar { background: #1d3426; }
.tile.peace .tbar i { background: var(--up); box-shadow: 0 0 6px var(--up); }
.tile.peace.soon b { color: var(--yellow); text-shadow: 0 0 8px rgba(230, 195, 92, .7); }

/* Knöpfe rechts: Statistik (mit Farbpunkten der Spieler) und Menü */
.g-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 3px; background: rgba(13, 16, 20, .9); color: var(--text);
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.g-btn > svg:first-child { color: var(--accent); }
.g-btn:hover { border-color: var(--mute); }
.g-btn[aria-expanded="true"] { border-color: var(--accent); background: rgba(240, 136, 62, .1); }
.g-btn .muted { color: var(--down); }
.g-btn .dot { margin: 0; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 6px; height: 6px; border-radius: 1px; border: 1px solid; box-sizing: border-box; }
.pips i.off { opacity: .45; }

/* Aufklappfelder unter Kacheln und Knöpfen (mittig, am Rand bündig) */
.pop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40;
  width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 14px; display: flex; flex-direction: column; gap: 12px;
  background: rgba(15, 19, 23, .97); border: 1px solid var(--line2); border-radius: 4px; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  font-size: 11.5px; letter-spacing: normal; text-transform: none; color: var(--text); cursor: default;
}
.pop.right { left: auto; right: 0; transform: none; width: 380px; }
.pop.menu { width: 330px; }
#p-age { width: 390px; }
.pop::before, .pop::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.pop::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.pop::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.pop .label { margin: 0; font-size: 10px; }
.pop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pop-head .big { font-size: 20px; font-weight: 600; line-height: 1; color: #fff; }
.pop-head .big small { font-size: 13px; color: var(--dim); }
.pop .tabs button { min-height: 26px; font-size: 10px; }
.pbar { display: block; height: 3px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.pbar.full i { background: var(--down); box-shadow: 0 0 6px var(--down); }
.pbar.tech i { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
.ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.ptiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ptiles > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: rgba(13, 16, 20, .96); min-width: 0; }
.ptiles small { display: flex; align-items: center; gap: 7px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ptiles b { font-size: 20px; font-weight: 600; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.ptiles b small { display: inline; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ptiles b.warn { color: var(--yellow); }
.ptiles b.idle { color: var(--teal); text-shadow: 0 0 10px rgba(63, 214, 192, .45); }
.ptiles span { font-size: 10.5px; color: var(--dim); }
.ptiles .ic.k, .ptiles .ic.e { width: 7px; height: 7px; box-shadow: none; }
.prows { display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
.prows > span { display: flex; justify-content: space-between; gap: 12px; }
.prows > span > :first-child { color: var(--dim); flex: none; }
.prows > span > :last-child { text-align: right; }
.prows .mute { color: var(--mute); }
.pfoot { padding-top: 10px; border-top: 1px solid var(--line); }
.pnote { font-size: 10.5px; color: var(--mute); }
.pnote.warn { color: var(--yellow); }

/* Bevölkerung: Einheiten je Art, Klick wählt alle dieser Art */
.ulist { display: flex; flex-direction: column; gap: 4px; }
.urow {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 34px; box-sizing: border-box;
  padding: 0 10px 0 6px; margin: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--bg2);
  font: inherit; color: inherit; text-align: left; cursor: default;
}
.urow canvas { width: 24px; height: 24px; }
.urow > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.urow .n { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.urow .s { font-size: 9.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow .c { font-size: 17px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.urow canvas { opacity: .5; }
.urow.has { border-color: rgba(240, 136, 62, .45); background: rgba(240, 136, 62, .05); cursor: pointer; }
.urow.has:hover { border-color: var(--accent); }
.urow.has .n, .urow.has .c { color: #fff; }
.urow.has canvas { opacity: 1; }
.urow.lock { border-style: dashed; background: rgba(5, 9, 17, .35); }
.urow.lock .n { color: var(--mute); }
.urow.lock .s { color: #8a6fd0; }
.urow.lock canvas { opacity: .25; }

/* Zeitalter: erreicht, jetzt, als Nächstes, später */
.agerow { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); }
.agerow > b { font-size: 18px; text-align: center; align-self: center; }
.agerow > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agerow .ah { display: flex; align-items: center; gap: 4px; font-size: 10.5px; }
.agerow .ah .t { margin-left: auto; color: var(--dim); }
.agerow .tag { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.agerow .what { font-size: 11px; color: var(--dim); }
.agerow.now { border-color: rgba(240, 136, 62, .5); background: rgba(240, 136, 62, .05); }
.agerow.done { opacity: .55; }
.agerow.later { border-style: dashed; background: rgba(5, 9, 17, .4); }
.agerow.later .age-n { color: var(--mute); text-shadow: none; }
.agerow.later .what { color: var(--mute); }

/* Kosten mit Rohstoff-Zeichen; fehlender Rohstoff rot */
.cost { display: inline-flex; align-items: center; gap: 4px; }
.cost i { width: 5px; height: 5px; flex: none; }
.cost i.k { background: var(--cyan); transform: rotate(45deg); }
.cost i.e { border-radius: 50%; background: var(--violet); }
.cost .e-n { margin-left: 3px; }
.cost .no { color: var(--down); }
.cost .no + i { background: var(--down); }

/* Statistik: Spieler wie die Plätze im Warteraum */
.plist { display: flex; flex-direction: column; gap: 5px; }
.plist .pnote { margin-bottom: 1px; }
.pl {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--line2); border-radius: 4px; background: rgba(7, 12, 22, .7); font-size: 12px;
}
.pl.me { border-color: rgba(240, 136, 62, .55); background: rgba(240, 136, 62, .06); color: #fff; }
.pl.t1 { box-shadow: inset 3px 0 0 var(--team1); }
.pl.t2 { box-shadow: inset 3px 0 0 var(--team2); }
.pl.t3 { box-shadow: inset 3px 0 0 var(--team3); }
.pl.t4 { box-shadow: inset 3px 0 0 var(--team4); }
.pl .pd { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.pl .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .you { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pl .pill { font-size: 9.5px; padding: 0 6px; }
.pl.out { opacity: .5; }
.pl.out .nm { text-decoration: line-through; }
.pl.off { opacity: .7; }

/* Menü: Ton, Anzeige, Tastenhilfe, Lobby, Aufgeben */
.msec { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.msec.acts { gap: 8px; }
.sub-l { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
.slider { display: grid; grid-template-columns: 82px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--dim); }
.slider input[type=range] { width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }
.slider b { color: var(--text); text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.menu.mute-on .slider { opacity: .4; }
.net-line { display: inline-flex; align-items: center; font-size: 10.5px; color: var(--mute); }
.switch {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 28px; padding: 0; margin: 0; border: 0; background: none;
  color: var(--text); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
}
.switch > span { flex: 1; }
.switch > i { position: relative; flex: none; width: 30px; height: 16px; box-sizing: border-box; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg2); }
.switch > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--mute); transition: transform .15s; }
.switch[aria-checked="true"] > i { border-color: var(--accent); background: rgba(240, 136, 62, .18); }
.switch[aria-checked="true"] > i::after { transform: translateX(14px); background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.switch:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.mrow {
  display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; box-sizing: border-box; margin: 0;
  border: 1px solid var(--line2); border-radius: 3px; background: var(--bg2); color: var(--text); cursor: pointer; text-decoration: none;
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.mrow:hover { border-color: var(--accent); color: #fff; }
.mrow .mute { font-weight: 400; letter-spacing: 0; text-transform: none; }
.mrow[aria-expanded="true"] > span { transform: rotate(180deg); }
.mrow.danger { justify-content: center; border-color: #5a2a2a; color: var(--down); }
.mrow.danger:hover { background: #2a1414; border-color: var(--down); }
.menu .keys { gap: 6px; padding: 2px; font-size: 10.5px; max-height: 30vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mute) transparent; }
.gg-ask { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--down); border-radius: 3px; background: rgba(40, 14, 14, .94); color: #ffd0cf; font-size: 11.5px; box-shadow: 0 0 14px rgba(239, 100, 97, .2); }
.gg-ask > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.btn.danger.solid { background: var(--down); border-color: var(--down); color: #1d0f0f; }
.btn.danger.solid:hover { background: #ff8a86; color: #1d0f0f; }
.gg-done { height: 32px; display: grid; place-items: center; border: 1px dashed #5a2a2a; border-radius: 3px; color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* Über dem Dock: untätige Drohnen und der Hinweis beim Bauen/Angreifen */
.g-idle {
  position: fixed; z-index: 28; left: 16px; bottom: calc(var(--dock) + 10px);
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 6px 0 4px; box-sizing: border-box; margin: 0;
  border: 1px solid var(--line2); border-radius: 4px; background: rgba(13, 16, 20, .9); color: var(--dim); font: inherit; cursor: pointer;
}
.g-idle canvas { width: 20px; height: 20px; opacity: .5; }
.g-idle b { font-size: 13px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.g-idle span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.g-idle.has { border-color: rgba(63, 214, 192, .5); background: rgba(13, 30, 30, .92); box-shadow: 0 0 10px rgba(63, 214, 192, .15); }
.g-idle.has canvas { opacity: 1; }
.g-idle.has b { color: var(--teal); text-shadow: 0 0 8px rgba(63, 214, 192, .5); }
.g-idle:hover { border-color: var(--accent); }
.g-place {
  position: fixed; z-index: 28; left: 50%; bottom: calc(var(--dock) + 22px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 14px; white-space: nowrap; font-size: 11px;
  background: rgba(15, 19, 23, .94); border: 1px solid rgba(240, 136, 62, .6); border-radius: 4px; box-shadow: 0 0 16px rgba(240, 136, 62, .2);
}
.g-place .label { margin: 0; font-size: 10px; }
.g-place .label b { color: #fff; }
.g-place.attack { border-color: rgba(239, 100, 97, .6); box-shadow: 0 0 16px rgba(239, 100, 97, .2); }

/* Dock: Karte, Auswahl und Befehle; oben ein Griff für die Höhe */
.g-dock {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--dock); box-sizing: border-box;
  padding: 12px 16px 14px; display: flex; gap: 12px;
  background: linear-gradient(to top, rgba(10, 12, 15, .97), rgba(10, 12, 15, .9)); border-top: 1px solid var(--line);
}
.g-dock::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(to right, transparent, rgba(240, 136, 62, .55), rgba(240, 136, 62, .2), transparent); }
.g-dock.drag::before { background: linear-gradient(to right, transparent, rgba(240, 136, 62, .95), rgba(240, 136, 62, .35), transparent); }
.g-grip {
  position: absolute; z-index: 2; left: 0; right: 0; top: -4px; height: 8px; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: ns-resize; touch-action: none;
}
.g-grip > span {
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 64px; height: 12px; box-sizing: border-box; background: rgba(10, 12, 15, .95); border: 1px solid var(--line2); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.g-grip > span i { display: block; width: 22px; height: 1px; background: var(--mute); }
.g-grip:focus-visible { outline: none; }
.g-grip:hover > span, .g-grip:focus-visible > span, .g-dock.drag .g-grip > span { border-color: var(--accent); box-shadow: 0 0 10px rgba(240, 136, 62, .35); }
.g-grip:hover > span i, .g-grip:focus-visible > span i, .g-dock.drag .g-grip > span i { background: var(--accent); }
.g-grip em {
  position: absolute; left: calc(50% + 42px); top: -12px; padding: 0 6px; font-style: normal; font-size: 10px; letter-spacing: .06em; color: var(--accent);
  white-space: nowrap; background: rgba(10, 12, 15, .92); border: 1px solid var(--line2); border-radius: 3px;
}
.dpanel {
  position: relative; box-sizing: border-box; min-width: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px;
  background: rgba(15, 19, 23, .92); border: 1px solid var(--line); border-radius: 4px;
}
.dhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 18px; }
.dpanel .label { margin: 0; font-size: 10px; white-space: nowrap; }
.label .suffix { color: var(--mute); font-weight: 400; }
.dhint { font-size: 10.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dhead .btn.small { padding: 4px 9px; }
.g-map { flex: none; width: calc(var(--dock) - 52px); padding: 10px; gap: 6px; }
.g-map .mute { font-size: 10px; letter-spacing: .08em; }
.mini-box { width: calc(var(--dock) - 74px); height: calc(var(--dock) - 74px); box-sizing: border-box; border: 1px solid var(--line2); border-radius: 3px; background: #050811; overflow: hidden; }
.mini-box canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.g-selp, .g-cmdp { flex: 1 1 0; }

/* Auswahl: mehrere = Übersicht und Kacheln, eine = Name, Leben, Schlange */
.g-sel { flex: 1; min-height: 0; display: flex; gap: 14px; overflow: hidden; }
.sel-empty { align-self: center; font-size: 11.5px; color: var(--dim); }
.sel-sum { flex: none; width: 128px; display: flex; flex-direction: column; gap: 8px; padding-right: 14px; border-right: 1px solid var(--line); }
.sel-sum .big { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sel-sum .big b { font-size: 30px; font-weight: 600; line-height: 1; color: #fff; }
.sel-sum .big span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-sum .st { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.sel-sum .st span { display: flex; justify-content: space-between; gap: 6px; }
.sel-sum .st .idle { color: var(--teal); }
.sel-sum .hp { margin-top: auto; font-size: 10.5px; color: var(--dim); }
.hp-ok { color: var(--up); }
.hp-mid { color: var(--yellow); }
.hp-low { color: var(--down); }
.sel-cards {
  flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); grid-auto-rows: 64px; gap: 6px; align-content: start;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mute) transparent;
}
.ucard {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  padding: 4px 4px 8px; margin: 0; background: rgba(7, 12, 22, .7); border: 1px solid var(--line2); border-radius: 4px; font: inherit; cursor: pointer;
}
.ucard:hover { border-color: var(--accent); }
.ucard canvas { width: 32px; height: 32px; }
.ucard span { max-width: 100%; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; }
.ucard.idle { border-color: rgba(63, 214, 192, .35); }
.ucard.idle span { color: var(--teal); }
.ucard .hpb { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px; background: var(--line); }
.ucard .hpb i { display: block; height: 100%; width: 100%; background: var(--up); }
/* Eine Auswahl: links Name und Leben, rechts daneben (schmal: darunter) Forschung und Schlange */
.sel-one {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px 18px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mute) transparent;
}
.sel-top { flex: 1 1 300px; min-width: 0; display: flex; align-items: flex-start; gap: 16px; }
.gbox { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: #050811; border: 1px solid var(--line2); border-radius: 4px; }
.gbox canvas { width: 60px; height: 60px; }
.sel-top .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sel-top .nm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sel-top .nm b { font-size: 22px; font-weight: 500; line-height: 1.1; color: #fff; }
.sel-top .who { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.sel-top .meta { font-size: 11.5px; color: var(--dim); }
.sel-top .note { font-size: 11px; color: var(--dim); }
.pill.idle { color: var(--teal); border-color: rgba(63, 214, 192, .45); }
.pill.fight { color: var(--down); border-color: #5a2a2a; }
.pill.busy { color: var(--accent2); border-color: rgba(240, 136, 62, .45); }
.hpbar { width: min(320px, 100%); height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.hpbar i { display: block; height: 100%; width: 0; background: var(--up); box-shadow: 0 0 6px var(--up); }
.qrow { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid var(--line); }
.qrow .ql { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.qrow .ql small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.qrow .ql span { font-size: 11.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qslots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 300px; }
.qslot {
  position: relative; height: 40px; display: grid; place-items: center; margin: 0; padding: 0; overflow: hidden;
  background: rgba(7, 12, 22, .7); border: 1px solid var(--line2); border-radius: 4px; color: var(--violet); font: inherit; cursor: pointer;
}
.qslot canvas { width: 28px; height: 28px; }
.qslot.first { border-color: rgba(240, 136, 62, .55); background: rgba(240, 136, 62, .06); }
.qslot:hover { border-color: var(--down); }
.qslot .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.qslot.tech { border-color: #3a2f5c; font-size: 14px; }
.qslot.tech .prog { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
.qslot.free { border-style: dashed; background: rgba(5, 9, 17, .35); cursor: default; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.qslot.free:hover { border-color: var(--line2); }

/* Befehle: vier Spalten, drei Reihen teilen sich die Höhe des Docks */
.g-cmd { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cmd {
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 0; padding: 0 8px; margin: 0;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 3px; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cmd .cg { flex: none; width: 26px; height: 26px; color: var(--dim); }
.cmd .cg.deliver { color: var(--teal); }
.cmd .cg.halt, .cmd .cg.attack { color: var(--down); }
.cmd .ct { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cmd .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd .l2 { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 10px; color: var(--dim); white-space: nowrap; }
.cmd kbd { margin-left: auto; font-size: 9.5px; line-height: 13px; background: var(--bg); }
.cmd:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 12px rgba(240, 136, 62, .25), inset 0 0 10px rgba(240, 136, 62, .08); }
.cmd:hover:not(:disabled) .lbl { text-shadow: 0 0 8px rgba(240, 136, 62, .6); }
.cmd.on { border-color: var(--accent); background: rgba(240, 136, 62, .1); box-shadow: 0 0 12px rgba(240, 136, 62, .28), inset 0 0 10px rgba(240, 136, 62, .08); }
.cmd.on kbd { border-color: var(--accent); }
.cmd:disabled { cursor: default; opacity: .6; }
.cmd.lock { opacity: 1; border-style: dashed; background: rgba(5, 9, 17, .4); }
.cmd.lock .cg { opacity: .3; }
.cmd.lock .lbl { color: var(--mute); }
.cmd.lock .l2 { color: #8a6fd0; }
.cmd.lock kbd { color: var(--mute); border-color: var(--line); }
.cmd.tech { border-color: #3a2f5c; }
.cmd.tech .cg { color: var(--violet); }
.cmd.tech kbd { color: var(--violet); border-color: #3a2f5c; }
.cmd.tech:hover:not(:disabled) { border-color: var(--violet); box-shadow: 0 0 12px rgba(160, 124, 240, .3), inset 0 0 10px rgba(160, 124, 240, .1); }
.cmd.tech:hover:not(:disabled) .lbl { text-shadow: 0 0 8px rgba(160, 124, 240, .6); }

/* Meldungen über dem Dock */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--dock) + 64px); transform: translateX(-50%); z-index: 45; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 3px; font-size: 12.5px;
  border: 1px solid #5a2a2a; background: rgba(29, 15, 15, .92); color: #ff9a97; opacity: 0; transition: opacity .2s;
}
.toast::before { content: "Fehler"; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--down); }
.toast.show { opacity: 1; }
.toast.alarm { border-color: var(--down); background: rgba(40, 14, 14, .94); color: #ffd0cf; text-shadow: 0 0 8px rgba(239, 100, 97, .6); box-shadow: 0 0 16px rgba(239, 100, 97, .3), inset 0 0 10px rgba(239, 100, 97, .1); }
.toast.alarm::before { content: "Alarm"; }
.toast.info { border-color: var(--line2); background: rgba(15, 19, 23, .94); color: var(--text); }
.toast.info::before { content: "Info"; color: var(--accent); }

/* Ende der Partie */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 6, 12, .6); }
.end { width: min(440px, 92vw); text-align: center; padding: 24px; }
.end.win { border-color: rgba(240, 136, 62, .55); box-shadow: inset 0 0 30px rgba(240, 136, 62, .07), 0 0 24px rgba(240, 136, 62, .12); }
.end.lose { border-color: #5a2a2a; box-shadow: inset 0 0 30px rgba(239, 100, 97, .06); }
.end h1 { font-size: 38px; font-weight: 500; letter-spacing: .2em; margin: 6px 0; text-transform: uppercase; }
.end h1.win { color: var(--accent); text-shadow: 0 0 22px rgba(240, 136, 62, .6); }
.end h1.lose { color: var(--down); text-shadow: 0 0 22px rgba(239, 100, 97, .6); }
.end-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; margin: 14px auto 0; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.end-tiles div { display: flex; flex-direction: column; padding: 8px 12px; background: rgba(13, 16, 20, .95); text-align: left; }
.end-tiles b { font-size: 20px; font-weight: 600; color: #fff; }
.end-tiles b.age-n { font-weight: 700; }
.end-tiles small { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.end .row-end { justify-content: center; }

/* ------------------------------ Testszene ------------------------------ */
/* /testszene: Bildfläche wie im Spiel, rechts eine Leiste im Stil des
   Spielmenüs, oben links ein Schild wie die Marke (Bisher oder Neu). */
.szene #view { cursor: crosshair; }
.sz-chip {
  position: fixed; top: 14px; left: 14px; z-index: 30; margin: 0; padding: 9px 36px 9px 16px; pointer-events: none;
  color: #140b04; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background:
    repeating-linear-gradient(-60deg, rgba(20, 11, 4, .08) 0 1px, transparent 1px 10px),
    linear-gradient(160deg, #ff9d58, var(--accent) 55%, #d26a2a);
}
.sz-chip.alt {
  color: var(--text);
  background:
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 10px),
    linear-gradient(160deg, #2a323b, #161b21);
}
.sz-panel {
  position: fixed; top: 12px; right: 12px; z-index: 40; width: 320px; box-sizing: border-box; padding: 14px 10px 14px 14px;
  background: rgba(15, 19, 23, .94); border: 1px solid var(--line2); border-radius: 4px; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  font-size: 11.5px;
}
.sz-panel::before, .sz-panel::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.sz-panel::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.sz-panel::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.sz-inhalt {
  display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 54px); overflow-y: auto; padding-right: 4px;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--mute) transparent;
}
.sz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sz-marke { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.sz-marke .marke-zeichen { width: 14px; height: 14px; flex: none; color: var(--accent); }
.sz-zu { width: 30px; height: 30px; }
.sz-zu svg { width: 13px; height: 13px; }
.sz-sub { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.5; }
.sz-modus { align-items: center; border-bottom: 1px solid var(--line); }
.sz-modus button { min-height: 32px; font-size: 11px; }
.sz-modus kbd { margin-left: auto; }
.sz-wahl button { min-height: 26px; padding: 0 9px; font-size: 10px; }
.sz-panel .switch { height: 26px; font-size: 11px; }
.sz-panel .mrow kbd { margin-left: 8px; }
.sz-paar { flex-direction: row; }
.sz-paar .mrow { flex: 1; justify-content: center; }
.sz-panel.alt .sz-neu { opacity: .35; pointer-events: none; }
.sz-hinweis { margin: 0; color: var(--mute); font-size: 10.5px; line-height: 1.5; }
.sz-hinweis.an { color: var(--up); }
.sz-panel .slider { grid-template-columns: 72px minmax(0, 1fr) 28px; font-size: 11px; }
.sz-probe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
.sz-probe select { width: 100%; min-width: 0; margin: 0; padding: 4px 6px; font-size: 11px; }
.sz-probe .mrow { justify-content: center; padding: 0 10px; }
.sz-info { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.sz-keys { margin: 0; color: var(--mute); font-size: 10px; line-height: 1.8; }
.sz-auf { position: fixed; top: 12px; right: 12px; z-index: 40; display: flex; align-items: center; gap: 9px; }
.sz-auf .marke-zeichen { width: 13px; height: 13px; flex: none; }
.sz-auf[hidden], .sz-panel[hidden] { display: none; }

/* Schmal: erst Zeichen in den Befehlen und Hinweise weg, dann Beschriftungen */
@media (max-width: 1180px) {
  .cmd .cg, .dhint { display: none; }
  .sel-sum { width: 104px; }
}
@media (max-width: 920px) {
  .g-btn .lbl, .tv small { display: none; }
  .tile { padding: 0 9px; gap: 7px; }
  .g-top { gap: 10px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}