/* =====================================================================
   Dateidirekt - Stilblatt  "Laborgeraet"
   ---------------------------------------------------------------------
   Vintage-technisches Bild: dunkle Frontplatte mit Bernsteinanzeige,
   eingravierte Beschriftungen in Monospace, Leuchtdioden, und ein
   Fortschrittsbalken als Segmentanzeige.

   Alles mit CSS gebaut - keine Bilder, keine Inline-Stile. Die
   Inhaltsrichtlinie in .htaccess verbietet Letztere, darum stehen hier
   auch Kleinigkeiten, die man sonst als style-Attribut schreiben wuerde.
   ===================================================================== */

:root {
  --korpus:   #1c1916;
  --platte:   #262220;
  --platte2:  #201d1a;
  --kante:    #3b352f;
  --kante2:   #4b443b;

  --bernstein:  #e8a33d;
  --bernstein2: #ffc777;
  --phosphor:   #7fd98a;
  --rotlicht:   #e0665a;

  --text:  #d6cec1;
  --matt:  #9b9185;
  --leise: #6f665c;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ------------------------------------------------- Spielkarten
     Alle Groessen auf der Karte an einer Stelle. cqw heisst Prozent
     der KARTENBREITE - die Karte ist dafuer ein eigener Container.
     Wer etwas groesser oder kleiner haben will, dreht hier und
     nirgends sonst. Richtwerte gelten bei 190 px Kartenbreite.

     Zu den AUGEN: Auf einer echten Spielkarte fuellt ein Auge seine
     Reihe fast aus - bei der 9 und der 10 beruehren sich die Zeichen
     beinahe. Die Mitte der Karte ist rund 180 px hoch und hat SIEBEN
     Reihen, macht 26 px je Reihe. Ein Zeichen ist etwa 70 Prozent
     seiner Schriftgroesse hoch - 18cqw (34 px) fuellt die Reihe also
     genau richtig. Deutlich weniger wirkt verloren, deutlich mehr
     ragt in die Nachbarreihe. */
  --karte-breite:   190px;   /* Hoechstbreite einer Karte */
  --k-auge:         18cqw;   /* Augen der Zahlenkarten   ~34 px */
  --k-ecke-wert:    13cqw;   /* Eckzeichen, Wert         ~25 px */
  --k-ecke-farbe:   11cqw;   /* Eckzeichen, Farbe        ~21 px */
  --k-ass:          34cqw;   /* Ass, grosses Zeichen     ~65 px */
  --k-bild:         20cqw;   /* B, D, K                  ~38 px */
  --k-bild-farbe:   11cqw;   /* Farbe unter B, D, K      ~21 px */
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  background-color: var(--korpus);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 26px);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 3px);
}

/* =====================================================================
   Das Tor
   ===================================================================== */
body.tor {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.torform {
  display: flex;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--kante);
  border-radius: 5px;
  background-image:
    radial-gradient(circle at 9px 9px, var(--kante2) 1.7px, transparent 2.3px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--kante2) 1.7px, transparent 2.3px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--kante2) 1.7px, transparent 2.3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--kante2) 1.7px, transparent 2.3px),
    linear-gradient(var(--platte), var(--platte2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 14px 40px rgba(0, 0, 0, .55);
}

.torform input {
  width: 240px;
  padding: 12px 14px;
  border: 1px solid #15120f;
  border-radius: 3px;
  background: #15120f;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .22em;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7);
}
.torform input:focus {
  outline: none;
  border-color: var(--bernstein);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(232, 163, 61, .45),
    0 0 14px rgba(232, 163, 61, .25);
}
.torform input.falsch {
  border-color: var(--rotlicht);
  color: #ffb3a8;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7), 0 0 14px rgba(224, 102, 90, .3);
}
.torform input:disabled { color: var(--leise); }

.torform button { padding: 12px 18px; font-size: 16px; line-height: 1; }

.torhinweis {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--matt);
}

