/* ══════════════ 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; }

/* ── 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 ═════════════════ */

/* Wortleger: eigener Akzent. Alles darüber ist der gemeinsame Block. */
:root {
  --akzent: #ffb02e;
  --akzent2: #52ffa8;
  --dim: var(--muted);
  --radius: var(--r);

  /* Die Steine sind das einzige Helle auf dieser Seite – sie sollen aussehen
     wie etwas, das man in die Hand nimmt. */
  --stein: #f6e7c6;
  --stein-rand: #c9b48c;
  --stein-tinte: #2a1c07;

  /* Bonusfelder. Buchstabenboni kühl, Wortboni warm – damit man beim
     Überfliegen sofort weiß, welche Art Feld man da vor sich hat. */
  --dl: #1d4f6b;
  --tl: #17708f;
  --dw: #6d2a55;
  --tw: #8f2f2f;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1100px 700px at 12% -10%, #241634 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 110%, #10233a 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Doppeltippen auf ein Feld darf nicht zoomen – auf 13 Spalten trifft man
   sonst nach dem ersten Zoom gar nichts mehr. */
body { touch-action: manipulation; }

/* --- Bildschirme ---------------------------------------------------------- */

.screen {
  position: fixed;
  inset: 0;
  display: none;
  overflow-y: auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: block; }

.hintline { color: var(--dim); font-size: .85rem; text-align: center; margin-top: 10px; text-wrap: pretty; }

#status, #toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: #000c;
  border: 1px solid var(--line);
  font-size: .82rem;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
#status { top: calc(8px + env(safe-area-inset-top)); }
/* Der Hinweis beim Legen ist die haeufigste Meldung dieses Spiels („steht
   nicht in der Wortliste") und darf laenger sein als eine Zeile. */
#toast {
  bottom: calc(18px + env(safe-area-inset-bottom));
  max-width: min(92vw, 460px);
  text-align: center;
}
#status.show, #toast.show { opacity: 1; }

.home, .lobby, .final {
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100dvh;
  justify-content: center;
}

.field-label { font-size: .8rem; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }

.lobby-head h2 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lobby-head span { color: var(--ink); }

#hostControls, #guestControls { display: flex; flex-direction: column; gap: 10px; }
#hostControls[hidden], #guestControls[hidden] { display: none; }

.setting { flex-direction: column; align-items: stretch; gap: 6px; }
.setting-label { text-align: left; }

.seat.bunt .av { background: rgba(255, 176, 46, .16); }

/* --- Spielbildschirm ------------------------------------------------------ */

.game {
  flex-direction: column;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 8px 8px 12px;
  gap: 8px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px;
}
.tb-runde { color: var(--muted); font-size: 13px; }
.tb-runde strong { color: var(--ink); font-size: 16px; }
.tb-beutel {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tb-beutel b { color: var(--ink); }

#uhr {
  min-width: 52px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
#uhr.knapp { border-color: var(--bad); color: var(--bad); }
#uhr:empty { display: none; }

/* Wer dran ist – die wichtigste Zeile auf dem Schirm. */
#dran {
  padding: 7px 12px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 14px;
  text-align: center;
}
#dran.ich {
  border-color: var(--akzent);
  background: rgba(255, 176, 46, .12);
  color: var(--ink);
  font-weight: 700;
}

#letzter {
  min-height: 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
#letzter b { color: var(--akzent2); }

/* --- Das Brett ------------------------------------------------------------ */

#brett {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 2px;
  /* Auf dem Handy begrenzt die Breite, auf dem Rechner die Höhe. Die 56vh
     sind gemessen und nicht geschätzt: darüber schiebt das Brett auf einem
     1000×680-Fenster die Punkteleiste unter den Rand. */
  width: min(100%, 56vh);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(10, 6, 18, .55);
  box-shadow: var(--shadow);
  user-select: none;
}

.feld {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: rgba(255, 255, 255, .045);
  /* An der Brettbreite gemessen, nicht am Bildschirm: so bleibt der Buchstabe
     lesbar, egal ob das Brett 340 oder 620 Pixel breit ist. */
  font-size: 4.1cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}
.feld.dl { background: var(--dl); }
.feld.tl { background: var(--tl); }
.feld.dw { background: var(--dw); }
.feld.tw { background: var(--tw); }
/* Die Bonuszahl ist Nebensache neben dem Buchstaben – aber unter 9 px auf
   einem 390er Bildschirm liest sie niemand mehr. 2,7cqw sind dort 9,8 px, und
   „3W“ passt damit immer noch in ein 26-px-Feld. */
.feld.bonus { color: rgba(255, 255, 255, .72); font-size: 2.7cqw; font-weight: 800; }

.feld.stern {
  background: var(--dw);
  color: var(--gold);
  font-size: 5cqw;
}
/* Solange nichts liegt, zeigt der Stern, wo es losgeht. */
#brett.leer .feld.stern { animation: pochen 1.8s ease-in-out infinite; }
@keyframes pochen {
  50% { box-shadow: 0 0 0 2px var(--gold) inset; }
}

