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

/* Cubes: eigener Akzent. Alles darüber ist der gemeinsame Block. */
:root {
  --akzent: #35e6ff;
  --akzent2: #a06bff;
  --dim: var(--muted);
  --radius: var(--r);
}

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

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(90vw 60vh at 10% -10%, #082c3a 0%, transparent 62%),
    radial-gradient(80vw 50vh at 100% 110%, #2a1050 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  /* Gegen den Doppeltipp-Zoom: hier wird schnell und oft getippt, und iOS
     versteht zwei schnelle Tipps sonst als „heranzoomen". */
  touch-action: manipulation;
}

button, input { font: inherit; color: inherit; }

/* --- 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)); }
#toast { bottom: calc(18px + env(safe-area-inset-bottom)); }
#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; }

/* Der Sitz trägt die Spielerfarbe als Rand. Im Spiel erkennt man seine
   Quadrate nur daran – wer sie hier schon gesehen hat, sucht später nicht. */
.seat.bunt { border-color: color-mix(in srgb, var(--farbe) 55%, var(--line)); }
.seat.bunt .nm { color: var(--farbe); }

/* --- Spielbildschirm ----------------------------------------------------- */
/* Drei Zeilen: Kopf und Fuß nehmen, was sie brauchen, das Raster den Rest.
   min-height:0 ist Pflicht, sonst weigert sich das mittlere Flex-Kind zu
   schrumpfen und die Punkteleiste wandert aus dem Bild. */

.game {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 4px;
}
.tb-runde { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tb-runde strong { color: var(--ink); font-size: 1.05rem; }
.tb-runde small { color: var(--dim); }
.tb-art {
  font-size: 11px; padding: 4px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, .08); color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.tb-uhr {
  margin-left: auto;
  font-weight: 900; font-size: 1.1rem; color: var(--cool);
  font-variant-numeric: tabular-nums;
}
.tb-uhr.knapp { color: var(--hot); }
.tb-uhr[hidden] { display: none; }
#endeBtn { border-color: transparent; color: var(--muted); font-weight: 600; }
#endeBtn:hover { color: var(--ink); }

.art-kurz {
  flex: 0 0 auto;
  padding: 0 16px 8px;
  font-size: .82rem; color: var(--dim); text-wrap: pretty;
}

.buehne {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  /* Macht die Bühne zum Maßstab für das Raster darin (siehe .raster). Ihre
     Größe steht durch den Flex-Aufbau schon fest, also darf sie sich vom
     Inhalt unabhängig machen. */
  container-type: size;
}

/* --- Das Raster ---------------------------------------------------------- */

.raster {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 5), 1fr);
  gap: 8px;
  margin: 0 auto;
  aspect-ratio: 1;
  /* Quadratisch und nie größer als der Platz: bei einem breiten Fenster
     begrenzt die Höhe, bei einem schmalen die Breite.

     Die erste Zeile ist die Notlösung für Browser ohne Container-Anfragen –
     sie schätzt die Höhe der Bühne über den Bildschirm ab. Die zweite misst
     sie wirklich und gewinnt, wo sie verstanden wird. Ohne sie schiebt sich
     das Raster über die Zeile darüber, sobald der Bildschirm flach ist; genau
     das war auf dem ersten Screenshot zu sehen. */
  width: min(100%, 62dvh);
  width: min(100cqw, 100cqh);
}
.raster[hidden] { display: none; }

.zelle {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  overflow: hidden;
  cursor: default;
  /* Kein Übergang auf der leeren Zelle: ein Quadrat, das erscheint, soll
     sofort da sein. Eingeblendet wird nur nach innen (siehe .an). */
}

.zelle.an {
  background: color-mix(in srgb, var(--farbe) 78%, transparent);
  border-color: color-mix(in srgb, var(--farbe) 90%, transparent);
  animation: auftauchen .12s ease-out;
}

/* Fremde Quadrate: sichtbar, aber deutlich zurückgenommen – und ohne Zeiger,
   damit niemand es überhaupt versucht. Verboten wird es im Server. */