/* =====================================================================
   Beschriftungen
   ===================================================================== */
h1 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bernstein);
}

h2 {
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--kante);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--bernstein);
}

/* =====================================================================
   Schalter und Auswahlfelder
   ===================================================================== */
button {
  border: 1px solid var(--kante2);
  border-radius: 3px;
  padding: 10px 16px;
  background: linear-gradient(#36302a, #272320);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 0 #14110f;
}
button:hover {
  background: linear-gradient(#40392f, #2d2824);
  color: var(--bernstein2);
  border-color: #5a5146;
}
button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}
button:disabled {
  background: linear-gradient(#2a2724, #232120);
  color: var(--leise);
  border-color: #332e29;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  transform: none;
  cursor: default;
}

#btnSenden:not(:disabled), #btnAnnehmen, #btnChat:not(:disabled), #btnSpielJa,
.ueberlagerung .karte button[type=submit] {
  background: linear-gradient(#e8a33d, #c6821f);
  border-color: #8f5c12;
  color: #1c1510;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #6d4710,
              0 0 16px rgba(232, 163, 61, .22);
}
#btnSenden:not(:disabled):hover, #btnAnnehmen:hover, #btnChat:not(:disabled):hover, #btnSpielJa:hover,
.ueberlagerung .karte button[type=submit]:hover {
  background: linear-gradient(#ffba55, #d08f26);
  color: #1c1510;
}

button.gh {
  background: transparent;
  color: var(--matt);
  border-color: var(--kante);
  box-shadow: none;
}
button.gh:hover { background: #2d2824; color: var(--text); }
button.gh:disabled { background: transparent; }

button.link {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: var(--bernstein);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
}
button.link:hover { background: none; color: var(--bernstein2); }

#btnLeeren { margin-top: 8px; font-size: 10.5px; color: var(--matt); }
#btnLeeren:hover { color: var(--rotlicht); }

.weit { width: 100%; margin-top: 16px; }

select {
  padding: 6px 8px;
  border: 1px solid var(--kante2);
  border-radius: 3px;
  background: #15120f;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 11.5px;
}
select:focus { outline: none; border-color: var(--bernstein); }

input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: var(--bernstein);
  cursor: pointer;
}

/* =====================================================================
   Meldungen
   ===================================================================== */
.m {
  padding: 11px 13px;
  border-radius: 3px;
  border-left: 3px solid var(--kante2);
  background: #221f1c;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.m.ok     { border-left-color: var(--phosphor); }
.m.warn   { border-left-color: var(--bernstein); }
.m.fehler { border-left-color: var(--rotlicht); color: #f0cfc9; }
.m.platz  { margin: 0 0 16px; }

.einladung {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.einladung span { flex: 1; min-width: 200px; }

.hinweis {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--matt);
}
.hinweis.oben { margin-top: 0; margin-bottom: 18px; }
.hinweis b { color: var(--text); font-weight: 600; }

/* =====================================================================
   Platten
   ===================================================================== */
.karte, .spalte, #fortschritt {
  border: 1px solid var(--kante);
  border-radius: 4px;
  background: linear-gradient(var(--platte), var(--platte2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 20px rgba(0, 0, 0, .35);
}

.karte { width: 100%; max-width: 470px; padding: 26px; }
.spalte { padding: 18px; }

.sp { flex: 1; }

/* ------------------------------------------------------- Kopfblende */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid #0f0d0b;
  background: linear-gradient(#302a25, #211e1b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 3px 12px rgba(0, 0, 0, .45);
}
header b {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bernstein);
}
header b::after {
  content: " / MOD-45Z";
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--leise);
}
header a {
  color: var(--matt);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
header a:hover { color: var(--bernstein2); border-bottom-color: var(--bernstein); }
header .ich {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--text);
}

#status {
  padding: 5px 11px;
  border: 1px solid #0f0d0b;
  border-radius: 2px;
  background: #121009;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 9px rgba(255, 199, 119, .55);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8);
}
#status.gut      { color: #9ff0a9; text-shadow: 0 0 9px rgba(127, 217, 138, .5); }
#status.schlecht { color: #ff9c8e; text-shadow: 0 0 9px rgba(224, 102, 90, .5); }

/* =====================================================================
   Buehne: links Spiele, rechts alles andere
   ===================================================================== */
.buehne {
  max-width: 1020px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.rechts > * { margin: 0 0 18px; width: 100%; max-width: none; }
.rechts > *:last-child { margin-bottom: 0; }

.links > * { margin: 0 0 18px; }
.links:not(:has(> :not([hidden]))) { display: none; }

@media (min-width: 1200px) {
  .buehne:has(.links > :not([hidden])) {
    max-width: 1780px;
    display: grid;
    grid-template-columns: 660px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  .buehne:has(.links > :not([hidden])) .links {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 760px) { main { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Ablage */
.ablage {
  padding: 28px 16px;
  border: 1px dashed var(--kante2);
  border-radius: 3px;
  background: rgba(0, 0, 0, .22);
  text-align: center;
  color: var(--matt);
  transition: border-color .12s, background .12s, color .12s;
}
.ablage.bereit {
  border-color: var(--bernstein);
  background: rgba(232, 163, 61, .09);
  color: var(--bernstein2);
}
.ablage p { margin: 0; font-size: 13px; line-height: 1.8; }

.dateiliste { list-style: none; margin: 16px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.dateiliste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px dotted var(--kante);
  font-family: var(--mono);
  font-size: 12px;
}
.dateiliste .nam { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateiliste .gr { color: var(--bernstein); white-space: nowrap; }
.dateiliste .weg {
  border: 0;
  padding: 0 4px;
  background: none;
  box-shadow: none;
  color: var(--leise);
  font-size: 15px;
  line-height: 1;
}
.dateiliste .weg:hover { background: none; color: var(--rotlicht); }
.dateiliste li.mehr {
  color: var(--leise);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 0;
}

#summe {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--matt);
}

/* --------------------------------------------------------- Gegenstellen */
.online { list-style: none; margin: 0; padding: 0; }
.online li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  padding: 12px 14px;
  border: 1px solid var(--kante);
  border-radius: 3px;
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.online li:hover { border-color: var(--kante2); background: rgba(232, 163, 61, .05); }
.online li.bereit { border-color: var(--bernstein); background: rgba(232, 163, 61, .1); }

.online li.gewaehlt {
  border-color: var(--bernstein);
  background: rgba(232, 163, 61, .1);
  box-shadow: inset 3px 0 0 var(--bernstein);
}

.online li.leer {
  cursor: default;
  border-style: dashed;
  color: var(--leise);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.online li.leer:hover { border-color: var(--kante); background: rgba(0, 0, 0, .18); }

.online .punkt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 7px rgba(127, 217, 138, .85), 0 0 14px rgba(127, 217, 138, .35);
  animation: glimmen 2.4s ease-in-out infinite;
}
@keyframes glimmen {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

.online .nam {
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text);
}
.online .zus {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
}

/* =====================================================================
   Nachrichten
   ===================================================================== */
.verbkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.verbkopf button { padding: 7px 12px; font-size: 10.5px; }

.verbzeile {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--matt);
  padding-left: 16px;
  position: relative;
}
.verbzeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leise);
}
.verbzeile.offen { color: var(--phosphor); }
.verbzeile.offen::before {
  background: var(--phosphor);
  box-shadow: 0 0 7px rgba(127, 217, 138, .8);
}
.verbzeile.ruft::before,
.verbzeile.wartet::before,
.verbzeile.sucht::before {
  background: var(--bernstein);
  box-shadow: 0 0 7px rgba(232, 163, 61, .7);
  animation: glimmen 1.1s ease-in-out infinite;
}
.verbzeile.ruft, .verbzeile.wartet, .verbzeile.sucht { color: var(--bernstein); }
.verbzeile.gestoert, .verbzeile.getrennt { color: var(--rotlicht); }
.verbzeile.gestoert::before, .verbzeile.getrennt::before {
  background: var(--rotlicht);
  box-shadow: 0 0 7px rgba(224, 102, 90, .7);
}

.pruefzahl {
  padding: 4px 10px;
  border: 1px solid #0f0d0b;
  border-radius: 2px;
  background: #121009;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-shadow: 0 0 9px rgba(255, 199, 119, .5);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8);
  cursor: help;
}

.chatliste {
  height: 230px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #15120f;
  border-radius: 3px;
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
}

.chatleer {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
}

.chatzeile {
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--kante2);
}
.chatzeile:last-child { margin-bottom: 0; }
.chatzeile.eigen { border-left-color: var(--bernstein); }

.chatzeile .wer {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 3px;
}
.chatzeile.eigen .wer { color: var(--bernstein); }

.chatzeile .was {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.eingabezeile {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.eingabezeile input[type=text] {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #15120f;
  border-radius: 3px;
  background: #15120f;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 14px;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7);
}
.eingabezeile input[type=text]:focus {
  outline: none;
  border-color: var(--bernstein);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7), 0 0 14px rgba(232, 163, 61, .2);
}
.eingabezeile input[type=text]:disabled { color: var(--leise); background: #17140f; }
.eingabezeile input[type=text]::placeholder { color: var(--leise); }

/* =====================================================================
   Spiele
   ===================================================================== */
.spielkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.spielkopf button { padding: 7px 12px; font-size: 10.5px; }

.botswahl, .regelwahl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--matt);
  cursor: pointer;
}
.regelwahl:hover { color: var(--text); }

.botshinweis {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--bernstein);
}

.spielpunkte {
  padding: 5px 12px;
  border: 1px solid #0f0d0b;
  border-radius: 2px;
  background: #121009;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-shadow: 0 0 9px rgba(255, 199, 119, .5);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8);
  white-space: pre-wrap;
}

.spielrahmen {
  padding: 8px;
  border: 1px solid #15120f;
  border-radius: 3px;
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
}
.spielrahmen canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  border: 1px solid #0f0d0b;
  background: #121009;
}

.spieltext {
  min-height: 1.6em;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--bernstein);
}

/* ------------------------------------------- TetriNet: Vorratsleiste */
.vorratzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.vorratzeile button { padding: 7px 12px; font-size: 10.5px; }

.vorratlabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--matt);
}