.feld.stein {
  background: var(--stein);
  color: var(--stein-tinte);
  font-size: 4.6cqw;
  box-shadow: inset 0 -1px 0 var(--stein-rand);
}
.feld.stein .wert {
  position: absolute;
  right: 3%;
  bottom: 2%;
  font-size: 2.3cqw;
  font-weight: 600;
  opacity: .75;
}
/* Ein Joker trägt seinen Buchstaben, aber keinen Wert – und sieht anders aus,
   damit man beim Rechnen nicht danebengreift. */
.feld.stein.joker {
  background: #efe0ff;
  color: #3d1d63;
  box-shadow: inset 0 -1px 0 #bda3dd;
}

/* Gerade hingelegt, noch nicht abgeschickt. */
.feld.neu {
  box-shadow: 0 0 0 2px var(--akzent), inset 0 -1px 0 var(--stein-rand);
  cursor: pointer;
}
/* Das zuletzt gelegte Wort der anderen – sonst sucht man es jedes Mal. */
.feld.frisch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--akzent2);
  opacity: .85;
}

#brett.dran .feld:not(.stein) { cursor: pointer; }
#brett.dran .feld:not(.stein):active { background: rgba(255, 176, 46, .3); }

/* --- Das Regal ------------------------------------------------------------ */

.regalzeile {
  display: flex;
  justify-content: center;
  gap: 5px;
  min-height: 50px;
  padding: 6px 4px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line);
}

.rstein {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(34px, 11.5vw, 48px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 5px;
  background: var(--stein);
  color: var(--stein-tinte);
  font: 700 clamp(17px, 5.4vw, 23px)/1 inherit;
  box-shadow: inset 0 -2px 0 var(--stein-rand);
  cursor: pointer;
}
.rstein .wert {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 10px;
  font-weight: 600;
  opacity: .75;
}
.rstein.joker { background: #efe0ff; color: #3d1d63; box-shadow: inset 0 -2px 0 #bda3dd; }
.rstein.gewaehlt { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--akzent), inset 0 -2px 0 var(--stein-rand); }
.rstein.markiert { opacity: .45; transform: translateY(4px); }
.rstein:disabled { cursor: default; opacity: .5; }
.regalzeile.leer::before { content: "Regal leer"; color: var(--muted); font-size: 13px; align-self: center; }

/* --- Fuß: Knöpfe und Punkte ----------------------------------------------- */

.aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.aktionen .btn { flex: 1 1 auto; min-width: 84px; padding: 9px 10px; font-size: 14px; }

.punktleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-top: 2px;
}
.pkt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 13px;
}
.pkt.dran { border-color: var(--akzent); background: rgba(255, 176, 46, .14); }
.pkt.weg { opacity: .45; }
.pkt b { font-variant-numeric: tabular-nums; }
.pkt .rest { color: var(--muted); font-size: 11px; }

/* --- Jokerwahl ------------------------------------------------------------ */

#jokerwahl {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 3, 10, .82);
}
#jokerwahl[hidden] { display: none; }
.joker-inner {
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg2);
  box-shadow: var(--shadow);
  text-align: center;
}
.joker-inner h2 { margin: 0 0 4px; font-size: 18px; }
.jokerraster {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 14px 0;
}
.jokerraster button {
  padding: 10px 0;
  border: 0;
  border-radius: 5px;
  background: var(--stein);
  color: var(--stein-tinte);
  font: 700 17px/1 inherit;
  cursor: pointer;
}

/* --- Endstand ------------------------------------------------------------- */

.final-title { margin: 0; text-align: center; font-size: 26px; }
.podium { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.podium li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.podium li:first-child { border-color: var(--gold); background: rgba(255, 212, 71, .12); }
.podium .platz { width: 22px; color: var(--muted); font-weight: 700; }
.podium .nm { flex: 1; font-weight: 700; }
.podium .abzug { color: var(--muted); font-size: 12px; }
.podium .pts { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- Überlagerung: Hilfe --------------------------------------------------- */

#help {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: auto;
  padding: 24px 16px;
  background: rgba(5, 3, 10, .9);
}
#help[hidden] { display: none; }
.help-inner {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg2);
}
.help-inner h2 { margin: 0 0 10px; font-size: 20px; }
.help-inner h3 { margin: 18px 0 6px; font-size: 15px; color: var(--akzent); }
.help-inner ul { margin: 0; padding-left: 20px; }
.help-inner li { margin: 5px 0; }
.help-inner .btn { margin-top: 18px; width: 100%; }

/* Kleine Legende der Bonusfelder – ohne sie rät man, was die Farben sollen. */
.legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.legende li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.legende i {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  display: inline-block;
}
.legende .l-dl { background: var(--dl); }
.legende .l-tl { background: var(--tl); }
.legende .l-dw { background: var(--dw); }
.legende .l-tw { background: var(--tw); }