.zelle.fremd { opacity: .3; }

/* Die eigenen: voller Kontrast, heller Ring, antippbar. */
.zelle.mein {
  opacity: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

/* Minusfelder sehen aus wie alle anderen. Kein Muster, kein anderer Rahmen,
   keine Warnfarbe.

   Das ist Absicht und war einmal anders: sie hatten eine Schraffur, damit man
   sie auf einen Blick erkennt. Genau das nimmt der Runde ihren Sinn – man soll
   im Eifer danebengreifen. Der einzige Unterschied ist das Vorzeichen in der
   Zahl, und das muss man lesen.

   Die Zahl trägt die Information also allein. Das ist gleichzeitig der Grund,
   warum hier nichts an der Farbe hängt: Vorzeichen und Ziffer sind lesbar,
   egal wie jemand Farben sieht. */

.zelle .zahl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: clamp(15px, 4.4vw, 24px);
  color: #10071c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  font-variant-numeric: tabular-nums;
}

/* Ablaufbalken am unteren Rand. Die Dauer setzt app.js beim Erscheinen; hier
   steht nur, wie er aussieht und wohin er läuft. */
.zelle .balken {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(0, 0, 0, .55);
  transform-origin: left center;
  transform: scaleX(0);
}
@keyframes schrumpf { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes auftauchen { from { transform: scale(.72); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes stups { 50% { transform: scale(.88); } }

.zelle.gedrueckt { animation: stups .13s ease-out; }

/* --- Pause zwischen zwei Runden ------------------------------------------ */

.pause { text-align: center; }
.pause[hidden] { display: none; }
.pause h2 { font-size: 1.4rem; margin-bottom: 14px; }

.stand { list-style: none; display: flex; flex-direction: column; gap: 8px; max-width: 380px; margin: 0 auto; }
.stand-zeile {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .28);
}
.stand-zeile.ich { border-color: color-mix(in srgb, var(--farbe) 70%, transparent); }
.stand-punkt { width: 14px; height: 14px; border-radius: 4px; background: var(--farbe); }
.stand-name { text-align: left; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-runde { font-weight: 900; color: var(--good); font-variant-numeric: tabular-nums; }
.stand-gesamt { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

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

.fussbereich { flex: 0 0 auto; padding: 8px 12px 12px; }
.aktionen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.aktionen:not(:empty) { margin-bottom: 8px; }

.punktleiste {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(0, 0, 0, .3);
  font-size: 13px;
}
.chip.me { border-color: color-mix(in srgb, var(--farbe) 75%, transparent); }
.chip.gone { opacity: .4; }
.chip-punkt { width: 10px; height: 10px; border-radius: 3px; background: var(--farbe); }
.chip-name { max-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-zahl { font-weight: 900; font-variant-numeric: tabular-nums; }

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

.final-title { font-size: 1.6rem; text-align: center; }
.podium { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.podest {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .28);
}
.podest.sieg {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 212, 71, .12);
}
.podest-punkt { width: 16px; height: 16px; border-radius: 5px; background: var(--farbe); }
.podest-name { font-weight: 800; overflow: hidden; }
.podest-name small { display: block; font-weight: 400; font-size: 12px; color: var(--dim); }
.podest-zahl { font-weight: 900; font-size: 1.3rem; text-align: right; font-variant-numeric: tabular-nums; }
.podest-zahl small { display: block; font-size: 11px; font-weight: 400; color: var(--dim); }

/* --- Hilfe --------------------------------------------------------------- */

#help {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 3, 12, .88);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}
#help[hidden] { display: none; }
.help-inner {
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-inner h2 { font-size: 1.2rem; }
.help-inner ul { display: flex; flex-direction: column; gap: 9px; padding-left: 18px; }
.help-inner li { font-size: 14px; color: var(--dim); text-wrap: pretty; }
.help-inner b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  /* Der Ablaufbalken bleibt: er ist keine Zierde, sondern die einzige Anzeige,
     wie lange ein Quadrat noch da ist. Alles andere aus. */
  .zelle.an, .zelle.gedrueckt { animation: none; }
}