/* ══════════════ Gemeinsame Lobby-Basis ══════════════ Anfang ═══════════════
   ERZEUGT – NICHT HIER ÄNDERN. Quelle: /var/www/html/gemeinsam/lobby.css
   Ändern, dann `node werkzeug/verteilen.mjs` – das schreibt diesen Block in
   jedes Spiel. `--pruefen` meldet, wo er abgewichen ist.

   --akzent/--akzent2 setzt jedes Spiel unterhalb des Endmarkers selbst;
   alles davon oberhalb ist in allen Spielen gleich.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0a0612;
  --bg2: #140b23;
  --panel: rgba(30, 18, 52, .72);
  --line: rgba(160, 120, 255, .18);
  --ink: #f2ecff;
  --muted: #9c8fc2;
  --hot: #ff2e88;
  --hot2: #ff8a3d;
  --cool: #35e6ff;
  --gold: #ffd447;
  --good: #52ffa8;
  --bad: #ff4d5e;
  --r: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55);

  /* Voreinstellung, wird je Spiel überschrieben */
  --akzent: var(--hot);
  --akzent2: var(--gold);
}

/* Screens: beide Schaltklassen, damit jedes Spiel seinen bisherigen
   Umschalter behalten kann (.on in Card Chaos, .active in den anderen). */
.screen.on, .screen.active, .view.active { display: flex; }

/* ── Typo ─────────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; flex-wrap: wrap; justify-content: center; }

.logo {
  font-size: clamp(38px, 8vw, 76px); font-weight: 900;
  letter-spacing: -.03em; line-height: .92; text-align: center;
  background: linear-gradient(100deg, #fff 10%, var(--akzent) 45%, var(--akzent2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(255, 46, 136, .35));
}
.logo span {
  display: block;
  background: linear-gradient(100deg, var(--cool), #a06bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo.sm { font-size: 20px; line-height: 1; }
.logo.sm span { display: inline; }
.tag {
  color: var(--muted); margin-top: 10px; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; backdrop-filter: blur(14px); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px; width: 100%;
}
.panel.narrow { max-width: 380px; }
.panel.wide { max-width: 700px; }

/* ── Formulare ────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field span {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted);
}
input, select {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 13px 15px; font-family: inherit; width: 100%;
  /* 16px ist Pflicht: darunter zoomt iOS Safari beim Fokus in das Feld hinein. */
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(255, 46, 136, .18);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink);
  border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; user-select: none;
  transition: transform .12s, filter .15s, background .15s;
}
.btn:hover { background: rgba(255, 255, 255, .12); }
.btn:active { transform: scale(.96); }
.btn.big { padding: 16px 26px; font-size: 17px; }
/* .sm und .small sind dasselbe – die vier Spiele hatten je eine der beiden
   Schreibweisen, beide bleiben gültig, damit kein Markup umgeschrieben wird. */