.vorrat {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 26px;
}

/* Der vorderste Stein ist der, der benutzt wird - darum hervorgehoben. */
.vstein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #0f0d0b;
  border-radius: 2px;
  background: #15120f;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7);
}
.vstein.vorne {
  background: linear-gradient(#e8a33d, #c6821f);
  border-color: #8f5c12;
  color: #1c1510;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 12px rgba(232, 163, 61, .4);
}
.vleer {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
}

/* ------------------------------------------------------------ Legende */
.legendetitel {
  margin: 18px 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--matt);
}

.legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 6px 22px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--matt);
}
.legende li { display: flex; align-items: center; gap: 9px; }
.legende b { color: var(--text); }
.legende.steuerung { margin-top: 10px; }
.legende.spezialliste { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.lg {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid #0f0d0b;
  border-radius: 3px;
  font-style: normal;
}
.lg-p1   { background: #e8a33d; border-radius: 50%; }
.lg-p2   { background: #7fd98a; border-radius: 50%; }
.lg-p3   { background: #6fb3e8; border-radius: 50%; }
.lg-p4   { background: #e07fc4; border-radius: 50%; }
.lg-ich  { background: #e8a33d; border-radius: 50%; box-shadow: 0 0 0 2px #121009, 0 0 0 3.5px #fff0c0; }
.lg-bombe { background: #15120f; border-radius: 50%; border-color: #3b352f;
            box-shadow: 0 0 6px rgba(232, 163, 61, .6); }
.lg-flamme { background: #ffb347; box-shadow: inset 0 0 0 4px #ffb347, inset 0 0 0 7px #fff0c0; }
.lg-wand  { background: #5b554c; box-shadow: inset 2px 2px 0 #6f685e, inset -2px -2px 0 #3f3a33; }
.lg-block { background: #8a6336; box-shadow: inset 0 -1px 0 #6b4b26, inset 0 8px 0 -7px #6b4b26; }
.lg-tot   { background: #55504a; border-radius: 50%; position: relative; }
.lg-tot::before, .lg-tot::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 2px;
  background: #e0665a;
  transform: rotate(45deg);
}
.lg-tot::after { transform: rotate(-45deg); }

.lg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #1c1916;
  border-radius: 2px;
}
.lg-ib { background: #e8a33d; }
.lg-if { background: #e0665a; }
.lg-it { background: #7fd98a; }

/* Spezialstein-Plaettchen: wie im Spielfeld gezeichnet */
.lg-sp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #15120f;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 2px;
}

kbd {
  display: inline-block;
  min-width: 22px;
  margin: 0 1px;
  padding: 2px 6px;
  border: 1px solid var(--kante2);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: linear-gradient(#36302a, #272320);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
  line-height: 1.3;
}

/* =====================================================================
   Eleven - Spielkarten
   ---------------------------------------------------------------------
   Aufbau einer Karte: Eckzeichen oben links, Bild in der Mitte,
   Eckzeichen unten rechts auf dem Kopf. Das Bild ist ein Raster aus
   3 Spalten und 7 Reihen; die Augen sitzen auf den ueberlieferten
   Plaetzen (siehe AUGEN in eleven.js).

   Alle Schriftgroessen stehen als --k-* ganz oben bei den Farben.
   Dort und nur dort nachjustieren.

   Die Karte hat eine Hoechstbreite. Ohne sie waere sie in der breiten
   Spiele-Spalte fast doppelt so gross wie in der schmalen, und
   dieselbe Angabe wirkte voellig anders.
   ===================================================================== */
.ekarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, var(--karte-breite)));
  justify-content: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #15120f;
  border-radius: 3px;
  background-color: #20402a;
  /* Filz: feines Gewebe statt glatter Flaeche */
  background-image:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .06), transparent 70%);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6);
}

.ekarte {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 5 / 7;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 5px 6px;
  border: 1px solid #b9b0a0;
  border-radius: 8px;
  background: #fcfaf4;
  color: #17140f;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 2px 0 #9a9182,
    0 5px 12px rgba(0, 0, 0, .45);
  transition: transform .08s, box-shadow .08s;
}
.ekarte:hover {
  background: #ffffff;
  color: #17140f;
  border-color: #b9b0a0;
  transform: translateY(-2px);
}
.ekarte.rot, .ekarte.rot:hover { color: #c3362a; }

/* ---- Eckzeichen: Wert, darunter die Farbe ---- */
.ekarte .ecke {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: start;
  line-height: .85;
}
.ekarte .ecke b { font-size: var(--k-ecke-wert); font-weight: 700; }
.ekarte .ecke i { font-style: normal; font-size: var(--k-ecke-farbe); }
.ekarte .ecke.unten { justify-self: end; transform: rotate(180deg); }

/* ---- Mitte: Augenraster ---- */
.ekarte .emitte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(7, 1fr);
  place-items: center;
  padding: 0 2px;
}
.ekarte .auge {
  font-style: normal;
  font-size: var(--k-auge);
  line-height: .78;
}
.auge.s1 { grid-column: 1; }
.auge.s2 { grid-column: 2; }
.auge.s3 { grid-column: 3; }
.auge.r1 { grid-row: 1; }
.auge.r2 { grid-row: 2; }
.auge.r3 { grid-row: 3; }
.auge.r4 { grid-row: 4; }
.auge.r5 { grid-row: 5; }
.auge.r6 { grid-row: 6; }
.auge.r7 { grid-row: 7; }
.auge.gedreht { transform: rotate(180deg); }

/* ---- Ass: ein grosses Zeichen ---- */
.ekarte .emitte.ass {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.ekarte .emitte.ass i { font-style: normal; font-size: var(--k-ass); }

/* ---- Bube, Dame, Koenig: Buchstabe im Rahmen ---- */
.ekarte .emitte.bild {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 3px;
  margin: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background-image: repeating-linear-gradient(45deg,
    rgba(0, 0, 0, .05) 0 3px, transparent 3px 7px);
}
.ekarte .emitte.bild b { font-size: var(--k-bild); font-weight: 700; }
.ekarte .emitte.bild i { font-style: normal; font-size: var(--k-bild-farbe); }

/* ---- Zustaende ---- */
.ekarte.gewaehlt {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 0 0 3px var(--bernstein),
    0 8px 0 #9a9182,
    0 12px 16px rgba(0, 0, 0, .5);
}
.ekarte.tipp {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 0 0 3px var(--phosphor),
    0 2px 0 #9a9182,
    0 5px 12px rgba(0, 0, 0, .45);
}

.ekarte.leer, .ekarte.leer:hover {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .16);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* =====================================================================
   Aussteuerung (Uebertragung)
   ===================================================================== */
#fortschritt { padding: 18px; }

.balkenzeile {
  position: relative;
  margin: 30px 0 12px;
}

#balken {
  height: 14px;
  margin: 0;
  padding: 2px;
  border: 1px solid #0f0d0b;
  border-radius: 2px;
  background: #121009;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8);
  overflow: hidden;
}
#balkenInnen {
  height: 100%;
  width: 0;
  background-image: repeating-linear-gradient(90deg,
    var(--bernstein) 0 6px, rgba(0, 0, 0, .55) 6px 9px);
  box-shadow: 0 0 10px rgba(232, 163, 61, .45);
  transition: width .15s linear;
}

.balkenzeit {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  transform: translateX(-100%);
  padding: 3px 7px;
  border: 1px solid #0f0d0b;
  border-radius: 2px;
  background: #121009;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  white-space: nowrap;
  text-shadow: 0 0 9px rgba(255, 199, 119, .5);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8);
  transition: left .15s linear;
  pointer-events: none;
}
.balkenzeit::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  border: 4px solid transparent;
  border-top-color: var(--bernstein);
  border-right-width: 0;
}
.balkenzeit.rechts { transform: none; }
.balkenzeit.rechts::after { right: auto; left: 0; border-right-width: 4px; border-left-width: 0; }

#fortschrittText {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--bernstein);
  line-height: 1.7;
}

.fortliste { margin: 0 0 14px; max-height: 240px; }
.fortliste li { color: var(--matt); }
.fortliste li.aktiv { color: var(--bernstein2); }
.fortliste li.aktiv .nam::before { content: "▶ "; color: var(--phosphor); }
.fortliste .tempo {
  color: var(--phosphor);
  white-space: nowrap;
  min-width: 10ch;
  text-align: right;
}

/* ---------------------------------------------------------- Fenster */
.ueberlagerung {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 9, 8, .72);
}
.knoepfe { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.knoepfe button { flex: 1; min-width: 150px; }

.ueberlagerung .karte label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--matt);
}
.ueberlagerung .karte input[type=text] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #15120f;
  border-radius: 3px;
  background: #15120f;
  color: var(--bernstein2);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .08em;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7);
}
.ueberlagerung .karte input[type=text]:focus {
  outline: none;
  border-color: var(--bernstein);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .7), 0 0 14px rgba(232, 163, 61, .22);
}

@media (prefers-reduced-motion: reduce) {
  .online .punkt, .verbzeile::before { animation: none; }
  #balkenInnen, .balkenzeit, .ekarte { transition: none; }
}