.btn.sm, .btn.small { padding: 8px 12px; font-size: 13px; width: auto; }
.btn.ghost { background: transparent; }
.btn.primary {
  background: linear-gradient(100deg, var(--akzent), var(--akzent2));
  border-color: transparent; color: #180a12;
  box-shadow: 0 6px 22px rgba(255, 46, 136, .3);
}
.btn.primary:hover { filter: brightness(1.12); }
.btn.on { background: linear-gradient(100deg, #1ec98a, var(--good)); color: #04220f; border-color: transparent; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
/* Der Verlassenknopf, nachdem er einmal gedrückt wurde: er fragt vier Sekunden
   lang nach, statt einen Dialog aufzumachen. Nur mitten in der Runde – im
   Warteraum kostet ein Fehlgriff nichts. Siehe `knopfRaus` in `schale.js`. */
.btn.fragt {
  background: var(--bad, #e4396a); border-color: transparent; color: #fff;
  animation: fragtPuls 1s ease-in-out infinite;
}
@keyframes fragtPuls { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .btn.fragt { animation: none; } }

/* ── Trenner „oder beitreten" ─────────────────────────────────────────── */
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Einstellungszeile: Beschriftung links, Schalter rechts ───────────── */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting-label {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
}

/* ── Sichtbarkeit: Öffentlich | Privat ────────────────────────────────── */
.segmented {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 12px;
}
.seg {
  flex: 1; border: 0; background: transparent; color: var(--muted);
  font: 700 14px/1 inherit; font-family: inherit; padding: 10px 8px;
  border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.seg.sel { background: rgba(255, 255, 255, .1); color: var(--ink); }

/* ── Raumcode + Teilen ────────────────────────────────────────────────── */
.codebox {
  text-align: center; background: var(--panel);
  border: 2px dashed var(--line); border-radius: var(--r); padding: 16px;
}
.codebox-label {
  display: block; font-size: 11px; letter-spacing: .18em;
  color: var(--muted); text-transform: uppercase;
}
.codebox strong {
  display: block; font-size: clamp(34px, 11vw, 46px); font-weight: 900;
  letter-spacing: .22em; color: var(--gold); margin: 4px 0 10px;
  /* Der Code wird abgetippt und vorgelesen – Ziffern gleich breit. */
  font-variant-numeric: tabular-nums;
}
.codebox-vis { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.codebox .btn { margin: 0 auto; }

.joinrow { display: flex; gap: 10px; }
.joinrow input { text-align: center; letter-spacing: .3em; font-weight: 800; }
.joinrow .btn { width: auto; flex: 0 0 auto; }

/* ── Offene Räume ─────────────────────────────────────────────────────── */
.rooms-head {
  font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.rooms-head span { color: var(--cool); }
.roomlist { display: flex; flex-direction: column; gap: 8px; }
.rooms-empty {
  font-size: 13px; color: var(--muted); line-height: 1.45;
  padding: 12px 14px; border: 2px dashed var(--line); border-radius: var(--r);
}
.roomrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px;
  cursor: pointer; text-align: left; color: inherit;
  font-family: inherit; font-size: 15px;
  transition: transform .14s, border-color .15s, background .15s;
}
.roomrow:hover { transform: translateY(-2px); border-color: var(--akzent); background: rgba(255, 46, 136, .1); }
.roomrow:active { transform: scale(.98); }
.roomrow-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomrow-meta { font-size: 12px; color: var(--muted); }
.roomrow-code { font-weight: 900; letter-spacing: .12em; color: var(--gold); font-variant-numeric: tabular-nums; }
.roomrow-count { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }

.pill {
  font-size: 11px; padding: 3px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.pill.live { background: rgba(255, 46, 136, .22); color: var(--hot); }
.pill.open { background: rgba(82, 255, 168, .18); color: var(--good); }

/* ── Warteraum: Sitze ─────────────────────────────────────────────────── */
/* 110px, nicht 140: bei 360px Displaybreite bleiben nach Screen- und
   Panel-Polsterung nur ~276px übrig – mit 140px stünden die Sitze
   untereinander und der Warteraum wäre doppelt so hoch. */
.seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.seat {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 12px;
  text-align: center; background: rgba(0, 0, 0, .28);
  transition: border-color .2s, box-shadow .2s;
}
.seat.ready { border-color: var(--good); box-shadow: 0 0 0 3px rgba(82, 255, 168, .12); }
.seat.off { opacity: .45; }
.seat .av { font-size: 30px; }
.seat .nm { font-weight: 800; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .st { font-size: 12px; color: var(--muted); margin-top: 3px; }
.seat.ready .st { color: var(--good); }
.seat .host { font-size: 11px; color: var(--gold); letter-spacing: .1em; }
.seat.empty { border-style: dashed; opacity: .4; }

/* ── Tippen statt Zoomen ─────────────────────────────────────────────────
   `user-scalable=no` im Viewport steht in jedem Spiel – und iOS Safari hält
   sich seit Version 10 nicht mehr daran. Der Doppeltipp-Zoom bleibt damit an,
   und mit ihm die Wartezeit: der Browser hält jeden Tipp erst zurück, um zu
   sehen, ob ein zweiter folgt. Wer schnell hintereinander tippt – und genau
   das tut man in einem Spiel –, dessen zweiter Tipp verschwindet dann im
   Zoomversuch. „Am Handy geht es manchmal nicht, Karten lassen sich nicht
   anklicken" (Bugreport 13).

   `manipulation` schaltet genau diese Gesten ab und lässt Scrollen und
   Aufziehen in Ruhe. */
html, body, button, .btn, .seat, .roomrow, .seg { touch-action: manipulation; }

/* ── Der Weg zurück ──────────────────────────────────────────────────────
   Jeder Bildschirm braucht einen sichtbaren Ausgang: von der Startseite eines
   Spiels zur Übersicht, aus Runde und Endstand aus dem Raum. Vorher hatten nur
   die fünf Spiele ohne Lobby einen solchen Link, und aus dem Spielbildschirm
   führte für alle ausser dem Host gar nichts heraus – Bugreport 10. */
.zurueckzeile { text-align: center; margin-top: 12px; }
.zurueck {
  display: inline-block; padding: 6px 4px;
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.zurueck:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .btn, .roomrow, .seat { transition: none; }
  /* Auch Einblend-Animationen aus: sie starten bei opacity 0, und wer
     Bewegung abgeschaltet hat, soll den Inhalt sofort sehen – nicht erst
     nach der Animation. Nebenbei trifft so auch der Layout-Screenshot
     nicht mehr Frame 0. */
  .screen, .screen.on { animation: none !important; }
}


/* --- Sprachwahl ---------------------------------------------------------- */
/* Der Umschalter wird von sprache.js gefuellt und bleibt ohne JavaScript leer
   – deshalb :empty, sonst stuende dort ein leerer Kasten. Er steht auf dem
   Startbildschirm: gewaehlt wird vor dem Spielen, und die Wahl gilt
   geraeteweit fuer alle Spiele. */
.sprachwahl {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin: 10px auto 0;
  width: fit-content;
  border: 1px solid var(--linie, rgba(255, 255, 255, .14));
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.sprachwahl:empty { display: none; }

.sprachknopf {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--leise, #9c8fc2);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.sprachknopf:hover { color: #fff; }
.sprachknopf.sel { background: rgba(255, 255, 255, .12); color: #fff; }
.sprachknopf:focus-visible { outline: 2px solid var(--akzent, #52ffa8); outline-offset: 2px; }

/* ══════════════ Gemeinsame Lobby-Basis ══════════════ Ende ═════════════════ */
/* ══════════════ Gemeinsamer Rahmen ══════════════ Anfang ═════════════════ */
/* ERZEUGT - NICHT HIER AENDERN. Quelle: /var/www/html/werkzeug/rahmen.css
   Aendern, dann `node werkzeug/verteilen.mjs` - das schreibt den Abschnitt in
   jedes Spiel, das ihn fuehrt. Alles unterhalb des Endmarkers bleibt stehen:
   dort steht das Eigene des Spiels. */

/* ── Rahmen: Grundgeruest fuer alle Bildschirme ───────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: radial-gradient(1200px 800px at 50% -10%, var(--bg2), var(--bg));
  color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.screen { display: none; min-height: 100%; padding: 18px 14px 28px; justify-content: center; }
.home, .lobby, .game, .final {
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.game { max-width: 640px; }
h1, h2, h3 { margin: 0; }
.field-label { color: var(--muted); font-size: 13px; }
.hintline { color: var(--muted); font-size: 13px; text-align: center; margin: 6px 0 0; }
.lobby-head h2 { font-size: 18px; }
.lobby-head span { color: var(--muted); font-weight: 400; font-size: 15px; }

#status {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; text-align: center;
  font-size: 13px; color: var(--bg); background: var(--gold);
}
#status:empty { display: none; }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 16px; opacity: 0; pointer-events: none; transition: .2s; z-index: 60;
  backdrop-filter: blur(8px);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.topbar { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.tb-runde { font-size: 14px; color: var(--muted); }
.tb-runde strong { color: var(--ink); font-size: 18px; }
.tb-modus {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--akzent2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.buehne { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fussbereich { display: flex; flex-direction: column; gap: 8px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.aktionen .btn { flex: 1 1 40%; }

.panelbox {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; box-shadow: var(--shadow);
}

.podium { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.podium li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
}
.podium li:first-child { border-color: var(--gold); }
.pd-name { font-weight: 700; }
.pd-pt { color: var(--muted); }
.final-title { text-align: center; font-size: 26px; }

#help {
  position: fixed; inset: 0; background: rgba(6, 3, 14, .86); z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
}
#help[hidden] { display: none; }
.help-inner {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; max-width: 520px; backdrop-filter: blur(10px);
}
.help-inner li { margin-bottom: 8px; }
.help-inner h2 { margin-bottom: 10px; }
/* ══════════════ Gemeinsamer Rahmen ══════════════ Ende ═══════════════════ */

/* ══════════════ Königsjagd ═══════════════════════════════════════════════
   Eigenes Aussehen. Alles darüber ist gemeinsam und wird von
   `werkzeug/verteilen.mjs` geschrieben – hier unten steht dieses Spiel. */

:root {
  --akzent: #e9c46a;          /* Gold – die Farbe der Königsjagd */
  --akzent2: #a06bff;
  --hell: #6d5a9c;            /* helles Feld */
  --dunkel: #3a2a63;          /* dunkles Feld */
  --weiss: #fff6e6;           /* weisse Figuren */
  --schwarz: #170c2b;         /* schwarze Figuren */
}

/* ── Leiste über dem Brett: Mana hier, Gegner dort ─────────────────────── */
.leiste {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 12px;
}
.mana { display: flex; flex-direction: column; gap: 5px; }
.mana-zahl { font-weight: 800; font-size: 15px; color: var(--akzent); }
.perlen { display: flex; gap: 3px; }
.perle {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid var(--line);
}
.perle.voll { background: var(--cool); border-color: var(--cool); box-shadow: 0 0 6px var(--cool); }
.gegner { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; }
.gegner.off { opacity: .45; }
.gg-name { font-weight: 700; }
.gg-wert { color: var(--muted); font-size: 12px; }

/* ── Das Brett ─────────────────────────────────────────────────────────── */
/* Das Brett ist quadratisch – es waechst also in die Hoehe, sobald es breiter
   wird. Auf einem Handy stuenden Hand und „Zug beenden" dann unter dem Rand,
   und man muesste zum Weiterspielen scrollen. Deshalb ist die Breite an die
   *Hoehe* gebunden: was die uebrigen Zeilen (Leiste, Verlauf, Friedhof, Hand,
   Knopf) brauchen, wird abgezogen, der Rest ist das Brett. */
.brett {
  width: min(100%, calc(100svh - 330px), 520px);
  margin: 0 auto;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
  border: 2px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow); touch-action: manipulation;
}
.fd {
  position: relative; aspect-ratio: 1; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(20px, 6.2vw, 34px); line-height: 1;
}
.fd.hell { background: var(--hell); }
.fd.dunkel { background: var(--dunkel); }
.fd .fig { position: relative; z-index: 2; }
.fd .fig.w { color: var(--weiss); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.fd .fig.s {
  color: var(--schwarz);
  text-shadow: 0 0 1px rgba(255, 255, 255, .95), 0 1px 2px rgba(0, 0, 0, .5);
}
/* Zustände einer Figur – nie mehr als ein Zeichen, das Brett muss lesbar bleiben. */
.fd .fig.frost { filter: drop-shadow(0 0 6px var(--cool)); opacity: .75; }
.fd .fig.schild, .fd .fig.schutz { filter: drop-shadow(0 0 7px var(--good)); }
.fd .fig.dg { filter: drop-shadow(0 0 7px var(--gold)); }
.fd .fig.ph { opacity: .7; filter: drop-shadow(0 0 7px var(--akzent2)); }

.fd .sonder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 60%; opacity: .42; z-index: 1;
}
.fd .mauer { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 80%; z-index: 2; }

.fd.kannziehen::after {
  content: ""; position: absolute; inset: 2px; border-radius: 5px;
  border: 1px solid rgba(233, 196, 106, .35); z-index: 0;
}
.fd.sel { box-shadow: inset 0 0 0 3px var(--akzent); }
.fd.ziel::before {
  content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: rgba(82, 255, 168, .8); z-index: 1;
}
.fd.schlag { box-shadow: inset 0 0 0 3px var(--bad); }
.fd.kartenziel { box-shadow: inset 0 0 0 3px var(--akzent2); }

/* ── Verlauf: Zeichen statt Sätze, deshalb ohne Übersetzung lesbar ─────── */
.verlauf { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.vl {
  font-size: 12px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04); white-space: nowrap;
}
.vl.w { color: var(--weiss); }
.vl.s { color: var(--akzent2); }
.vl-karte { border-color: rgba(160, 107, 255, .5); }
.vl-feld { border-color: rgba(233, 196, 106, .5); }

/* ── Friedhof ──────────────────────────────────────────────────────────── */
.friedhof { display: flex; flex-direction: column; gap: 4px; }
.fr-reihe { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.fr-kopf { font-size: 12px; color: var(--muted); margin-right: 4px; }
.fr-leer { color: var(--muted); font-size: 13px; }
.fr {
  font-size: 19px; line-height: 1; background: none; border: 0; padding: 0 1px;
  color: var(--weiss); opacity: .75;
}
.fr.s { color: var(--schwarz); text-shadow: 0 0 1px rgba(255, 255, 255, .9); }
.fr.kartenziel {
  opacity: 1; border-radius: 5px; box-shadow: 0 0 0 2px var(--akzent2); cursor: pointer;
}

/* ── Karten: Hand und Draft ────────────────────────────────────────────── */
.hand {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.hand-leer { color: var(--muted); font-size: 13px; }
.karte {
  position: relative; flex: 0 0 132px; scroll-snap-align: start;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 2px 7px; text-align: left; cursor: pointer;
  background: linear-gradient(160deg, rgba(160, 107, 255, .18), rgba(30, 18, 52, .9));
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px;
  color: var(--ink); font: inherit;
}
.karte:disabled { opacity: .45; cursor: default; }
.karte.teuer { opacity: .5; }
.karte.aktiv { border-color: var(--akzent2); box-shadow: 0 0 0 2px var(--akzent2); opacity: 1; }
/* Ein heller Kreis hinter dem Zeichen: die Haelfte der Kartensymbole ist von
   sich aus dunkel (Schwerter, Sarg, Vulkan) und ginge auf dem dunklen Feld
   sonst unter. */
.k-emoji {
  font-size: 18px; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: rgba(255, 255, 255, .12);
}
.k-name { font-weight: 700; font-size: 13px; grid-row: 1; align-self: center; padding-right: 26px; }
.k-text { grid-column: 1 / -1; font-size: 11px; line-height: 1.3; color: var(--muted); }
.k-kosten {
  position: absolute; top: 6px; right: 7px;
  font-size: 11px; font-weight: 800; color: var(--bg);
  background: var(--akzent); border-radius: 999px; padding: 1px 6px;
}

.draft-kopf { text-align: center; font-size: 19px; }
.draftreihe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.karte.gross { flex: 1 1 160px; max-width: 190px; align-content: start; }
.karte.gross .k-emoji { font-size: 26px; width: 38px; height: 38px; }
.karte.gross .k-name { font-size: 15px; }
.karte.gross .k-text { font-size: 12px; }
.gewaehlt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.gw-kopf { font-size: 12px; color: var(--muted); }
.gw {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
}
.draftstand { text-align: center; font-size: 13px; color: var(--muted); }

.tb-modus.dran { color: var(--good); border-color: var(--good); }

/* „Zug beenden" ist der Knopf, den man sucht – er bekommt den Platz, den
   „Aufgeben" nicht braucht. Sonst teilen sich beide die Zeile und der
   wichtigere bricht um. */
#aktionen .btn.ghost { flex: 0 0 auto; }

@media (max-width: 380px) {
  .karte { flex-basis: 118px; }
  .k-text { font-size: 10px; }
}

/* ── Am Rechner: Brett links, Karten rechts ─────────────────────────────
   Auf einem Handy steht alles untereinander, und das Brett ist so gross wie
   die Hoehe es zulaesst. Auf einem breiten Bildschirm ist genau das die
   Verschwendung: das Brett bliebe klein, weil es sich an der Hoehe misst,
   und links und rechts stuende nichts. Ab 860 Pixeln Breite wandern Leiste,
   Verlauf, Friedhof und Hand deshalb in eine zweite Spalte – das Brett
   bekommt fast die ganze Hoehe. */
@media (min-width: 860px) {
  .game { max-width: 980px; }
  .buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    column-gap: 18px;
  }
  .brett {
    grid-column: 1; grid-row: 1 / -1;
    width: min(100%, calc(100svh - 190px), 640px);
  }
  .leiste, .verlauf, .friedhof, .hand { grid-column: 2; }
  .hand { flex-wrap: wrap; overflow: visible; }
  .karte { flex: 0 0 148px; }
  .draftreihe { grid-column: 1 / -1; }
  .draft-kopf, .gewaehlt, .draftstand { grid-column: 1 / -1; }
}